Mermaid 详细教程
Mermaid 是一个基于 JavaScript 的图表绘制工具，它使用简单的文本语法来生成各种图表。以下是 Mermaid 的全面教程。
1. Mermaid 简介
Mermaid 允许你使用类似 Markdown 的语法创建以下图表：
- 流程图 (Flowchart)
- 序列图 (Sequence Diagram)
- 类图 (Class Diagram)
- 状态图 (State Diagram)
- 实体关系图 (Entity Relationship Diagram)
- 用户旅程图 (User Journey)
- 甘特图 (Gantt)
- 饼图 (Pie Chart)
- 需求图 (Requirement Diagram)
2. 基本使用方法
2.1 在网页中使用
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>
<div class="mermaid">
graph TD
A[开始] --> B(处理步骤)
B --> C{判断}
C -->|是| D[结束]
C -->|否| B
</div>
运行 HTML
2.2 在 Markdown 中使用
许多 Markdown 编辑器(如 VS Code、GitHub)支持 Mermaid：
```mermaid
graph TD
A --> B
## 3. 图表类型详解
### 3.1 流程图 (Flowchart)
#### 基本语法
mermaid
graph TD
A[开始] --> B{判断}
B -->|是| C[执行操作]
B -->|否| D[结束]
C --> D
元素类型
A[矩形]- 矩形节点B(圆角矩形)- 圆角矩形C{菱形}- 菱形判断节点D((圆形))- 圆形节点
方向定义
graph TD- 从上到下 (Top Down)graph LR- 从左到右 (Left to Right)graph RL- 从右到左graph BT- 从下到上
3.2 序列图 (Sequence Diagram)
mermaid sequenceDiagram participant Alice participant Bob Alice->>Bob: 你好！ Bob-->>Alice: 你好吗？ Alice->>Bob: 我很好，谢谢！
#### 箭头类型
- `->` 实线
- `-->` 虚线
- `->>` 实线箭头
- `-->>` 虚线箭头
### 3.3 类图 (Class Diagram)
mermaid
classDiagram
class Animal {
+String name
+int age
+eat()
+sleep()
}
class Dog {
+bark()
}
class Cat {
+meow()
}
Animal <|-- Dog
Animal <|-- Cat
3.4 甘特图 (Gantt Chart)
mermaid gantt title 项目计划 dateFormat YYYY-MM-DD section 阶段1 任务1 :a1, 2023-01-01, 30d 任务2 :after a1, 20d section 阶段2 任务3 :2023-02-15, 12d 任务4 :24d
### 3.5 饼图 (Pie Chart)
mermaid
pie
title 浏览器市场份额
"Chrome" : 65
"Safari" : 15
"Firefox" : 10
"其他" : 10
3.6 状态图 (State Diagram)
mermaid stateDiagram-v2 [*] --> 待机 待机 --> 运行: 启动 运行 --> 待机: 停止 运行 --> 故障: 错误发生 故障 --> 运行: 修复
## 4. 高级功能
### 4.1 样式定制
mermaid
graph TD
A[开始] --> B{判断}
B -->|是| C[执行操作]
B -->|否| D[结束]
style A fill:#f9f,stroke:#333
style B fill:#bbf,stroke:#f66,stroke-width:2px
class C,D someClass
classDef someClass fill:#f96,stroke:#333;
4.2 交互功能
mermaid graph TD A[点击我] --> B click A "https://mermaid.js.org" "这是提示文本"
### 4.3 子图 (Subgraphs)
mermaid
flowchart TB
subgraph 子系统1
A --> B
end
subgraph 子系统2
C --> D
end
B --> C
4.4 注释
mermaid flowchart LR %% 这是一条注释 A --> B
## 5. 配置选项
### 全局配置
```javascript
mermaid.initialize({
startOnLoad: true,
theme: 'default', // 或 'forest', 'dark', 'neutral'
flowchart: {
useMaxWidth: true,
htmlLabels: true,
curve: 'basis'
},
sequence: {
diagramMarginX: 50,
diagramMarginY: 10,
actorMargin: 50
}
});
6. 工具与集成
6.1 常用工具
- VS Code：安装 Mermaid 插件实现实时预览
- Obsidian：内置 Mermaid 支持
- GitHub/GitLab：Markdown 文件中支持 Mermaid
- Mermaid Live Editor：在线编辑器
6.2 与框架集成
- React：使用
mermaid-react组件 - Vue：使用
vue-mermaid插件 - Angular：使用
ngx-mermaid库
7. 最佳实践
- 保持简洁：不要过度复杂化图表
- 一致风格：在整个项目中使用相同的样式
- 版本控制：文本格式的图表易于版本控制
- 渐进式展示：复杂图表可以分解为多个小图
- 文档注释：使用注释解释复杂部分
8. 常见问题
Q: 图表渲染不正确怎么办？
A: 检查语法错误，确保所有括号和引号匹配
Q: 如何导出图表？
A: 使用浏览器截图或 Mermaid CLI 工具导出
Q: 支持中文吗？
A: 完全支持，直接在节点文本中使用中文即可
Q: 可以自定义主题吗？
A: 可以，通过 CSS 或配置选项自定义样式