How to Export Mermaid Diagrams to SVG and PNG
Prepare a Mermaid diagram for documentation, presentations, and tickets by exporting it as SVG or PNG from the browser editor.
By Mermaid Studio Team · Published August 2, 2026 · Updated August 2, 2026
Choose the format for the destination
SVG keeps diagram lines and text sharp at different sizes, which makes it a good choice for documentation and design tools. PNG is convenient when a destination expects a raster image or when you need a quick attachment.
Keep the Mermaid source as the editable original even after exporting. The source is easier to review and regenerate than a manually edited image.
Prepare the diagram before export
Check labels, spacing, and the reading direction at the size where people will see the diagram. Remove temporary notes and make sure the diagram has enough context to stand on its own.
- • Use meaningful titles and labels
- • Check that arrows and text are not clipped
- • Prefer SVG for scalable documentation
- • Use PNG when a raster upload is required
Keep the editable source with the export
flowchart LR
Source[Mermaid source] --> Preview[Browser preview]
Preview --> SVG[SVG export]
Preview --> PNG[PNG export]Export from the Mermaid Studio editor
Open a diagram in the browser editor, confirm the preview, and use the export controls to save SVG or PNG. If the diagram is part of a team project, save the Mermaid source as well so another person can continue editing it.
Keep exports reproducible
Store the source code and any important theme or configuration choices with the document. When the diagram changes, regenerate the image rather than editing an old export by hand.