Dynamic Flow Chart Library with CreateJS – flowjs

Preview:

Description:

flowjs is a JavaScript library built with CreateJS that allows you to render dynamic, animated flow charts using html5 canvas API.

How to use it:

Load CreateJS JavaScript library and other required resources in the html page.

<script src="lib/createjs-2015.05.21.min.js"></script>
<script src="src/flow.js"></script>
<script src="src/flowitem.js"></script>
<script src="src/flowconnector.js"></script>

Create an HTML5 canvas element on the html page.

<canvas id="demo" width="500" height="300"></canvas>

Create your own data for the flow chart.

var a = [ 
    [{id: "The Collector C", next: ["Groot"]}],
    [{id: "Groot", next: ["Peter Quill"]}],
    [{id: "Peter Quill", next: ["Drax"]}],
    [{id: "Drax", next: undefined}]
];

Draw a basic flow chart on the canvas element.

new flowjs("demo", a).draw();