Ready
js-flow is ready to go in minutes. Just copy a few lines of code and get a flow up and running quickly. Sample data files let you see how js-flow works with some basic JavaScript methods.
Set
Once you get the samples going, you can view the flows with your own data, and see how to update flows in real time. By setting a few JavaScript variables and paramters, you can see how it works, with a built in editor.
Flow!
Now you're ready to start solving real world problems with js-flow. Get a demo up and running quickly and add dynamic interactivity to it via code. Hook into events to make your flows more interactive.
Imagine
From the start, we wanted JS-Flow to be an easy to use tool for flowcharts, org charts or any other node based diagrams. It's simple to use, and easy to go from an idea to a functioning UX quickly and easily. Simply draw out what kind of shapes you need and how they are connected and you're set to start building.
Build
Since JS-Flow is controlled by simple JavaScript, it's easy to create real-time, high fidelity diagrams that can update in real time. This opens up the door for some cool dashboards that update automatically. All this power must come at the cost of complex, hard to implement code? Nope. It's easy to design a complex flow on-screen and then convert that flow to a data driven, living diagram.
Customize
As part of building js-flow, we've come up with a simple editor to help visually build a basic node layout and connecting lines. By adding .css code, custom callback handlers and other code-based elements, you can realize the full potential of js-flow layouts and dynamic updates. Plus it's all based on web standards such as HTML5, CSS3, JavaScript, etc. By simply updating a simple JavaScript array and updating the canvas, you can create some great things. No node, npm, React or other complex frameworks required.
