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
Onboarding satisfaction
在編輯器中試試
journey
    title New User Onboarding
    section Sign up
      Open homepage: 5: Visitor
      Create account: 3: Visitor
      Verify email: 2: Visitor
    section First diagram
      Choose template: 4: User
      Edit code: 5: User
      Export PNG: 5: User
Multi-actor checkout
在編輯器中試試
journey
    title Checkout Flow
    section Browse
      Search product: 4: Customer
      View details: 5: Customer
    section Purchase
      Add to cart: 5: Customer
      Pay: 3: Customer, Stripe
      Confirm order: 5: Customer, Stripe

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
Project planning mindmap
在編輯器中試試
mindmap
  root((Launch Plan))
    Engineering
      Backend API
      Frontend UI
      Testing
    Marketing
      Landing page
      Social media
    Operations
      Support docs
      Pricing
Node shapes and icons
在編輯器中試試
mindmap
  root((Mermaid))
    ::icon(fa fa-book)
    Origins
      Long history
      Popularisation
    [Square]
      (Rounded)
      ((Circle))
    {{Hexagon}}

圓餅圖語法

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

Budget distribution
在編輯器中試試
pie title Budget
    "Engineering" : 45
    "Marketing" : 25
    "Operations" : 30
Browser market share
在編輯器中試試
pie showData title Browser Share 2026
    "Chrome" : 64.2
    "Safari" : 18.5
    "Edge" : 5.3
    "Firefox" : 3.1
    "Other" : 8.9
Time allocation
在編輯器中試試
pie title How I Spend My Day
    "Sleep" : 8
    "Work" : 9
    "Meals" : 2
    "Exercise" : 1
    "Free time" : 4

時間線語法

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

Chronological events
在編輯器中試試
timeline
    title History
    2020 : Event A
    2021 : Event B
         : Event C
    2022 : Event D
Product roadmap by section
在編輯器中試試
timeline
    title Product Roadmap
    section 2024
      Q1 : Beta launch
      Q2 : Public release
    section 2025
      Q1 : Mobile apps
      Q2 : Enterprise plan
      Q3 : API v2
    section 2026
      Q1 : AI assistant
      Q2 : Marketplace
Personal study plan
在編輯器中試試
timeline
    title Mermaid Study Plan
    Week 1 : Read syntax docs
           : Try flowcharts
    Week 2 : Sequence diagrams
           : Class diagrams
    Week 3 : Gantt and timeline
    Week 4 : Build a real project

看板語法

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

Task board columns
在編輯器中試試
kanban
  Todo
    Task 1
    Task 2
  In Progress
    Task 3
  Done
    Task 4
Sprint board with metadata
在編輯器中試試
kanban
  Backlog
    [Auth flow]@{ assigned: 'alice', priority: 'High' }
    [Onboarding tour]@{ assigned: 'bob', priority: 'Low' }
  In Progress
    [Payments]@{ assigned: 'carol', priority: 'High' }
  Review
    [Settings page]@{ assigned: 'dan', priority: 'Medium' }
  Done
    [Landing redesign]@{ assigned: 'erin', priority: 'High' }
Bug triage board
在編輯器中試試
kanban
  Reported
    Login 500 error
    Slow PDF export
  Triaged
    Mobile menu glitch
  Fixing
    Dark mode contrast
  Verified
    Empty state typo

四象限圖語法

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

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]
Reach vs engagement
在編輯器中試試
quadrantChart
    title Reach and Engagement
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 Stars
    quadrant-2 Hidden Gems
    quadrant-3 Filler
    quadrant-4 Volume Plays
    Campaign A: [0.7, 0.8]
    Campaign B: [0.3, 0.7]
    Campaign C: [0.2, 0.2]
    Campaign D: [0.8, 0.3]
Styled quadrant chart
在編輯器中試試
quadrantChart
    title Tech Choices
    x-axis Hard --> Easy
    y-axis Slow --> Fast
    quadrant-1 Adopt
    quadrant-2 Trial
    quadrant-3 Hold
    quadrant-4 Assess
    Vue: [0.8, 0.7] radius: 12, color: #41b883
    React: [0.7, 0.7] radius: 12, color: #61dafb
    Svelte: [0.6, 0.85] radius: 10, color: #ff3e00

桑基圖語法

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

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

Source,Target,Value
A,X,5
A,Y,3
B,X,2
B,Y,8
Marketing funnel breakdown
在編輯器中試試
sankey-beta

Visitors,Signups,1200
Visitors,Bounce,3800
Signups,Trial,800
Signups,Free Plan,400
Trial,Paid,250
Trial,Churn,550
Energy flow diagram
在編輯器中試試
sankey-beta

Solar,Grid,40
Wind,Grid,30
Coal,Grid,80
Grid,Residential,50
Grid,Industrial,80
Grid,Losses,20

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]
Quarterly bar chart
在編輯器中試試
xychart-beta
    title "Quarterly Revenue (USD k)"
    x-axis ["Q1", "Q2", "Q3", "Q4"]
    y-axis "Revenue" 0 --> 250
    bar [120, 145, 180, 220]
Multi-line growth comparison
在編輯器中試試
xychart-beta
    title "Active Users"
    x-axis [Jan, Feb, Mar, Apr, May, Jun]
    y-axis "Users (k)" 0 --> 50
    line [10, 14, 18, 25, 33, 42]
    line [8, 11, 15, 20, 24, 28]
Horizontal bar chart
在編輯器中試試
xychart-beta horizontal
    title "Programming Language Popularity"
    x-axis "Share (%)" 0 --> 30
    y-axis [JavaScript, Python, Java, C#, Go]
    bar [25, 22, 14, 8, 5]

區塊圖語法

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

Columnar block layout
在編輯器中試試
block-beta
columns 3
  a["A"]:3
  b["B"] c["C"] d["D"]
Block shapes and arrows
在編輯器中試試
block-beta
columns 4
  a["Input"] b("Process") c{{"Decision"}} d[("Storage")]
  a --> b
  b --> c
  c --> d
System architecture blocks
在編輯器中試試
block-beta
columns 3
  Web["Web App"]:3
  space:3
  API["REST API"] Auth["Auth Service"] DB[("Postgres")]
  Web --> API
  API --> Auth
  API --> DB

架構圖語法

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

Cloud service topology
在編輯器中試試
architecture-beta
    group api(cloud)[API]
    service web(internet)[Web] in api
    service db(database)[DB]
    web:R --> L:db
Three-tier web app
在編輯器中試試
architecture-beta
    group public(cloud)[Public Network]
    group private(cloud)[Private VPC]

    service cdn(internet)[CDN] in public
    service lb(server)[Load Balancer] in public
    service web(server)[Web Tier] in private
    service api(server)[API Tier] in private
    service db(database)[Postgres] in private
    service cache(disk)[Redis] in private

    cdn:R --> L:lb
    lb:R --> L:web
    web:R --> L:api
    api:R --> L:db
    api:B --> T:cache
Event-driven microservices
在編輯器中試試
architecture-beta
    service gw(internet)[API Gateway]
    service queue(server)[Event Bus]
    service orders(server)[Orders]
    service billing(server)[Billing]
    service notify(server)[Notifications]
    service db(database)[Shared DB]

    gw:R --> L:orders
    orders:R --> L:queue
    queue:T --> B:billing
    queue:B --> T:notify
    orders:B --> T:db

封包圖語法

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

Network packet field layout
在編輯器中試試
packet-beta
  0-15: "Source Port"
  16-31: "Dest Port"
  32-63: "Sequence Number"
TCP header layout
在編輯器中試試
packet-beta
title TCP Header
  0-15: "Source Port"
  16-31: "Destination Port"
  32-63: "Sequence Number"
  64-95: "Acknowledgment Number"
  96-99: "Data Offset"
  100-105: "Reserved"
  106-111: "Flags"
  112-127: "Window"
  128-143: "Checksum"
  144-159: "Urgent Pointer"
IPv4 header layout
在編輯器中試試
packet-beta
title IPv4 Header
  0-3: "Version"
  4-7: "IHL"
  8-15: "Type of Service"
  16-31: "Total Length"
  32-47: "Identification"
  48-50: "Flags"
  51-63: "Fragment Offset"
  64-71: "TTL"
  72-79: "Protocol"
  80-95: "Header Checksum"
  96-127: "Source IP Address"
  128-159: "Destination IP Address"
在編輯器中試試