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
    }

旅程图语法

绘制用户在各个接触点的体验和交互。非常适合用户体验设计和客户旅程分析。

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"

在编辑器中试试