How to Export Mermaid Diagrams to PNG, SVG, and PDF (2026 Guide)

# How to Export Mermaid Diagrams to PNG, SVG, and PDF (2026 Guide)

Mermaid is great for writing diagrams as code — but eventually you need to get the picture out. A PNG for a Notion page. An SVG for a docs site. A PDF for a stakeholder deck. This guide walks through every reliable way to export Mermaid diagrams in 2026, from one‑click downloads to scriptable CLI pipelines.

Why Export Matters

Mermaid diagrams render beautifully inside GitHub, GitLab, Notion, Obsidian, and Docusaurus — but the moment you need to:

- Paste a diagram into a Google Doc, Slides, or Figma

- Embed it in a PDF report or investor deck

- Send a clean image to a non‑technical stakeholder

- Use it as a hero image on your blog

…you need a real file. PNG for raster, SVG for vector scaling, PDF for documents.

Method 1: One‑Click Export from the Live Editor (Easiest)

The fastest path is using a browser‑based Mermaid editor. On mermaideditor.lol you can paste any Mermaid code and download as PNG or SVG instantly:

flowchart LR
    A[Write Mermaid] --> B[Preview]
    B --> C{Download}
    C --> D[PNG]
    C --> E[SVG]
    C --> F[Copy as Image]

This works for every diagram type — flowcharts, sequence, ER, class, mindmap, Gantt, quadrant, Sankey, XY chart. No install, no CLI, no Node.js.

When to use it: quick one‑offs, screenshots for Slack, embedding in a doc.

Method 2: Mermaid CLI (mmdc) for Automation

For batch exports or CI pipelines, use the official Mermaid CLI (@mermaid-js/mermaid-cli). It runs headless Chromium under the hood and outputs PNG, SVG, or PDF.

Install

npm install -g @mermaid-js/mermaid-cli

Export to PNG

mmdc -i diagram.mmd -o diagram.png

Export to SVG

mmdc -i diagram.mmd -o diagram.svg

Export to PDF

mmdc -i diagram.mmd -o diagram.pdf

High‑Resolution PNG (for retina screens / print)

mmdc -i diagram.mmd -o diagram.png -w 3840 -H 2160 -s 3

- -w width in pixels

- -H height in pixels

- -s scale factor (3 = 3x DPI)

Transparent Background

mmdc -i diagram.mmd -o diagram.png -b transparent

Dark Theme Export

mmdc -i diagram.mmd -o diagram.png -t dark -b "#0f172a"

Method 3: Export from the Browser (Right‑Click + DevTools)

If your diagram already renders on a webpage (GitHub README, Docusaurus site, Notion), you can grab the SVG directly:

1. Right‑click the rendered diagram → Inspect
2. Find the element in the DOM
3. Right‑click the node → Copy → Copy outerHTML
4. Paste into a file named diagram.svg

For PNG, take a screenshot — but for crisp output, prefer the SVG → convert path.

Method 4: Convert SVG to PNG / PDF Programmatically

Once you have the SVG, you can convert it to anything using standard tools.

SVG → PNG with ImageMagick

convert -density 300 diagram.svg diagram.png

SVG → PDF with rsvg-convert

rsvg-convert -f pdf -o diagram.pdf diagram.svg

SVG → PNG with Inkscape (best quality)

inkscape diagram.svg --export-type=png --export-dpi=300 -o diagram.png

Method 5: Programmatic Export with Node.js

If you're building a docs pipeline, use the Mermaid CLI as a library:

import { run } from '@mermaid-js/mermaid-cli';

await run(
  'input.mmd',
  'output.png',
  {
    puppeteerConfig: { headless: 'new' },
    mermaidConfig: { theme: 'dark' },
    backgroundColor: 'transparent',
    width: 1920,
    height: 1080
  }
);

Drop this into a CI job and your docs site can regenerate every diagram on every push.

Method 6: Export Mermaid in VS Code

The Markdown Preview Mermaid Support and Mermaid Editor extensions both add export buttons. Open any .md or .mmd file, preview it, and click Export → PNG / SVG.

For batch exports, run mmdc from the integrated terminal — same flags as Method 2.

Choosing the Right Format

Rule of thumb: export SVG first, convert as needed. SVG is the lossless source.

Common Export Problems and Fixes

1. Blurry PNG. You exported at 1x scale. Use -s 2 or -s 3 with mmdc, or set width=1920 minimum.

2. Cut‑off edges. Add padding via the CLI: mmdc -i d.mmd -o d.png --pdfFit — or wrap the SVG in a viewBox with extra margin.

3. Fonts look wrong. mmdc uses the system fonts inside Chromium. Install your brand font system‑wide, or pass a custom CSS via -C custom.css.

4. Dark background showing in PNG. Pass -b white or -b transparent.

5. Huge SVG file size. Mermaid embeds inline styles per node. Run svgo diagram.svg to compress 60–80% with no visual loss.

Automating Diagram Exports in CI

A realistic pipeline for a docs repo:

flowchart LR
    A[Push to main] --> B[GitHub Actions]
    B --> C[Install mmdc]
    C --> D[Find *.mmd files]
    D --> E[Export to /public/diagrams/*.svg]
    E --> F[Commit & deploy]

Example GitHub Actions step:

- name: Export Mermaid diagrams
  run: |
    npm install -g @mermaid-js/mermaid-cli
    for f in docs/diagrams/*.mmd; do
      mmdc -i "$f" -o "public/diagrams/$(basename "$f" .mmd).svg" -t default
    done

Now every diagram in your repo is auto‑exported on every push. No more stale screenshots.

TL;DR

• Quickest: paste into [mermaideditor.lol](https://mermaideditor.lol) → click PNG/SVG download.
• Scriptable: mmdc -i in.mmd -o out.png -s 3 -b transparent.
• Best quality: export SVG, convert with Inkscape or rsvg.
• Automated: wire mmdc into CI and never ship a stale screenshot again.

Mermaid's whole point is diagrams as code. Treat exports the same way — version‑controlled, scriptable, and reproducible.