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

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:

flowchart LR
    U[User] --> W[Web frontend]
    W --> A[API gateway]
    A --> S1[Order service]
    A --> S2[User service]
    S1 --> DB[(Database)]
    S2 --> DB

2. ▾ next to “Download PNG” → “Export draw.io (.drawio)”.
3. 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. 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.

Related

• Round-tripping with draw.io (Help Center: format details and FAQ)
• Export to Word, PowerPoint and PDF