为什么团队会把 Mermaid 图搬进 Draw.io
图和它描述的代码放在一起时，Mermaid 很好用。但当这张图要放进演示文稿、设计评审，或者交给不写代码的同事编辑时，问题就来了。Mermaid 转 Draw.io 之后，他们用鼠标就能修改这张图。
Draw.io 还提供文字难以精确表达的控制：精确位置、每个图形单独配色、大量图形库里的图标，以及多页面。转换一次后，Mermaid 用来快速起草，Draw.io 用来做适合展示的精修版本。
Mermaid 转 Draw.io 转换器
粘贴 Mermaid 代码，Mermaid 转 Draw.io 会生成原生的图形和连线。在嵌入的 diagrams.net 编辑器里调整后，可下载 .drawio 文件、PNG 或 SVG。无需账号，也不消耗积分。
从示例开始
215 个字符
Mermaid 转 Draw.io 在你浏览器中嵌入的 diagrams.net 编辑器里完成，代码不会发送到 ImageToDrawio 的转换接口。
可编辑的 Draw.io 结果
转换结果会显示在这里
选择一个示例或粘贴自己的代码，点击转换即可看到可编辑的图形。
手上只有这张图的截图？ 把图片转成 Draw.io
从图表代码，到可以自由排版的图
Mermaid 很适合把图和代码、文档放在一起维护，但渲染出来的图很难手动调整。Mermaid 转 Draw.io 会保留你写好的结构，同时把每个节点、文字和连线变成可以正常编辑的 Draw.io 元素。
原生图形，不是一张图片
每个节点都会变成独立的 Draw.io 图形，每条连接都会变成连线。移动方框、修改步骤名称或更换颜色，都不需要改代码。
覆盖常用的 Mermaid 图表类型
页面提供流程图、时序图、类图、ER 图、状态图和思维导图示例，另外还能识别多种其他 Mermaid 图表类型。
直接拿到下一步要用的文件
继续在 Draw.io 里编辑就下载 .drawio 文件，要发布就用 PNG，放进文档就用可缩放的 SVG。所有下载都来自同一张编辑后的画布。
三个步骤
如何把 Mermaid 转成 Draw.io
整个过程大约一分钟，全部在这个页面完成。
1
粘贴 Mermaid 代码
把图表代码粘贴到代码框，或者从示例开始。Markdown 代码块标记可有可无，字符计数会告诉你离上限还有多远。
2
转换并调整
点击转换按钮，结果会在嵌入的编辑器中打开。保存前可以移动图形、修改文字和调整样式。
3
下载或复制
保存 .drawio 文件以便之后继续编辑，导出 PNG 或 SVG 用于发布，或者复制 Draw.io XML 粘贴到其他图里。
转换指南
如何从 Mermaid 得到一张干净的 Draw.io 图
源代码质量、对布局的合理预期，以及合适的输出格式，都会影响最终效果。
哪些内容会保留，哪些会重新计算
节点文字、节点形状（矩形、圆角步骤、判断框等）、连线文字以及每条连接的方向都会带进 Draw.io。子图会变成分组区域，类和实体的属性仍然留在各自的方框里。
布局由 Draw.io 引擎重新计算，所以间距可能和 Mermaid 在浏览器里画出来的不一样。把第一次转换的结果当成结构清晰的起点，拖动几下通常就能得到比任何一边自动排版都更整齐的图。
准备更容易转换成功的代码
代码开头写明图表类型，例如 flowchart TD、sequenceDiagram 或 erDiagram。节点 ID 尽量简短、文字清楚易读，含标点的文字加上引号。能在 Mermaid Live Editor 里正常渲染的代码，转换成功率也最高。
很大的图拆成几张小图会更容易编辑。页面最多接受 50,000 个字符，但包含几百个节点的图放在任何画布上都会很拥挤。可以分段转换，需要时再在 Draw.io 里合并成多页。
选择合适的下载格式
只要这张图以后还会修改，就下载 .drawio 文件。它可以在 diagrams.net、Draw.io 桌面版，以及 Confluence、Jira、Google Drive 和 VS Code 的 Draw.io 集成里打开，所有图形都仍然可编辑。
发到聊天工具、工单和邮件里，用 PNG 这种普通图片就够了。文档网站和打印用 SVG，放大也不会模糊。点击「复制 XML」会把图放到剪贴板，可以通过「其他 → 编辑图表」粘贴进已有的 Draw.io 文件。
连接 Mermaid 和 Draw.io 的实用工具
这个工具聚焦于代码渲染出来之后，大家通常要做的那几步。
由 Draw.io 编辑器自己完成转换
嵌入的 diagrams.net 编辑器负责解析 Mermaid 文本并生成图形。之后打开这张图的也是同一个引擎，所以样式和连线的表现都和平时一致。
先编辑，再导出
可以直接在画布上调整间距、对齐泳道、缩短文字或加上备注。每次下载的都是编辑后的图，而不是最初的布局。
可以直接粘贴 README 里的代码
带 Markdown 代码块标记的文本也能识别。转换前会自动去掉代码块标记，从仓库 Wiki 或 Pull Request 复制的代码无需整理就能转换。
不支持的代码会明确报错
解析失败时，页面会显示原因，例如无法识别的图表类型。改正那一行后重新转换即可，不用猜哪里出了问题。
支持 Draw.io、PNG 和 SVG 下载
转换结果可以保存为可编辑的 .drawio 文件、白底 2 倍分辨率的 PNG，或者任意缩放都清晰的 SVG。
无需账号，不消耗积分
这个页面不会创建转换记录，也不会扣积分。代码留在你的浏览器里，不会保存到 ImageToDrawio 账号中。
常见问题
Mermaid 转 Draw.io 常见问题
关于支持的代码、布局、隐私和输出文件的解答。
1
支持哪些 Mermaid 图表类型？
流程图、时序图、类图、ER 图、状态图、思维导图、甘特图和饼图都能转成原生图形，其他类型也可能可用。遇到无法识别的类型，页面会显示错误，而不是给你一张空白画布。
2
转换结果可以编辑吗？
可以。节点会变成独立的图形，连接会变成连线，都能选中、移动、改样式和改文字。结果是真正的 Draw.io 图，而不是贴在画布上的一张图片。
3
为什么布局和 Mermaid 看起来不一样？
Draw.io 会为转换出来的元素重新计算布局。结构和文字与代码一致，但间距和连线走向可能不同。拖动图形或使用「排列」菜单即可整理。
4
在 Draw.io 里能直接做吗？
Draw.io 可以通过「插入 → 高级 → Mermaid」插入 Mermaid。这个页面适合不想打开文件、只想快速转换，并且顺便拿到 PNG 和 SVG 的场景。
5
我的代码会被上传吗？
转换在页面中嵌入的 diagrams.net 编辑器里完成，代码不会发送到 ImageToDrawio 的转换接口，也不会保存到任何账号。
6
可以把 Mermaid 图转成图片吗？
可以。转换后选择 PNG 得到位图，选择 SVG 得到矢量图。两者都来自当前画布，你做的修改都会体现在图片里。
7
有大小限制吗？
代码框最多接受 50,000 个字符。很大的图即使能转换，编辑起来也会慢、阅读也费劲，把复杂系统拆成几张重点明确的图通常效果更好。
8
如果我只有这张图的图片怎么办？
请改用图片转 Draw.io 转换器。它用 AI 识别截图或照片，把图形和文字重建成可编辑的 Draw.io 图。
把你的 Mermaid 代码变成可编辑的图
粘贴代码，检查转换出来的图形，做那些文字难以表达的调整，再下载你需要的格式。