与 draw.io 互通：导出 .drawio 继续编辑，再把代码取回来

什么时候需要

团队已经在用 draw.io 管图、要把 Mermaid 图和手画的架构图放在同一个文件里、或者对方只收 .drawio 文件——这时从图搭子导出 .drawio，而不是 PNG。

导出 .drawio

1. 在编辑器里把图渲染好，用下面这段也行：

flowchart LR
    U[用户] --> W[Web 前端]
    W --> A[API 网关]
    A --> S1[订单服务]
    A --> S2[用户服务]
    S1 --> DB[(数据库)]
    S2 --> DB

2. 「下载 PNG」旁边的 ▾ → 「导出 draw.io（.drawio）」。
3. 用 draw.io 桌面版或 diagrams.net 网页版打开。文件里是一页、一个图形：显示为你当前主题渲染出的图，同时带着完整的 Mermaid 源码——这正是 draw.io 自己「插入 → 高级 → Mermaid」时用的形态。

在 draw.io 里：

• 直接当图用：拖动、缩放、加连线和标注，和别的图形放在一起。
• 继续改 Mermaid：双击图形，draw.io 打开它的 Mermaid 编辑框，改完由 draw.io 重新渲染。注意重新渲染用的是 draw.io 自己的引擎，配色会变成它的默认样式；想保留图搭子的主题，就回到这里改完再导一次。

这一格式免费、不需要登录；批量 / 打包导出里也能勾上它。

从 draw.io 取回代码

顶栏「打开文件」（手机在「下载」面板里的「打开文件…」），选 .drawio、.xml 或 .drawio.svg 文件；或者把 draw.io 文件的 XML 内容直接粘进编辑器。图搭子会读出文件里所有带 Mermaid 源码的图形：只有一张直接打开，有几张列出来让你选（按页名和图类型）。

取得回的：在 draw.io 里通过「插入 → 高级 → Mermaid」加进去的图，以及图搭子导出的图——不管它在 draw.io 里显示成图片还是被转成了可编辑的图形组。取不回的：手工画的原生图形，它们本来就没有 Mermaid 源码。压缩与未压缩的 .drawio 都认；.drawio.png 暂不支持，在 draw.io 里另存为 .drawio 即可。

读取在浏览器本地完成，文件不上传。

相关

• 与 draw.io 互通（帮助中心：格式细节与常见问题）
• 导出到 Word、PPT、PDF