Simple SVG flow chart library based on jQuery and jQueryUI
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
example added import action in example Sep 7, 2015
flowchart.js added import action and method comments Sep 7, 2015
flowchart.min.js Create flowchart.min.js Sep 7, 2015
package.json Create package.json Nov 3, 2016

SimpleFlowchart - Simple flow chart library


This is a small JavaScript library with single purpose - draw some nodes and connect them with lines. You can use this library to create your own flow charts or create other similar graphics. Nodes and connection lines can be styled with CSS. Node content can be whatever you want - simple div, image or SVG.

The library is depends on jQuery and jQuery UI (drag and drop and effects).

Current library version is actually just a result of playing around with SVG. The code base must be improved and refactored. In nearest future I want to move from DOM-based data storage and rewrite the code in TypeScript.

How to use

The code is really small. Do not hesitate to check the source code to explore the actions. Feel free to extend and adjust the code to your needs.

Check out the example chart here.

Currently, you can add and delete nodes and connect them with lines (connections).

Default actions include:

  • Drag nodes around (lines are adjusted automatically)
  • Drop node on other node to connect them

You can configure your own node actions. Current example shows additional functionality:

  • Add child node by clicking on the node.
  • Delete node by making right mouse click on it (context menu).

Actual example also works on touch devices thanks to wonderful Touch Punch.


If you have any questions, please feel free to ask on the [Michail Mazo] ( or email: