Mermaid 图表教程
- Mermaid 是一个基于 JavaScript 的图表绘制工具，它使用简单的文本描述语法来生成各种图表。你可以直接在 Markdown 文件中编写 Mermaid 代码，许多平台（如 GitHub、GitLab、Obsidian、VS Code 等）都支持直接渲染。
基本语法结构
在 Markdown 中使用 Mermaid，需要用mermaid 代码块包裹：
注意，不需要反斜杠，这里为了防止被转化才写
\`\`\` mermaid
graph TD
A[开始] --> B(处理)
B --> C{判断}
\`\`\`
如下图：
graph TD
A[开始] --> B(处理)
B --> C{判断}
流程图
基础流程图
注意，不需要反斜杠，这里为了防止被转化才写
\`\`\`mermaid
flowchart TD
A[起床] --> B{是否周末？}
B -->|是| C[睡懒觉]
B -->|否| D[去上班]
C --> E[放松]
D --> F[工作]
\`\`\`
flowchart TD
A[起床] --> B{是否周末？}
B -->|是| C[睡懒觉]
B -->|否| D[去上班]
C --> E[放松]
D --> F[工作]
方向说明
- graph TD - 从上到下
- graph LR - 从左到右
- graph RL - 从右到左
- graph BT - 从下到上
节点形状
注意，不需要反斜杠，这里为了防止被转化才写
\`\`\`mermaid
flowchart LR
A[方形] --> B(圆角)
B --> C{菱形}
C --> D((圆形))
C --> E>不对称]
C --> F{六边形}
\`\`\`
flowchart LR
A[方形] --> B(圆角)
B --> C{菱形}
C --> D((圆形))
C --> E>不对称]
C --> F{六边形}
时序图
注意，不需要反斜杠，这里为了防止被转化才写
\`\`\`mermaid
sequenceDiagram
participant 用户
participant 服务器
participant 数据库
用户->>服务器: 登录请求
服务器->>数据库: 验证用户
数据库-->>服务器: 验证结果
服务器-->>用户: 登录成功
\`\`\`
sequenceDiagram
participant 用户
participant 服务器
participant 数据库
用户->>服务器: 登录请求
服务器->>数据库: 验证用户
数据库-->>服务器: 验证结果
服务器-->>用户: 登录成功
更多时序图语法
注意，不需要反斜杠，这里为了防止被转化才写
\`\`\`mermaid
sequenceDiagram
Alice->>John: 你好 John，你好吗？
John-->>Alice: 我很好，谢谢！
John->>Bob: 你最近怎么样？
Bob-->>John: 还不错！
Note right of John: 右侧注释<br/>多行文本
Note over Alice,Bob: 跨越多个参与者
\`\`\`
sequenceDiagram
Alice->>John: 你好 John，你好吗？
John-->>Alice: 我很好，谢谢！
John->>Bob: 你最近怎么样？
Bob-->>John: 还不错！
Note right of John: 右侧注释
多行文本
Note over Alice,Bob: 跨越多个参与者
甘特图
注意，不需要反斜杠，这里为了防止被转化才写
\`\`\`mermaid
gantt
title 项目开发计划
dateFormat YYYY-MM-DD
axisFormat %m-%d
section 设计阶段
需求分析 :2024-01-01, 7d
原型设计 :2024-01-08, 5d
section 开发阶段
前端开发 :2024-01-15, 10d
后端开发 :2024-01-15, 12d
section 测试阶段
单元测试 :2024-01-27, 5d
集成测试 :2024-02-01, 5d
\`\`\`
gantt
title 项目开发计划
dateFormat YYYY-MM-DD
axisFormat %m-%d
section 设计阶段
需求分析 :2024-01-01, 7d
原型设计 :2024-01-08, 5d
section 开发阶段
前端开发 :2024-01-15, 10d
后端开发 :2024-01-15, 12d
section 测试阶段
单元测试 :2024-01-27, 5d
集成测试 :2024-02-01, 5d
类图
注意，不需要反斜杠，这里为了防止被转化才写
\`\`\`mermaid
classDiagram
class 动物 {
+String 名称
+int 年龄
+void 吃()
+void 睡()
}
class 狗 {
+void 吠叫()
}
class 猫 {
+void 喵喵叫()
}
动物 <|-- 狗
动物 <|-- 猫
\`\`\`
classDiagram
class 动物 {
+String 名称
+int 年龄
+void 吃()
+void 睡()
}
class 狗 {
+void 吠叫()
}
class 猫 {
+void 喵喵叫()
}
动物 <|-- 狗
动物 <|-- 猫
类关系符号
<|-- : 继承*-- : 组合o-- : 聚合--> : 关联-- : 实线连接..> : 依赖
状态图
注意，不需要反斜杠，这里为了防止被转化才写
\`\`\`mermaid
stateDiagram-v2
[*] --> 待机
待机 --> 运行: 启动
运行 --> 暂停: 暂停按钮
暂停 --> 运行: 继续按钮
运行 --> 待机: 停止
暂停 --> 待机: 停止
待机 --> [*]
\`\`\`
stateDiagram-v2
[*] --> 待机
待机 --> 运行: 启动
运行 --> 暂停: 暂停按钮
暂停 --> 运行: 继续按钮
运行 --> 待机: 停止
暂停 --> 待机: 停止
待机 --> [*]
饼图
注意，不需要反斜杠，这里为了防止被转化才写
\`\`\`mermaid
pie
title 编程语言使用率
"JavaScript" : 40
"Python" : 25
"Java" : 20
"其他" : 15
\`\`\`
pie
title 编程语言使用率
"JavaScript" : 40
"Python" : 25
"Java" : 20
"其他" : 15
小贴士
- 注释: 使用
%%添加注释 - 样式: 使用
style关键字自定义样式 - 链接: 可以为节点添加点击链接
- 多行文本: 使用
<br>换行 - 主题: 支持多种主题（默认、森林、黑暗等）