Practical diagram guide

Export Mermaid to SVG, PNG, JPEG or PDF

Updated 11 September 2026

Choose the right Mermaid export format, preserve bold labels, and fix oversized or clipped exports.

Choose the format for its destination

Use SVG when you need a scalable vector diagram, PNG for a transparent image in slides or documents, JPEG for a solid-background image, or PDF for a page-sized document. Use MMD to keep editable Mermaid source and JSON to back up the editor project.

Format	Best use	Keep in mind
SVG	Scalable diagrams	Font availability can vary between machines.
PNG	Slides and transparent images	Higher scale increases pixel count.
JPEG	Solid-background images	No transparency; compression may soften text.
PDF	Printing and page layout	The diagram is embedded as a raster image.
MMD / JSON	Editing and backups	These are source files, not images.

Export in four steps

Wait for the preview to finish rendering without a parse error.
Choose Export and select a format.
For PNG, choose scale, background, and padding. For PDF, choose paper size and orientation.
Set a filename and download the file.

For a fast transparent image, choose Edit → Quick download PNG, or find the command in the command palette.

Keep bold and multiline labels

The editor measures HTML labels with the browser, then converts those runs into native SVG text. This preserves bold, italic, color, and the line breaks used by the renderer. The example below lets you try a bold heading with a second line. Change font size using Node Defaults so layout can resize the boxes before export.

If an export is too large

Reduce scale or padding and try again. PNG scale multiplies both width and height: a 4× export has sixteen times the pixels of a 1× export. This editor rejects canvases above 16,384 pixels on either side or 16 megapixels in total. SVG is usually the better choice when the destination supports it and the diagram is very large.

Try it in the editor

Edit this formatted delivery flow in Mermaid, inspect the rendered result, and adapt the working source for your own documentation.

flowchart LR
  A["<b>Plan</b><br/>Define the scope"] --> B["<b>Build</b><br/>Implement and test"]
  B --> C["<b>Ship</b><br/>Review the result"]