Markdown 流程圖

1. 前言

Markdown 的原生語法不支持繪制圖形，但通過 Mermaid 擴展，我們可以將一些格式化的文字渲染成我們需要的圖形。常用的圖形有 “流程圖”、“時序圖”、“類圖”、“狀態圖”、“甘特圖”、"餅圖" 等。

Mermaid 是一個方便于 Markdown 文檔撰寫者通過文本方式生成圖形的擴展工具。相比 Visio 它要輕很多，幾行文字便可生成一幅完整且美觀的流程圖。

本節將重點介紹如何通過 Mermaid 繪制「流程圖」。

流程圖（flow chart）是體現封閉系統運動狀態的有效展示形式，可以讓管理者、實現者清晰的認識系統運轉流程，也可以直觀的描述工作過程。

環境說明：
考慮到 Markdown 工具之間的不兼容，有的內容直接從頁面復制粘貼到本地不會正常顯示，大家學習時自己動手寫是肯定沒問題的。本節所有實例代碼及演示效果均使用 Typora 工具完成。
Mermaid 為 Markdown 擴展語法，需要在 Typora 設置中開啟對圖表的語法支持。其方式為：「設置」->「Markdown」->「Markdown 擴展語法」-> 勾選「圖表」，如下圖：

2. 語法詳解

2.1 基本的流程圖

流程圖由幾何圖形節點及連接線組成。幾何圖形節點是流程圖內的各元素的載體，通常用形狀來區分其屬性，例如圓形代表開始或結束、菱形代表判斷等。連接線用于描述幾何圖形節點之間的聯系，可能是有向線段，也可能是無向線段等。

在 Markdown 中添加 Mermaid 圖形，需要聲明 Mermaid 類型的代碼塊，代碼如下：

?```mermaid
<!-- 此處的內容會被渲染成 mermaid 圖形 -->
?```

基本的流程圖包含：流程圖布局方向、幾何圖形和連接線三個部分組成。

實例 1：

基本的豎向流程圖。

?```mermaid
graph TD
    開始 --> 結束
?```

此部分代碼將會渲染成如下效果：

通過修改圖表的聲明，可以修改流程圖的布局方向。例如將上邊的流程圖轉換為橫向流程圖。

實例 2：

基本的橫向流程圖。

?```mermaid
graph LR
    開始 --> 結束
?```

渲染后效果如下：

支持的方向有：

2.2 幾何圖形節點

2.2.1 默認的節點

幾何圖形節點是流程圖中的核心元素，其要素包括形狀和內容。

在 Mermaid 語法中，不加任何修飾的文字內容會被渲染成幾何圖形節點。

實例 3：

默認的幾何圖形。

?```mermaid
graph LR
    幾何圖形中的文本內容
?```

其渲染結果如下：

2.2.2 分離節點的 ID 與內容

在相對復雜的場景中，同一圖形可能被多次引用，如果圖形中的文本較長，或者文本內容不足以體現圖形的唯一性，可將圖形節點的 ID 與其文本內容分開定義，以使結構更加清晰。

實例 4：

將節點的 ID 和顯示文本區分開。

?```mermaid
graph LR
    一號節點[在此輸入希望在一號節點上顯示的文字內容]
?```

其渲染結果如下：

2.2.3 節點的形狀

形狀可用于區分節點的不同屬性，有利于豐富流程圖的信息量，同時保持其簡潔性。

在 Mermaid 中可以使用一些基本符號定義節點的形狀，例如：圓角形、跑道形、氣缸形、非對稱形狀、菱形、六角形、平行四邊形、梯形。

實例 5：

• 圓角形節點的語法。

?```mermaid
graph TD
	節點ID(節點顯示文本)
?```

• 圓形節點的語法。

?```mermaid
graph TD
	節點ID((節點顯示文本))
?```

• 非對稱形節點的語法。

?```mermaid
graph TD
	節點ID>節點顯示文本]
?```

• 菱形節點的語法。

```mermaid
graph TD
	節點ID{節點顯示文本}
```

• 六角形節點的語法。

?```mermaid
graph TD
	節點ID{{節點顯示文本}}
?```

• 平行四邊形節點的語法。

?```mermaid
graph TD
	右傾平行四邊形[/平行四邊形--右傾/]
	左傾平行四邊形[\平行四邊形--左傾\]
?```

• 梯形節點的語法。

?```mermaid
graph TD
  梯形[/梯形--正向\]
	反向梯形[\梯形--反向/]
?```

2.3 連接線

2.3.1 基本連接線

在流程圖中，不同節點之間需要通過連接線來描述其相關性。

實例 6：

基本的連接線語法。

?```mermaid
graph LR
    A-->B
?```

其渲染結果如下：

2.3.2 連接線的種類

不同種類的連接線可以表示不同類型的關系，例如，無方向的連接線可用來表示相關性、有方向的連接線可以表示數據流向或者節點間的依賴關系；用實線表示強關聯、用虛線表示弱關聯等待。

實例 7：

無向線段連接線。

?```mermaid
graph LR
    A --- B -- 帶文字連接線 --- C
?```

點狀連接線。

?```mermaid
graph LR
    A -.- B -. 帶文字連接線 .-> C
?```

粗實連接線。

?```mermaid
graph LR
    A ==> B == 帶文字連接線 ==> C
?```

2.4 視圖分組

對于相對龐大的流程圖，可以通過對視圖分組，以區分體系內的不同模塊，以及不同模塊間的關聯關系。

實例 8：

視圖分組。

?```mermaid
graph TB
    c1-->a2
    subgraph 第一組
    a1-->a2
    end
    subgraph 第二組
    b1-->b2
    end
    subgraph 第三組
    c1-->c2
    end
?```

其渲染結果如下：

3. 使用場景及實例

流程圖常用于項目的需求分析和設計階段，也較常出現于程序使用手冊中。

實例 9：

冒泡排序流程圖。

?```mermaid
graph LR
	執行1[i = 1]
  執行2[j = 0]
  執行3[i ++]
  執行4["a = arr[j], b = arr[j + 1]"]
  執行5[交換 a, b]
  執行6[j ++]
	判斷1["i < n"]
	判斷2["j < n - i"]
  判斷3["a > b"]
  開始 --> 執行1
  執行1 --> 判斷1
  判斷1 --Y--> 執行2
  執行2 --> 判斷2
  判斷2 --Y--> 執行4
  判斷2 --N--> 執行3
  執行3 --> 判斷1
  執行4 --> 判斷3
  判斷3 --N--> 判斷2
  判斷3 --Y--> 執行5
  執行5 --> 執行6
  執行6 --> 判斷2
  判斷1 --N--> 結束
?```

渲染效果如下：

4. 小結

• Mermaid 為 Markdown 提供了文本轉換為圖形的擴展功能；
• Mermaid 方式渲染的流程圖包含布局方向、圖形節點和連接線三個基本要素；
• Mermaid 流程圖支持多種節點形狀、連接線種類，可以使流程圖具有豐富的表現力。