Create Interactive Flowchart With JavaScript And Canvas – diagramflowjs

Preview:

Description:

diagramflowjs is a JavaScript library to draw an interactive, editable flowchart representing workflows, decisions, complex process, and much more.

The main goal of the library is to draw interactive lines between graphical nodes with resize & drag’n’drop support.

How to use it:

To get started, include 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 own 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,"straight line","straight"));
model.addLink(new model.link(3,4,1,1,"dblclick me to edit","square"));
model.addLink(new model.link(4,2,0,0,"square line","square"));

Initialize the library and draw the flowchart.

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

It also works with rough figures based on rough.js.

model.rough=true;

Changelog:

03/13/2021

• Added “square” mode for links

02/10/2021

• Added rough option

07/27/2019

• Added Connectors