Mermaid - Flowchart

Mermaid 是用 text 與 code 撰寫 diagrams 的語法，能夠用在 markdown 的 codeblock 裡面，目前支援的語法有 flowchart, sequence diagram, class diagram, state diagram, entity relationship diagram, gantt chart, user journey diagram。

Mermaid Live Editor 是線上編輯的工具，也可以在 Markdown 工具裡面試試看以沒有支援 mermaid，可在 code block 的 lang 填上 mermaid。

flowchart LR
    A-->B

實際上 render flowchart 會是這樣

Flowchart

Orientation

第一行 flowchart 後面要指定方向

• TB - top to bottom
• TD - top-down/ same as top to bottom
• BT - bottom to top
• RL - right to left
• LR - left to right

Node

節點的前面是 id，後面是節點格式及文字

flowchat LR
id1(圓角節點)
id2([stadium-shaped node])
id3[[subroutine shaped node]]
id4[(cylindrical shaped Database)]
id5((circle))
id6{rhombus}
id7{{hexagon}}
id8[/parallelogram/]
id9[\parallelogram alt\]
id10[/trapezoid\]
id11[\trapezoid alt/]

實際上 render 會是這樣

Link

flowchart LR
A --> B
C --- D
E --text on link---F
G --text on link2-->H
I ---|text on link|J
K -->|text on link|L
M -.-> N
O -. dotted link with text .-> P
Q ==> R
S == thick link with text ==> T
U -- chain --> V -- chain --> W
a --> b & c --> d
e & f--> g & h
i --o j
j --x k

實際上 render 會是這樣

特殊字元

用 " 把文字填在裡面，另外可用 #quote; 代表 :，支援 HTML character names

flowchart LR
id1["This is the (text) in the box"]
A["A double quote:#quot;"] -->B["A dec char:#9829;"]

可倍 render 為

flowchart LR
id1["This is the (text) in the box"]
A["A double quote:#quot;"] -->B["A dec char:#9829;"]

subgraph

語法為

subgraph title
    graph definition
end

subgraph subgraphid [title]
    graph definition
end

範例

flowchart TB
    c1-->a2
    d1-->a2
    subgraph one
    a1-->a2
    end

    subgraph two
    b1-->b2
    end

    subgraph sid1 [three]
    c1-->c2
    end

render 結果

flowcharts

可在 flowchart 之間加上 edges

flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

    one --> two
    three --> two
    two --> c2

render

subgraph 之間加上方向（direction 語法在 MarkText 不支援）

flowchart LR
  subgraph TOP
    direction TB
    subgraph B1
        direction RL
        i1 -->f1
    end
    subgraph B2
        direction BT
        i2 -->f2
    end
  end
  A --> TOP --> B
  B1 --> B2

Interaction

當 js 為 securityLevel='strict' 這個功能會被 disable，securityLevel='loose' 則會 enabled

click nodeId callback
click nodeId call callback()

可在 js 增加 callback() function 讓 mermaid node 使用

<script>
  var callback = function(){
      alert('A callback was triggered');
  }
</script>

Styling a node

可設定不同的 border，或 background顏色

flowchart LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5

render

用 classDef 可更方便地定義新的 style class

classDef className fill:#f9f,stroke:#333,stroke-width:4px;
class nodeId1 className;
class nodeId1,nodeId2 className;
%% 用 ::: 可快速指定 node 的 style class
A:::className

flowchart LR
    A:::someclass --> B
    classDef someclass fill:#f96;

render

References

mermaid github

網頁流程圖函式庫 mermaid.js