Mermaid 編輯器

Mermaid 語法速查表

所有 Mermaid.js 圖表語法的完整快速參考。將本頁加入書籤以快速查閱每種圖表類型。

流程圖語法時序圖語法類別圖語法狀態圖語法甘特圖語法ER 圖語法旅程圖語法Git 圖語法心智圖語法圓餅圖語法時間線語法看板語法四象限圖語法桑基圖語法XY 圖表語法區塊圖語法架構圖語法封包圖語法

流程圖語法

使用節點和方向箭頭視覺化流程、工作流程和演算法。非常適合商業流程和決策樹。

Basic top-down flow
在編輯器中試試
graph TD
    A[Start] --> B[End]
Decision branching
在編輯器中試試
graph TD
    A{Decision} -->|Yes| B[OK]
    A -->|No| C[Cancel]
Subgraph grouping
在編輯器中試試
graph LR
    subgraph Group
        A --> B
    end
Node shapes
在編輯器中試試
graph TD
    A[Rectangle] --> B(Rounded)
    B --> C{Diamond}
    C --> D((Circle))
    C --> E([Stadium])

時序圖語法

記錄不同角色或系統之間隨時間的互動。適用於 API 文件和系統設計。

Basic message exchange
在編輯器中試試
sequenceDiagram
    Alice->>Bob: Hello
    Bob-->>Alice: Hi
Loop block
在編輯器中試試
sequenceDiagram
    loop Every minute
        Alice->>Bob: Ping
    end
Alternative flows
在編輯器中試試
sequenceDiagram
    alt Success
        A->>B: 200 OK
    else Error
        A->>B: 500 Error
    end
Activation boxes
在編輯器中試試
sequenceDiagram
    Alice->>+Bob: Request
    Bob-->>-Alice: Response

類別圖語法

以類別、屬性和關係建模物件導向系統。軟體架構規劃不可或缺的工具。

Class with members
在編輯器中試試
classDiagram
    class Animal {
        +String name
        +makeSound()
    }
Inheritance relationships
在編輯器中試試
classDiagram
    Animal <|-- Dog
    Animal <|-- Cat
    Animal : +String name
Cardinality notation
在編輯器中試試
classDiagram
    Customer "1" --> "*" Order

狀態圖語法

呈現系統或應用程式中的狀態轉換。非常適合建模生命週期狀態和工作流程。

Basic state transitions
在編輯器中試試
stateDiagram-v2
    [*] --> Active
    Active --> [*]
Labeled transitions
在編輯器中試試
stateDiagram-v2
    Idle --> Running: start
    Running --> Idle: stop
Nested composite state
在編輯器中試試
stateDiagram-v2
    state Active {
        [*] --> Working
        Working --> Paused
    }

甘特圖語法

規劃和追蹤專案時程及任務依賴關係。非常適合專案管理和排程。

Basic project schedule
在編輯器中試試
gantt
    title Project
    dateFormat YYYY-MM-DD
    section Phase 1
    Task A :a1, 2024-01-01, 30d
    Task B :after a1, 20d
Task status markers
在編輯器中試試
gantt
    Task Done :done, d1, 2024-01-01, 10d
    Task Active :active, 2024-01-11, 10d
    Task Crit :crit, 2024-01-21, 10d

ER 圖語法

設計包含實體和關係的資料庫架構。適用於資料庫建模和文件。

Entity relationships
在編輯器中試試
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE_ITEM : contains
Entity with attributes
在編輯器中試試
erDiagram
    CUSTOMER {
        int id PK
        string name
        string email
    }

旅程圖語法

繪製使用者在各接觸點的體驗和互動。非常適合 UX 設計和顧客旅程分析。

User experience journey
在編輯器中試試
journey
    title User Flow
    section Login
      Visit site: 5: User
      Enter credentials: 3: User
      Dashboard: 4: User

Git 圖語法

視覺化 Git 分支策略和提交歷史。有助於說明版本控制工作流程。

Basic branch and merge
在編輯器中試試
gitGraph
    commit
    branch develop
    commit
    checkout main
    merge develop
Feature branch workflow
在編輯器中試試
gitGraph
    commit
    branch feature
    commit
    commit
    checkout main
    merge feature
    commit

心智圖語法

組織創意、腦力激盪和建立層次化視覺結構。適合規劃和知識管理。

Central topic with branches
在編輯器中試試
mindmap
  root((Central))
    Topic A
      Detail 1
      Detail 2
    Topic B
      Detail 3

圓餅圖語法

以圓形圖表展示資料比例分布。適合顯示百分比和市場份額分析。

Budget distribution
在編輯器中試試
pie title Budget
    "Engineering" : 45
    "Marketing" : 25
    "Operations" : 30

時間線語法

沿時間軸視覺化事件和里程碑。適合專案歷史和路線圖展示。

Chronological events
在編輯器中試試
timeline
    title History
    2020 : Event A
    2021 : Event B
         : Event C
    2022 : Event D

看板語法

將任務按工作流階段組織到欄中。適合敏捷專案管理和任務追蹤。

Task board columns
在編輯器中試試
kanban
  Todo
    Task 1
    Task 2
  In Progress
    Task 3
  Done
    Task 4

四象限圖語法

在雙軸網格上繪製項目進行比較和優先順序排定。適合功能優先順序和策略分析。

Priority matrix
在編輯器中試試
quadrantChart
    title Priority Matrix
    x-axis Low Effort --> High Effort
    y-axis Low Impact --> High Impact
    quadrant-1 Plan
    quadrant-2 Do First
    quadrant-3 Delegate
    quadrant-4 Eliminate
    Item A: [0.3, 0.8]
    Item B: [0.7, 0.2]

桑基圖語法

用比例箭頭視覺化節點間的流量。適合能源流、預算分配和轉化漏斗。

Flow quantities between nodes
在編輯器中試試
sankey-beta

Source,Target,Value
A,X,5
A,Y,3
B,X,2
B,Y,8

XY 圖表語法

建立帶有可自訂座標軸的長條圖和折線圖。適合資料視覺化和趨勢分析。

Bar and line chart
在編輯器中試試
xychart-beta
    title "Sales"
    x-axis [Jan, Feb, Mar, Apr]
    y-axis "Revenue" 0 --> 100
    bar [30, 50, 70, 90]
    line [30, 50, 70, 90]

區塊圖語法

用行列排列的區塊建構結構化佈局。適合系統架構和元件概覽。

Columnar block layout
在編輯器中試試
block-beta
columns 3
  a["A"]:3
  b["B"] c["C"] d["D"]

架構圖語法

使用服務圖示和連線設計雲端和系統架構。適合基礎設施文件。

Cloud service topology
在編輯器中試試
architecture-beta
    group api(cloud)[API]
    service web(internet)[Web] in api
    service db(database)[DB]
    web:R --> L:db

封包圖語法

視覺化網路協定封包結構和位元級欄位佈局。適合網路協定文件。

Network packet field layout
在編輯器中試試
packet-beta
  0-15: "Source Port"
  16-31: "Dest Port"
  32-63: "Sequence Number"
在編輯器中試試