SimpleFlowchart - Simple flow chart library
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.