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 the diagram on one canvas with other shapes, frames or a legend — that's what a canvas tool is for (for circling, arrows and short notes, “Annotate” in the preview's top-left corner is enough)

One boundary to know

Once a diagram moves to draw.io, 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