Mermaid 語法教學｜用文字畫流程圖、循序圖、甘特圖，AI 時代高效的圖表工具
kyle

開會時在白板上畫了一張流程圖，大家討論得很熱烈，結果會後要整理成文件的時候，還得打開 Draw.io 或 Visio 一個一個方塊慢慢拖、慢慢對齊，光是畫圖就花掉半小時。更痛苦的是，需求一改、流程一調，整張圖又得重拉，如果能以文字來描述圖表，文字格式的圖表不但可以放進 Git 做版本控制、方便團隊協作 code review，更重要的是——可以直接請 AI 幫忙生成和修改圖表。跟 AI 說「幫我畫一個使用者登入的循序圖」，幾秒鐘就能拿到結果，比自己拖拉快太多了。

而在文字圖表的工具中，Mermaid 是目前最主流的選擇。GitHub、GitLab、Notion、HackMD 都原生支援，直接在 Markdown 裡面寫就能渲染成圖，不需要額外安裝任何東西。這篇文章會從零開始帶大家認識 Mermaid 的各種圖表語法，學完之後不管是畫流程圖、循序圖、甘特圖，都能用幾行文字搞定。

什麼是 Mermaid

Mermaid 是一個用 JavaScript 打造的圖表渲染引擎，讓我們用類似 Markdown 的純文字語法來描述圖表，然後自動渲染成 SVG 圖片。它的設計理念很簡單：畫圖不該是一件麻煩的事，用寫的比用拖的快。

舉個例子，要畫一個「開始 → 處理 → 結束」的流程圖，只需要這樣寫：

flowchart LR
    開始 --> 處理 --> 結束

就這麼簡單，Mermaid 會自動幫忙排版、對齊、畫箭頭。

點此觀看執行結果：https://ai.klab.tw/mermaid/01KNPB9A0S01

哪些平台支援 Mermaid

Mermaid 已經被很多主流平台原生支援，不需要安裝外掛就能直接在 Markdown 文件裡渲染：

平台支援方式
GitHub在 Markdown 的 ```mermaid 區塊自動渲染
GitLab同 GitHub，Markdown 原生支援
NotionCode block 選擇 Mermaid 語言
HackMDMarkdown 原生支援
VS Code安裝 Mermaid 預覽擴充套件
Obsidian內建 Mermaid 支援

在哪裡練習

學語法最快的方式就是邊寫邊看結果。推薦使用我做的 Mermaid 即時編輯工具 ，左邊寫語法、右邊即時預覽，還能匯出成 SVG 或 PNG 圖片。如果語法寫錯了，工具內建的 AI 語法修正功能可以快速幫忙找出問題並修復，非常方便（但我使用免費的 AI Token，如果出現無法執行可能是當天的額度用完了😅）。

Flowchart 流程圖

流程圖是 Mermaid 最基本也最常用的圖表類型，適合描述任何「從 A 到 B」的流程，像是審核流程、系統架構、決策判斷等等。

基本語法

流程圖的第一行要宣告圖表類型和方向。flowchart 後面接方向：TD（上到下）、LR（左到右）是最常用的兩種。

flowchart TD
    A[開始] --> B[處理資料]
    B --> C{是否成功?}
    C -->|是| D[儲存結果]
    C -->|否| E[顯示錯誤]
    D --> F[結束]
    E --> F

這裡有幾個重點：

  • A[文字]：方括號 = 方形節點
  • C{文字}：大括號 = 菱形節點（用來表示判斷）
  • -->：箭頭連線
  • -->|文字|：帶標籤的箭頭，可以在連線上加說明

點此觀看執行結果：https://ai.klab.tw/mermaid/01KNPB9A0S11

節點形狀

Mermaid 提供多種節點形狀，根據不同情境選用：

語法形狀常見用途
A[文字]方形一般步驟、動作
A(文字)圓角方形一般步驟（較柔和）
A{文字}菱形判斷、條件分支
A([文字])體育場形開始/結束
A((文字))圓形連接點
A[[文字]]子程序子流程、函式

連線類型

除了基本的箭頭，Mermaid 也支援多種連線樣式：

語法說明
A --> B實線箭頭
A --- B實線無箭頭
A -.-> B虛線箭頭
A ==> B粗線箭頭
A -->|文字| B帶標籤的箭頭

節點樣式（style）

預設的節點都是同一種顏色，如果想要讓特定節點有不同的視覺效果，可以用 style 語法來自訂填充色、邊框色、文字色等屬性：

flowchart LR
    A[開始] --> B[處理中] --> C[完成]
    style A fill:#e1f5fe,stroke:#0288d1,color:#01579b
    style B fill:#fff3e0,stroke:#ef6c00,color:#e65100
    style C fill:#e8f5e9,stroke:#2e7d32,color:#1b5e20

style 節點ID 後面接 CSS 屬性，常用的有 fill（填充色）、stroke（邊框色）、color（文字色）、stroke-width（邊框粗細）。

點此觀看執行結果：https://ai.klab.tw/mermaid/01KNPB9A0S12

樣式類別（classDef）

如果有很多節點要套用同一種樣式，一個一個寫 style 會很冗長。這時候可以用 classDef 先定義樣式類別，再用 class 一次套用到多個節點：

flowchart TD
    A([開始]) --> B[驗證輸入]
    B --> C{格式正確?}
    C -->|是| D[儲存資料]
    C -->|否| E[顯示錯誤]
    D --> F([結束])
    E --> F

    classDef success fill:#e8f5e9,stroke:#2e7d32,color:#1b5e20
    classDef danger fill:#ffebee,stroke:#c62828,color:#b71c1c
    classDef normal fill:#e3f2fd,stroke:#1565c0,color:#0d47a1

    class A,F normal
    class D success
    class E danger

classDef 類別名稱 定義樣式，class 節點ID 類別名稱 套用樣式，多個節點可以用逗號隔開。也可以在定義節點時直接用 ::: 語法套用，例如 A([開始]):::normal。

點此觀看執行結果：https://ai.klab.tw/mermaid/01KNPB9A0S13

實際範例：文章審核流程

假設要畫一個文章發佈的審核流程給團隊看：

flowchart TD
    A([作者提交文章]) --> B[編輯初審]
    B --> C{內容是否合格?}
    C -->|合格| D[主編複審]
    C -->|需修改| E[退回作者修改]
    E --> A
    D --> F{是否通過?}
    F -->|通過| G[排程發佈]
    F -->|不通過| E
    G --> H([文章上線])

    classDef start fill:#e3f2fd,stroke:#1565c0,color:#0d47a1
    classDef process fill:#f3e5f5,stroke:#7b1fa2,color:#4a148c
    classDef decision fill:#fff3e0,stroke:#ef6c00,color:#e65100
    classDef reject fill:#ffebee,stroke:#c62828,color:#b71c1c
    classDef success fill:#e8f5e9,stroke:#2e7d32,color:#1b5e20

    class A,H start
    class B,D process
    class C,F decision
    class E reject
    class G success

這段文字丟到任何支援 Mermaid 的平台上，就會自動渲染成一張清楚的流程圖，完全不需要手動排版。

點此觀看執行結果：https://ai.klab.tw/mermaid/01KNPB9A0S14

Sequence Diagram 循序圖

循序圖適合描述多個角色或系統之間的互動順序，像是 API 呼叫流程、使用者操作步驟、微服務之間的通訊等。如果要跟工程師溝通「這個功能前後端怎麼互動」，循序圖是最好的工具。

基本語法

sequenceDiagram
    participant 使用者
    participant 前端
    participant 後端
    participant 資料庫

    使用者->>前端: 輸入帳號密碼
    前端->>後端: POST /api/login
    後端->>資料庫: 查詢使用者資料
    資料庫-->>後端: 回傳使用者資料
    後端-->>前端: 回傳 JWT Token
    前端-->>使用者: 登入成功，跳轉首頁

幾個語法重點：

  • participant：宣告參與者，會依照宣告順序排列
  • ->>：實線箭頭（請求）
  • -->>：虛線箭頭（回應）
  • 冒號後面是訊息內容

點此觀看執行結果：https://ai.klab.tw/mermaid/01KNPB9A0S21

進階語法：條件與迴圈

循序圖還支援 alt（條件分支）和 loop（迴圈）語法，可以表達更複雜的邏輯：

sequenceDiagram
    participant 用戶
    participant 伺服器

    用戶->>伺服器: 登入請求

    alt 帳號密碼正確
        伺服器-->>用戶: 登入成功
    else 密碼錯誤
        伺服器-->>用戶: 密碼錯誤，請重試
    end

    loop 每 30 秒
        用戶->>伺服器: 心跳檢查
        伺服器-->>用戶: 連線正常
    end

alt 和 else 用來表示「如果…否則…」的情況，loop 用來表示重複執行的動作，最後都要用 end 結尾。

點此觀看執行結果：https://ai.klab.tw/mermaid/01KNPB9A0S22

Class Diagram 類別圖

類別圖用來描述資料之間的結構和關聯，不只工程師在設計系統架構時會用到，PM 在規劃資料模型、或是跟團隊討論「這些資料之間的關係是什麼」的時候也很實用。

基本語法

classDiagram
    class 使用者 {
        +String 姓名
        +String 信箱
        +登入()
        +登出()
    }

    class 訂單 {
        +int 訂單編號
        +Date 建立日期
        +String 狀態
        +計算金額()
    }

    class 商品 {
        +String 名稱
        +int 價格
        +int 庫存
    }

    使用者 "1" --> "*" 訂單 : 建立
    訂單 "*" --> "*" 商品 : 包含

語法重點：

  • class 名稱 { }：定義一個類別，裡面放屬性和方法
  • + 表示公開、- 表示私有
  • "1" --> "*"：表示一對多關聯，* 代表多個
  • 冒號後面是關聯的說明文字

點此觀看執行結果：https://ai.klab.tw/mermaid/01KNPB9A0S31

State Diagram 狀態圖

狀態圖用來描述一個東西在不同狀態之間怎麼轉換，很適合用在訂單狀態、工單流程、任務管理等情境。

基本語法

stateDiagram-v2
    [*] --> 待付款

    待付款 --> 已付款 : 完成付款
    待付款 --> 已取消 : 取消訂單

    已付款 --> 準備出貨 : 開始處理
    準備出貨 --> 已出貨 : 寄出商品
    已出貨 --> 已送達 : 買家簽收

    已送達 --> 已完成 : 確認收貨
    已送達 --> 退貨中 : 申請退貨
    退貨中 --> 已退貨 : 退貨完成

    已完成 --> [*]
    已取消 --> [*]
    已退貨 --> [*]

語法重點：

  • [*]：代表起始或結束狀態
  • 狀態A --> 狀態B : 事件：狀態轉換和觸發條件
  • 使用 stateDiagram-v2 可以啟用新版語法，支援更多功能

像這樣一張訂單狀態圖，如果用拖拉工具畫可能要十幾分鐘，但用 Mermaid 寫不到一分鐘就搞定。

點此觀看執行結果：https://ai.klab.tw/mermaid/01KNPB9A0S41

Gantt Chart 甘特圖

甘特圖是專案管理的經典工具，用來呈現任務的時程安排。Mermaid 的甘特圖語法直覺好懂，很適合在技術文件或提案中快速列出專案排程。

基本語法

gantt
    title 網站改版專案時程
    dateFormat YYYY-MM-DD

    section 規劃階段
    需求訪談           :a1, 2026-04-01, 5d
    wireframe 設計     :a2, after a1, 3d

    section 開發階段
    前端開發            :b1, after a2, 10d
    後端 API 開發       :b2, after a2, 8d
    資料庫設計          :b3, after a2, 4d

    section 測試與上線
    整合測試            :c1, after b1, 5d
    UAT 使用者驗收      :c2, after c1, 3d
    正式上線            :milestone, after c2, 0d

語法重點：

  • title：圖表標題
  • dateFormat：日期格式
  • section：用來分群組
  • 任務格式：任務名稱 :id, 開始日期, 持續天數
  • after a1：表示在某任務之後才開始
  • milestone：里程碑，不佔時間

甘特圖特別適合放在專案提案或週報裡，一目了然。

點此觀看執行結果：https://ai.klab.tw/mermaid/01KNPB9A0S51

ER Diagram 實體關聯圖

實體關聯圖（Entity-Relationship Diagram）是資料庫設計的基本工具，用來描述資料表之間的關聯。不管是在規劃新系統的資料庫、還是要跟團隊說明現有的資料結構，ER 圖都是最直覺的方式。

基本語法

erDiagram
    CUSTOMER ||--o{ ORDER : "下單"
    ORDER ||--|{ ORDER_ITEM : "包含"
    PRODUCT ||--o{ ORDER_ITEM : "被購買"

    CUSTOMER {
        int id PK
        string name
        string email
        date created_at
    }

    ORDER {
        int id PK
        int customer_id FK
        date order_date
        string status
    }

    ORDER_ITEM {
        int id PK
        int order_id FK
        int product_id FK
        int quantity
        decimal price
    }

    PRODUCT {
        int id PK
        string name
        decimal price
        int stock
    }

語法重點：

  • erDiagram：宣告圖表類型
  • 每個實體用 名稱 { } 定義欄位，可以標記 PK（主鍵）和 FK（外鍵）
  • 關聯用特殊符號表示，冒號後面是關聯說明

點此觀看執行結果：https://ai.klab.tw/mermaid/01KNPB9A0S61

關聯符號對照表

ER 圖的關聯符號一開始可能不太好記，整理成對照表會比較清楚：

符號意義
||--||一對一
||--o{一對零或多
||--|{一對一或多
}o--o{零或多對零或多

左邊的符號代表左側實體的數量，右邊代表右側實體的數量。o 表示「零個也可以」，| 表示「至少一個」，{ 表示「多個」。

Pie Chart 圓餅圖

圓餅圖用來呈現比例分配，語法非常簡單，幾行就能畫出來。適合在文件裡快速展示預算分配、使用比例、問卷結果等數據。

基本語法

pie title 專案時間分配
    "開發" : 45
    "測試" : 25
    "會議" : 15
    "文件撰寫" : 10
    "其他" : 5

語法重點：

  • pie：宣告圓餅圖，後面可以接 title 設定標題
  • 每一行是 "標籤" : 數值，Mermaid 會自動計算百分比
  • 數值不需要加總到 100，Mermaid 會依照比例分配

圓餅圖是所有 Mermaid 圖表裡語法最簡單的，幾乎不需要學就能上手。

點此觀看執行結果：https://ai.klab.tw/mermaid/01KNPB9A0S71

Mind Map 心智圖

心智圖用來展開一個主題的各種面向，很適合腦力激盪、知識整理、或是學習筆記。Mermaid 的心智圖語法用縮排來表示層級關係，寫起來非常直覺。

基本語法

mindmap
  root((網站開發))
    前端
      HTML
      CSS
      JavaScript
        React
        Vue
    後端
      Node.js
      Python
      Java
        Spring Boot
    資料庫
      MySQL
      PostgreSQL
      MongoDB
    部署
      Docker
      AWS
      GCP

語法重點：

  • mindmap：宣告心智圖
  • 第一個節點是根節點，用 root((文字)) 可以設定圓形樣式
  • 用縮排（空格）來表示階層關係，子節點比父節點多縮排幾格
  • 不需要手動畫連線，Mermaid 會依照縮排自動連接

心智圖最大的優點就是跟手寫筆記一樣直覺，只要把想到的東西用縮排排好就行了。點此觀看執行結果：https://ai.klab.tw/mermaid/01KNPB9A0S81

搭配 AI 使用 Mermaid

Mermaid 用文字描述圖表的特性，跟 AI 簡直是天作之合。不需要記住所有語法，只要用自然語言描述想要的圖表，AI 就能幫忙生成。

讓 AI 幫忙畫圖

舉個例子，可以直接跟 ChatGPT、Claude 或任何 AI 說：

幫我用 Mermaid 畫一個使用者註冊的循序圖，
流程是：使用者填寫表單 → 前端驗證格式 → 送到後端 →
後端檢查 email 是否已存在 → 如果已存在回傳錯誤，
如果不存在就建立帳號並寄驗證信

AI 會直接給一段可以渲染的 Mermaid 語法，再複製到 Mermaid 編輯器 裡預覽和微調就好。比自己從零開始寫快很多，特別是畫複雜的圖表時。

修改與迭代

AI 生成的圖表如果不完全符合需求，因為 Mermaid 是純文字格式，可以：

  • 直接自己改文字（加個節點、改個箭頭方向）
  • 把現有的 Mermaid 語法丟給 AI，請它幫忙調整特定部分
  • 用 AI 把一種圖表轉換成另一種（例如流程圖轉狀態圖）

這種「AI 生成初版 → 人工微調」的工作流程，比傳統拖拉畫圖的效率高出很多，也是為什麼文字格式的圖表在 AI 時代特別有價值。如果語法不確定有沒有寫對，Mermaid 編輯器 內建的 AI 語法修正功能可以自動偵測並修復常見錯誤，省去自己除錯的時間。

常用語法速查表

最後整理一張快速對照表，方便隨時查閱：

圖表類型關鍵字適合場景
流程圖flowchart TD/LR流程、決策、系統架構
循序圖sequenceDiagramAPI 互動、系統通訊
類別圖classDiagram資料模型、系統設計
狀態圖stateDiagram-v2狀態流轉、工單流程
甘特圖gantt專案時程、排程規劃
ER 圖erDiagram資料庫設計、資料關聯
圓餅圖pie比例分配、數據呈現
心智圖mindmap腦力激盪、知識整理

Mermaid 的語法不難，但真正的價值在於它改變了畫圖的方式。當圖表變成文字，它就能被版控、被搜尋、被 AI 生成和修改。不管是工程師、PM、還是技術寫作者，花個十分鐘學會 Mermaid，之後每次畫圖都能省下大量時間。打開 Mermaid 編輯器 ，把文章裡的範例貼上去動手試試看吧！

Post Views: 39
Tags: