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
Node Types consist of start, end, operation, inputoutput, input, output, subroutine, condition, parallel. Defines the shape that the node will take:
start node
Used as the first node ( terminal node ) where flows start from. Default text is Start. ( Oval Shape or Pill Shape or Ellipse Shape ).
end node
Used as the last node ( terminal node ) where a flow ends. Default text is End. ( Oval Shape or Pill Shape or Ellipse Shape ).
e=>end
operation node
Indicates that an operation needs to happen in the flow. ( Rectangle Shape )
op1=>operation: Operation
inputoutput node
Indicates that IO data happens in a flow. ( Parallelogram Shape )
io=>inputoutput: input and output
input node
Indicates that Input happens in a flow. ( Inverted or Upside Down Trapezium Shape or Trapezoid Shape )
inp1=>input: Input info
output node
Indicates that Output happens in a flow. ( Upright Trapezium Shape or Trapezoid Shape )
out1=>output: Print info
subroutine node
Indicates that a Subroutine or Predefined Process happens in the flow and that there should be another flowchart that documents this subroutine. ( A Rectangle With Two Lines On The Height Side Shape / A Rectangles With Double-Struck Vertical Edges Shape )
sub1=>subroutine: subroutine
condition node
Allows for a conditional or logical statement to direct the flow into one of two paths. ( Diamond Shape or Rhombus Shape )
cond=>condition: condition
Yes or No?
parallel node
Allows for multiple flows to happen simultaneously. ( The Two Horizontal Lines At The Beginning Or Ending Shape / Two Parallel Horizontal Bar Shape )
para=>parallel: parallel
Connections Operator / Branches Operator / Directional Flow Operator
Connections are defined in their own section below the node definitions. The dash and greater than -> 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 separated like so
nodeVar1->nodeVar2
nodeVar2->nodeVar3
Connection syntax of Connections is as follows:
Items in [] are optional.
Directions Specifier
The following directions are available and define the direction of the connection that will leave the node off. If there are more than one specifiers, it is always the last. All nodes have a default direction making this an optional specification. The <direction> specifier will be used to indicate that one of the following should be used in its place.
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 parentheses () and separated with comma , like nodeVar(spec1, spec2).
start node specifier
Optional direction
startVar(<direction>)->nextNode
end node specifier
No specifications because connections only go to the end node and do not leave from it.
previousNode->endVar
operation node specifier
Optional direction
operationVar(<direction>)->nextNode
inputoutput node specifier
Optional direction
inputoutputVar(<direction>)->nextNode
subroutine node specifier
Optional direction
subroutineVar(<direction>)->nextNode
condition node specifier
Required logical specification of yes or no
Optional direction
conditionalVar(yes, <direction>)->nextNode1
conditionalVar(no, <direction>)->nextNode2
parallel node specifier
Required path specification of path1, path2, or path3
Optional direction
parallelVar(path1, <direction>)->nextNode1
parallelVar(path2, <direction>)->nextNode2
parallelVar(path3, <direction>)->nextNode3
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.
st=>start: Start:>http://www.google.com[blank]
e=>end: End:>http://www.yahoo.com
Names for Connections Operator / Custom Labels for Branches Operator
Connection syntax with Custom Labels for Branches operator or Names for Connections Operator is as follows:
Items in [] are optional.
Example
cond(false@polynomial)->sub1(right)
Full Example
st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: linear or polynomial :>http://www.google.com
io=>inputoutput: catch something...
para=>parallel: 3 possibilities
st->op1->cond
cond(true@linear)->io->e
cond(false@polynomial)->sub1(right)
sub1(right)->para
para(path1@an1, top)->cond
para(path2@an2, right)->op1
para(path3@an3, bottom)->e
Bibliography
http://flowchart.js.org/
https://www.drawio.com/
https://www.smartdraw.com/
Related Post
