Mermaid 在线编辑器

内置在 Markdown 编辑器里的 Mermaid 编辑器

Mermaid 把几行文字变成图表，所以图表很容易做对比、评审，也方便和它所解释的文档放在一起。本页的编辑器是内置 Mermaid 支持的分栏 Markdown 编辑器：把图表写在文档里它该在的位置，停止输入片刻后，预览就会重绘。没有改动过的图表直接从缓存取回，所以修改周围的文字依然很快；引擎本身在文档第一次出现图表时才加载，可能要等一会儿。

先在编辑器里输入这段：

```mermaid
flowchart LR
  Idea --> Draft --> Review
  Review -->|changes| Draft
  Review -->|approved| Publish
```

右边就会出现这张流程图。把 LR（从左到右）改成 TD（从上到下），加一个节点，或者重命名一条连线，图都会跟着变。

能画的图表类型

下面每种图表都能在预览里渲染。把图表关键字写在围栏内的第一行：

• 流程图（flowchart TD）——流程、判断、架构草图。
• 时序图（sequenceDiagram）——服务或人之间随时间发生的调用。
• 类图（classDiagram）和状态图（stateDiagram-v2）。
• 实体关系图（erDiagram）——数据库结构。
• 甘特图（gantt）、时间线（timeline）和用户旅程图（journey）。
• 饼图（pie）、象限图（quadrantChart）和思维导图（mindmap）。
• Git 图（gitGraph）、需求图（requirementDiagram）和 C4 图（C4Context）。
• 较新的类型，如桑基图（sankey-beta）、XY 图（xychart-beta）、块图（block-beta）、数据包图（packet）、看板图（kanban）和架构图（architecture-beta）。

beta 类型的图表语法在 Mermaid 不同版本之间可能变化，具体关键字请查阅 Mermaid 官方文档；本编辑器运行的是站点内置的版本。

调试一张图

Mermaid 解析不了代码时，图表块会变成一个错误框，显示解析器的信息——行号、它卡住的文本和它期望的内容。改好那一行，图就会取代报错。用分栏布局，可以同时看到两边；预览会跟着你正在编辑的那一行滚动。图表以 Mermaid 的严格安全模式渲染，所以图表定义里的点击回调和脚本都是禁用的，文档其余部分的行内 HTML 也会被净化。

保存、分享与导出

文档会自动保存在你的浏览器里。导出 → 下载 .md 给你一个 Markdown 文件，可以和代码一起提交。分享会生成一个包含整篇文档的链接，同事打开时图表已经画好。下载 .html 导出独立网页，图表是 SVG；打印 / 保存为 PDF 得到 PDF，其中的图表缩放到多大都清晰。图表配色跟随你选的浅色或深色主题。

什么时候用这个，什么时候用专门的工具

如果你只想反复调整一张图，需要配置面板和图片下载，像 mermaid.live 这样的专门工具正是为此而设计的。如果图表属于某份文档——README、设计笔记、智能体的计划、项目文档——那么能渲染 Mermaid 的 Markdown 编辑器是更短的路径，因为你能在上下文里看到图，还能下载整份文件。对周围的语法不熟？看看 Markdown 语法速查，或者直接打开 Markdown 编辑器。