当前位置：首页 > news >正文

Mermaid 语法教程

news 2025/7/7 0:47:03

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`	数据库设计