← Back to editor

Practical diagram guide

Export Mermaid to SVG, PNG, JPEG or PDF

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.

FormatBest useKeep in mind
SVGScalable diagramsFont availability can vary between machines.
PNGSlides and transparent imagesHigher scale increases pixel count.
JPEGSolid-background imagesNo transparency; compression may soften text.
PDFPrinting and page layoutThe diagram is embedded as a raster image.
MMD / JSONEditing and backupsThese are source files, not images.

Export in four steps

  1. Wait for the preview to finish rendering without a parse error.
  2. Choose Export and select a format.
  3. For PNG, choose scale, background, and padding. For PDF, choose paper size and orientation.
  4. 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

Try rich text and wrapping before exporting your diagram.

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"]
Open this example Download .mmd

Opening the example lets you review it before replacing your current diagram.

Syntax reference: official Mermaid documentation.

Keep exploring