Round-trips with draw.io: export .drawio to keep editing, bring the code back

Export a diagram as a draw.io file, double-click it in draw.io to keep editing the Mermaid, mix it with other shapes; and read the Mermaid code back out of .drawio or .drawio.svg files or pasted content.

About 3 minUpdated 2026-09-06

When you need it

The team keeps its diagrams in draw.io, a Mermaid diagram has to sit in the same file as a hand-drawn architecture, or someone only accepts .drawio files. Export .drawio from Diagramate instead of a PNG.

Export .drawio

  1. Render the diagram in the editor; this one will do:
mermaidOpen in the editor
flowchart LR
    U[User] --> W[Web frontend]
    W --> A[API gateway]
    A --> S1[Order service]
    A --> S2[User service]
    S1 --> DB[(Database)]
    S2 --> DB

Edit the text, switch themes and download PNG, Word or PowerPoint from there.

  1. ▾ next to “Download PNG” → “Export draw.io (.drawio)”.
  2. Open it in draw.io desktop or diagrams.net. The file has one page and one shape: it shows the diagram rendered in your current theme and carries the complete Mermaid source, which is exactly the form draw.io uses for its own “Insert → Advanced → Mermaid”.

Inside draw.io:

  • Use it as a picture: drag, resize, add connectors and notes, mix it with other shapes.
  • Keep editing the Mermaid: double-click the shape and draw.io opens its Mermaid editor; after the edit, draw.io re-renders with its own engine and default colours, without moved positions or annotations (the line at the end of the code is still there, so bringing the file back here restores them). To keep Diagramate's theme, edit here and export again.

The format is free and needs no account; batch / bundle export can include it too.

Bring the code back from draw.io

“Open file” in the top bar (on a phone: “Open file…” in the “Download” panel) accepts .drawio, .xml and .drawio.svg files; you can also paste a draw.io file's XML straight into the editor. Every shape that carries Mermaid source is read: one shape opens directly, several are listed by page and diagram type for you to choose.

Recovered: diagrams added in draw.io through “Insert → Advanced → Mermaid” and diagrams exported from Diagramate, whether draw.io shows them as an image or converted them into an editable group. Not recovered: shapes drawn by hand, which never had Mermaid source. Compressed and uncompressed .drawio both work; .drawio.png is not supported yet, save as .drawio in draw.io first.

Reading happens in your browser; the file is not uploaded.

Try it in the editorLooking for a specific answer? Try the Help Center

More guides

All guides