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

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"

在编辑器中试试