mermaid 语法速查#
流程图#
基本语法：
- 方向：
TD: 上到下LR: 左到右
渲染：
---
config:
theme: 'neutral'
---
graph TD;
A[开始] --> B{判断条件};
B -->|Y| C[执行操作1];
B -->|N| D[执行操作2];
C --> E[结束];
D --> E;时序图#
基本语法：
sequenceDiagram
autonumber
participant 用户
participant 系统
note over 用户,系统: bookmarks
用户->>系统: 登录请求
create participant 数据库 as 数据库A
系统->>数据库: 验证用户信息
数据库-->>系统: 返回验证结果
alt y
系统-->>用户: 登录成功
else n
系统-->>用户: 登录失败
end
渲染：
sequenceDiagram
autonumber
participant 用户
participant 系统
note over 用户,系统: bookmarks
用户->>系统: 登录请求
create participant 数据库 as 数据库A
系统->>数据库: 验证用户信息
数据库-->>系统: 返回验证结果
alt y
系统-->>用户: 登录成功
else n
系统-->>用户: 登录失败
endalt: if elseloop: 循环opt: 可选par: 并行
甘特图#
基本语法：
gantt
title 项目开发计划
dateFormat YYYY-MM-DD
section 设计阶段
需求分析 :done, des1, 2024-01-01, 7d
技术设计 :active, des2, after des1, 5d
section 开发阶段
前端开发 :dev1, after des2, 10d
后端开发 :dev2, after des2, 12d
section 测试阶段
单元测试 :test1, after dev1, 5d
集成测试 :test2, after dev2, 7d
渲染：
gantt
title 项目开发计划
dateFormat YYYY-MM-DD
section 设计阶段
需求分析 :done, des1, 2024-01-01, 7d
技术设计 :active, des2, after des1, 5d
section 开发阶段
前端开发 :dev1, after des2, 10d
后端开发 :dev2, after des2, 12d
section 测试阶段
单元测试 :test1, after dev1, 5d
集成测试 :test2, after dev2, 7d类图#
基本语法：
classDiagram
class User {
+String username
+String email
+login()
+logout()
}
class Admin {
+manageUsers()
}
class Post {
+String title
+String content
+createPost()
+deletePost()
}
User <|-- Admin
User "1" *-- "0..*" Post
渲染：
classDiagram
class User {
+String username
+String email
+login()
+logout()
}
class Admin {
+manageUsers()
}
class Post {
+String title
+String content
+createPost()
+deletePost()
}
User <|-- Admin
User "1" *-- "0..*" Post状态图#
基本语法：
stateDiagram-v2
[*] --> 待机
待机 --> 运行中 : 启动命令
运行中 --> 暂停 : 暂停命令
暂停 --> 运行中 : 继续命令
运行中 --> 完成 : 任务完成
暂停 --> 完成 : 任务完成
完成 --> [*]
渲染：
stateDiagram-v2
[*] --> 待机
待机 --> 运行中 : 启动命令
运行中 --> 暂停 : 暂停命令
暂停 --> 运行中 : 继续命令
运行中 --> 完成 : 任务完成
暂停 --> 完成 : 任务完成
完成 --> [*]饼图#
基本语法：
渲染：
pie title 编程语言使用比例
"JavaScript" : 35
"Python" : 25
"Java" : 20
"C++" : 15
"其他" : 5时间线#
基本语法：
渲染：
timeline
title 项目里程碑
2024 Q1 : 需求分析
2024 Q2 : 系统设计
2024 Q3 : 开发实现
2024 Q4 : 测试上线
2025 Q1 : 优化迭代用户旅程图#
基本语法：
journey
title 用户购物流程
section 浏览商品
查看商品列表: 5: 用户
筛选商品: 3: 用户
section 下单购买
添加购物车: 4: 用户
结算支付: 5: 用户,系统
section 收货评价
确认收货: 3: 用户
评价商品: 2: 用户
渲染：
journey
title 用户购物流程
section 浏览商品
查看商品列表: 5: 用户
筛选商品: 3: 用户
section 下单购买
添加购物车: 4: 用户
结算支付: 5: 用户,系统
section 收货评价
确认收货: 3: 用户
评价商品: 2: 用户zenuml#
- mermaid >= 11.12.1
- vscode-markdown-preview-enhanced >= 0.8.20
zenuml
title Reply message
Client->A.method() {
B.nested_sync_method()
B->C: nested async message
B.method() {
if(condition) {
return x1
// return early
// *Markdown* is supported.
@return
A->Client: x11
} else if (cond2){
C.func2()
}else{
C.default()
}
}
// loop
while(true){
B.run()
}
// opt
opt {
B.run(){return }
}
// a
par{
B.run(){return }
B.run(){return }
}
return x2
}
zenuml
title Reply message
Client->A.method() {
B.nested_sync_method()
B->C: nested async message
B.method() {
if(condition) {
return x1
// return early
// *Markdown* is supported.
@return
A->Client: x11
} else if (cond2){
C.func2()
}else{
C.default()
}
}
// loop
while(true){
B.run()
}
// opt
opt {
B.run(){return }
}
// a
par{
B.run(){return }
B.run(){return }
}
return x2
}
Theme 配置#
deault- This is the default theme for all diagrams.neutral- This theme is great for black and white documents that will be printed.dark- This theme goes well with dark-colored elements or dark-mode.forest- This theme contains shades of green.base- This is the only theme that can be modified. Use this theme as the base for customizations.
图中配置：
其他配置参考原文档: config/theming