How do I open a Mermaid diagram in draw.io?

Short answer

The ▾ next to "Download PNG" has Export .drawio. Open that file in draw.io and you get a Mermaid shape you can double-click to keep editing the code — the export uses the same structure draw.io itself writes when you insert Mermaid, with the source stored on the shape.

And back again

Drop a .drawio or .drawio.svg file onto "Open file" in the top bar (or paste its contents) and every Mermaid source inside comes back out; if there are several, you pick one. Compressed and uncompressed draw.io files both work.

When the round trip is worth it

• Your team's diagrams live in draw.io and this one has to join them
• You need free-floating annotations, frames or a legend around the diagram — that's what a canvas tool is for
• If you only want to nudge things around, you don't need draw.io at all: "Canvas" in the top bar moves the diagram onto a built-in free canvas

One boundary to know

Once a diagram moves to draw.io — or to the built-in canvas — edits there don't come back to the code. The code stays the source of truth here, so the order that works is: get the structure right here, then export for final layout.

Try it

flowchart LR
    A[Backlog] --> B[This cycle]
    B --> C[Design]
    C --> D[Build]
    D --> E[Release]
    E --> F[Retro]
    F --> A

Related

• draw.io round trips
• The free canvas