将 mermaid 图表导出为 PNG、SVG 或 Markdown
图表只有能被看到才有用。Mermaid 提供了四种导出方式 —— 图片、矢量图、源码，或能自我渲染的 Markdown 代码块 —— 具体选哪种完全取决于图表最终要用在哪里。这是精简版说明，还包含每种方式可能出现的问题。
先确定格式
| 用途场景 | 选择 | 原因 |
|---|---|---|
| GitHub、GitLab、Notion、Obsidian | Markdown 代码块 | 原生渲染且可做 diff 对比 —— 无需额外维护文件同步。 |
| 幻灯片、规格文档、聊天消息 | PNG | 可粘贴到任何地方，无需渲染器，处处显示一致。 |
| 网站、印刷文档 | SVG | 矢量图 —— 任意尺寸都清晰，文字仍可选中。 |
| 其他编辑器、代码仓库 | .mmd 源码 | 以后仍可编辑。图片则是死胡同。 |
如果目标平台本身支持渲染 mermaid，那就完全不需要导出。以文本形式提交的图表可以逐行评审；以 PNG 形式提交的同一张图表则只能整体替换。
从本编辑器导出
打开代码标签页 —— 导出按钮位于工具栏中，每个按钮都作用于当前渲染的内容。
- 复制 SVG — 将
<svg>代码复制到剪贴板，可直接粘贴进 HTML 文件或设计工具。 - 下载 SVG — 保存为
diagram.svg。 - 下载 PNG — 保存为
diagram.png，以 2 倍分辨率、白色背景渲染，在高密度屏幕上依然清晰，也不会在白色幻灯片上变成透明的模糊斑块。 - 下载 .mmd — 将 mermaid 源码保存为纯文本文件。
- 下载 .md（Notion） — 将源码包裹在围栏式 ```mermaid 代码块中保存，粘贴到 Notion、GitHub、Obsidian 后即可渲染。
制作幻灯片时选 PNG。任何需要调整尺寸的场景 —— 文档标题、海报、印刷品 —— 请选 SVG；PNG 一旦放大超过导出尺寸就会立刻变得模糊。
更好的做法：保留为文本
围栏式代码块是唯一一种导出后仍可原地编辑的形式。三个反引号、mermaid 一词、你的图表、再三个反引号：
```mermaid
flowchart LR
A[Write] --> B[Review]
B --> C[Merge]
```- GitHub — 可在 README 文件、issue、pull request 和评论中渲染。
- GitLab — 可在 wiki、issue 和 merge request 中渲染。
- Notion — 粘贴到代码块中并将语言设为 Mermaid 即可。
- Obsidian — 可在预览模式和已发布的笔记中渲染。
- Docusaurus / MkDocs Material / VitePress — mermaid 代码块可在构建后的文档中渲染。
常见问题排查
PNG 画面模糊
PNG 是固定分辨率的：导出时使用固定像素尺寸，放大超过该尺寸就需要插值处理。正因如此，本编辑器默认以 2 倍分辨率导出。如果仍然不够清晰，可以导出 SVG 再按需要的尺寸转换 —— 或者直接使用 SVG。
SVG 没有背景色
SVG 导出默认是透明的，因此深色节点文字放在深色幻灯片上会看不清。可以把 SVG 放在浅色背景卡片上，或者直接使用以白色背景导出的 PNG。
在其他地方字体显示不同
SVG 只是引用字体族，而不会内嵌字体，因此没有安装该字体的设备会自动替换成其他字体，导致标签框对不齐。如果无法控制查看者的字体环境，请改用 PNG。
图表被截断
导出读取的是当前渲染的内容，因此导出大型图表前请先重新居中视图。如果某个节点标签特别长，请用 <br> 手动换行 —— mermaid 不会自动换行标签。
两次点击即可导出
打开编辑器，粘贴或绘制你的图表，然后获取 SVG、PNG 或源码。所有功能都无需账号。
常见问题
如何将 mermaid 转换为 PNG？
先渲染图表，然后点击下载 PNG。编辑器会把渲染出的 SVG 以 2 倍比例、白色背景绘制到画布上并保存结果 —— 全程无需服务器往返，图表也不会离开你的浏览器。
可以导出透明背景的 PNG 吗？
通过 PNG 按钮导出的话不行 —— 它故意填充了白色背景，因为透明背景上的深色文字在大多数粘贴 PNG 的场景中都难以辨认。如果需要透明背景，请改为导出 SVG。
导出有尺寸限制吗？
没有固定限制。导出在你的浏览器中完成，实际限制取决于浏览器能渲染的范围 —— 这个范围远远超过图表对人类而言仍然可读的程度。
导出后如何让图表仍可编辑？
保留源码。在下载图片的同时下载 .mmd 文件或 Markdown 代码块；PNG 或 SVG 无法转换回 mermaid，但源码可以直接粘贴回编辑器继续使用。