Create Interactive Flowchart With JavaScript And Canvas – diagramflowjs

Category: Chart & Graph , Javascript | March 13, 2021
Author:luisalvesmartins
Views Total:8,365 views
Official Page:Go to website
Last Update:March 13, 2021
License:MIT

Preview:

Create Interactive Flowchart With JavaScript And Canvas – diagramflowjs

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

You Might Be Interested In:


2 thoughts on “Create Interactive Flowchart With JavaScript And Canvas – diagramflowjs

  1. Stephanie

    Hello, I like this project a lot! But how do I manage that the connecting line does not go through the elements, but around them like in the example image?
    And how can I integrate the connectors in such a way that they appear like on the demo page? So only when the element is selected, how do the anchors become visible?
    I would be very happy to hear from you!

    Reply

Leave a Reply