A JavaScript Library To Create FlowCharts Interactively | diagramflowjs

diagramflowjs is a JavaScript library for drawing an editable interactive flowchart that represents complex workflows, decisions, processes, and more.

The main goal of the library is to draw interactive lines between graphical nodes with support for resizing and dragging.

How to make use of it:

To get began, embody the diagramflow.js script on the webpage.

<script src="diagramflow.js"></script>

Create an HTML canvas element on which you’d like to draw the flowchart.

<canvas id="myCanvas"></canvas>

Create your individual figures as follows:

var Figures={
    Rectangle:function(ctx,node){
        ctx.beginPath();
        ctx.fillStyle=node.fillStyle;
        ctx.strokeStyle="blue";
        ctx.fillRect(node.x, node.y, node.w, node.h);
        ctx.fillStyle="black";
        ctx.font="10px Verdana";
        ctx.textBaseline="top";
        node.textfill(ctx);
    },
    Circle:function(ctx,node){
        ctx.beginPath();
        ctx.fillStyle=node.fillStyle;
        ctx.ellipse(node.x+node.w/2,node.y+node.h/2, node.w/2, node.h/2, 0, 0, 2 * Math.PI);
        ctx.fill();
        node.textfill(ctx);
    },
    Diamond:function(ctx,node){
        ctx.beginPath();
        ctx.fillStyle=node.fillStyle;
        ctx.moveTo(node.x,node.y+node.h/2);
        ctx.lineTo(node.x+node.w/2,node.y);
        ctx.lineTo(node.x+node.w,node.y+node.h/2);
        ctx.lineTo(node.x+node.w/2,node.y+node.h);
        ctx.fill();
        node.textfill(ctx);
    }
}

Add connectors as follows:

var optionsInput = {
    dropAllowed:true, 
    dragAllowed:false, 
    radius:7
};

var optionsOutput = {
    dropAllowed:false, 
    dragAllowed:true, 
    radius:7
};

var connectors=[
    new model.connector(0,.25,"input","input1",connectorDecoration1,optionsInput),
    new model.connector(1,.3,"output","output1",connectorDecoration,optionsOutput),
    new model.connector(1,.6,"mixed","mixed connector",connectorDecoration),
];

Add nodes & links.

model.addNode(new model.node(150,10,100,100,connectors,"A Square, dblclick me to edit the text","green","Rectangle"));
model.addNode(new model.node(30,140,100,100,null,"A Circle, click on the center handle to move","white", "Circle"));
model.addLink(new model.link(0,3,1,0,"Link text"));

Initialize the library and draw the flowchart.

model.init("myCanvas");
model.draw();

It additionally works with rough figures primarily based on rough.js.

model.rough=true;

Create Interactive Flowchart, diagramflow js Plugin/Github


See Demo And Download

Official Website(luisalvesmartins): Click Here

This superior jQuery/javascript plugin is developed by luisalvesmartins. For extra Advanced Usage, please go to the official website.

Share