Mermaid-常用语法

1.背景

Mermaid 是一种基于文本的图表工具，允许通过简单的语法生成流程图、时序图等可视化图表，广泛应用于文档和博客中。

常见的md编辑器都支持Mermaid语法，后续以Typora为例。

在Typora中，类似于引入代码块一样，我们可以通过```mermaid来引入一段Mermaid语法。

在Mermaid代码块中，首行声明图表类型。

图表类型	关键字
时序图	sequenceDiagram
流程图	graph
甘特图	gantt
类图	classDiagram
状态图	stateDiagram
实体关系图	erDiagram
用户旅程图	journey
饼图	pie

例如，声明一个时序图。

sequenceDiagram
	%% 注释信息

示例图是一个在线网站，可以实时渲染Mermaid图像：mermaidviewer

2.语法

2.1 时序图sequenceDiagram

语法	描述	示例
sequenceDiagram	定义一个时序图	sequenceDiagram
autonumber	为每个步骤自动添加序号	autonumber
participant	定义参与者（角色）	participant Alice（自定义角色名） actor User（自定义角色名）
->	实线（不带箭头）	Alice->Bob: Hello!
->>	实线箭头发送消息（箭头指向右）	Alice->>Bob: Hello!
-->	虚线（不带箭头）	Alice-->Bob: Hello!
-->>	虚线箭头发送异步消息（箭头指向右，表示异步）	Alice-->>Bob: Hello!
<<-	虚线箭头接收消息（箭头指向左）	Bob<<-Alice: Hi!
-x	实线删除	Alice -x Bob: 删除
--x	虚线删除	Alice --x Bob: 删除
loop … end	循环结构	loop 每秒轮询一次 A->>B: ping end
alt … else … end	条件分支（if/else）	alt 用户登录成功 A->>B: GetUserInfo else A->>B: ShowError end
opt … end	可选执行（仅在某些条件下执行）	opt 用户已登录 A->>B: GetUserInfo end
par … end	并行执行（并行执行多条消息）	par A发送消息 A->>B: Request and B发送消息 B->>C: Process end
Note right of	在参与者的右侧添加注释	Note right of Alice: 请求发送中
Note left of	在参与者的左侧添加注释	Note left of Bob: 等待处理
Note over	可以同时对多个参与者添加注释	Note over Alice,Bobr: 多个注释
activate … deactivate	激活和停用参与者	activate Alice A->>Bob: Hello! deactivate Alice
link	为时序图中的消息添加超链接	link https://example.com
rect … end	添加矩形区域（突出显示） rgba(红、绿、蓝、透明度)	rect rgba(255, 0, 0, 0.1) A->>B: 做一些事情 end