Markdown 時序圖

1. 前言

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

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

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

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

2. 語法詳解

2.1 基本的時序圖

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

時序圖的內容也需要書寫在「mermaid」類型代碼塊之間，如下：

?```mermaid
?```

繪制時序圖，必須包含時序圖類型聲明、對象及消息三個部分。

實例 1：

基本的時序圖。

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

其渲染效果如下：

時序圖中的對象可以通過別名形式簡化書寫。

實例 2：

以別名形式定義對象。

?```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.
?```

其渲染效果如下：

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

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

聚焦代表一條消息在其對象的生命周期中的處理活動。

實例 3：

在時序圖中增加聚焦。

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

渲染效果如下：

聚焦可以使用 + / - 符號簡化書寫。

實例 4：

聚焦的簡寫。

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

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

實例 5：

在參與者的生命線右側增加備注。

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

渲染效果如下：

實例 6：

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

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

渲染效果如下：

2.2 時序圖的邏輯

2.2.1 循環(huán)

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

實例 7：

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

其渲染結果如下：

2.2.2 選擇

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

實例 8：

其渲染效果如下：

3. 使用場景及應用實例

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

實例 9：

學生使用教務系統(tǒng)時序圖展示。

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

其渲染效果如下：

4. 小結

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