Author: | luisalvesmartins |
---|---|
Views Total: | 8,365 views |
Official Page: | Go to website |
Last Update: | March 13, 2021 |
License: | MIT |
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
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!
How can I make the outer line of the Rectangle?