Mermaid语法必备

Mermaid 是一种基于文本的图表生成工具，通过类 Markdown 语法实现可视化图表绘制。其语法简洁、支持多种图表类型，且天然适合代码管理和版本控制。以下是 Mermaid 的核心语法详解：

---

一、基础语法结构

1. 图表类型声明

所有图表以特定关键词开头，定义图表类型和方向：

• 流程图：graph TD（上下布局）或 flowchart LR（左右布局）
• 时序图：sequenceDiagram
• 甘特图：gantt
• 类图：classDiagram
• 状态图：stateDiagram

2. 通用语法规则

• 注释：以 %% 开头，如 %% 这是注释
• 节点定义：节点ID[显示文本] 或 节点ID{条件文本}（菱形节点）
• 连线语法：节点A --> 节点B（箭头）、节点A --- 节点B（无箭头）

---

二、核心图表类型详解

1. 流程图（Flowchart）

应用场景：业务流程、算法逻辑、用户交互流程
语法要点：

• 节点形状：
  • []：矩形（默认）
  • {}：菱形（条件判断）
  • (())：圆形（开始/结束）
• 子图：用 subgraph 定义逻辑分组

2. 时序图（Sequence Diagram）

应用场景：系统交互、API 调用时序
语法要点：

• 参与者定义：participant 别名 as 显示名
• 消息类型：
  • ->>：同步消息
  • -->>：异步响应
  • -x：异步请求（带叉箭头）
• 激活框：用 + 和 - 标记处理时段

sequenceDiagram
  A->>B+: 请求
  B-->>A-: 响应

3. 甘特图（Gantt Chart）

应用场景：项目管理、任务进度跟踪
语法要点：

• 时间格式：dateFormat 定义日期格式（如 YYYY-MM-DD）
• 任务依赖：after 表示任务顺序关系
• 关键路径：:crit 标记关键任务

4. 类图（Class Diagram）

应用场景：面向对象系统设计
语法要点：

• 可见性标记：+（public）、-（private）、#（protected）
• 类关系：
  • 继承：--|>
  • 组合：--*
  • 聚合：--o

5. 状态图（State Diagram）

应用场景：状态机建模、生命周期管理
语法要点：

---

三、高级功能与优化

1. 样式自定义
   通过 CSS 类修改颜色、边框等属性：

2. 动态交互（HTML环境）
   添加点击事件（需配合 JavaScript）：

   <script>
     mermaid.initialize({ securityLevel: 'loose' });
   </script>
   

3. 复杂布局技巧

   • 隐藏节点：用 A[ ] 创建空节点调整布局
   • 长文本换行：用 <br> 标签实现多行显示

---

四、工具与资源推荐

1. 在线编辑器：Mermaid Live Editor（https://mermaid.live）
2. IDE 插件：VS Code 的 Mermaid 插件支持实时预览
3. 智能生成工具：DeepSeek、Kimi 可通过自然语言生成 Mermaid 代码
4. 官方文档：Mermaid 中文网（https://mermaid.nodejs.cn）