Markdown 時(shí)序圖

1. 前言

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

本節(jié)將重點(diǎn)介紹如何通過(guò) Mermaid 繪制「時(shí)序圖」。

時(shí)序圖 (Sequence Diagram) ，用來(lái)體現(xiàn)對(duì)象之間的時(shí)間順序關(guān)系，可以表達(dá)出對(duì)象的交互過(guò)程，也就是 “從哪到哪” 的圖形化描述。

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

2. 語(yǔ)法詳解

2.1 基本的時(shí)序圖

時(shí)序圖由以矩形代表參與者，參與者下方代表生存期間的長(zhǎng)實(shí)線，連接線之間代表消息的箭頭和控制焦點(diǎn)組成。

時(shí)序圖的內(nèi)容也需要書(shū)寫(xiě)在「mermaid」類型代碼塊之間，如下：

?```mermaid
?```

繪制時(shí)序圖，必須包含時(shí)序圖類型聲明、對(duì)象及消息三個(gè)部分。

實(shí)例 1：

基本的時(shí)序圖。

?```mermaid
sequenceDiagram
    李雷->>韓梅梅: Hi LiLei, How do you do?
    韓梅梅-->>李雷: How do you do!
?```

其渲染效果如下：

時(shí)序圖中的對(duì)象可以通過(guò)別名形式簡(jiǎn)化書(shū)寫(xiě)。

實(shí)例 2：

以別名形式定義對(duì)象。

?```mermaid
sequenceDiagram
    participant l as 李雷
    participant h as 韓梅梅
    l->>h: Hello Hanmeimei, how are you?
    h->>l: Hello Lilei, I am fine, thank you, and you?
    l-->h: I am fine, thank you.
?```

其渲染效果如下：

時(shí)序圖中的消息是對(duì)參與者之間通信的時(shí)機(jī)與內(nèi)容的描述，其聲明方式如：[發(fā)起者][連線類型][接收者]:消息內(nèi)容。

其中連接類型有如下幾種形式：

聚焦代表一條消息在其對(duì)象的生命周期中的處理活動(dòng)。

實(shí)例 3：

在時(shí)序圖中增加聚焦。

?```mermaid
sequenceDiagram
    李雷->>韓梅梅: Hello, what's your name?
    activate 韓梅梅
    韓梅梅-->>李雷: Hello, my name is Hanmeimei!
    deactivate 韓梅梅
?```

渲染效果如下：

聚焦可以使用 + / - 符號(hào)簡(jiǎn)化書(shū)寫(xiě)。

實(shí)例 4：

聚焦的簡(jiǎn)寫(xiě)。

sequenceDiagram
    李雷->>+韓梅梅: Hello, what's your name?
    韓梅梅-->>-李雷: Hello, my name is Hanmeimei!

當(dāng)我們無(wú)法用以上圖形信息充分表達(dá)思路時(shí)，可以增加備注信息。備注需要通過(guò)單獨(dú)一行的聲明實(shí)現(xiàn)。

實(shí)例 5：

在參與者的生命線右側(cè)增加備注。

?```mermaid
sequenceDiagram
    李雷->>韓梅梅: Hi Hanmeimei, How do you do?
    Note right of 韓梅梅: Lesson 1
    韓梅梅-->>李雷: How do you do!
?```

渲染效果如下：

實(shí)例 6：

在參與者的生命線之上增加備注。

?```mermaid
sequenceDiagram
    李雷->>韓梅梅: Hi Hanmeimei, How do you do?
    Note over 李雷,韓梅梅: Lesson 1
    韓梅梅-->>李雷: How do you do!
?```

渲染效果如下：

2.2 時(shí)序圖的邏輯

2.2.1 循環(huán)

循環(huán)代表時(shí)序圖中的一項(xiàng)活動(dòng)，有可能執(zhí)行一次，有可能重復(fù)執(zhí)行多次，每次在臨界點(diǎn)判斷循環(huán)的條件是否滿足。

實(shí)例 7：

?```mermaid
sequenceDiagram
    李雷->韓梅梅: Hello Hanmeimei, how are you?
    loop 不停地說(shuō)
        韓梅梅-->李雷: Great!
    end
?```

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

2.2.2 選擇

選擇代表時(shí)序圖中的判斷邏輯，即一項(xiàng)結(jié)果可能發(fā)生，也有可能不發(fā)生。

實(shí)例 8：

其渲染效果如下：

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

時(shí)序圖作為展示對(duì)象交互順序的工具，可以更直觀的描述順序及并發(fā)過(guò)程。

實(shí)例 9：

學(xué)生使用教務(wù)系統(tǒng)時(shí)序圖展示。

sequenceDiagram
    participant a as 學(xué)生
    participant b as 教務(wù)系統(tǒng)
    participant c as 課程
    participant d as 成績(jī)
		opt 認(rèn)證
        a->>b: 用戶名/密碼
    end
    a->>+b: 請(qǐng)求課程列表
    b->>+c: 獲取課程列表
    c-->>-b: 返回課程列表
    b->>+d: 獲取成績(jī)信息
    d-->>-b: 返回成績(jī)信息
    b-->>-a: 顯示成績(jī)

其渲染效果如下：

4. 小結(jié)

• 時(shí)序圖是用來(lái)描述交互過(guò)程的圖形組合，描述了對(duì)象間的動(dòng)態(tài)協(xié)作；
• 時(shí)序圖最核心的元素是對(duì)象、生命線和消息；
• 我們可以通過(guò)判斷、循環(huán)、并行描述復(fù)雜的消息傳遞及處理流程。