flowjs

KO | EN

gitlite — search

#hacktoberfest #react #ai #rust #deep-learning #linux #macos #nodejs #awesome #cli #kubernetes #vue #mcp #openai

(★ 62)

FlowJS allows you to render dynamic, animated flow charts using HTML5 canvas

flowjs Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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](http://createjs.com).  
**No more complex graphs and endles zooming.**
Any contribution or suggestion will be welcomed

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

# Usage
![flow chart example](https://github.com/bitterbit/flowjs/blob/master/flowchartimg.png)

``` html
<script type="text/javascript" src="lib/createjs-2015.05.21.min.js"></script>
<script type="text/javascript" src="flow.min.js"></script>
```
``` html
<canvas id="canvasID" width="500" height="300"></canvas>
```

``` javascript
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

![flow chart loading example](https://github.com/bitterbit/flowjs/blob/master/flowchartloading.gif)

``` javascript
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](https://github.com/bitterbit/flowjs/blob/master/LICENSE.md)

flowjs

flowjs Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

flowjs

flowjs Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README