Mermaid 線上編輯器 - Mermaid 語法一鍵產生流程圖、時序圖、類別圖等 21 種圖形

Mermaid 是一種基於文字語法產生圖表的工具。透過撰寫簡單的 Mermaid 程式碼，可以產生流程圖、時序圖、類別圖、狀態圖、ER 圖、甘特圖、心智圖、架構圖等多種圖表。

與傳統拖曳式繪圖工具不同，Mermaid 主要透過程式碼描述圖表中的節點、關係、時間順序和資料結構。修改程式碼後，圖表可以自動重新產生，因此特別適合技術文件、產品設計、專案管理、軟體開發和知識整理等場景。

本文介紹 Mermaid 基本語法，並整理 Mermaid 編輯器支援渲染的圖表類型、宣告語法、程式碼範例和使用場景。如果希望直接在線上撰寫和預覽 Mermaid 程式碼，可以免費體驗 ProcessOn Mermaid 線上編輯器。

什麼是 Mermaid？

Mermaid 是一種使用文字語法產生圖表的工具。下面的程式碼可以產生一個簡單的 Mermaid 流程圖：

flowchart TD

A[Start] --> B[Enter information]

B --> C{ Completed?}

C -->|Yes| D[End]

C -->|No| B

渲染效果如下：

其中：flowchart TD 用於宣告建立一個由上到下排列的流程圖。

Mermaid 的運作邏輯可以概括為：

撰寫 Mermaid 程式碼 → 解析程式碼 → 渲染圖表 → 修改程式碼 → 圖表即時更新

因此，學習 Mermaid 的關鍵之一，就是了解不同圖表對應的宣告語法。

Mermaid 支援哪些圖表？

不同類型的圖表使用不同的 Mermaid 宣告語法，目前常見的 Mermaid 圖形包括：

不同 Mermaid 編輯器版本對圖表的語法和功能支援可能有所變化，實際使用時應以編輯器支援的語法為準。

Mermaid 流程圖

基礎語法

Mermaid 使用 flowchart 宣告建立流程圖。最簡單的寫法：

flowchart TD

A[Start] --> B[Arrange]

B --> C[End]

渲染效果

其中：

• flowchart：宣告建立流程圖
• TD：由上到下排列
• A[Start]：建立一個節點
• -->：建立帶箭頭的連線

Mermaid 流程圖還可以使用 LR（由左到右）、RL（由右到左）、BT（由下而上） 等方向設定。例如：

flowchart LR

A[Start] --> B[Arrange] --> C[End]

表示流程圖由左到右排列。

常用語法

Mermaid 產生流程圖詳細語法請造訪以下頁面查看：https://www.processon.io/zh-tw/mermaid/flowchart

流程圖適合用於業務流程、工作流程、演算法流程、系統流程和決策流程等場景，免費體驗 Mermaid 流程圖線上編輯器。

Mermaid 時序圖

基礎語法

Mermaid 使用 sequenceDiagram 宣告建立時序圖。最簡單的範例：

sequenceDiagram

Alice->>John: Hello John

John-->>Alice: Hello Alice

渲染效果

其中：

• sequenceDiagram：表示建立一個 Mermaid 時序圖
• ->>：實線箭頭，表示非同步訊息呼叫
• -->>：虛線箭頭，表示非同步回應或返回訊息

常用語法

Mermaid 產生時序圖詳細語法請造訪以下頁面查看：https://www.processon.io/zh-tw/mermaid/sequence-diagram

時序圖適合描述使用者與系統、系統與系統、服務與服務之間按照時間順序發生的互動，免費體驗 Mermaid 時序圖線上編輯器。

Mermaid 類別圖

基礎語法

Mermaid 使用 classDiagram 宣告建立類別圖。

classDiagram

Animal <|-- Duck

Animal <|-- Fish

class Animal {

+String name

+eat()

}

class Duck {

+swim()

}

渲染效果

其中：

• classDiagram：表示建立 Mermaid 類別圖
• <|--：表示繼承關係
• +String name：表示公開的屬性與方法

常用語法

類別成員前面的 +、-、# 等符號可以表示不同的可見性。

Mermaid 產生類別圖詳細語法請造訪以下頁面查看：https://www.processon.io/zh-tw/mermaid/class-diagram

類別圖適合軟體設計、物件導向建模、程式結構分析等場景，免費體驗 Mermaid 類別圖線上編輯器。

Mermaid 狀態圖

基礎語法

Mermaid 使用 stateDiagram-v2 宣告建立狀態圖。

stateDiagram-v2

state "Pending Payment" as Pending

[*] --> Pending

Pending --> Paid

Paid --> Shipped

Shipped --> Completed

Completed--> [*]

渲染效果

其中：

• stateDiagram-v2：表示建立 Mermaid 狀態圖
• [*] -->：表示進入第一個狀態
• -->：表示狀態轉移
• --> [*]：表示狀態流程結束

常用語法

Mermaid 產生狀態圖詳細語法請造訪以下頁面查看：https://www.processon.io/zh-tw/mermaid/state-diagram

狀態圖適合表示訂單狀態、工作流程狀態、使用者狀態、系統狀態以及狀態機等，免費體驗 Mermaid 狀態圖線上編輯器。

Mermaid ER圖

基礎語法

Mermaid 使用 erDiagram 宣告建立實體關係圖，也就是 ER圖。

erDiagram

USER ||--o{ ORDER : places

ORDER ||--|{ PRODUCT : contains

渲染效果

其中：

• erDiagram：表示建立 Mermaid ER 圖
• ||--o{：一對多連接，表示一個實體對應多個實體，可以為空
• ||--|{：一對多連接，表示一個實體對應多個實體，最少 1 個

常用語法

Mermaid 產生 ER 圖詳細語法請造訪以下頁面查看：https://www.processon.io/zh-tw/mermaid/er-diagram

ER 圖可以表示實體、屬性以及實體之間的關係，常用於資料庫設計，免費體驗 Mermaid ER 圖線上編輯器。

Mermaid 心智圖語法

基礎語法

Mermaid 使用 mindmap 宣告建立心智圖。

mindmap

root((Mermaid))

Flowchart

Sequence diagram

Class diagram

Gantt chart

Mind map

渲染效果

其中：

• Mindmap：表示建立 Mermaid 心智圖
• root(())：表示建立圓形根主題

常用語法

Mermaid 產生心智圖詳細語法請造訪以下頁面查看：https://www.processon.io/zh-tw/mermaid/mindmap

心智圖主要透過縮排表示層級關係，因此非常適合知識整理、腦力激盪、課程筆記和資訊架構，免費體驗 Mermaid 心智圖線上編輯器。

Mermaid 甘特圖

基礎語法

Mermaid 使用 gantt 宣告建立甘特圖。

gantt

title Project Plan

dateFormat YYYY-MM-DD

section Design

Requirements Analysis:a1, 2026-01-01, 3d

UI Design:after a1, 2d

section Development

Front-end Development:2026-01-06, 4d

Back-end Development:2026-01-07, 4d

渲染效果

其中：

• gantt：表示建立 Mermaid 甘特圖
• title：表示甘特圖的標題
• dateFormat：定義時間軸日期解析格式
• section 設計：表示不同的任務分組

常用語法

Mermaid 產生甘特圖詳細語法請造訪以下頁面查看：https://www.processon.io/zh-tw/mermaid/gantt

Mermaid 甘特圖適合專案計畫、任務安排、開發進度與專案管理，免費體驗 Mermaid 甘特圖線上編輯器。

Mermaid 使用者旅程圖

基礎語法

Mermaid 使用 journey 宣告建立使用者旅程圖。

journey

title User purchases a product

section Browse

Search for products: 5: User

View details: 4: User

section Place order

Add to cart: 5: User

Complete payment: 3: User

渲染效果

其中：

• journey：表示建立 Mermaid 使用者旅程圖
• title：表示使用者旅程圖的標題
• section 瀏覽：表示流程階段分組
• Search for products: 5: User：定義階段內具體任務、滿意度分支、參與角色

常用語法

Mermaid 產生使用者旅程圖詳細語法請造訪以下頁面查看：https://www.processon.io/zh-tw/mermaid/user-journey-diagram

使用者旅程圖適合分析客戶從接觸產品到完成目標過程中經歷的不同步驟和體驗，免費體驗 Mermaid 使用者旅程圖線上編輯器。

Mermaid 時間軸

基礎語法

Mermaid 使用 timeline 宣告建立時間軸。

timeline

title Mermaid Development History

2019 : Project Development

2020 : Feature Expansion

2021 : More Diagram Types

渲染效果

其中：

• timeline：表示建立 Mermaid 時間軸
• title：表示時間軸標題
• 2019 : 專案發展：定義時間點對應的事件

常用語法

Mermaid 產生時間軸詳細語法請造訪以下頁面查看：https://www.processon.io/zh-tw/mermaid/timeline

時間軸適合展示歷史事件、專案發展、產品迭代和時間順序資訊，免費體驗 Mermaid 時間軸線上編輯器。

Mermaid 象限圖語法

基礎語法

Mermaid 使用 quadrantChart 宣告建立象限圖。

quadrantChart

title Product Positioning

x-axis Low Price--> High Price

y-axis Low Quality--> High Quality

quadrant-1 High-end

quadrant-2 Quality-focused

quadrant-3 Basic

quadrant-4 Value-for-money

Product A: [0.8, 0.7]

Product B: [0.3, 0.8]

渲染效果

其中：

• quadrantChart：表示建立 Mermaid 象限圖
• x-axis：定義橫軸兩端標籤
• y-axis：定義縱軸兩端標籤
• quadrant-1：設定右上象限內部標註文字
• quadrant-2：設定左上象限內部標註文字
• quadrant-3：設定左下象限內部標註文字
• quadrant-4：設定右下象限內部標註文字
• Product A: [0.8, 0.7]：定義座標點位，x/y 取值 0-1

Mermaid 產生象限圖詳細語法請造訪以下頁面查看： https://www.processon.io/zh-tw/mermaid/quadrant-chart

象限圖適合產品定位、優先順序分析、競爭分析和二維分類，免費體驗 Mermaid 象限圖線上編輯器。

Mermaid 看板圖

基礎語法

Mermaid 看板圖用於依任務狀態組織工作項目，例如待處理、進行中與已完成。典型結構可以表示為：

kanban

Todo

Task A

Task B

Doing

Task C

Done

Task D

渲染效果

其中：

• kanban：表示建立 Mermaid 看板圖
• Todo：定義看板狀態分類
• Task A：表示具體任務

Mermaid 產生看板圖詳細語法請造訪以下頁面查看： https://www.processon.io/zh-tw/mermaid/kanban

看板圖適合專案管理、任務追蹤、研發流程和工作流程管理，免費體驗 Mermaid 看板圖線上編輯器。

Mermaid 需求圖

基礎語法

需求圖可以用於表示需求、功能和系統元素之間的關係，Mermaid 使用 requirementDiagram 宣告建立需求圖。

requirementDiagram

requirement userRequirement {

id: 1

text: Customers can purchase products

risk: low

verifymethod: test

}

渲染效果

其中：

• requirementDiagram：表示建立 Mermaid 需求圖
• requirement userRequirement { }：定義基礎需求
• text：定義需求名稱
• risk：定義風險等級
• verifymethod：定義驗證方法

常用語法

Mermaid 產生需求圖詳細語法請造訪以下頁面查看： https://www.processon.io/zh-tw/mermaid/requirement-diagram

需求圖適合產品需求分析、系統工程和需求追蹤，免費體驗 Mermaid 需求圖線上編輯器。

Mermaid 圓餅圖

基礎語法

Mermaid 使用 pie 宣告建立圓餅圖。

pie showData

title Population Share by Continent

"Asia" : 59.5

"Africa" : 18.0

"Europe" : 9.0

"North America" : 7.5

"South America" : 5.5

"Oceania" : 0.5

渲染效果

其中：

• pie：表示建立 Mermaid 圓餅圖
• pie showData：表示建立一個顯示資料值的 Mermaid 圓餅圖
• title：表示圓餅圖標題
• "Asia" : 59.5：定義資料分類及佔比

Mermaid 產生圓餅圖詳細語法請造訪以下頁面查看： https://www.processon.io/zh-tw/mermaid/pie-chart

圓餅圖適合表示比例和組成關係，免費體驗 Mermaid 圓餅圖線上編輯器。

Mermaid 桑基圖

基礎語法

桑基圖主要用於表示不同節點之間的流量、資源、資金或資料流向，Mermaid 使用 sankey-beta 宣告建立桑基圖。

sankey-beta

A,B,50

A,C,30

B,D,20

C,D,30

渲染效果

其中：

• sankey-beta：表示建立 Mermaid 桑基圖
• A,B,50：定義資料流向：來源、目標和流量值
• A：左側節點，表示資料輸入來源
• B：右側節點，表示資料輸出去向
• 50：表示流量大小

Mermaid 產生桑基圖詳細語法請造訪以下頁面查看： https://www.processon.io/zh-tw/mermaid/sankey-diagram

桑基圖是一種用於顯示從一組數值到另一組數值流動的視覺化圖表，免費體驗 Mermaid 桑基圖線上編輯器。

Mermaid XY圖

基礎語法

Mermaid 使用 xychart-beta 宣告建立 XY 圖。

xychart-beta

title "Monthly Sales Data"

x-axis "Month"["Jan", "Feb", "Mar", "Apr", "May", "Jun"]

y-axis " Sales (million)" 0 --> 100

line [20, 30, 40, 35, 50, 60]

bar [30, 50, 35, 20, 45, 40]

渲染效果

其中：

• xychart-beta：表示建立 Mermaid XY 圖
• title：表示 XY 圖標題
• x-axis：表示橫軸類別和標題
• y-axis：表示縱軸範圍和標題
• line：定義折線圖資料數列
• bar：定義柱狀圖資料數列

常用語法

Mermaid 產生 XY 圖詳細語法請造訪以下頁面查看： https://www.processon.io/zh-tw/mermaid/xy-chart

XY圖適合展示資料變化、數值比較和簡單的資料視覺化，免費體驗 Mermaid XY 圖線上編輯器。

Mermaid 雷達圖

基礎語法

雷達圖適合比較多個物件在多個維度上的表現，例如能力評估、產品指標和方案比較。Mermaid 使用 radar-beta 宣告建立雷達圖。

radar-beta

title "Competency Assessment Radar Chart"

axis a["Communication Skills"], b["Logical Thinking"], c["Team Collaboration"], d["Technical Skills"]

curve A["Chenlaoda"] {80, 90, 70, 85}

curve B["Wangxiaoer"] {60, 70, 90, 80}

渲染效果

其中：

• radar-beta：表示建立 Mermaid 雷達圖
• title：定義雷達圖標題
• axis：定義雷達圖維度及名稱
• curve：定義資料數列名稱及各維度數值

常用語法

Mermaid 產生雷達圖詳細語法請造訪以下頁面查看： https://www.processon.io/zh-tw/mermaid/radar-chart

雷達圖對於需要以圓形格式清晰簡潔地表示資料的開發者、資料科學家和工程師特別有用，免費體驗 Mermaid 雷達圖線上編輯器。

Mermaid Git 圖

基礎語法

Mermaid 使用 gitGraph 宣告建立 Git 圖。

gitGraph

commit

branch develop

checkout develop

commit

checkout main

merge develop

渲染效果

其中：

• gitGraph：表示建立 Mermaid Git 圖
• commit：表示建立提交
• commit id:""：設定提交名稱
• branch：表示建立分支
• checkout：表示切換分支
• merge：表示合併分支

Mermaid 產生 Git 圖詳細語法請造訪以下頁面查看： https://www.processon.io/zh-tw/mermaid/git-graph

Git 圖適合表示 Git 提交、分支建立、分支切換與合併等版本控制過程，免費體驗 Mermaid Git 圖線上編輯器。

Mermaid C4 圖

基礎語法

Mermaid C4 圖用於軟體架構建模，可以從不同層級描述軟體系統、容器、元件以及它們之間的關係。

C4Context

title C4 Diagram of the Business System

Person(user, " User", " System user")

System(system, " Business System", " Core business system")

Rel(user, system, "Uses")

渲染效果

其中：

• C4Context：表示建立 C4 上下文圖
• title：表示 C4 圖標題
• Person(user, " User", " System user")：表示使用系統的使用者或角色
• System(system, " Business System", " Core business system")：表示需要分析的軟體系統
• Rel(user, system, "Uses")：定義兩個元素之間的呼叫、互動或資料傳遞關係

常用語法

Mermaid 產生 C4 圖詳細語法請造訪以下頁面查看： https://www.processon.io/zh-tw/mermaid/c4-diagram

C4 圖適合軟體架構設計、系統分析與技術文件，免費體驗 Mermaid C4 圖線上編輯器。

Mermaid 架構圖

基礎語法

Mermaid 使用 architecture-beta 宣告建立架構圖。

architecture-beta

group api(cloud)[API server]

service server(server)[server] in api

service database(database)[databasa] in api

server:R --> L:database

渲染效果

其中：

• architecture-beta：表示建立 Mermaid 架構圖。
• group api(cloud)[API server]：建立一個架構分組
• service server(server)[server] in api：建立一個架構元件或服務模組，並放置在架構分組中
• server:R --> L:database：指定節點連接方向，從 server 的右側指向 database 的左側

Mermaid 產生架構圖詳細語法請造訪以下頁面查看： https://www.processon.io/zh-tw/mermaid/architecture-diagram

架構圖適合表示伺服器、資料庫、雲端服務、應用服務以及不同系統元件之間的關係，免費體驗 Mermaid 架構圖線上編輯器。

Mermaid 方塊圖

基礎語法

方塊圖主要透過模組和連接關係描述系統結構，Mermaid 使用 block-beta 宣告建立方塊圖。

block-beta

A space B

A["User"] --> B["Application"]

B space C

B --> C["Database"]

渲染效果

其中：

• block-beta：表示建立 Mermaid 方塊圖
• space：加大每個單元或模組的間距
• -->：實線箭頭，表示關係走向

Mermaid 產生方塊圖詳細語法請造訪以下頁面查看： https://www.processon.io/zh-tw/mermaid/block-diagram

方塊圖適合系統模組、功能結構、技術架構和元件關係等場景，免費體驗 Mermaid 方塊圖線上編輯器。

Mermaid 封包圖

基礎語法

封包圖主要用於表示網路封包或協定資料結構中的欄位和長度，Mermaid 使用 packet-beta 宣告建立封包圖。

packet-beta

0-7: "Version"

8-15: "Type"

16-31: "Length"

渲染效果

其中：

• packet-beta：表示建立 Mermaid 封包圖
• 0-7: "Version "：表示欄位占用的 bit 範圍

封包圖適合網路協定、封包結構和技術規範文件，免費體驗 Mermaid 封包圖線上編輯器。

不會 Mermaid 語法怎麼辦？

不熟悉 Mermaid 語法並不代表不能使用 Mermaid 產生圖形，可以採用以下幾種方式：

免費使用 Mermaid 範本

先選擇與需求接近的範本，然後修改其中的節點、文字和關係。這種方式適合第一次使用 Mermaid 的使用者。

AI 產生 Mermaid 程式碼

可以直接用自然語言描述需要的圖表，例如：

建立一個電商訂單處理流程，包括使用者下單、付款、庫存檢查、出貨和訂單完成。

AI 可以根據描述產生 Mermaid 程式碼，再依實際需求修改。

使用 AI 檢查與修復程式碼

如果 Mermaid 程式碼出現語法錯誤，可以讓 AI 協助定位問題並修改程式碼。

透過影像辨識產生程式碼

對於已經存在的流程圖、架構圖或其他結構化圖表，可以嘗試透過影像辨識產生 Mermaid 程式碼，再繼續編輯。

Mermaid 線上編輯器有哪些功能？

Mermaid 線上編輯器通常需要解決三個核心問題：程式碼撰寫、圖表預覽和結果匯出。除此之外，範本和 AI 也可以降低 Mermaid 的使用門檻。

以ProcessOn Mermaid 線上編輯器為例，可以在瀏覽器中直接：

• 撰寫 Mermaid 程式碼
• 貼上已有的 Mermaid 程式碼
• 即時渲染和預覽圖表
• 免費使用 Mermaid 範本
• 自然語言 AI 產生 Mermaid 圖表
• AI 檢查與修復 Mermaid 程式碼
• 透過圖片辨識產生 Mermaid 程式碼
• 對產生的圖形二次編輯和修改
• 匯出 PNG、PDF、SVG、JPG、Markdown 格式

因此，對於需要頻繁建立 Mermaid 圖形的使用者來說，ProcessOn Mermaid 線上編輯器可以將 Mermaid 程式碼撰寫、圖形產生、二次編輯、匯出分享集中在一個工作環境中。

從 Mermaid 流程圖、時序圖、類別圖，到甘特圖、心智圖、象限圖、桑基圖、Git 圖、C4 圖和架構圖，都可以透過 Mermaid 語法建立和編輯。

快來使用 Mermaid 線上編輯器，線上撰寫 Mermaid 程式碼並產生圖表吧。

常見問題

Mermaid 語法難學嗎？

Mermaid 基礎語法相對簡單，大多數圖表只需要掌握圖表宣告、節點、連線和文字等基本寫法。例如，sequenceDiagram 用於宣告時序圖，flowchart 用於宣告流程圖。不同圖表類型的語法規則有所差異，複雜圖表還需要進一步學習對應的參數與設定。

Mermaid 程式碼寫錯了為什麼不能產生圖？

Mermaid 對語法結構比較敏感。常見原因包括圖表宣告寫錯、節點或連線語法不完整、縮排或特殊字元處理不正確，以及使用了目前 Mermaid 版本不支援的語法。

Mermaid 支援中文嗎？

支援。節點文字、標題、說明等位置通常可以直接使用中文，但需求圖、桑基圖、架構圖不支援中文。

如果出現中文顯示異常，通常需要進一步檢查編輯器、字型或匯出環境，而不一定是 Mermaid 語法本身的問題。

Mermaid 和傳統繪圖軟體有什麼區別？

Mermaid 主要透過文字程式碼描述圖表，而傳統繪圖軟體通常透過拖曳圖形、連線和調整樣式來製作圖表。

Mermaid 圖表可以儲存和重複使用嗎？

可以。Mermaid 圖表的核心內容是文字程式碼，因此可以將程式碼儲存到 Markdown、程式碼檔案或其他支援 Mermaid 的文件中，需要時再次渲染。

這也是 Mermaid 與純圖片形式圖表的一個重要區別：圖片儲存的是最終結果，而 Mermaid 程式碼同時儲存了圖表的結構資訊。

Mermaid 和 Markdown 有什麼關係？

Mermaid 經常與 Markdown 一起使用，但兩者並不是同一種語法。

Markdown 主要用於撰寫結構化文字，而 Mermaid 用於透過程式碼產生圖表。在支援 Mermaid 的 Markdown 編輯器中，可以將 Mermaid 程式碼內嵌到 Markdown 文件，讓圖表與文字說明放在同一份文件中。