FlowJS

Simple HTML5 flow chart using the canvas element.
FlowJS allows you to render dynamic, animated flow charts using HTML5 canvas with the help of CreateJs.
No more complex graphs and endles zooming. Any contribution or suggestion will be welcomed

Visit https://prufer.surge.sh/ for a live demo! (using flowjs to display prufer trees)

Usage

<script type="text/javascript" src="lib/createjs-2015.05.21.min.js"></script>
<script type="text/javascript" src="flow.min.js"></script>

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

var graph = new flowjs.DiGraph();
graph.addPaths([
    ["Peter Q", "Gamora", "Nova Prime", "Rocket"],
    ["Drax", "Groot", "Rocket"],
    ["Merdith Q", "Groot"]
]);

new flowjs.DiFlowChart("canvasID", graph).draw();

Advanced Usage

Here we show how to update a node after we draw it We simulate an app the loads data about the node in the background and when its ready, updates the displayed chart

var graph = new flowjs.DiGraph();
// ... init the graph
new flowjs.DiFlowChart(graph, "canvasID").draw();


// this function simulates loading a flow chart and coloring parts of it
// we simulate loading using the setTimeout function 
function simuLoad(flowChart, graph){
    // helps walk over all the graphs nodes
    var walker = new flowjs.GraphWalker(graph);
    
    walker.forEach(function(node){
        var start = Math.random() * 1000 * 5;
        var dur = Math.random() * 1000 * 5;
        simulateLoading(node.id, start);
        simulateDoneLoading(node.id, start + dur);
    }, this);
    
    
    // start running an animation on the given iten
    function simulateLoading(itemId, timeout){
        setTimeout(function(){
            flowChart.updateItem(itemId, function(item){
                item.flowItem.toggleFlashing();
            });
        }, timeout);
        
    }
    
    // stop the animation on the item and color it
    function simulateDoneLoading(itemId, timeout){
        setTimeout(function(){
            flowChart.updateItem(itemId, function(item){
                item.flowItem.toggleFlashing();
                item.flowItem.color = "cyan";
                if (item.connectors === undefined){return;}
                item.connectors.forEach(function(conn){
                   conn.color = "cyan"; 
                });
            });
        }, timeout);
    }
}

License

flowjs is available under the MIT License