flowchat.js

MarkText 除了能用 mermaid 的 flowchart 以外，還支援 flowchart.js

語法

[] 裡面的 item 是 optional

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

nodeName 是 node variable

nodeType 定義該 node 的類型

nodeText 是 node 裡面的文字

flowstate 為 optional，用 |指定多個 style

urlLink 為 optional，用 :> 指定 link，在 MarkText 裡面，link 沒有作用。但輸出為 pdf 後，可在pdf 裡面的圖表上使用 link，連接到該網頁。

Node Types

start 為 first node

end 為 last node

operatoin 是方塊文字，代表一個動作

inputoutput 是 IO

subroutine 是另一個 flowchart

condition 為 logical condition

parallel 是同時發生的兩個 flow

Connections

<node variable name>[(<specification1>[, <specification2])]-><node variable name>[[(<specification1>[, <specification2])]-><node variable name>]

[] 裡面的 item 是 optional

用 -> 連接 nodes

ex:

nodeVar1->nodeVar2
nodeVar2->nodeVar3

或
nodeVar1->nodeVar2->nodeVar3

Directions

離開 node 的 connection 的方向

• left

• right

• top

• down

ex:

startVar(<direction>)->nextNode
operationVar(<direction>)->nextNode

conditionalVar(yes, <direction>)->nextNode1
conditionalVar(no,  <direction>)->nextNode2

parallelVar(path1, <direction>)->nextNode1
parallelVar(path2, <direction>)->nextNode2
parallelVar(path3, <direction>)->nextNode3

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: Yes or No?:>http://www.google.com
io=>inputoutput: catch something...
para=>parallel: parallel tasks

st->op1->cond
cond(yes)->io->e
cond(no)->para
para(path1, bottom)->sub1(right)->op1
para(path2, top)->op1

render

References

flowchart.js

GitHub - adrai/flowchart.js: Draws simple SVG flow chart diagrams from textual representation of the diagram