Mermaid to PNG, SVG and draw.io
Paste Mermaid code, see the diagram, download it. Flowcharts also convert to an editable draw.io file, with every box and arrow where Mermaid placed it. Everything runs in your browser.
Why convert Mermaid to draw.io?
Mermaid is quick to write and lives well in Markdown and Git. But its automatic layout is hard to adjust, and colleagues outside engineering rarely read code.
A draw.io file lets you drag boxes where you want them, add colours and notes, and share the diagram with anyone. draw.io is free in the browser, on desktop and in VS Code.
How the draw.io export works
For flowcharts, each Mermaid node becomes a draw.io shape of the same kind (rectangle, diamond, cylinder, stadium and so on), each link becomes a connector with its label and arrow, and subgraphs become frames. Positions come from Mermaid's own layout, so the result looks the same.
Other diagram types are placed as one image. You can still annotate around it in draw.io, but not edit its parts.
Mermaid flowchart cheat sheet
| Write | You get |
|---|---|
| flowchart TD | Top to bottom (LR: left to right) |
| A[Text] | Rectangle: a step |
| A(Text) | Rounded rectangle |
| A([Text]) | Stadium: start or end |
| A{Text} | Diamond: a decision |
| A[(Text)] | Cylinder: a database |
| A[/Text/] | Parallelogram: input or output |
| A[[Text]] | Subroutine |
| A --> B | Arrow |
| A -->|Yes| B | Arrow with a label |
| A -.-> B | Dotted arrow |
| A ==> B | Thick arrow |
| subgraph Title … end | A group of nodes in a frame |
Ready-made examples to start from: flowchart examples and templates. What each shape means: flowchart symbols.
Drew it on a whiteboard instead?
Skip the typing. Take a photo of the sketch and Sketch2scheme turns it into an editable draw.io diagram.
Questions
Which Mermaid diagrams can I convert?
All of them export to PNG and SVG: flowcharts, sequence, class, state, ER, Gantt, pie, mind maps and the rest. For draw.io, flowcharts become editable shapes and arrows; other types are placed in the draw.io file as an image.
Is my code sent anywhere?
No. Mermaid runs in your browser and the files are made there too. Only "Open in diagrams.net" sends the diagram, to diagrams.net, when you click it.
How do I get a high-resolution PNG?
The PNG is exported at three times the screen size, sharp enough for slides and documents. For print or very large diagrams, use the SVG: it stays sharp at any size.
Can I convert draw.io back to Mermaid?
Not here yet. draw.io can insert Mermaid code itself (Arrange › Insert › Advanced › Mermaid), but it cannot write Mermaid out.
Uses the open-source Mermaid library. Not affiliated with Mermaid Chart or draw.io.