Markdown 狀態(tài)圖

1. 前言

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

本節(jié)將重點(diǎn)介紹如何通過 Mermaid 繪制「狀態(tài)圖」。

狀態(tài)圖 (Statechart) 是描述一個(gè)實(shí)體基于事件反應(yīng)的動(dòng)態(tài)行為，是使對(duì)象達(dá)到某種狀態(tài)的事件、條件或操作的圖形化描述。

一個(gè)完整的狀態(tài)圖由狀態(tài)、轉(zhuǎn)換組成。

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

2. 語法詳解

2.1 狀態(tài)圖中的「狀態(tài)」

狀態(tài)代表某一對(duì)象在某一特定的條件、時(shí)間下所保持的靜態(tài)值。

使用 Mermaid 擴(kuò)展繪制狀態(tài)圖時(shí)，有多種方式聲明一個(gè)狀態(tài)節(jié)點(diǎn)。

實(shí)例 1：

通過設(shè)置狀態(tài) ID 聲明狀態(tài)

?```mermaid
stateDiagram
    狀態(tài)1
?```

上述代碼將會(huì)渲染成如下效果：

實(shí)例 2：

使用 「state」關(guān)鍵字來描述共同聲明狀態(tài)節(jié)點(diǎn)。

?```mermaid
stateDiagram
    state "狀態(tài)描述性文字" as 狀態(tài)2
?```

上述代碼將會(huì)渲染成如下效果：

實(shí)例 3：

使用「狀態(tài) ID + 冒號(hào)」的方式簡化狀態(tài)節(jié)點(diǎn)的聲明。

?```mermaid
stateDiagram
    狀態(tài)3 : 狀態(tài)3的文字描述
?```

上述代碼將會(huì)渲染成如下效果：

2.2 狀態(tài)圖中的「轉(zhuǎn)換」

「轉(zhuǎn)換」在狀態(tài)圖中表現(xiàn)為連接兩個(gè)狀態(tài)節(jié)點(diǎn)的單向箭頭，在 Mermaid 擴(kuò)展語法中的寫法為「字符箭頭 -->」。

實(shí)例 4：

用單向箭頭表示轉(zhuǎn)換。

?```mermaid
stateDiagram
    狀態(tài)1 --> 狀態(tài)2
?```

此代碼渲染效果如下：

通過 (行內(nèi)容):label 的形式，為轉(zhuǎn)換添加描述文本。

實(shí)例 5：

增加描述。

?```mermaid
stateDiagram
    狀態(tài)1 --> 狀態(tài)2: 咻~
?```

渲染效果如下：

狀態(tài)圖中有兩個(gè)特殊的狀態(tài)節(jié)點(diǎn)：開始節(jié)點(diǎn)和結(jié)束節(jié)點(diǎn)。如果需要在狀態(tài)圖中顯示開始或結(jié)束節(jié)點(diǎn)，可以通過 [*] 方式聲明。

實(shí)例 6：

增加開始和結(jié)束節(jié)點(diǎn)。

?```mermaid
stateDiagram
    [*] --> 狀態(tài)節(jié)點(diǎn)
    狀態(tài)節(jié)點(diǎn) --> [*]
?```

渲染結(jié)果如下：

2.3 狀態(tài)圖中的「嵌套」

在負(fù)責(zé)的狀態(tài)描述中，有的狀態(tài)節(jié)點(diǎn)會(huì)包含一系列的子狀態(tài)，我們可以用組合「嵌套」的方式來描繪它們。在 Mermaid 擴(kuò)展中，描述嵌套的方式，是使用「花括號(hào) {}」描述子狀態(tài)。

實(shí)例 7：

?```mermaid
stateDiagram
    [*] --> 父狀態(tài)節(jié)點(diǎn)
    state 父狀態(tài)節(jié)點(diǎn) {
        [*] --> 子狀態(tài)節(jié)點(diǎn)
        子狀態(tài)節(jié)點(diǎn) --> [*]
    }
?```

渲染結(jié)果如下：

「嵌套」的層數(shù)沒有限制。

實(shí)例 8：

多層嵌套。

?```mermaid
stateDiagram
    [*] --> 第一層狀態(tài)節(jié)點(diǎn)

    state 第一層狀態(tài)節(jié)點(diǎn) {
        [*] --> 第二層

        state 第二層 {
            [*] --> 第二層
            第二層 --> 第三層

            state 第三層 {
                [*] --> 第三層
                第三層 --> [*]
            }
        }
    }
?```

渲染效果如下：

狀態(tài)轉(zhuǎn)換可以在「嵌套」的外層，也就是群組間實(shí)現(xiàn)。

實(shí)例 9：

群組之間的嵌套。

?```mermaid
stateDiagram
    [*] --> 第一層
    第一層 --> 第二層
    第一層 --> 第三層

    state 第一層 {
        [*] --> 第一層子節(jié)點(diǎn)
        第一層子節(jié)點(diǎn) --> [*]
    }
    state 第二層 {
        [*] --> 第二層子節(jié)點(diǎn)
        第二層子節(jié)點(diǎn) --> [*]
    }
    state 第三層 {
        [*] --> 第三層子節(jié)點(diǎn)
        第三層子節(jié)點(diǎn) --> [*]
    }
?```

渲染效果如下：

2.4 狀態(tài)圖中的「分支」

對(duì)于非單一結(jié)果的狀態(tài)轉(zhuǎn)換，我們可以使用 <<fork>> 和 <<join>> 標(biāo)簽實(shí)現(xiàn)。

實(shí)例 10：

使用 <<fork>> 描述分支，使用 <<join>> 描述聚合。

?```mermaid
stateDiagram
    state 分支 <<fork>>
      [*] --> 分支
      分支 --> 分支2
      分支 --> 分支3

      state 合并 <<join>>
      分支2 --> 合并
      分支3 --> 合并
      合并 --> 狀態(tài)4
      狀態(tài)4 --> [*]
?```

渲染效果如下：

2.5 狀態(tài)圖中的「并行」

對(duì)于一些同步完成的狀態(tài)轉(zhuǎn)換，我們可以用 -- 符號(hào)聲明并行效果。

實(shí)例 11：

?```mermaid
stateDiagram
        [*] --> 激活狀態(tài)

        state 激活狀態(tài) {
            [*] --> NumLock關(guān)
            NumLock關(guān) --> NumLock開 : 按下 NumLock 鍵
            NumLock開 --> NumLock關(guān) : 按下 NumLock 鍵
            --
            [*] --> CapsLock關(guān)
            CapsLock關(guān) --> CapsLock開 : 按下 CapsLock 鍵
            CapsLock開 --> CapsLock關(guān) : 按下 CapsLock 鍵
            --
            [*] --> ScrollLock關(guān)
            ScrollLock關(guān) --> ScrollLock開 : 按下 ScrollLock 鍵
            ScrollLock開 --> ScrollLock關(guān) : 按下 ScrollLock 鍵
        }
?```

渲染效果如下：

有時(shí)候圖表元素不能完全表達(dá)我們的設(shè)計(jì)思路，這時(shí)候需要在圖中加入文字描述。在 Mermaid 語法中，使用 note <right|left> of <state ID> 備注內(nèi)容 end notes 的方式，將備注添加到狀態(tài)節(jié)點(diǎn)的右側(cè)（左側(cè)）。

實(shí)例 12：

?```mermaid
stateDiagram
        狀態(tài)1 : 描述將出現(xiàn)在右側(cè)
        note right of 狀態(tài)1
            這里添加描述內(nèi)容
        end note
        狀態(tài)1 --> 狀態(tài)2
        note left of 狀態(tài)2 : 在節(jié)點(diǎn)左側(cè)添加描述
?```

渲染效果如下：

3. 使用場(chǎng)景及實(shí)例

狀態(tài)圖專門用于表示依賴于狀態(tài)的行為。

實(shí)例 13：

出貨狀態(tài)示意圖。

?```mermaid
stateDiagram
        [*] --> 下單成功
        下單成功 --> 備貨
        state 出貨中 <<fork>>
        備貨 --> 出貨中
        出貨中 --> 出貨失敗
        出貨失敗 --> [*]
        出貨中 --> 出貨確認(rèn)
        出貨確認(rèn) --> 出貨完畢
        出貨完畢 --> 訂單完成
        訂單完成 --> [*]
?```

其渲染效果如下：

4. 小結(jié)

• Mermaid 為 Markdown 擴(kuò)展了使用普通文本生成狀態(tài)圖的語法及渲染支持；
• Mermaid 狀態(tài)圖的基本元素包含「狀態(tài)節(jié)點(diǎn)」、「轉(zhuǎn)換」；
• Mermaid 狀態(tài)圖還可以將節(jié)點(diǎn)合并，實(shí)現(xiàn)「嵌套」的效果；
• Mermaid 狀態(tài)圖的邏輯支持「分支」、「并行」；
• Mermaid 狀態(tài)圖還可以通過「?jìng)渥ⅰ沟姆绞剑瑸闋顟B(tài)圖提供更多的細(xì)節(jié)描述。