可缩放矢量图导出

Mermaid 转 SVG 转换器

将 Mermaid 源码转换为适合 README、文档站或网页的 SVG 文件。在上方检查渲染结果与主题，再点击预览右上角的 SVG 按钮。

将 Mermaid 源码转换为 SVG

下方部署流程是实际文档中的图表场景。导出前可替换为其他受支持的 Mermaid 图型。

OnUML
Loading diagram preview...

发布可以随文档缩放的图表

SVG 用矢量表达形状和连线。目标支持 SVG，且图表需要在不同尺寸下保持清晰时，可选择这种格式。

矢量缩放

在支持的查看器中调整尺寸，不需要放大固定的像素网格。

导出主题

下载前选择颜色，确保图表在目标背景上可读。

独立图片文件

将导出文件用于接受 SVG 图片的文档或网页流程。

可维护的源码

把 Mermaid 源码与输出文件一起保留，结构变化后可以重新渲染。

将 Mermaid 源码转换为 SVG 文件

先确认预览正确。下载不会修复缺失标签或难以阅读的布局。

  1. 01

    粘贴有效 Mermaid 源码或修改部署示例，处理已报告的语法问题。

  2. 02

    选择主题，检查完整预览中的长标签、连线与阅读方向。

  3. 03

    点击预览右上角的 SVG 按钮，在目标环境检查下载的文件，同时单独保留 Mermaid 源码。

在文档中使用导出的 SVG

SVG 是渲染后的图片资源，字体可用性与目标软件的 SVG 支持可能影响文字显示。

SVG 图片兼容性指南（MDN） →

嵌入 README 或网页

目标接受 SVG 时，可以按图片引用，例如 Markdown 中使用 ![部署流程](deployment.svg)。请检查平台图片规则并预览发布结果。

导出后修改图表

节点、分支或关系发生变化时，修改 Mermaid 源码后重新导出。下载的 SVG 不是 Mermaid 源码备份，也不是自动往返编辑格式。

其他软件中的标签

部分 Mermaid 标签会在 SVG 内使用 HTML。设计或演示软件可能采用与浏览器不同的处理方式，使用前在实际目标软件中确认文字显示和编辑能力。

什么时候改用 PNG

目标拒绝 SVG 或不能正确展示标签时，使用 PNG 作为交付文件。SVG 用于可缩放展示，Mermaid 源码用于结构修改。

Mermaid 转 SVG 示例

部署流程包含测试关卡和重试循环，是工程文档中可以作为 SVG 嵌入的实际图表。

flowchart LR
    Commit[提交变更] --> Build[构建应用]
    Build --> Tests{测试通过?}
    Tests -->|否| Fix[修复并重试]
    Fix --> Commit
    Tests -->|是| Deploy[部署发布]
  • 通过与未通过的分支标签说明发布为什么进入部署或返回修复。
  • LR 适合横向流水线，TD 可能更适合较窄的文档栏。
  • 导出后在读者实际使用的网页或应用中检查文件。

常见问题

SVG 下载入口在哪里？

当前源码成功渲染后，点击预览右上角的 SVG 按钮。

放大 SVG 会变模糊吗？

矢量形状和连线可以不发生像素化地缩放，但字体、标签和目标查看器的支持仍需要检查。

可以在设计软件中编辑所有元素吗？

不保证。不同应用处理 SVG 文字、样式和 HTML 标签的方式不同。结构修改应保留并使用 Mermaid 源码。

SVG 包含原始 Mermaid 源码吗？

下载的是渲染后的 SVG，不是源码备份。请单独保留 Mermaid 源码，以便后续修改和渲染。

能转换时序图、ER 图或甘特图吗？

可以，前提是语法被当前编辑器的 Mermaid 版本支持并能成功渲染。SVG 导出不限于部署流程示例。

为什么 SVG 在另一台机器上显示不同？

检查字体是否可用、目标背景以及查看器对 SVG 和 HTML 标签的支持。目标无法一致展示时，可使用 PNG 作为交付替代。

延伸阅读

比较 Mermaid 与 PlantUML

需要为技术文档选择图表语言时，了解两者的语法与建模能力差异。

阅读图表语言比较 →