📊 Mermaid 图预览

输入 Mermaid 语法即可实时渲染 SVG。支持 flowchart / sequence / class / state / gantt / pie / mindmap / gitGraph / journey。SVG 复制、SVG/PNG 下载、主题切换。

完全免费无需注册浏览器内完成 5 种语言深色模式

🔒 Mermaid 从 CDN 加载并在浏览器中渲染。源代码不会发送到服务器。

示例: 主题:

📝 Mermaid 输入

👁 预览

📖 常见的坑

输入 Mermaid 语法即可立刻渲染出图，可切换主题并导出 SVG 或 PNG。渲染由从 CDN 加载的 Mermaid 在浏览器内完成，图的源码不会被上传。被检查的只有语法，没有任何东西会去看图本身对不对——悬空的箭头、说不通的流程，只要能解析，就会被安静地画出来。「画出来了」和「说清楚了」之间隔着距离。

情形	会发生什么	怎么处理
标签里带括号或符号就报语法错误	写成 `A[处理(1)]`，解析器会把 `)` 当成节点形状的结束，就在那里崩掉。`#`、`:`、`;`、`{`、`"` 也一样。麻烦的是它报错的方式：Mermaid 很少告诉你是第几行第几列出的问题，要么整张图消失，要么给出一条指向无关位置的消息。于是你要在五十行里找一个字符。	请给标签加上双引号——写成 `A["处理(1)"]`，内容就按字符串处理，括号和符号都会原样显示。若标签里要包含真正的 `"`，请使用 Mermaid 自有的实体 `#quot;`，换行则用 `<br/>`。诊断的诀窍是怀疑你刚加的那一行：原本正常的图在新增一行后坏掉，原因几乎必定就是那一行。画大图时请每五行渲染确认一次——一口气写完五十行才发现坏了，时间就耗在定位上了。
导出 PNG 后字体变了，或者文字不见了	PNG 导出的做法是把已渲染好的 SVG 画到 Canvas 上再输出。这一过程中，SVG 引用的 Web 字体在 Canvas 一侧无法解析，会回退到系统字体，所以原本用等宽对齐的表格会变得参差不齐。更糟的是，当 Mermaid 用 `foreignObject` 以 HTML 方式绘制标签时，某些浏览器画到 Canvas 时会让标签整个变成空白——屏幕上看着没问题，唯独导出的 PNG 里没有文字。	能用 SVG 就用 SVG。GitHub 的 README、Zenn、Notion 以及多数 CMS 都能直接贴 SVG，而且 SVG 放大不失真，文字仍可选中。确实需要 PNG 的场合（贴进 Slack、做社交卡片图），请把图中字体指定为 `sans-serif`、`system-ui` 这类必定存在的字体。导出后务必打开图片确认内容——在你打开之前，空白标签和一次成功的导出看起来是一样的。
图往横里摊得太开，根本没法看	`flowchart TD`（自上而下）随着分支增多而向两侧摊开，`LR`（自左向右）随着步骤增多而向右延伸。两者都由布局引擎自动排布，你无法控制宽度。贴进 GitHub 的 README 后会按容器宽度缩放，因此节点超过十五个左右，文字就看不清了。移动端更糟——许多环境根本不允许横向滚动——实际上什么也传达不了。	请别再往一张图里硬塞。图看不懂的首要原因不是布局引擎，而是想用一张图讲完整个系统。用大约七个节点画出全景，再把各部分拆成各自的图，两边就都能读了。用 `subgraph` 分组能形成视觉块并抑制宽度。方向按用途来选：流程步骤用 `LR`，判断分支用 `TD` 通常更易读。验证时务必按目标位置的真实宽度来看——本页的预览很宽，在这里读得清，未必在 README 里也读得清。

Mermaid 的语法会随版本变化。从 8.x 到 11.x 之间，graph 被 flowchart 取代，gantt 的日期格式与 classDiagram 的写法也有改动。本页使用的是 Mermaid 11.x，但 GitHub、GitLab、Notion 以及各类 CMS 各跑各的版本，有些甚至不公开是哪一版——也就是说，在这里画得出来，永远不保证在目标位置也画得出来。用到新语法（mindmap 或较新的形状）时尤其要确认在粘贴处的实际显示。另外：Mermaid 默认 securityLevel: strict，会禁用标签内的 HTML 与点击事件。虽然有放宽它的设置，但在渲染用户提交的 Mermaid 的服务里，绝不可放宽——标签就是 XSS 的入口。

📖 使用方法

1

输入语法

在左侧编辑器输入。使用示例按钮加载模板。
2

选择主题

从 default / dark / forest / neutral 选择。
3

导出

复制 SVG 或下载 SVG / PNG。

❓ 常见问题

支持哪些图类型?

flowchart / sequence / class / state / gantt / pie / mindmap / gitGraph / journey,基于 Mermaid 11。

PNG 下载如何工作?

将渲染的 SVG 绘制到 Canvas 后导出 PNG。

Mermaid 源会外发吗?

不会。仅库从 CDN 加载。

🔗 相关工具

🐛 此工具出现问题了吗？

免费、无需注册。仅提供复现步骤也有帮助。报告将直接发送给运营者并用于改进。