Mermaid to draw.io converter
Paste Mermaid code and download a .drawio file. Flowcharts arrive as native shapes, connectors and containers that you can edit in diagrams.net, Confluence or VS Code. Free, and nothing is uploaded.
flowchart TD
A([Customer places order]) --> B{In stock?}
B -->|Yes| C[Charge card]
B -->|No| D[Notify customer]
subgraph Fulfilment
C --> E[(Orders DB)]
E --> F[[Ship parcel]]
end
F --> G([Done])How to do it
- Step 1
Paste your code
Paste your Mermaid code into the box above.
- Step 2
Check the preview
The preview shows what will be converted and whether it becomes native shapes.
- Step 3
Download the file
Click Download .drawio.
- Step 4
Open in draw.io
Open it in diagrams.net or the draw.io desktop app and edit away.
Why move a diagram to draw.io
Mermaid is quick to write and easy to keep in version control. draw.io is good at the last mile: precise alignment, brand colours and diagrams that non-developers will edit. Converting lets you draft in code and finish by hand without redrawing anything.
How the conversion works
The flowchart is parsed with the same Mermaid parser the editor uses, laid out with a layered layout in the flowchart's direction, and written as draw.io XML. Node ids become cell ids, so edges stay attached when you move things around.
One way only
Once a diagram has been edited in draw.io, it does not convert back to Mermaid. Keep the Mermaid source if the diagram will keep changing; regenerate the draw.io file when it does.
What this does not do
- Only flowcharts become editable shapes. Sequence, class, ER, state and other diagrams are placed as one image.
- classDef colours and per-node styles are not carried over; restyle in draw.io.
- Shapes draw.io has no equivalent for, such as some of the newer Mermaid shapes, become rectangles.
Frequently asked questions
How do I open the file in draw.io?
Download the .drawio file and open it in app.diagrams.net or the draw.io desktop app with File, Open. You can also drag the file onto an open draw.io window, or import it into Confluence or Jira if your draw.io plugin allows it.
Will I be able to edit the shapes?
Flowcharts are converted to native draw.io shapes: rectangles, rounded boxes, diamonds, cylinders, hexagons, circles and the rest, connected by real connectors with their labels, with each subgraph as a container. Other diagram types (sequence, class, ER and so on) are added as one image you can move and annotate but not edit shape by shape.
Doesn't draw.io already import Mermaid?
draw.io has its own Mermaid import (Arrange, Insert, Advanced, Mermaid), but it inserts the diagram as an image or as a locked group. This converter writes ordinary draw.io shapes, so you can restyle and rearrange them freely.
Will the layout match Mermaid exactly?
The layout is recomputed with the same top-down or left-to-right direction as your flowchart, so it will look similar to the Mermaid preview but not identical. Every shape is free to move once it is in draw.io.