Mermaid 是如何工作的
Mermaid 解析轻量级文本定义，并在浏览器中生成 SVG 图表。你只需写几行文字，Mermaid 会自动处理布局、间距和样式。
例如，一个三步流程图只需这样写：
graph LR
A[写代码] --> B[推送到 GitHub]
B --> C[部署]Mermaid 语法中的一个简单从左到右的流程图
Mermaid 支持的图表类型
Mermaid 覆盖了开发者最常用的图表类型：
流程图
使用 graph TD（从上到下）或 graph LR（从左到右）构建流程、决策树和系统架构图。节点可以是矩形、圆角矩形、菱形（决策节点）、圆柱体（数据库）或圆形。
graph TD
A[开始] --> B{是否正常？}
B -->|是| C[发布]
B -->|否| D[调试]
D --> B序列图
序列图用于描述参与者之间随时间推移的交互，非常适合记录 API 流程、认证序列和微服务通信。
sequenceDiagram
浏览器->>服务器: GET /api/data
服务器->>数据库: SELECT * FROM items
数据库-->>服务器: 返回数据
服务器-->>浏览器: 200 OK实体关系图（ER 图）
ER 图描述数据库中的表及其关系。Mermaid 的 erDiagram 语法支持基数符号和内联属性定义。
甘特图
甘特图以时间轴展示项目进度，包含阶段、任务、工期和依赖关系，适用于迭代计划、产品发布路线图和版本计划。
其他图表类型
Mermaid 还支持类图（UML）、思维导图、饼图、状态图等。随着每个版本的发布，支持的类型还在持续增加。
为什么开发者选择 Mermaid
Lucidchart、draw.io 等绘图工具固然好用，但它们生成的是二进制文件，难以在 Pull Request 中进行 diff 和 Review。Mermaid 图表以纯文本存储，天然具备以下优势：
版本控制——与代码一起提交到 Git，每次修改都有完整记录。
文档站点——GitHub、GitLab、Notion 等平台原生支持在 Markdown 代码块中渲染 Mermaid。
效率——更新图表只需修改一行文字，无需重新排列图形。
可移植性——随时导出为 SVG 或 PNG，无供应商锁定。
如何开始使用 Mermaid
体验 Mermaid 最快的方式是直接在浏览器中打开在线编辑器——无需安装任何工具。Diagram.RS 是一个免费、注重隐私的 Mermaid 编辑器：在左侧粘贴或输入 Mermaid 语法，右侧即可实时看到图表更新。
你也可以在自己的项目中集成 Mermaid：引入 mermaid npm 包，或在 GitHub Flavored Markdown 的代码块中使用——GitHub 会自动渲染 Mermaid 图表。