Skip to content
MermaidViewer
Log inOpen editor

How to Export Mermaid Diagrams to PNG, SVG and PDF

Convert Mermaid code to PNG, SVG or PDF for free. Choose resolution, transparent backgrounds and themes, copy to clipboard, and export from the command line.

5 min readUpdated

Sometimes you need a diagram as a file — for slides, a Word document, a design tool or a platform that doesn't render Mermaid. MermaidViewer exports any diagram to PNG, SVG or PDF directly in your browser, so your code never leaves your device.

Which format should you choose?

FormatBest forNotes
SVGWebsites, docs, Figma, further editingVector — sharp at any size, small files, editable text
PNGSlides, chat, email, WordChoose 2x–4x scale for crisp results on high-DPI screens
PDFPrinting, reports, sharing with non-technical peopleVector PDF that keeps text selectable

Exporting in the editor

  1. Open the editor and paste your code.
  2. Choose a theme (default, neutral, dark, forest or base) from the toolbar.
  3. Click Export and pick PNG, SVG or PDF. For PNG, choose the scale and whether the background is transparent or white.
  4. Use Copy PNG to paste the image directly into Slack, Google Docs or Notion.

Need a quick conversion without the full editor? Use the dedicated Mermaid to PNG, Mermaid to SVG and Mermaid to PDF converters.

Exporting from the command line

For automation (for example in CI), the official Mermaid CLI converts files in bulk:

bash
npx -p @mermaid-js/mermaid-cli mmdc -i diagram.mmd -o diagram.svg
npx -p @mermaid-js/mermaid-cli mmdc -i diagram.mmd -o diagram.png -s 3 -b transparent

Troubleshooting exports

  • Blurry PNG — increase the scale to 3x or 4x.
  • Black background in dark mode — choose a white background or switch to a light theme before exporting.
  • Fonts look different — SVGs use the viewer's fonts; export PNG or PDF for pixel-identical output.