Mermaid：用 Markdown 語法來實現繪制各種圖
作為開發人員，日常工作中難免會遇到一些需要畫圖的時候，特別是在寫一些接口文檔的時候，畫一些流程圖或者時序圖是很重要的。
那么小伙伴們平常都是通過什么軟件來畫圖的呢？
了不起最近發現一個很不錯的開源項目 Mermaid，可以讓大家通過 markdown 語法來進行畫圖，使用起來非常絲滑。
下面我們通過下面的幾個例子來學習一下如何使用Mermaid。
時序圖
假設我們現在要設計一個用戶登錄的功能，用戶在前端頁面上輸入賬號和密碼，前端調用后端的接口，后端再通過查詢數據進行數據校驗，然后返回登錄成功還是失敗。這里整個系統我們分為用戶，前端，后端，數據庫四個角色。
用戶：輸入賬號和密碼
前端：發起登錄請求
后端：查詢數據庫并驗證賬號合法性
數據庫：存儲賬號信息
整個的時序圖的效果如下，我們先看效果再來分析如何實現
sequenceDiagram
actor User
participant F as 前端
participant E as 后端
participant M as 數據庫
User ->> F: 賬號/密碼
Note left of User: 用戶輸入賬號和密碼
loop 定時刷新
F ->> E: 假設這里用個刷新功能請求
E -->> F: 返回刷新結果
end
F -->> E: 請求后端接口
Note right of F:發送請求
E ->> M: 進行數據庫查詢
M ->> + E: 返回用戶信息
E -->> E: 校驗賬號密碼是否正確
E -->> - F: 返回校驗結果
F -->> User: 提示用戶登錄成功或者失敗上面的時序圖完整的代碼如上所示，仔細看一下我們就可以基本上猜到什么字符大概是什么意思，了不起這里簡單解釋一下
sequenceDiagram：是一個關鍵字，代表我們當前要繪制的是一個時序圖；
actor：創建一個用戶角色；
participant：表示系統的參與者，這里我們定義了前端，后端，數據庫三個參與者；
->> 和 -->>：一個是實線一個是虛線，表示從某個角色或者參與者到另一個角色或者參與者，如果符號前后是同一個角色或者參與者，則表示自己指向自己。如果只要連線，不想要箭頭的話，就用這種 -> 和 -->。簡單來說就是一個 - 表示實現，兩個 -- 表示虛線，一個箭頭表示沒有箭頭，兩個箭頭表示一個箭頭。
Note ... of ...：表示在某個角色或者參與者的左邊或者右邊添加一個備注；
loop ... end..：表示一個循環；
怎么樣看上去是不是很簡單的樣子，保證大家三分鐘就能學會，快實操起來吧。
甘特圖
除了時序圖，還有一種比較常見的就是甘特圖，雖然這種圖開發人員一般很少會用到，但是對于一些項目管理或者有明顯的時間節點要求的項目，還是經常會用到的。
上面的甘特圖代碼如下所示
gantt
title 會員體系項目
dateFormat YYYY-MM-DD
section 需求
輸出PRD文檔:a1, 2023-05-09, 3d
PRD評審:a2, after a1 , 1d
UED評審:after a2 , 1d
section 開發
技術方案設計:a3,2023-05-14,3d
技術方案評審:a4,after a3,1d
技術開發:a5,after a4,10d
section 測試
用例評審:a6,after a5,1d
測試:after a6,5d這里甘特圖的效果還是可以的，而且畫起來十分方便，沒有復雜的邏輯和曲線以及箭頭之類的，順序時間線往下寫就行了。只要定義好各自的任務就可以按照時間線往下寫了。
gantt：甘特圖的關鍵字；
title：定義一個項目名稱；
dataFormat：定義號日期的格式；
section：每個 section 可以表示一個角色分組，可以具體到某個人都是可以的；
section 下面的每一行就是各個任務和起始時間以及需要的時長，可以定義指定開始時間，可以依賴上一個任務相對時間。
甘特圖的繪制還是十分簡單的，基本上就是定義一個個任務的邏輯，只要設置好開始時間和時長就可以了，看起來和寫起來很簡潔和方便。
流程圖
除了上面的時序圖和甘特圖之外，我們常用的還會有流程圖，還是參考我們上面登錄的例子，這次我們用流程圖來實現。
graph TB
User(用戶) --> F[輸入賬號密碼]
F --前端請求后端接口---> C[后端邏輯]
C ==> D{校驗賬號密碼}
D -.yes.-> E((登錄成功))
D -.no.-> F
E --> Finish(進入首頁)上面的例子的代碼如下，簡單說明下
graph TB：表示流程圖的方向，TB/TD 表示從上到下，BT 表示從下到上，RL 表示從右到左，LR 表示從左到右；
()：圓括號表示起止框；
[]：中括號表示處理邏輯
--前端請求后端接口--->：表示包含文字和箭頭的實線，如果不要箭頭就去掉> 就好；
==>：表示線條加粗，如果不加粗用 --> 即可；
{}：表示邏輯判斷；
-.yes.->：表示虛線有箭頭；
簡單的流程圖差不多就是上面這樣，不過說實話，流程圖的效果沒有時序圖和甘特圖的效果好，感覺流程圖畫起來有點復雜和丑了，不過也還是可以用的。
總結
除了上面的幾種圖形之外 mermaid 還支持類圖，狀態圖，ER 圖等等，在官方提供的站點上，我們可以進行體驗，地址是這個：https://mermaid.live，感興趣的小伙伴可以去體驗一下。
好了今天的文章就到這里，覺得有用的小伙伴記得三連走起，讓更多的小伙伴看到哦。
