原來使用代碼也可以畫時序圖，用這個Mermaid就行，真香

本文首發于我的個人掘金博客，看到很多人都比較喜歡這篇文章，分享給大家。

個人博客主頁：https://www.aijavapro.cn

個人掘金主頁：juejin.cn/user/2359988032644541/posts

個人知識星球:? 覺醒的新世界程序員

一、背景

?在軟件開發和系統設計中，時序圖是一種重要的工具，用于描述不同組件或對象之間的交互關系。傳統上，繪制時序圖需要使用專業的圖形工具或繪圖軟件，但現在有了Mermaid文本語法，我們可以通過簡單的文本輸入快速生成時序圖。效率提升的不是一丁點，是非常一大步，我們只需要用文字的形式，將流程圖表達出來接客。本篇博客將介紹如何使用Mermaid相關的說明。

主要分享下：

1、什么是Mermaid

2、Mermaid的優勢

3、使用Mermaid繪制基本的時序圖，以系統常見的功能為例：

應用程序啟動過程
用戶登錄流程
訂單支付履約流程

二、什么是Mermaid

Mermaid是一個開源的圖表庫，它允許我們使用簡單的文本語法來定義和繪制各種類型的圖表，包括流程圖、時序圖、甘特圖等。Mermaid支持多種輸出格式，包括SVG、PNG和PDF，使得生成和共享圖表變得非常方便。

官方地址為：https://mermaid.js.org/

官方的在線編輯效果預覽地址為：https://develop.git.mermaid.live/edit

官方的關于時序圖的說明文檔：http://mermaid.js.org/syntax/sequenceDiagram.html

為了看到一個效果，我們先看下最后的成品效果，假設想要表達一個【應用程序】啟動的過程，那么我們用該語法代碼，會生成一個如下的圖：

看著是不是有一種非常簡潔的感覺，其實這就是mermaid這種文本繪圖提供的功能，看起來非常不錯，如果我們能通過梳理一種語法來表達出我們的一個業務，那么實際上不需要拖動一些UI元素，就可以實現一個統一效果和展示的，非常可以提高我們日常開發工作中的文檔編寫，業務表達等等的一些效率。那么上面的這個圖是如何生成的呢，其實只需要寫個如下代碼就行了：

sequenceDiagramparticipant Userparticipant Applicationparticipant SpringBootparticipant DataSourceparticipant ServiceUser->>Application: 打開應用程序Application->>SpringBoot: 啟動Spring Boot應用SpringBoot->>DataSource: 初始化數據源DataSource-->>SpringBoot: 返回數據源配置SpringBoot->>Service: 注冊服務Service-->>SpringBoot: 返回服務注冊結果SpringBoot-->>Application: Spring Boot啟動成功Application-->>User: 顯示應用界面

你是不是想問，這個文本再什么軟件里編寫呢，針對這個問題，目前大多數支持MD文檔的軟件都進行了支持，我這里提供幾個方法：

2.1、使用官方的在線編輯器：

https://develop.git.mermaid.live/edit

2.2、使用飛書云文檔中的代碼繪圖

如果當前自己的企業用到了飛書，個人是非常建議使用這個的，飛書還未我們提供了一些樣式的設置，同樣針對這個圖，我們可以生成類似的如下效果

2.3、在Typora中使用

2.4、vuepress中使用

在vuepress中我們也可以使用mermaid插件，來實現業務時序圖的分享。

針對1.x版本的vuepress中，可以安裝mermaidjs的依賴來實現代碼繪圖，首先在當前項目下的package.json文件中增加上插件的依賴： "vuepress-plugin-mermaidjs": "1.9.1"，然后執行下npm install安裝依賴：

"devDependencies": {"dayjs": "^1.9.7","vuepress": "^1.9.7","vuepress-plugin-baidu-tongji": "^1.0.1","vuepress-plugin-dynamic-title": "^1.0.0","vuepress-plugin-mermaidjs": "1.9.1","vuepress-plugin-one-click-copy": "^1.0.6","vuepress-theme-vdoing": "^1.12.8"}

安裝完成后，在博客的config.js文件中，引入當前插件的依賴：

plugins: [[ 'mermaidjs', { gantt: { barHeight: 40 }}]]

2.5、在HTML文檔

可以在Html文檔中或Vue中集成這個JS的地址，也是可以使用的。

三、Mermaid的優勢

當我們使用Mermaid來繪制圖表時，會帶來許多優勢，特別是對程序員來說。以下是針對程序員的10個Mermaid優勢：

簡單易用：Mermaid使用直觀的文本語法，無需復雜的圖形工具或編程技能，即可輕松生成各種類型的圖表。
快速編輯和更新：由于Mermaid圖表是以文本形式定義的，程序員可以非常快速地編輯、更新和修改圖表，節省了大量時間和精力。
版本控制友好：Mermaid圖表可以與代碼一起存儲在版本控制系統中，使得團隊成員可以輕松共享和協作，也方便進行版本比較和合并。
可嵌入到文檔和項目中：Mermaid圖表可以嵌入到各種文檔格式中，如Markdown、HTML、PDF等，方便與其他文檔和項目集成，提高文檔的可讀性和可視化效果。
支持多種輸出格式：Mermaid支持將圖表導出為多種格式，如SVG、PNG和PDF，適應不同的需求和平臺。
跨平臺支持：Mermaid可以在各種操作系統和環境下運行，包括Windows、macOS和Linux，為不同平臺的程序員提供一致的圖表繪制體驗。
豐富的圖表類型：除了時序圖，Mermaid還支持繪制流程圖、甘特圖、類圖等多種圖表類型，滿足不同場景下的需求。
易于分享和展示：Mermaid圖表可以通過鏈接、圖片或嵌入代碼的方式進行分享和展示，方便與團隊成員、客戶或其他相關人員交流和溝通。
可自定義樣式：Mermaid提供了一些基本的樣式設置，如顏色、邊框、字體等，程序員可以根據需要自定義圖表的外觀和風格，使其更符合項目要求。
社區支持和活躍度：Mermaid擁有活躍的開源社區，提供大量的文檔、示例和工具，程序員可以從中獲取幫助、學習和交流，快速掌握和應用Mermaid的技巧和最佳實踐。

這些優勢可以讓Mermaid成為程序員在繪制圖表時的首選工具，幫助他們提高效率、簡化工作流程，并提升代碼和文檔的可視化質量。

四、使用Mermaid繪制基本的時序圖

剛才我們繪制了一個應用啟動的一個簡單的流程圖，我們接下來在分享2個，每個圖都有一些特殊的效果設計和展示，大家可以多多體會和學習。

4.1、用戶登錄流程

以下是一個典型的語法描述：

sequenceDiagramautonumberactor User as 用戶participant Frontend as 前端頁面participant Backend as 后端服務器participant Database as 數據庫participant AuthProvider as 認證服務提供商User->>+Frontend: 打開登錄頁面activate FrontendFrontend->>+User: 顯示登錄表單User->>+Frontend: 輸入用戶名和密碼deactivate FrontendFrontend->>+Backend: 發送登錄請求activate BackendBackend->>+AuthProvider: 驗證用戶身份activate AuthProviderAuthProvider-->>-Backend: 返回用戶認證結果deactivate AuthProviderBackend->>-Frontend: 返回認證結果deactivate Backendactivate FrontendFrontend->>+User: 根據結果顯示成功或失敗消息User->>+Frontend: 點擊授權按鈕Frontend->>+User: 跳轉至認證服務提供商頁面deactivate Frontendactivate UserUser->>+AuthProvider: 授權登錄activate AuthProviderAuthProvider-->>-User: 返回授權結果deactivate AuthProviderUser->>-Frontend: 返回授權結果deactivate Useractivate FrontendFrontend->>+Backend: 發送授權信息activate BackendBackend->>+Database: 存儲用戶登錄狀態activate DatabaseDatabase-->>-Backend: 返回存儲結果deactivate DatabaseBackend-->>-Frontend: 返回授權結果deactivate BackendFrontend->>+User: 根據結果跳轉至相應頁面

顯示的效果如下：

以上代碼使用Mermaid語言來描述了電商用戶登錄流程。其中，參與流程的角色有：用戶（User）、前端頁面（Frontend）、后端服務器（Backend）、數據庫（Database）和認證服務提供商（AuthProvider）。演示的流程包括用戶打開登錄頁面、輸入用戶名和密碼、發送登錄請求、驗證用戶身份、返回認證結果、顯示成功或失敗消息、跳轉至認證服務提供商頁面、授權登錄、返回授權結果、存儲用戶登錄狀態等步驟。

其中autonumber指令代表了顯示操作序號，actor代表了一個時序圖的小人，participant代表了一個個參與的角色。同時->>代表了從左向右的包含箭頭的指令，-->>代表了一個包含返回值的指令。activate和deactivate代表了時序圖激活的一個區域。

4.2、訂單支付履約流程

我們使用mermaid生成了一個這樣的圖：

使用它的一個mermaid的語法如下：

---
title: 訂單支付時序圖
config:theme: basethemeVariables:primaryColor: "#ff8c1f"mermaid-container: "#ff8c1f"
---
sequenceDiagram 
autonumber
actor 用戶  
participant 訂單服務  
participant 支付服務  
participant 銀行服務  
participant 履約服務  用戶->>訂單服務: 創建訂單 
Note right of 用戶: 此處需要注意庫存問題
訂單服務->>支付服務: 發送支付請求  
支付服務->>銀行服務: 銀行扣款  
銀行服務-->>支付服務: 返回扣款結果  
支付服務-->>訂單服務: 更新訂單狀態
Note over 訂單服務,支付服務: 此處需要注意冪等性 
訂單服務->>履約服務: 發貨
Note right of 銀行服務: 此處需要注意下游履約情況
履約服務-->>用戶: 完成發貨
用戶->>訂單服務: 確認收貨  
訂單服務->>訂單服務: 更新訂單狀態為已收貨  
Note right of 訂單服務: 此處需要保障事務
訂單服務->>訂單服務: 返回更新后的訂單狀態  
訂單服務-->>用戶: 返回更新后的訂單狀態

里面用到了Note Over/Right這種語法，增加了一些黃色的標簽，體驗感覺又上了一層樓。其中通過如下指定了一個主題和顏色為橙色:

 theme: basethemeVariables:primaryColor: "#ff8c1f"mermaid-container: "#ff8c1f"

我們也可以更改為其他主題，比如綠色的主題：

看到這個綠色主題的就更加體驗好了。

關于主題的說明，官方文檔的連接如下：

http://mermaid.js.org/config/theming.html

這些指令在mermaid的官方教程文檔中都有，想深入了解的可以去學習一下：

http://mermaid.js.org/syntax/sequenceDiagram.html

五、總結

Mermaid是一個基于文本的流程圖和時序圖生成工具，對于程序員來說具有很高的價值。它可以幫助程序員更好地理解和設計程序的結構和流程，同時可以方便地與團隊成員共享和協作。使用Mermaid，程序員可以快速生成流程圖和時序圖，從而更好地表達自己的想法和設計思路，提高開發效率和代碼質量。此外，Mermaid還支持自定義樣式和主題，可以讓程序員自由地定制圖表的顏色、字體等樣式，使圖表更加美觀和易于理解。總之，Mermaid可以幫助程序員更好地溝通和協作，提高開發效率和質量，是一款非常實用的工具。

好了，看到這里，趕緊去嘗試吧，如果你安裝過typora，可以使用它。如果你有飛書云文檔，可以用它。

如果本篇文章對你有用，可以分享，點贊，收藏，關注哦。

感興趣的可以加入我的個人知識星球：覺醒的新世界程序員。

目前星球人數超過1200，最近我在星球內分享開源設計相關的系列分享。想學一點開源設計的可以一起來哦