Mermaid 语法
Mermaid 是一种通过文本描述生成图表的工具,支持多种图表类型(如流程图、时序图、类图等)。不同图表类型的图形符号(节点、连接线、子图等)有特定的语法规则。以下是最常用图表类型的符号说明及示例:
一、流程图(Flowchart)
流程图是最基础的图表类型,用 graph
关键字声明,支持自上而下(TD)或自左向右(LR)等方向。
1. 图表方向声明
graph TD
:自上而下(Top-Down)的流程图(默认方向)。graph LR
:自左向右(Left-Right)的流程图。graph BT
:自底向上(Bottom-Top)。graph RL
:自右向左(Right-Left)。
2. 节点(Node)符号
节点是流程图的基本单元,用 标识符["节点文本"]
或 标识符(节点文本)
格式定义,不同符号表示不同形状:
符号/语法 | 形状 | 示例 | 说明 |
---|---|---|---|
A["文本"] | 矩形(默认) | A["开始"] | 最常用,适合表示步骤、事件。 |
A([文本]) | 圆角矩形 | A([处理]) | 强调流程中的处理步骤(如计算、操作)。 |
A{(文本)} | 菱形(决策节点) | A{判断条件?} | 用于条件判断(如 if/else 分支)。 |
A>/文本/] | 六边形 | A>/开始循环/] | 表示循环或迭代(非标准形状,需确认Mermaid版本支持)。 |
A::: | 子图内节点(需配合 subgraph ) | subgraph 子图名 A::: 子图节点 | 定义子图内的节点(通过样式类区分)。 |
A["文本<br/>换行"] | 带换行的矩形 | A["步骤1<br/>子步骤"] | 用 <br/> 实现文本换行(HTML语法)。 |
3. 连接线(Edge)符号
连接线用于关联节点,用 起点 --> 终点
格式定义,支持不同箭头和样式:
符号/语法 | 含义 | 示例 |
---|---|---|
A --> B | 默认实线箭头(正向) | 开始 --> 处理 |
`A --> | 条件 | B` |
`A --> | 条件 | B` |
A ~~~> B | 虚线箭头 | 准备 -->~~~> 清理 |
A ==> B | 粗实线箭头 | 关键步骤 ==> 下一步 |
A --> B:::class | 带样式的箭头(需配合 classDef ) | 自定义样式(如颜色、字体)。 |
A -.-> B | 点线箭头 | 可选步骤 -.-> 备用流程 |
4. 子图(Subgraph)
用 subgraph
定义子图,用于分组节点(如模块、阶段):
graph TDsubgraph 阶段1["数据准备"]A["读取文件"] --> B["清洗数据"]endsubgraph 阶段2["数据处理"]C["分析数据"] --> D["生成报告"]endB --> C
5. 特殊节点
符号/语法 | 用途 | 示例 |
---|---|---|
note left of A: 文本 | 左侧注释(贴在节点A左侧) | note left of A: 注意参数! |
note right of A: 文本 | 右侧注释 | note right of B: 记录日志 |
note top of A: 文本 | 顶部注释 | note top of C: 开始执行 |
note bottom of A: 文本 | 底部注释 | note bottom of D: 结束 |
二、时序图(Sequence Diagram)
时序图用于描述对象间的交互顺序,用 sequenceDiagram
声明,核心符号包括参与者(Participant)、消息(Message)等。
1. 参与者(Participant)
用 participant 标识符 as 别名
定义交互对象:
sequenceDiagramparticipant 用户 as 用户端participant 服务端 as 服务器
2. 消息(Message)
用箭头表示对象间的消息传递,支持不同类型:
符号/语法 | 含义 | 示例 |
---|---|---|
用户->>服务端: 请求数据 | 普通实线箭头(同步消息) | 用户->>服务端: 登录请求 |
用户-->>服务端: 异步通知 | 虚线箭头(异步消息) | 服务端-->>用户: 返回结果 |
服务端->>数据库: 查询 | 自定义参与者(如数据库) | 服务端->>DB: 执行SQL |
用户->>用户: 提示输入 | 自己到自己的消息(循环反馈) | 用户->>用户: 输入密码 |
alt 条件 | 条件分支(if-else) | alt 验证成功 |
else 其他条件 | 条件分支的另一情况 | else 验证失败 |
end | 结束条件分支 | end |
loop 循环条件 | 循环结构 | loop 3次 |
note right of 用户: 提示 | 参与者右侧注释 | note right of 用户: 超时处理 |
三、类图(Class Diagram)
类图用于描述类的结构、属性、方法及类间关系,用 classDiagram
声明。
1. 类定义
用 class 标识符 { ... }
定义类,内部用 +
(public)、-
(private)、#
(protected)标记成员:
classDiagramclass 用户 {+姓名: string-密码: string#登录(): boolean}
2. 类间关系
符号/语法 | 含义 | 示例 |
---|---|---|
`用户 < | -- 管理员` | 继承(子类 -> 父类) |
`用户 < | .. 实现类` | 实现(接口 -> 实现类) |
用户 --* 订单 | 组合(整体-部分,强依赖) | 用户 --* 地址 |
用户 o-- 订单 | 关联(整体-部分,弱依赖) | 部门 o-- 员工 |
用户 ..> 订单 | 依赖(类A使用类B) | 用户 ..> 支付服务 |
用户 -- 订单 | 关联(无方向,双向关联) | 用户 -- 订单 |
四、ER图(实体关系图)
ER图用于描述数据库实体间的关系,用 erDiagram
声明。
1. 实体(Entity)
用 实体名 { 属性: 类型 }
定义实体:
erDiagramUSER {int id PKstring namestring email}
2. 关系(Relationship)
用 实体1 ||--o{ 实体2
定义关系(符号表示基数):
符号/语法 | 基数含义(实体1 -> 实体2) | 示例 |
---|---|---|
` | --o{` | |
` | --{` | |
`}o-- | ` | |
`} | -- | {` |
PK | 主键(Primary Key) | int id PK |
FK | 外键(Foreign Key) | int user_id FK |
五、甘特图(Gantt Chart)
甘特图用于项目进度规划,用 gantt
声明:
gantttitle 项目计划dateFormat YYYY-MM-DDsection 阶段1需求分析 :a1, 2024-01-01, 7d设计开发 :a2, after a1, 14dsection 阶段2测试上线 :b1, after a2, 5d
dateFormat
:定义日期格式。section
:分组(阶段)。:a1
:任务ID(唯一标识)。2024-01-01
:开始日期。7d
:持续7天。
总结
Mermaid 的图形符号通过关键字+语法结构定义,不同图表类型的核心符号差异较大:
- 流程图:关注节点形状(矩形、菱形)和连接线箭头。
- 时序图:关注参与者、消息类型(同步/异步)和交互顺序。
- 类图:关注类的属性/方法和类间关系(继承、实现)。
- ER图:关注实体属性和关系基数(1:1、1:N、N:M)。
实际使用时,可通过 Mermaid Live Editor 实时验证语法,快速生成图表。