Collection of free jQuery flowchart code examples from Codepen and GitHub.

Demo image: Arg-Graph

Author

  • Naser

Made with

  • HTML / CSS / JS

About a code

Arg-Graph

Arg-Graph is a simple free library for creating dynamic Directed Graph using jQuery which enables you to draw SVG based connectors (lines, arrows) between DOM nodes via drag and drop.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: arg-graph.js

Demo image: Simple Flow

Author

  • Tom Symonds

Made with

  • HTML / CSS / JS

About a code

Simple Flow

A jQuery plugin that connects different Bootstrap columns to create a simple flow.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, simple-flow.css, simple-flow.js

Demo image: Mermaid

Author

  • ABC

Made with

  • HTML / CSS / JS

About a code

Mermaid

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: mermaid.js

Demo image: workflowChart.js

Author

  • limuxy

Made with

  • HTML / CSS / JS

About a code

workflowChart.js

A simple jQuery plugin to generate workflow chart.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: workflowchart.js, svg.js

Demo image: jquery.flowchart

Author

  • S├ębastien Drouyer

Made with

  • HTML / CSS / JS

About a code

jquery.flowchart

JQuery plugin that allows you to draw a flow chart.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.flowchart.js

Demo image: SimpleFlowchart

Author

  • M.Mazo

Made with

  • HTML / CSS / JS

About a code

SimpleFlowchart

Simple SVG flow chart library based on jQuery and jQueryUI.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: flowchart.js