Mermaid 是一种使用 Markdown 风格 语法来绘制流程图、时序图、甘特图等可视化图表的工具。它适用于技术文档、Wiki、开发文档等场景。

---

1. 安装与使用

1.1 在线使用

• 直接访问 Mermaid Live Editor。
• 在 GitHub、Notion、Typora 等支持 Mermaid 的平台上直接书写。

1.2 本地安装

如果要在本地 Markdown 工具或 Web 项目中使用 Mermaid，可以安装它的 npm 包：

npm install -g @mermaid-js/mermaid-cli  # 安装 Mermaid CLI

在 HTML 文件中使用：

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

在 Node.js 环境下使用 CLI 生成 SVG：

mmdc -i input.mmd -o output.svg

---

2. 基础语法

2.1 流程图（Flowchart）

示例：

语法解析：

• flowchart TD：从上到下绘制（LR 为从左到右）。
• A[文本]：矩形框，表示开始或结束。
• B{条件}：菱形，表示判断条件。
• A --> B：箭头，表示流程。
• B -->|是| C：带标签的分支。
• C --> D：流程的连接。

2.1.1 额外形状

形状	语法
圆角矩形	A((文本))
平行四边形（输入/输出）	B[/文本/]
菱形（判断）	C{条件}

2.2 时序图（Sequence Diagram）

示例：

语法解析：

• participant 定义参与者。
• A->>B: 表示 A 发送消息给 B。
• B-->>A: 表示 B 回复 A。
• Note right of B: 这是一条注释 为右侧注释。

2.3 甘特图（Gantt Chart）

示例：

语法解析：

• title：甘特图标题。
• section：定义阶段。
• 任务名称 : 状态, 开始时间, 持续天数
• done：已完成，active：进行中。

2.4 类图（Class Diagram）

示例：

语法解析：

• classDiagram 定义类图。
• class 类名 {} 定义类和属性、方法。
• <|-- 表示继承关系。
• + 号表示公有属性/方法。

---

3. 进阶用法

3.1 状态图（State Diagram）

示例：

语法解析：

• [ * ] 代表起点和终点。
• --> 定义状态转换。

3.2 饼图（Pie Chart）

示例：

语法解析：

• title 设置标题。
• 每个数据项格式为："名称" : 数值。

3.3 实体关系图（ER Diagram）

示例：

语法解析：

• ||--o{ 表示一对多关系。
• ||--|{ 表示多对多关系。
• 类 {} 内部可以定义字段。

---

4. 总结

图表类型	关键字	作用
流程图	flowchart	展示流程逻辑
时序图	sequenceDiagram	显示消息交互顺序
甘特图	gantt	项目进度管理
类图	classDiagram	设计类结构
状态图	stateDiagram	展示状态转换
饼图	pie	显示占比
ER 图	erDiagram	数据库设计

Mermaid 提供了一种直观、简单的方式来绘制图表，使技术文档更加清晰直观！🎯