可缩放矢量图导出

Mermaid 转 SVG 转换器

在线将 Mermaid 源码转换为 SVG,边编辑边预览,并下载适合技术文档、网页、设计工具和版本管理的清晰矢量图。

将 Mermaid 源码转换为 SVG

编辑示例或粘贴自己的 Mermaid 源码,确认预览结果后下载可缩放 SVG 文件。

将 Mermaid 源码转换为 SVG

修改源码后,预览会自动更新。

mermaid-to-svg.mmd5
实时预览等待渲染

打开完整编辑器

导出缩放后仍然清晰的 Mermaid 图表

SVG 以可缩放格式保留渲染结果,适合技术文档、响应式网页和接受 SVG 资源的设计流程。

缩放不失真

无论用于小型 README 还是大屏展示,线条、形状和文字都能保持清晰。

适合网页与文档

将 SVG 用于文档站点、代码仓库、Wiki 和支持矢量资源的设计工具。

实时 Mermaid 预览

修改源码时同步查看渲染结果,并在源码旁直接检查语法反馈。

无需本地安装

直接在现代浏览器中使用,无需安装 Mermaid CLI、桌面应用或编辑器插件。

继续使用 OnUML

将当前源码带入完整编辑器,继续使用 AI 生成、修复、分享和项目管理。

如何将 Mermaid 转换为 SVG

下载前先验证源码和预览,确保矢量图中的结构、标签和主题符合发布要求。

  1. 01

    粘贴 Mermaid 源码,或修改可运行的默认示例。

  2. 02

    检查实时预览,并修复编辑器旁显示的语法错误。

  3. 03

    选择符合目标文档或网页背景的 Mermaid 主题。

  4. 04

    按预期展示宽度检查长标签、交叉连线和图表方向。

  5. 05

    点击“下载 SVG”,保存矢量文件。

为什么 SVG 适合 Mermaid 图表

Mermaid 图表主要由文字和几何图形构成,与矢量输出天然匹配,可在不同显示尺寸下保持可读性。

任意尺寸保持清晰

SVG 不依赖固定像素,响应式页面或高分屏放大后,文字和连接线也不会模糊。

导出前先检查预览

转换器导出当前渲染结果,应先解决语法、裁切和布局问题。

为发布环境选择主题

导出的 SVG 会保留主题颜色,应根据最终页面背景选择合适主题。

SVG 与 PNG 的选择

网页和可缩放文档优先使用 SVG;只支持普通图片或附件上传时使用 PNG。

Mermaid 转 SVG 示例

默认流程图展示从源码、预览到 SVG 下载的转换过程,可替换成任意受支持的 Mermaid 图表。

flowchart LR
    Source[Mermaid 源码] --> Render[渲染图表]
    Render --> Review{预览正确吗?}
    Review -->|否| Source
    Review -->|是| Export[下载 SVG]

比较图表工作流

Mermaid 与 PlantUML 应该怎么选

比较语法、图表类型、渲染流程和技术文档中的维护方式。

阅读 Mermaid 与 PlantUML 对比

常见问题

如何将 Mermaid 转换为 SVG?

粘贴有效的 Mermaid 源码,确认实时预览,然后点击“下载 SVG”保存当前矢量图。

SVG 放大后会失真吗?

不会。SVG 是矢量格式,线条、形状和文字在不同尺寸下都能保持清晰。

可以转换所有 Mermaid 图表类型吗?

可以转换当前编辑器 Mermaid 版本支持的图表,包括流程图、时序图、类图、ER 图、状态图和甘特图。

需要安装 Mermaid CLI 吗?

不需要,编辑、预览和 SVG 导出都在浏览器中完成。

可以修改 SVG 主题吗?

可以,下载前选择 Mermaid 主题,导出的 SVG 会反映当前渲染主题。

应该选择 SVG 还是 PNG?

网页和可缩放文档使用 SVG;演示文稿、附件和只接受位图的平台使用 PNG。