稳定渲染器Live previewExportDeveloper tool

Draw.io 转 SVG 预览

粘贴未压缩 draw.io XML，快速检查 SVG 渲染结果，避免破损 XML、裁切对象和隐藏草稿进入文档。

示例

Detected draw.io XML

This input may work better in the matching tool. Open draw.io XML tool

Draw.io XML

预览结果就绪

预览结果会显示在这里。

下一步可以继续

把当前预览结果带到相关工具里继续转换、排查或导出。

AI 图表生成器

用自然语言生成可编辑 Mermaid 图表，并在导出前完成预览和 review。

打开

Mermaid AI 修复器

用 AI 修复 Mermaid 语法错误，并在发布前检查图表语义和可读性。

打开

架构图生成器

用 AI 从产品或系统说明生成 Mermaid 架构图。

打开

使用方法

1粘贴未压缩 diagrams.net XML，或加载示例。
2预览 SVG，检查页面名称、对象数量、标签和可见边界。
3确认图表适合文档或 issue 后，再复制或导出 SVG。
4如果无法预览，请在 diagrams.net 中另存为未压缩 XML 后重试。

常见场景

draw.io XML 预览SVG 导出检查生成图 QA文档流水线 reviewdiagrams.net 文件检查

常见问题

为什么我的 draw.io 文件无法渲染？

很多 .drawio 文件是压缩格式。请从 diagrams.net 导出或保存为未压缩 XML 后再粘贴。

它能替代 diagrams.net 吗？

不能。它是快速预览和导出界面，完整视觉编辑仍应使用 diagrams.net。

导出 SVG 前应该检查什么？

检查页面选择、对象是否被裁切、标签是否可读，以及图里是否包含私有文本或内部域名。

应该发布 SVG 还是保留 draw.io XML？

给读者发布 SVG，同时保留 draw.io XML 作为可编辑源文件，这样文档干净且可维护。

为什么文档流水线前还要浏览器预览？

它能提前发现破损 XML、巨大空白、隐藏草稿对象，以及在编辑器里看着正常但静态文档里失败的标签。

Draw.io to SVG Preview 可以渲染未压缩 diagrams.net XML，不必打开完整编辑器也能检查 draw.io 文件。

它适合 code review、文档流水线、生成式 draw.io 文件以及导出图片前的快速检查。

这个预览关注可读 SVG 和源码检查；压缩或二进制格式需要先在 diagrams.net 里保存为未压缩 XML。

Demo：发布前检查生成的 draw.io XML

生成的 draw.io 文件进入文档流水线前应该先预览。快速 SVG 渲染可以发现破损 XML、裁切节点和意外标签。

确认预览显示目标页面，而不是空白默认页。
检查对象标签是否被边界裁切。
分享导出 SVG 前移除内部 URL 或凭据。

<mxfile host="app.diagrams.net">
  <diagram name="Preview">
    <mxGraphModel>...</mxGraphModel>
  </diagram>
</mxfile>

发布清单：导出 SVG 但不丢失含义

draw.io 图在编辑器里看起来正确，不代表导出的 SVG 适合文档。导出前要看静态读者是否仍能理解上下文。

页面标题和图标题应一致。
导出前移除画布外草稿对象。
检查 SVG 在浅色和深色文档背景中的可读性。

Source: checkout.drawio
Artifact: checkout.svg
Review: labels, bounds, private text, page name

维护模式：把 XML 当源文件

SVG 是发布产物，不应成为唯一来源。把 XML 和 SVG 的关系写清楚，未来修改才不会只改图片。

仓库保留 .drawio XML。
CI 或人工步骤从 XML 导出 SVG。
PR 中同时 review 源文件和渲染结果。

docs/diagrams/checkout.drawio -> public/images/checkout.svg