flowchart.js

Draws simple SVG flow chart diagrams from textual representation of the dia...

ChartingDiagram / Flow chart
adrai/flowchart.jsflowchart.js.org/flowchart.js

README

JS.ORG

flowchart.js


flowchart.js is a flowchart DSL and SVG render that runs in the browser and terminal.

Nodes and connections are defined separately so that nodes can be reused and connections can be quickly changed.
Fine grain changes to node and connection style can also be made right in the DSL.

Example


  1. ``` sh
  2. st=>start: Start:>http://www.google.com[blank]
  3. e=>end:>http://www.google.com
  4. op1=>operation: My Operation
  5. sub1=>subroutine: My Subroutine
  6. cond=>condition: Yes
  7. or No?:>http://www.google.com
  8. io=>inputoutput: catch something...
  9. para=>parallel: parallel tasks

  11. st->op1->cond
  12. cond(yes)->io->e
  13. cond(no)->para
  14. para(path1, bottom)->sub1(right)->op1
  15. para(path2, top)->op1
  16. ```

Example Flowchart

CLI

See francoislaberge/diagrams on how to flowchart.js in the terminal.

Browser Usage


flowchart.js is on CDNJS, feel free to use it.

You will also need Raphaël, which is also on CDNJS.

The demo html page is at example/index.html.

Node Syntax

nodeName=>nodeType: nodeText[|flowstate][:>urlLink]

Items in [] are optional.

_nodeName_ defines the nodes variable name within the flowchart document.

_nodeType_ defines what type the node is. See Node Types for more information.

_nodeText_ is the text that will be inserted into the node. Newlines are allowed and will be reflected in the rendered node text.

_flowstate_ is optional and uses the | operator that specifies extra styling for the node.

_urlLink_ is optional and uses the :> operator to specify the url to link to.

Node Types

Defines the shape that the node will take.

start

Used as the first node where flows start from.
Default text is Start.

start image

  1. ``` sh
  2. st=>start: start
  3. ```

end

Used as the last node where a flow ends.
Default text is End.

end image

  1. ``` sh
  2. e=>end: end
  3. ```

operation

Indicates that an operation needs to happen in the flow.

operation image

  1. ``` sh
  2. op1=>operation: operation
  3. ```

inputoutput

Indicates that IO happens in a flow.

inputoutput image

  1. ``` sh
  2. io=>inputoutput: inputoutput
  3. ```

subroutine

Indicates that a subroutine happens in the flow and that there should be another flowchart that documents this subroutine.

subroutine image

  1. ``` sh
  2. sub1=>subroutine: subroutine
  3. ```

condition

Allows for a conditional or logical statement to direct the flow into one of two paths.

condition image

  1. ``` sh
  2. cond=>condition: condition
  3. Yes or No?
  4. ```

parallel

Allows for multiple flows to happen simultaneously.

parallel image

  1. ``` sh
  2. para=>parallel: parallel
  3. ```

Connections

Connections are defined in their own section below the node definitions.
The -> operator specifies a connection from one node to another like nodeVar1->nodeVar2->nodeVar3.

Not all nodes need to be specified in one string and can be separaged like so

  1. ``` sh
  2. nodeVar1->nodeVar2
  3. nodeVar2->nodeVar3
  4. ```

Connection syntax is as follows:

`[([, [[([, ]`

Items in [] are optional.

Directions

The following directions are available and define the direction the connection will leave the node from. If there are more than one specifiers, it is always the last. All nodes have a default direction making this an optional specification. `` will be used to indicate that one of the following should be used in its place.

left
right
top
bottom

Node Specific Specifiers by Type

Each node variables has optional specifiers, like direction, and some have special specifiers depending on the node type that are defined below. Specifiers are added after the variable name in () and separated with , like nodeVar(spec1, spec2).

start

Optional direction

`startVar()->nextNode`

end

No specifications because connections only go to the end node and do not leave from it.

previousNode->endVar

operation

Optional direction

`operationVar()->nextNode`

inputoutput

Optional direction

`inputoutputVar()->nextNode`

subroutine

Optional direction

`subroutineVar()->nextNode`

condition

Required logical specification of yes or no

Optional direction

  1. ``` sh
  2. conditionalVar(yes, <direction>)->nextNode1
  3. conditionalVar(no,  <direction>)->nextNode2
  4. ```

parallel

Required path specification of path1, path2, or path3

Optional direction

  1. ``` sh
  2. parallelVar(path1, <direction>)->nextNode1
  3. parallelVar(path2, <direction>)->nextNode2
  4. parallelVar(path3, <direction>)->nextNode3
  5. ```

Links

A external link can be added to a node with the :> operator.

The st node is linked to http://www.google.com and will open a new tab because [blank] is at the end of the URL.

The e node is linked to http://www.yahoo.com and will cause the page to navigate to that page instead of opening a new tab.

  1. ``` sh
  2. st=>start: Start:>http://www.google.com[blank]
  3. e=>end: End:>http://www.yahoo.com
  4. ```

Advice

Symbols that should possibly not be used in the text: => and -> and :> and | and @> and :$

If you want to emphasize a specific path in your flowchart, you can additionally define it like this:

  1. ```
  2. st@>op1({"stroke":"Red"})@>cond({"stroke":"Red","stroke-width":6,"arrow-end":"classic-wide-long"})@>c2({"stroke":"Red"})@>op2({"stroke":"Red"})@>e({"stroke":"Red"})
  3. ```

Custom names for branches


  1. ```
  2. st=>start: Start:>http://www.google.com[blank]
  3. e=>end:>http://www.google.com
  4. op1=>operation: My Operation
  5. sub1=>subroutine: My Subroutine
  6. cond=>condition: linear or polynomial :>http://www.google.com
  7. io=>inputoutput: catch something...
  8. para=>parallel: 3 possibilities

  10. st->op1->cond
  11. cond(true@linear)->io->e
  12. cond(false@polynomial)->sub1(right)
  13. sub1(right)->para
  14. para(path1@an1, top)->cond
  15. para(path2@an2, right)->op1
  16. para(path3@an3, bottom)->e
  17. ```
  
Demonstration
  
img

Contributors


via GitHub

Thanks


Many thanks to js-sequence-diagrams which greatly inspired this project, and forms the basis for the syntax.