概述

Mermaid（美人魚）是一套markdown語法規範，用來在markdown文件中定義圖形，包括流程圖、序列圖、甘特圖等等。

它的官方網站是 https://mermaid-js.github.io/mermaid/#/

另外有一個線上的測試網站 https://mermaid.live

強烈建議用這個來編寫，因為有語法智慧提示，還能實時看到效果。寫好後，再複製到你的文件裡面來，mermaid 還提供了可以將圖形文字生成網頁地址，或者圖形連結的功能，可以很方便地進行分享

如何使用

部落格園預設就支援mermaid，它的語法很簡單，下面是一個簡單的例子

```mermaid
 graph LR;
 A[Wiki supports Mermaid] --> B[Visit https://mermaidjs.github.io/ for Mermaid syntax];
```
 

在文章中呈現的樣子如下

graph LR; A[Wiki supports Mermaid] --> B[Visit https://mermaidjs.github.io/ for Mermaid syntax];

流程圖（Flowchart）

用來描述一個系統流程，通常在需求分析階段很有用

基本用法

graph LR
    A(員工發起審批)--> B{經理是否審批}
    B --> |同意| C[財務報銷]
    B --> |拒絕| A
    C --> E(結束)

graph LR A(員工發起審批)--> B{經理是否審批} B --> |同意| C[財務報銷] B --> |拒絕| A C --> E(結束)

語法解釋

詳情參考 https://mermaid-js.github.io/mermaid/#/flowchart

1. graph 定義了一個流程圖
2. LR 表示從左（LEFT)至右(RIGHT)，水平流程圖。如果不寫，則是從上至下（TD:TOP DOWN， 或TB:TOP BUTTOM）
3. A,B,C,D,E 這些都是節點的代號，可以用任意字元，通常用簡單的英文字母即可。mermaid內部會記錄和複用這些節點代號，類似於變數的機制
4. --> 表示連線線，包括方向。在箭頭後面跟著的 |文字| 是定義要顯示在連線線上的文字

   還支援 --- , -- 文字 --> 等組合用法

5. 代號後面的文字，用來作為節點的顯示文字（如果提供了的話）。
6. () 表示一個帶有圓角的矩形，{}表示一個判斷條件，[] 表示一個沒有圓角的矩形

   還支援([]), [[]],(()),[()],{{}},{//},{\},((())) 等多種組合用法

序列圖（Sequence)

序列圖是一種互動圖，它顯示了程序如何相互作用以及以何種順序執行。

基本用法

sequenceDiagram
    actor user as 小明
    participant client as Outlook 客戶端
    participant website as Azure Blob storage
    participant aad as Azure Active Directory
    participant sbux as Starbucks backend service

    user ->> client : 開啟星巴克外掛
    client->>+ website : 訪問網頁
    website-->>- user : 要求登入
    user->>+ aad : 身份驗證
    aad-->>- website : 授權成功
    user->>+ website : 門店查詢
    website-->> sbux : 介面呼叫
    sbux -->> website : 返回門店列表
    website -->> user : 返回

sequenceDiagram actor user as 小明 participant client as Outlook 客戶端 participant website as Azure Blob storage participant aad as Azure Active Directory participant sbux as Starbucks backend service user ->> client : 開啟星巴克外掛 client->>+ website : 訪問網頁 website-->>- user : 要求登入 user->>+ aad : 身份驗證 aad-->>- website : 授權成功 user->>+ website : 門店查詢 website-->> sbux : 介面呼叫 sbux -->> website : 返回門店列表 website -->> user : 返回

語法解釋

詳情參考 https://mermaid-js.github.io/mermaid/#/sequenceDiagram

1. sequenceDiagram 定義這是一個序列圖
2. 頂部的參與者定義，並不是必須的，但用這種語法定義更加清晰 actor是指人，participant一般是指系統， 用 as 語法可以重新命名
3. 參與者之間連線符， 常見的有 ->,-->,->>,-->>,-x,--x,-),--)， 兩個短線表示虛線，一個短線表示實線
4. 在箭頭的右側的 +,- 指的是UML中的 activate 的意思
5. 還支援並行 par語法，迴圈 loop 語法等，可以參考官方文件

甘特圖（Gantt)

甘特圖用來表示專案計劃或進度

基本用法

gantt
    title 專案進度
    dateFormat  YYYY-MM-DD
    axisFormat  %m-%d
    excludes sunday,monday,tuesday,friday,2014-03-01
    section 第一階段
    需求分析           :crit, a1, 2014-01-01, 30d
    設計評審           :after a1, 20d

    section 第二階段
    第一批測試      :done, 2014-01-12  , 12d
    第二批測試      :24d
    客戶驗收        :milestone,2h

gantt title 專案進度 dateFormat YYYY-MM-DD axisFormat %m-%d excludes sunday,monday,tuesday,friday,2014-03-01 section 第一階段 需求分析 :crit, a1, 2014-01-01, 30d 設計評審 :after a1, 20d section 第二階段 第一批測試 :done, 2014-01-12 , 12d 第二批測試 :24d 客戶驗收 :milestone,2h

語法解釋

詳情參考 https://mermaid-js.github.io/mermaid/#/gantt

1. gantt 表示這是一個甘特圖
2. title 定義甘特圖的標題
3. dateFormat 定義甘特圖中日期顯示的格式，更多格式可以參考 https://mermaid-js.github.io/mermaid/#/gantt?id=input-date-format
4. section 定義一個一個的區域，可以包含一個或多個任務
5. 任務定義語法： 任務名稱:別名,開始日期,天數
6. 狀態的修飾語法 active（表示還沒有完成，會顯示為藍色）, done(表示已完成, 會顯示為灰色)，crit（表示關鍵任務，會顯示為紅色）
7. 任務時長：d（天）,w（周）,h(小時)，m（分鐘）
8. 任務可以有一個別名，例如上面的 a1 ，然後在其他任務中可以引用依賴，例如 after a1
9. 如果某個任務沒有寫開始日期，預設就是在上一個任務之後
10. excludes 是指要排除哪些日期，可以寫具體的日期，也可以寫 weekends(週末)，或具體的工作日，如 sunday,monday 這樣的語法，可以寫多種的組合
11. milestone 表示里程碑