Create Interactive Flowchart With JavaScript And Canvas – diagramflowjs

Category: Chart & Graph , Javascript | July 27, 2019
Author: luisalvesmartins
Views Total: 83
Official Page: Go to website
Last Update: July 27, 2019
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,"Link text"));

Initialize the library and draw the flowchart.

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

Changelog:

07/27/2019

  • Added Connectors

You Might Be Interested In:


Leave a Reply