Markdown 進階技能：用代碼畫時序圖

這篇文章將爲你們介紹如何以寫代碼的方式畫時序圖（也叫順序圖），同時也會介紹一些時序圖基礎知識。

相比於使用畫圖工具拖拽畫圖，用代碼畫圖有什麼好處？

• 首先，這種方式很是輕便，無需安裝複雜的畫圖應用。Typora 等多種 Markdown 編輯器自帶有畫圖擴展（這也是 Markdown 能畫圖的緣由，由於用到了擴展）
• 其次，拖拽畫圖時須要考慮圖形尺寸和對齊問題，而代碼畫圖不須要考慮這些，一切均自動調整
• 另外，想象下你在寫文檔時，隨手一段代碼就插入了一幅時序圖，這多麼酷炫！

話很少說，先來看看用代碼畫的時序圖的效果。以下圖是小程序登錄過程當中，小程序、服務器、微信服務器三者交互的時序圖：

而畫這幅圖只用了不多而且很簡單的代碼：

sequenceDiagram
    小程序 ->> 小程序 : wx.login()獲取code
    小程序 ->> + 服務器 : wx.request()發送code
    服務器 ->> + 微信服務器 : code+appid+secret
    微信服務器 -->> - 服務器 : openid
    服務器 ->> 服務器 : 根據openid肯定用戶並生成token
    服務器 -->> - 小程序 : token
複製代碼

看了這個心動了沒有？學起來吧！

工具

君欲善其事，必先利其器。想要用代碼畫圖，就得有支持這種方式的畫圖工具。這裏介紹兩款工具：

1. 免費 Markdown 編輯器 Typora，很是好用且美觀。其自帶 mermaid 畫圖擴展。

   在用 Typora 編寫 Markdown 文本時，插入這樣一個代碼塊：

   ```mermaid ……時序圖代碼…… ```

   其中時序圖的代碼便會自動被 mermaid 解析和渲染。演示視頻

   這樣的使用方式很簡單，其它的能支持 mermaid 的編輯器也能夠這樣使用，好比印X筆記。

2. 若是你不想用 Markdown，能夠選擇網頁版 mermaid 編輯器，免費且無需註冊。連接：dwz.cn/hOMIoH4w

代碼畫圖

工具準備穩當後，咱們開始學習畫圖代碼的語法。同時也會順帶對時序圖做一些簡單介紹，一方面幫助讀者溫習時序圖的內容，另外一方面統一一下術語和概念。

時序圖是一種表現交互過程的圖示，主要展現各個參與者之間是如何交互的，以及交互的順序是怎樣的。它的主要構成元素有：

(1) 參與者

傳統時序圖概念中參與者有角色和類對象之分，但這裏咱們不作此區分，用參與者表示一切參與交互的事物，能夠是人、類對象、系統等形式。中間豎直的線段從上至下表示時間的流逝。

畫法：

sequenceDiagram
    participant 客戶端
    participant 服務器
複製代碼

sequenceDiagram 爲每幅時序圖的固定開頭 participant <參與者名稱> 聲明（添加）參與者。語句次序即爲參與者橫向排列的次序，如後續示例所示。

(2) 消息

交互時一方對另外一方的操做（好比接口調用）或傳遞出的信息。用單向箭頭來表示——實線表明主動發出消息；虛線表明響應；末尾帶「X」表明異步消息，無需等待迴應。

畫法：

sequenceDiagram
    participant 老闆L
    participant 員工A
    
    老闆L ->> 員工A : 「在這裏咱們是兄弟！」
    老闆L -x 員工A : 畫個餅
    員工A -->> 老闆L : 怯怯地鼓掌
複製代碼

消息語句格式爲：<參與者> <箭頭> <參與者> : <描述文本>。

其中 <箭頭> 的寫法有：

• ->>：顯示爲實線箭頭（主動發出消息）
• -->>：顯示爲虛線箭頭（響應）
• -x：顯示爲末尾帶「X」的實線箭頭（異步消息）

注：participant <參與者名稱> 這句其實能夠省略，省略後參與者橫向排列的次序，由消息語句中參與者出現的次序決定。如後續示例所示。

(3) 激活框

從消息接收方的時間線上標記一小段時間，表示對消息進行處理的時間間隔。

畫法以下，注意體會箭頭符號後的 + 和 - 的使用方法和效果，它們至關於激活框的開關：

sequenceDiagram
    老闆M ->> + 員工B : 「不只996，還要669！」
    員工B -->> - 老闆M : 怯怯地鼓掌
    
    老闆M ->> + 員工B : 「悔創本司！」
    員工B -->> - 老闆M : 怯怯地鼓掌
複製代碼

(4) 註解

畫法：

sequenceDiagram
    Note left of 老闆L : 對臉不感興趣
    Note right of 老闆M : 對錢不感興趣
    Note over 老闆L,老闆M : 對996感興趣
複製代碼

(5) 循環（loop）

在條件知足時，重複發出消息序列。（至關於編程語言中的 while 語句。）

畫法：

sequenceDiagram
    網友 ->> + X寶 : 網購鐘意的商品
    X寶 -->> - 網友 : 下單成功
    
    loop 一天七次
        網友 ->> + X寶 : 查看配送進度
        X寶 -->> - 網友 : 配送中
    end
複製代碼

(6) 選擇（alt）

在多個條件中做出判斷，每一個條件將對應不一樣的消息序列。（至關於 if 及 else if 語句。）

畫法：

sequenceDiagram    
    土豪 ->> 取款機 : 查詢餘額
    取款機 -->> 土豪 : 餘額
    
    alt 餘額 > 5000
        土豪 ->> 取款機 : 取上限值 5000 塊
    else 100 < 餘額 < 5000
        土豪 ->> 取款機 : 有多少取多少
    else 餘額 < 100
        土豪 ->> 取款機 : 退卡
    end
    
    取款機 -->> 土豪 : 退卡
複製代碼

(7) 可選（opt）

在某條件知足時執行消息序列，不然不執行。至關於單個分支的 if 語句。

畫法：

sequenceDiagram
    老闆們 ->> 員工們 : 開始實行996
    
    opt 永不可能
        員工們 -->> 老闆們 : 拒絕
    end
複製代碼

(8) 並行（Par）

將消息序列分紅多個片斷，這些片斷並行執行。

畫法：

sequenceDiagram
    老闆C ->> 員工C : 開始實行996
    
    par 並行
        員工C ->> 員工C : 刷微博
    and
        員工C ->> 員工C : 工做
    and
        員工C ->> 員工C : 刷朋友圈
    end
    
    員工C -->> 老闆C : 9點下班
複製代碼

用代碼畫時序圖的方法就是這些，內容很簡單，卻能知足大多數時候的需求。不妨找幾個實際例子練練手，加深下印象。

做者相關閱讀：

• 《輕鬆上手寫做利器 Markdown：今後文章排版無煩惱》
• 《會用 Markdown 還不夠，還得知道排版規範》
• 《Markdown 進階技能：用代碼畫流程圖（編程零基礎也適用）》
• 《Markdown 高級玩法：用代碼畫時序圖》