Markdown 流程圖

1. 前言

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

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

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

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

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

2. 語法詳解

2.1 基本的流程圖

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

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

?```mermaid
<!-- 此處的內(nèi)容會被渲染成 mermaid 圖形 -->
?```

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

實例 1：

基本的豎向流程圖。

?```mermaid
graph TD
    開始 --> 結(jié)束
?```

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

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

實例 2：

基本的橫向流程圖。

?```mermaid
graph LR
    開始 --> 結(jié)束
?```

渲染后效果如下：

支持的方向有：

2.2 幾何圖形節(jié)點

2.2.1 默認的節(jié)點

幾何圖形節(jié)點是流程圖中的核心元素，其要素包括形狀和內(nèi)容。

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

實例 3：

默認的幾何圖形。

?```mermaid
graph LR
    幾何圖形中的文本內(nèi)容
?```

其渲染結(jié)果如下：

2.2.2 分離節(jié)點的 ID 與內(nèi)容

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

實例 4：

將節(jié)點的 ID 和顯示文本區(qū)分開。

?```mermaid
graph LR
    一號節(jié)點[在此輸入希望在一號節(jié)點上顯示的文字內(nèi)容]
?```

其渲染結(jié)果如下：

2.2.3 節(jié)點的形狀

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

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

實例 5：

• 圓角形節(jié)點的語法。

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

• 圓形節(jié)點的語法。

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

• 非對稱形節(jié)點的語法。

?```mermaid
graph TD
	節(jié)點ID>節(jié)點顯示文本]
?```

• 菱形節(jié)點的語法。

```mermaid
graph TD
	節(jié)點ID{節(jié)點顯示文本}
```

• 六角形節(jié)點的語法。

?```mermaid
graph TD
	節(jié)點ID{{節(jié)點顯示文本}}
?```

• 平行四邊形節(jié)點的語法。

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

• 梯形節(jié)點的語法。

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

2.3 連接線

2.3.1 基本連接線

在流程圖中，不同節(jié)點之間需要通過連接線來描述其相關(guān)性。

實例 6：

基本的連接線語法。

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

其渲染結(jié)果如下：

2.3.2 連接線的種類

不同種類的連接線可以表示不同類型的關(guān)系，例如，無方向的連接線可用來表示相關(guān)性、有方向的連接線可以表示數(shù)據(jù)流向或者節(jié)點間的依賴關(guān)系；用實線表示強關(guān)聯(lián)、用虛線表示弱關(guān)聯(lián)等待。

實例 7：

無向線段連接線。

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

點狀連接線。

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

粗實連接線。

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

2.4 視圖分組

對于相對龐大的流程圖，可以通過對視圖分組，以區(qū)分體系內(nèi)的不同模塊，以及不同模塊間的關(guān)聯(lián)關(guān)系。

實例 8：

視圖分組。

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

其渲染結(jié)果如下：

3. 使用場景及實例

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

實例 9：

冒泡排序流程圖。

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

渲染效果如下：

4. 小結(jié)

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