Mermaid 图表速查表
2026-03-05 · 完整语法参考
这是一份完整的 Mermaid 图表语法速查表，涵盖所有支持的图表类型。点击导航快速跳转到对应图表类型。
流程图
时序图
类图
甘特图
饼图
思维导图
用户旅程图
Git 图
ER 图
状态图
流程图 (Flowchart)
flowchart TD
%% 节点定义
A[开始]
B{判断}
C[处理]
D((结束))
%% 连线
A --> B
B -->|是| C
B -->|否| D
C --> D
%% 子图
subgraph 子流程
C --> E[步骤1]
E --> F[步骤2]
end
在 MermZen 中试试 →
语法 说明
flowchart TD从上到下 (Top Down) flowchart LR从左到右 (Left Right) flowchart BT从下到上 (Bottom Top) flowchart RL从右到左 (Right Left) A[文本]矩形节点 A(文本)圆角矩形 A((文本))圆形 A{文本}菱形（判断） A[/文本/]平行四边形 A --> B实线箭头 A -.-> B虚线箭头 A ==> B粗线箭头 A --文本--> B带标签的箭头
时序图 (Sequence Diagram)
sequenceDiagram
actor 用户
participant 前端
participant API
participant 数据库
用户->>前端: 点击登录
前端->>API: POST /login
API->>数据库: 查询用户
数据库-->>API: 返回数据
API-->>前端: 返回 token
前端-->>用户: 登录成功
%% 循环
loop 重试机制
API->>数据库: 重试查询
end
%% 条件
alt 用户存在
API-->>前端: 正常响应
else 用户不存在
API-->>前端: 错误响应
end
在 MermZen 中试试 →
语法 说明
participant 名称定义参与者 actor 名称定义角色 A->>B: 消息实线箭头（发送） A-->>B: 消息虚线箭头（返回） A->>+B: 消息激活 B A-->>-B: 消息取消激活 B loop 描述循环 alt 条件条件分支 opt 条件可选执行 par 并行并行执行 rect rgb(255,0,0) 背景彩色背景块
类图 (Class Diagram)
classDiagram
class Animal {
+String name
+int age
+makeSound()
+move()
}
class Dog {
+breed
+fetch()
}
class Cat {
+color
+climb()
}
Animal <|-- Dog : 继承
Animal <|-- Cat : 继承
Dog o-- Toy : 聚合
Cat *-- Whisker : 组合
在 MermZen 中试试 →
语法 说明
class 类名 { }定义类 +属性公有属性/方法 -属性私有属性/方法 #属性保护属性/方法 A <|-- B继承（B 继承 A） A --* B组合（强依赖） A --o B聚合（弱依赖） A --> B关联 A ..> B依赖 A --|> B实现 A "1" --> "*" B一对多关系
甘特图 (Gantt Chart)
gantt
title 项目开发计划
dateFormat YYYY-MM-DD
section 设计阶段
需求分析 :done, a1, 2026-01-01, 7d
UI 设计 :active, a2, after a1, 5d
原型评审 :a3, after a2, 3d
section 开发阶段
后端开发 :b1, after a3, 14d
前端开发 :b2, after a3, 14d
接口联调 :b3, after b1, 5d
section 测试阶段
功能测试 :c1, after b3, 7d
Bug 修复 :c2, after c1, 5d
上线发布 :milestone, c3, after c2, 1d
在 MermZen 中试试 →
语法 说明
dateFormat日期格式定义 section 名称阶段分组 :done已完成状态 :active进行中状态 :crit关键路径 :milestone里程碑 after 任务依赖前置任务 7d持续 7 天
饼图 (Pie Chart)
pie title 浏览器市场份额
"Chrome" : 65.3
"Safari" : 18.5
"Firefox" : 6.2
"Edge" : 5.1
"其他" : 4.9
在 MermZen 中试试 →
语法 说明
pie title 标题声明饼图 "标签" : 数值数据项 showData显示具体数值
思维导图 (Mindmap)
mindmap
root((项目管理))
计划
需求分析
资源分配
时间安排
执行
开发
测试
部署
监控
进度跟踪
风险管理
在 MermZen 中试试 →
语法 说明
root((根节点))根节点 缩进 + 节点子节点（每级 2 空格） ::icon(图标)添加图标
用户旅程图 (User Journey)
journey
title 用户购物流程
section 浏览商品
访问首页: 5: 用户
搜索商品: 4: 用户
查看详情: 4: 用户
section 下单支付
加入购物车: 5: 用户
填写地址: 3: 用户
完成支付: 5: 用户, 系统
section 收货评价
查看物流: 4: 用户
确认收货: 5: 用户
在 MermZen 中试试 →
语法 说明
section 阶段定义阶段 任务: 评分: 角色任务描述（评分 1-5）
Git 图 (Git Graph)
gitGraph
commit "初始提交"
branch feature/login
commit "登录功能"
commit "登录优化"
checkout main
branch feature/register
commit "注册功能"
checkout main
merge feature/login tag: "v1.1.0"
merge feature/register
在 MermZen 中试试 →
语法 说明
gitGraph声明 Git 图 commit "信息"创建提交 branch 名称创建分支 checkout 分支切换分支 merge 分支合并分支 tag: "版本"打标签
ER 图 (Entity Relationship)
erDiagram
CUSTOMER {
string customer_id PK
string name
string email
}
ORDER {
int order_id PK
date order_date
string customer_id FK
}
CUSTOMER ||--o{ ORDER : places
在 MermZen 中试试 →
语法 说明
ENTITY { }定义实体 PK主键 FK外键 ||--o{一对多关系 ||--||一对一关系 }|--|{多对多关系
状态图 (State Diagram)
stateDiagram-v2
[*] --> 待付款
待付款 --> 待发货: 支付成功
待付款 --> 已取消: 取消订单
待发货 --> 运输中: 发货
运输中 --> 待收货: 到达
待收货 --> 已完成: 确认收货
已完成 --> [*]
在 MermZen 中试试 →
语法 说明
[*]开始/结束状态 状态A --> 状态B状态转换 state 名称 { }复合状态 状态: 备注状态备注
通用指令
%% 这是注释
%% 主题设置
theme default
theme dark
theme forest
theme neutral
theme base
%% 手绘风格
%% 在 MermZen 编辑器中切换
在 MermZen 中试试 →
语法 说明
%% 注释行注释 title 标题设置图表标题 theme 主题设置主题 subgraph 名称子图分组 direction LR/TD子图方向
💡 提示 ：在 MermZen 编辑器 中，你可以实时预览所有图表效果，并导出 SVG/PNG 格式。