Flowchart(流程圖)

本文於611天之前發表，文中內容可能已經過時。如有疑問，請在評論區留言。

Mermaid - Flowchart(流程圖)

基礎語法

1
2
3
4

# graph 代指流程圖,固定寫法
# TD等同於 TB（Top to Bottom）, 就是說自上而下的流程圖
graph TD
  Start --> Stop

graph TD
  Start --> Stop

• TB - top bottom(自上而下)
• BT - bottom top(自下而上)
• RL - right left(自右向左)
• LR - left right(自左向右)
• TD - same as TB(自上而下)

基本節點

1
2
3
4

# 模認方式
graph LR
  id

graph LR
  id

基本節點變更內文說明

1
2
3

# 加上一個修飾符 []
graph LR
  id[我是一個文本節點]

graph LR
  id[我是一個文本節點]

圓角節點

1
2
3

# 圓角節點的展示就是加上一個修飾符()
graph LR
  id(我是一個圓角節點)

graph LR
  id(我是一個圓角節點)

圓形節點

1
2
3

# 圓角節點的展示就是加上一個修飾符(())
graph TD
  test((我是一個圓形節點))

graph TD
  test((我是一個圓形節點))

書籤節點

1
2
3

# 該節點的展示就是加上一個修飾符>]
graph TD
  test>我是書簽形的節點]

graph TD
  test>我是書簽形的節點]

菱形節點

1
2
3

# 菱形節點的展示就是加上一個修飾符{}
graph TD
  test{我是一個菱形節點}

graph TD
  test{我是一個菱形節點}

六邊形節點(非等寬)

1
2
3

# 六邊形節點的展示就是加上一個修飾符{{}}
graph TD
  test{{我是一個六邊形節點}}

graph TD
  test

平行/反向平行 四邊形節點

1
2
3
4
5
6
7

# 平行四邊形節點的展示就是加上一個修飾符[//]
graph TD
  test1[/我是一個平行四邊形節點/]

# 反向平行四邊形節點的展示就是加上一個修飾符[\\]
graph TD
  test2[\我是一個反向平行四邊形節點\]

graph TD
  test1[/我是一個平行四邊形節點/]

  test2[\我是一個反向平行四邊形節點\]

梯形節點

1
2
3
4
5
6
7

# 梯形節點的展示就是加上一個修飾符[/\]
graph TD
  test1[/我是一個梯形節點\]

# 反向梯形節點的展示就是加上一個修飾符[\/]
graph TD
  test2[\反向梯形節點/]

graph TD
  test[/我是一個梯形節點\]
  test2[\反向梯形節點/]

節點鏈接

• 帶箭頭的單向鏈接，兩節點之間增加修飾符 –>
• 不帶箭頭連接線，兩節點之間增加修飾符 —
• 帶文本信息的連接線，兩節點之間增加修飾符 –text–, 亦或者 — |text|
• 帶箭頭和文本單向鏈接，兩節點之間增加修飾符 –text–>, 亦或者 –>|text|
• 帶箭頭的虛線單向鏈接，兩節點之間增加修飾符 -.->
• 帶箭頭和文本的虛線單向鏈接，兩節點之間增加修飾符 -.->
• 帶箭頭加粗單向鏈接，兩節點之間增加修飾符==>

graph LR
  A ==> B
  B --我是測試文本--> C
  C -.我也是測試文本.-> A
  A ==唉==> D((驚喜不))

• 箭頭
  • ->：實線實箭頭
  • –>：虛線實箭頭
  • ->>：實線虛箭頭
  • –>>：虛線虛箭頭

子圖(組)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 子組寫法, 這樣一個閉合就是一個子組
subgraph 名字
  流圖 do sth ...
end

graph TD
  subgraph 組合1
    A ==> B[/"🎹emoji 也支持"\]
  end
  subgraph 組合2
  B --"(呵呵噠)"--> C
  C -."給你一顆心:#9829;".-> A
  end
  subgraph 組合3
  A ==唉==> D((驚喜不))
  D --你好啊--> B
  end

graph TD
  subgraph 組合1
    A ==> B[/"🎹emoji 也支持"\]
  end
  subgraph 組合2
  B --"(呵呵噠)"--> C
  C -."給你一顆心:#9829;".-> A
  end
  subgraph 組合3
  A ==唉==> D((驚喜不))
  D --你好啊--> B
  end

附錄

1. 官方文件
2. mermaid上手指南

二、語法說明

範例一

  sequenceDiagram
  participant Alice
  participant Bob
  Alice->>John: Hello John, how are you?
  loop Healthcheck
      John->>John: Fight against hypochondria
  end
  Note right of John: Rational thoughts 
prevail...
  John-->>Alice: Great!
  John->>Bob: How about you?
  Bob-->>John: Jolly good!

範例二

graph TD;
  A-->B;
  A-->C;
  B-->D;
  C-->D;

• 關鍵字
  1. title：表示該序列圖中的標題。
  2. participant：表示該序列圖中的對象。
  3. note：表示該序列圖中的部分說明。關於note以下三種關鍵字：
     • left of：表示在當前對象的左側。
     • right of：表示在當前對象的右側。
     • over：表示覆蓋在當前對象的上方。
  4. 箭頭
     • ->：實線實箭頭
     • –>：虛線實箭頭
     • ->>：實線虛箭頭
     • –>>：虛線虛箭頭
  5. 換行符號 <br>

• 作者: Fanka
• 發表日期: 2019-12-09 19:33:33
• 最後編輯日期: 2021-08-12 12:49:22
• 文章分類: Hexo 外掛
• 文章標簽: Hexo Mermaid 流程圖
• 版權聲明: 知識共享署名-非商業性使用-禁止演繹 3.0 未本地化版本許可協議（CC BY-NC-ND 3.0）