adrai / flowchart.js

Draws simple SVG flow chart diagrams from textual representation of the diagram

Hi there 👋

• 🔭 I’m helping to maintain the best i18n framework for JavaScript and supporting its awesome community ➡️ i18next 😉
• 🌱 Currently creating tutorials and blog posts for various JavaScript integrations for locize ➡️ https://dev.to/adrai
• 💬 Ask me about i18next or locize
• 📫 How to reach me: @adrirai on Twitter
• 👯 And I also spend my time on various serverless projects, like:
  • aws-lambda-fastify ➡️ Allows you to easily build serverless web applications/services and RESTful APIs using @fastify on top of AWS Lambda and Amazon API Gateway.
  • cloudwatch-logs-shipper ➡️ ships CloudWatch logs to logzio
  • cloudwatch-alarm-to-slack ➡️ notifies CloudWatch alarms to slack
  • and contributing to aws-sdk-js-v3 the official AWS SDK for JavaScript.
• 🕸️ And I also other stuff:
  • flowchart.js ➡️ Draws simple SVG flow chart diagrams from textual representation of the diagram. (https://flowchart.js.org)
  • enum ➡️ A javascript module that introduces the Enum Type. It works for Node.js, in the browser and for Deno.
  • and a lot of other things...

⚡ Fun fact: I quit my full-time job to try to be self-employed. It seems to be working so far... 😊

flowchart.js's Issues

box comment

How to add a comment or a tip beside a flow box?

Change color/text on some lines/arrows

Hi Adrai,
Thanks for creating this awesome tool!

I have some flowcharts where I need to add some text along some of the arrows (like labels along the arrow) and some where I need to display the arrow using a specific/different color. I see in your example that you are able to add text to the arrows going out of a condition box, but did not see any way to add a text for an arrow going out of an operation box, which is what I need to do. Can you please advise how I might be able to add text label to an arrow after operation box and to maybe change its color as well.

Once again, thanks a lot for creating this.
Cheers!

Can a decision has 3 options

It seems just yes/no decision, is it possible a one/two/three decision?

Error: Cannot read property 'key' of null

Trying to get the basic example to work with no luck.
this is what is in the body of my page:

<div id="diagram">Diagram will be placed here</div>
<script>
  var diagram = flowchart.parse('st=>start: Start:>http://www.google.com[blank]\n' +
                                'e=>end:>http://www.google.com');
  diagram.drawSVG('diagram');
</script>

Always get the following error no matter what is inside the parse().

TypeError: Cannot read property 'key' of null
    at getDisplaySymbol (http://localhost:3000/include/plugins/flowchart/1.4.2/flowchart.js:1205:28)
    at constructChart (http://localhost:3000/include/plugins/flowchart/1.4.2/flowchart.js:1236:26)
    at Object.chart.drawSVG (http://localhost:3000/include/plugins/flowchart/1.4.2/flowchart.js:1269:11)

How do I solve this and what is the least I need to create a flowchart?

Flowchart getting disturbed clicking on 'run' button more times

s=>start: Start
e=>end:
condition0=>condition: If
condition1=>condition: If
condition2=>condition: If
condition3=>condition: If

s->condition0
condition0(yes)->e
condition0(no)->condition1
condition1(yes)->e
condition1(no)->condition2
condition2(yes)->e
condition2(no)->condition3
condition3(yes)->e
condition3(no)->e

checked with given example i.e index.html
After clicking more number of times on run on flowchart is getting change ... which is issue !
Please any solution for that..
Thanks in advance ! :)

I'm getting TypeError: Cannot set property 'next' of undefined

on the following input..

st=>start: Create New Multisite Site
e=>end

op1=>operation: Check if URL has activation ID

sub1=>subroutine: Create Activation ID
sub2=>subroutine: Create User
sub3=>subroutine: Create Domain
sub4=>subroutine: Create Subscription
sub5=>subroutine: Assign Referal

cond=>condition: Yes or No?:
cond2=>condition: User Exists?:

io=>inputoutput: Save activation_id in plugin
io2=inputoutput: Get User

st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->cond2
cond2(no)->sub2(right)->io2
cond2(yes)->io2->sub3->sub4->sub5

particularly sticking io2 in the last line breaks things

any idea why?

Colour change inside a flow chart?

Improvement request:
Ability to change the colour of following elements inside the flow.

Use case:
Draw the flow chart for a current instance of a workflow. Have 3 colors:

• Past steps
• current step(s)
• future steps

Uncaught TypeError: Cannot set property 'next' of undefined

hello , when i run the example,show the error 'Uncaught TypeError: Cannot set property 'next' of undefined'.i couldn't find the reason.

Overlapping lines

Is it possible to resolve these overlapping lines... the last set assign referal should goto save activation_id but I'm seeing overlapping lines which is confusing...

https://www.dropbox.com/s/ky7oi5fxqecrkci/Screenshot%202014-08-05%2016.42.47.png

st=>start: Create New Multisite Site
e=>end

op1=>operation: Check if URL has activation ID

sub1=>subroutine: Create Activation ID
sub2=>subroutine: Create User
sub3=>subroutine: Create Domain
sub4=>subroutine: Create Subscription
sub5=>subroutine: Assign Referal

cond=>condition: Yes or No?:
cond2=>condition: User Exists?:

io=>inputoutput: Save activation_id in plugin
io2=inputoutput: Get User

st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->cond2
cond2(no)->sub2(right)->sub3
cond2(yes)->sub3->sub4->sub5->io

XMLNS missing for links

Hello,

I bet it's more a Raphael problem than Flowchart, but the rendered SVG doesn't include the xmlns:xlink to the svg tag.
It should add xmlns:xlink="http://www.w3.org/1999/xlink" to validate.

Is there a parameter to add this to the rendered svg ?

Is there a way to specify the fill for a particular node/vertex?

Is there a way to specify the fill for a particular node/vertex?

I know you can specify the fill option, but is there a way to specify one cell to be filled with a different a colour?

individual line length modification

so i'm pretty happy how this flowchart looks:

(click to see in original size)

but it's really itching me to modify the following:

• first line segment after / 250 Ok. / should be shorter
• first line segment after / 250 Done. / should be longer
• line after < ^DATA > no should be shorter

i naively thought that if we could just inject modification values from the flowchart syntax - cause "fixing" the whole auto layout algorithm probably would never work for every chart -, we then would only need to add this modification value to the line length in code... well, i got the first part done:

diff --git a/release/flowchart-1.3.4.js b/release/flowchart-1.3.4.js
index fe6051a..b76c816 100644
--- a/release/flowchart-1.3.4.js
+++ b/release/flowchart-1.3.4.js
@@ -446,6 +446,7 @@
     this.symbol = symbol;
     this.connectedTo = [];
     this.symbolType = options.symbolType;
+    this.lineLengthMod = options.lineLengthMod;
     this.flowstate = (options.flowstate || 'future');

     this.next_direction = options.next && options['direction_next'] ? options['direction_next'] : undefined;
@@ -1381,14 +1382,17 @@

         chart.symbols[symbol.key] = symbol;

-      } else if (line.indexOf('->') >= 0) {
+      } else if (/-[\{-\d\}]*>/.test(line)) {
         // flow
-        var flowSymbols = line.split('->');
-        for (var i = 0, lenS = flowSymbols.length; i < lenS; i++) {
-          var flowSymb = flowSymbols[i];
+        var flowSymbols = line.split(/-[\{]*([-\d]*)[\}]*>/);
+
+        for (var j = 0, lenS = flowSymbols.length; j < lenS; j+=2) {
+          var i = j/2;
+          var flowSymb = flowSymbols[j];

           var realSymb = getSymbol(flowSymb);
           var next = getNextPath(flowSymb);
+          realSymb.lineLengthMod = parseInt(flowSymbols[j+1], 10) || 0;

           var direction = null;
           if (next.indexOf(',') >= 0) {
@@ -1401,8 +1405,8 @@
             chart.start = realSymb;
           }

-          if (i + 1 < lenS) {
-            var nextSymb = flowSymbols[i + 1];
+          if (j + 2 < lenS) {
+            var nextSymb = flowSymbols[j + 2];
             realSymb[next] = getSymbol(nextSymb);
             realSymb['direction_' + next] = direction;
             direction = null;

that allows to do:

foo->bar-{10}>zap-{-20}>fop

and in (javascript) code we have for the bar object lineLengthMod:10 and for zap object lineLengthMod:-20 attributes.

for the second part i just could not findout where to modify the (first) line (segment) lengths in the spots i wanted to, so i'm giving up for now and hope someone else can figure it out. 😍

ps. source for the image can be found at http://ix.io/edM

lines may pass through operation/subroutine blocks

hi,

I used flowchart in stackedit, I found below input could generate some
lines pass through operation/subroutines, any solution to solve it?

enter=>start: Start
return=>end: End
is_lastpkt=>condition: Is it last packet?
is_fastpath=>condition: Should it enter fastpath？
is_arp=>condition: is it a ARP packet?
prepare_one=>subroutine: prepare to receive it
process_arp=>operation: handle ARP
drop=>operation: drop it!
push_them_to_user=>subroutine: call user callback

enter->is_lastpkt
is_lastpkt(yes)->push_them_to_user->return
is_lastpkt(no,bottom)->is_fastpath
is_fastpath(yes)->prepare_one->is_lastpkt
prepare_one->drop
is_fastpath(no,bottom)->is_arp
is_arp(no,bottom)->drop->is_lastpkt
is_arp(yes)->process_arp->is_lastpkt

Thanks

Yu

Is it possible to depict JUMP/BRANCH statements ?

In the above case no JUMP/BRANCH connection is being made from CONDITION(NO) TO OP3

Multiple Decisions

Hi
Great work here. Any plans to allow users to define their own decisions i.e "hire, fire, put on probation" instead of "yes no"? This would also mean extending from the two choices to multiple.

Hand Theme

It would be better if you could support Hand Theme as in js-sequence-diagrams.

Thanks

Ability to change the direction of arrow lines

Hi sir,

I found your codes helpful for my project.
I hope you can help me with my problem.

Is there a way to change the direction of "operation"? its default is always going down which Im having a problem, I need to turn the arrow line of the "operation" to turn "right"
like the "condition" you can modify it like "cond(yes,right)".

here is my code:

st=>start: Start
e=>end
op1=>operation: 1.0 Open SAP GT
op2=>operation: 2.0 Search Account in GT
op3=>operation: 1.1 Inform immediate superior and let them contact the Resolver Group
op4=>operation: 1.3 Wait for the response
cond1=>condition: Any issues on the system?
sub1=>subroutine: Resolver Group to handle the request

st->op1->cond1
cond1(yes,right)->op3
cond1(no)->op2
op3->sub1->op4->op1

Support for class attribute?

In the configuration json can there be a parameter "class" that would be applied to the SVG elements generated. This could allow further styling (I'm mainly thinking about background images - which CSS should be able to handle). Where would that code get added?

Add ability to specify directionality of condition branches

Is it possible to specify the directionality of individual condition branches such that a "yes" branch may go right in one case but down in another? I'm trying to design my flowchart so that the success path is a straight line down and error conditions exit right. If this isn't currently possible, could the functionality be added? Thanks!

Left facing arrow logic is faulty

When depicting control flowing right or downwards, the diagram renders fine. However, when you attempt to force a leftwards operation, the arrow comes out wonky. Screenshot:

Code:

st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes 
or No?:>http://www.google.com
io=>inputoutput: catch something...

st->op1->cond
cond(yes)->io->e
cond(no,left)->sub1(left)->op1

bad auto adjustment of chart element

Could be my fault, but if i use:

 var diagram = flowchart.parse('st=>start: start:>\n' +
                                'e1=>end: end:>\n' +
                                'e2=>end: end:>\n' +
                                'cond1=>condition: A = 1:>\n' +
                                'cond2=>condition: A = 2:>\n' +
                                'cond3=>condition: B = 1:>\n' +
                                'cond4=>condition: B = 2:>\n' +
                                'io1=>inputoutput: result 1\n' +
                                'io2=>inputoutput: result 2\n' +
                                '' +
                                'st->cond1\n' +
                                'cond1(yes, bottom)->cond3\n' +
                                'cond1(no, right)->cond2\n' +
                                'cond2(yes, bottom)->cond4\n' +                    
                                'cond3(yes, bottom)->io1->e1\n' +
                                'cond3(no, right)->cond4\n' +
                                'cond4(yes, bottom)->io2->e2\n');

  diagram.drawSVG('diagram');

I get

I tried line-length to increase space, but it didn't work. Thanks!

Multiline boxes / line breaks

What are the rules for multiple line or creating line breaks? Or can there be some added?
It seems it can be done because it works in the example but I haven't been able to get it to work elsewhere.

Issues with integrating flowchart.js

I am seeing this error show up in the logs from rapheal.js on rendering the example you guys have. I have included rapheal.js already.

Error: Invalid value for attribute preserveAspectRatio="meet"

Is this something you guys have noticed? Also I am seeing weird behavior where the same content is being rendered differently (non deterministic). See below. I will dig deeper into this issue but if you have any pointers it will be great.

Chart not rendering properly when code loaded via AJAX

I am getting the chart's code via JQuery's get() to load. Unfortunately, the flowchart does not render properly.
The JS code looks like this:

""""
$(document).ready(function() {
var url = "sample.txt";
$.ajax({
url : url,
dataType : "text",
success : function(data) {
var chart = flowchart.parse(data);
chart.drawSVG('canvas');
}
});
});
""""

The sample.txt contents looks like this:

""""
st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Ooooperation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: catch something...

st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1
""""

I can see st and op1 being rendered but the rest is missing.
There are no console errors logged and the parse() function evaluates without any errors.
Do you have any hints what to check?

Thanks.

use SVG.js instead of Raphael

First: congrats on this project!

Raphael is quite long and not intuitive. A better choice would be SVG.js
http://documentup.com/wout/svg.js

I also made an adapter for Raphael->SVG.js for this project and the output is encouraging - not perfect
changes:

<script src="raphaela.js"></script>
<script src="svg.js"></script>
<script src="flowchart.js"></script

and raphaela.js (Raphael adaptor)

var Raphael = function(container, options){
    this.paper = SVG(container)
    this.registerFont = function(font){
    //
    return;
}
}

Raphael.prototype.text = function(x, y, text){
    console.log(x,y)
    var text= this.paper.text(text)
    //text.move(x,-text.height)
    text.getBBox= function(){
        return this.tbox()
    }
    return text
}

Raphael.prototype.rect = function(x, y, width, height, round){
    var rect = this.paper.rect(width, height)//.move(x,y-10)
    if (round) rect.radius(round)
    rect.insertBefore = function(obj){
        this.parent().add(obj)
        this.back()
    }
    rect.getBBox= function(){
        return this.tbox()
    }
    return rect
}

Raphael.prototype.set = function(){
    var gr = this.paper.group()
    gr.getBBox= function(){
        var box = this.tbox()
        return box
    }
    gr.push = function(obj){
        this.add(obj)
    }
    gr.transforma =function(trans){
        trans = trans.substring(1)
        var coords = trans.split(",")
        this.move(parseInt(coords[0]),parseInt(coords[1]))
    }
    return gr
}

Raphael.prototype.path = function(path,pathValues){
    console.log(path)
    console.log(pathValues)
    for (ndx in pathValues){
        var str = "{"+ndx+"}"
        path = path.replace(str,pathValues[ndx])
    }
    console.log(path)
    var rect = this.paper.path(path).fill("none")//.move(0,-10)
    rect.insertBefore = function(obj){
        this.parent().add(obj)
        this.backward()
    }
    rect.getBBox= function(){
        return this.tbox()
    }
    return rect
}

Raphael.prototype.setSize = function(width, height){
    this.paper.size(width,height)
}

Raphael.prototype.setViewBox = function(x, y, w, h, fit){
    this.paper.viewbox(x, y, w, h)  // , fit
}

I would have attached the output, but is too long. please pm me if you are unable to see it from these instructions.

One more thing: "transform" has to be written as "transforma" in flowchart.js because it interferes with SVG.js and has to be treated by raphaela.

Using ace text editor

Hello,

Have you thought of including an optional editor?

I've been using it with Ace (Ajax.org Cloud9 Editor) and with an angular module as well.

    <div id="flow-ace-code" ng-model="flowAceCode",style="height:500px;" ui-ace="{theme:'twilight',mode:'html',onLoad: aceFlowCodeLoaded, onChange: aceFlowCodeChanged}"></div>
    <button ng-click="updateFlowChart()">Update flow chart</button>
    <div id="flowchart-div"></div>

And in an angular controller:

    var self = this;

    //- ... Your controller code

    $scope.updateFlowChart = function() {
      if($scope.flowAceCode) {
        if(self.chart) self.chart.clean();

        self.chart = flowchart.parse($scope.flowAceCode);

        self.chart.drawSVG('flowchart-div', {
          ...
        });
      } else if(self.chart)
        self.chart.clean();
    };

The power of this library relies on the fact that you can write your own syntax highlighter.

Cheers!

Flowchart start to the right

Tried this one on the web site:

     st=>start: Start:>http://www.google.com[blank]
     e=>end:>http://www.google.com
     op1=>operation: My Operation
     sub1=>subroutine: My Subroutine
     cond=>condition: Is it fun?:>http://www.google.com
     io=>inputoutput: catch something...

     st(right)->op1(right)->cond
     cond(yes, right)->sub1(right)->op1
     cond(no)->io(right)->e

Start to op1 draws downwards, expected to draw to the right

how to add color?

rt ..i want add some key word different color .thx ..

I saw you separate the library to some js files, can I know how do you merge them into 1 when release? any tool support to do that?

I saw you separate the library to some js files, can I know how do you merge them into 1 when release? any tool support to do that?

Conditions splitting into more than two nodes

Hi,
I've received an answer regarding that issue.
I don't want to dive into the code for nothing, so is it possible to easily ,modify it so it will support multiple exists from a node.
I'm absolutely loving this library, and it's the only thing that's keeping me from using it.

Many Thanks!

remove the version number

could you consider removing the version number of release folder, just difference each version by tags so that we can add your lib on https://cdnjs.com with git auto-update.
thank you very much!
cdnjs/cdnjs#5056

Not working

hello ,
i m searching for some js which draw flow chart , i found this one is best representation .
i download flowchart_master from here but .
even demo.html is not working .
i m tired i can't figure it out.
pl give me workable demo source .
or pl tell me what should i do please

How could I add different style for different nodes?

Hi,

I want to add different styles for start/end/condition/operation/inputoutput/subroutine

How can I do this. Is it possible to add selector(class)/id for particular node that I can use to style css for particular node.

I hope you understand my query?

Any help would appreciated.

add link to symbol

lines linking conditions to operations have different length

like this:

code:

start=>start: start
c1=>condition: c1
c2=>condition: c2
c3=>condition: c3
a1=>operation: a1
a2=>operation: a2
a3=>operation: a3
a4=>operation: a4
start->c1
c1(yes)->c2
c1(no)->a1
c2(yes)->c3
c2(no)->a2
c3(yes)->a3
c3(no)->a4

<text> svg elements should have stroke="none"

stroke on fonts makes them unreadable, specially on small sizes.

in image: above current (stroke="#000000") and below stroke="none"

arrow head too small with small line-width

haven't looked why it is so, but small line-width makes arrow heads too small.

One question about adding additional symbols

Is there anyway or example you could share to add additional symbols. Basically I want to set different border and background colors for conditional element and IO box types.

I tried adding additional shapes, but couldn't figure out how to utilize it with condition elements especially.

Thanks for your help Adrai.

example not working

I get the following error

Uncaught TypeError: Cannot set property 'direction' of undefined flowchart-1.2.2.min.js:5
n flowchart-1.2.2.min.js:5
(anonymous function) (index):273

Overlapping lines

Hi,

Nice job!! ;)

I'm trying to do a flowchart with 2 conditions but I can't place box where i need:

I obtain:

My code:
st=>start: Start|past
e=>end: End
op1=>operation: op1
text center|past
op2=>operation: op2|current
cond1=>condition: cond1|approved
cond2=>condition: cond2|approved
sub1=>subroutine: sub1|future

st(right)->op1(right)->cond1
cond1(no)->op2
cond2(no)->op2
cond1(yes, right)->cond2
cond2(yes, right)->sub1
op2(right)->sub1(right)->e

And I'd like to have this position:

is it possible to do it?

More over I'd like to center some text inside a box, is it possible too?

Thanks,
Best regards,

Allow storing the flowchart data/code inside a div element.

It would be nice to store the text that flowchart parses within a div element. Then, you could just pull the innerHTML contents of that div to parse. It would make using this library much easier. I've tried to do this by pulling the contents of a div and passing that to flowchart but it complains

Uncaught TypeError: Cannot read property 'key' of null  (Line 1205 flowchart.js)

I believe this is because the innerHTML doesn't actually have \n line breaks. Do you know of an easy way to implement this or could flowchart.js not require the line breaks? Maybe have an alternate method to break lines such as a semicolon?

The example is not working for me

I'm getting this error:

Uncaught TypeError: Cannot set property 'next' of undefined

on this row:

realSymb[next] = getSymbol(nextSymb);

What could be the reason?

It is possible to have some event to run the flow?

Not rendering complete flowchart when code is a bit longer.

st=>start: Start
p1=>operation: DFA gets action
p2=>operation: DFA changes state
p3=>operation: DFA stops
p4=>operation: Send action to server
p5=>operation: Save robot data
p6=>operation: Set this action unavailable
cond1=>condition: Has action?
cond2=>condition: DFA can stop?
cond3=>condition: Action succ?
e=>end

st->p1->cond1
cond1(yes)->p4
cond1(no)->p2
p2(right)->p1
p4->cond3
cond3(no)->p1
cond3(yes,bottom)->p6
p6(right)->p1
cond2(no)->p1
cond2(yes)->p5
p5->e

you can try code above.

Overlapping of Flow lines

Is there a way to separate the overlapping flow lines which are the case as shown in the above case?
The flow line from 00001E(no) to 000036 is overlapping with the lines from 000026(no) which is further overlapping with the line from 00003A(no)

better logic around where the yes and no are in a condition

I haven't dug into the code yet but it would be good if the join symbol code could work out which path goes back up the tree and then draw that coming out the side of the conditional. If you have a look at the attached flowchart you'll see a while statement that would be better expressed with the yes line coming out the side.

Can an operation route to 2 operations

For example, after start, 2 operations run in parallel and then re-join to a 3rd operation

let lines jump

Is it possible to let a line jump over an other line?

How could I use flowchart.js in tumblr

I'm right now using Stackedit to write a flowchart, And love it so far, but I'd love the ability to publish straight to tumblr.

I've already got Mathjax working on my blog, do you know how I could get flowchartjs working on my blog?

Thanks

incorrect path to flowchart latest in example

index.html in folder example has in the current version
<script src="../bin/flowchart-latest.js"></script>
<!--<script src="../release/flowchart-1.4.0.min.js"></script>-->
which should be
<!--<script src="../bin/flowchart-latest.js"></script>-->
<script src="../release/flowchart-1.4.0.min.js"></script>
there is no bin folder in the current version