Diagramate

Working with draw.io: export .drawio, recover Mermaid source

Updated 2026-09-05

Export a draw.io file

Choose “Export draw.io (.drawio)” in the export menu. The file holds one page with one shape: it displays the diagram rendered in your current theme and carries the complete Mermaid source, which is exactly how draw.io itself stores a diagram inserted through its own Mermaid dialog. Open it in draw.io (desktop or the diagrams.net web app) and:

  • Use it as a picture: move it, resize it, add connectors and annotations next to other shapes.
  • Keep editing the Mermaid: double-click the shape (or click its edit icon) and draw.io opens its Mermaid dialog; it re-renders the result with its own engine, so colors switch to draw.io's default look. To keep this site's theme, make the change here and export again.

The file is uncompressed XML, readable in any text editor. Like PNG, SVG, Word, PowerPoint and PDF, this format is free and needs no sign-in; batch export can include it too.

Recover Mermaid source from draw.io

Use “Open file” in the top bar (on a phone, “Open file…” in the Download panel) to pick a .drawio, .xml or .drawio.svg file, or paste the XML of a draw.io file straight into the editor. Every shape that carries Mermaid source is read:

  • One diagram opens directly; several are listed by page name and diagram type so you can pick one.
  • Recoverable: diagrams added in draw.io through Insert → Advanced → Mermaid, and diagrams exported from here, whether draw.io shows them as an image or converted them into an editable group of shapes. The source stays attached to the shape.
  • Not recoverable: shapes drawn by hand, and content that kept only native shapes without source. There is no Mermaid behind those in draw.io either.
  • Compressed and uncompressed .drawio files both work; .drawio.png is not supported yet (save it as .drawio in draw.io first).

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

Questions

The colors changed after re-rendering in draw.io

draw.io uses its own renderer and default palette; this site's theme only applies to the picture exported from here. To keep the theme, edit here and export again instead of re-rendering in draw.io.

Can hand-drawn draw.io shapes be turned into Mermaid?

No. Mermaid is code, and native draw.io shapes have no code behind them; only shapes that started life as Mermaid carry source.

Open the editor

Related articles