Mermaid 详解

Markdown 技术文档 Mermaid 是一个基于文本的图表生成工具，用简单的文本语法创建各种图表。

基本概念

纯文本描述 - 用代码写图表
自动布局 - 不需要手动调整位置
多平台支持 - GitHub、GitLab、Notion、Obsidian、VS Code 等都支持
在线编辑器 - https://mermaid.live/

使用方式

Markdown 中使用

```mermaid
graph TD
    A[开始] --> B[处理]
    B --> C[结束]
```

HTML 中使用

<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
  mermaid.initialize({ startOnLoad: true });
</script>

<div class="mermaid">
graph TD
    A --> B
</div>

1. 流程图 (Flowchart)

基本语法

节点形状

方向

从上到下 (Top to Bottom)

从下到上 (Bottom to Top)

从左到右 (Left to Right)

从右到左 (Right to Left)

flowchart 是更新的语法，功能更强大：

方向代码对比

代码	方向	英文全称	效果
`TB` 或 `TD`	从上到下	Top to Bottom / Top Down	↓
`BT`	从下到上	Bottom to Top	↑
`LR`	从左到右	Left to Right	→
`RL`	从右到左	Right to Left	←

连接线类型

实际例子：用户登录流程

2. 时序图 (Sequence Diagram)

基本语法

箭头类型

激活框和注释

循环和条件

实际例子：支付流程

3. 类图 (Class Diagram)

基本语法

关系类型

可见性

实际例子：电商系统

4. 状态图 (State Diagram)

基本语法

复合状态

实际例子：订单状态

5. 实体关系图 (ER Diagram)

基本语法

关系类型

实际例子：博客系统

6. 甘特图 (Gantt Chart)

基本语法

任务状态

实际例子：网站开发

7. 饼图 (Pie Chart)

8. Git 图 (Git Graph)

9. 用户旅程图 (User Journey)

10. 象限图 (Quadrant Chart)

11. 时间线 (Timeline)

12. 思维导图 (Mindmap)

最后更新 · 2026-05-19 23:52

mermaid-技术文档