Two formats, two jobs
- PNG is an image every app accepts: slides, Word, Google Docs, email, chat. It is drawn at twice the diagram's size, so it stays crisp on a high resolution screen and in print. Choose a white background, or a transparent one for a coloured slide.
- SVG is the drawing itself, sharp at any zoom and small. Use it on a web page, in Figma or a vector editor, or anywhere that takes SVG. Copy SVG puts the markup on the clipboard for pasting into code.
The theme beside the buttons changes the diagram's colours: Default, Neutral, Forest, or Dark for a dark slide.
Every kind of Mermaid diagram
The exporter draws whatever Mermaid draws: flowcharts, sequence diagrams, class and state diagrams, entity relationship diagrams, Gantt charts, pie charts, user journeys, timelines, mind maps and the rest. A mistake in the source is named under the diagram with the line Mermaid stopped at, rather than leaving a blank space.
Labels are drawn as SVG text rather than embedded HTML, so the SVG opens the
same in every app and the PNG paints exactly what is on screen. Opening a
.md file with a Mermaid fence in it takes the diagram out of the fence.
Diagrams in your documents
A Mermaid diagram does not need exporting to be read: MarkdownPaper draws any
mermaid fence in a document as the diagram itself, in the
online Markdown viewer, and keeps it drawn in a
PDF. The Mermaid guide
covers the syntax for each kind of diagram.
Questions
How do I convert a Mermaid diagram to PNG?
Paste the diagram's source into the field above, check the drawing, and choose Download PNG. The image is twice the diagram's size, on white unless you choose a transparent background.
How do I export Mermaid as SVG?
Choose SVG to download the file, or Copy SVG to put the markup on the clipboard.
Is my diagram uploaded?
No. Mermaid draws it in this browser tab, and the PNG and SVG are made there too.