有了 Mermaid，几行文字就能变成一张图。Markdown Preview Editor 可以当作 Mermaid 在线编辑器使用：在 Markdown 文档中输入图表代码，预览区会随着输入实时绘制。与独立的画图工具不同，图表和周围的文字放在一起，设计文档、README 或教案都能保存在同一个文件里。
什么是 Mermaid 图表？
Mermaid 图表是用纯文本描述的图。您不需要拖动方框和箭头，只要写出 A --> B 这样的行，Mermaid 就会自动完成布局。它支持流程图、时序图、甘特图、状态图、类图、饼图、思维导图等。
图表是文本，所以修改方便，可以纳入版本控制，改动也会显示在 diff 中。GitHub、GitLab、Obsidian 和许多文档工具都能渲染 Mermaid，同一段代码在这些地方都能用。
如何画一张图
- 打开编辑器。 进入在线编辑器。
- 添加 Mermaid 代码块。 输入三个反引号加
mermaid，或者用 高级编辑器 工具栏中的 Mermaid 图表 按钮插入模板。 - 编写图表。 右侧预览会随输入重新绘制，少了箭头或括号能立刻发现。
- 保存或分享。 把文档另存为
.md，导出为 HTML，或打印为 PDF，图表都会包含在内。
下面是第一张流程图：
markdown```mermaid
flowchart LR
A[想法] --> B{值得做吗？}
B -- 是 --> C[动手做]
B -- 否 --> D[先放一放]
```
可用的图表类型
| 类型 | 开头写法 | 适用场景 |
|---|---|---|
| 流程图 | flowchart TD / flowchart LR |
流程、决策、算法 |
| 时序图 | sequenceDiagram |
API、登录、用户路径 |
| 甘特图 | gantt |
项目计划和时间线 |
| 状态图 | stateDiagram-v2 |
订单或文档的状态 |
| 类图 | classDiagram |
数据模型和代码结构 |
| 饼图 | pie |
各部分占总体的比例 |
每种类型的完整语法和可直接复制的示例，见我们的指南 Markdown 中的 Mermaid 图表。
为什么用它
- 实时预览。 图表随输入更新，语法错误马上就能看到。
- 文字和图表在一起。 说明、公式和流程图写在同一个 Markdown 文件里。
- 保护隐私。 图表在您的浏览器中绘制，代码不会发送到服务器。
- 免费开源。 无需账号，图表数量不限。
使用限制
- 不能单独下载某一张图表的 PNG 或 SVG。图表作为文档的一部分导出，包含在 HTML 导出和 PDF 中。如需单独的图片，可以用 Mermaid 官方工具导出。
- 自定义主题和单个节点的样式有限：图表使用简洁的默认样式，与浅色或深色主题相匹配。
- 图表以代码形式编写，不支持可视化拖放编辑。
想查看一个已有的、带图表的 Markdown 文件？请使用 Markdown 查看器，或返回 Markdown 在线编辑器 首页。
常见问题
这个 Mermaid 在线编辑器免费吗？
免费。它是开源软件，无需注册，没有任何限制。
支持哪些 Mermaid 图表类型？
流程图、时序图、甘特图、状态图、类图、实体关系图、饼图、思维导图、时间线，以及 Mermaid 支持的其他类型。
能导出 Mermaid 图表吗？
把文档导出为 HTML 或打印为 PDF 时，图表会包含在内。不支持单独下载某张图表的 PNG 或 SVG。
为什么我的 Mermaid 图表显示不出来？
最常见的原因是语法错误：少了箭头、括号没有闭合，或者标签中含有特殊字符却没加引号。第一行必须写明图表类型，例如 flowchart TD。
编辑器会把我的图表代码发送到别处吗？
不会。图表在您的浏览器中绘制，文档一直留在您的设备上。