Mermaid to PNG / SVG
Mermaid to PNG or SVG: render and download your diagram
In short
Paste Mermaid code, choose the resolution (1×, 2× or 3×), a transparent or white background and a theme, and download the diagram as PNG or SVG — or copy the SVG markup. Rendering happens in your browser with Mermaid 11; the code is never uploaded. SVG stays sharp at any size and is editable; PNG is for slides, chat, issue trackers and anywhere SVG is not accepted.
Updated · by the ChartCraft team · renders with Mermaid 11
Converter
Runs in your browser — nothing is uploaded. Mermaid (about 2.5 MB) is downloaded from esm.sh on your first keystroke.
Which export format should I use?
SVG when the destination accepts it — it is sharp at any size, small for most diagrams and editable afterwards. PNG at 2× for slides and HiDPI screens, 3× for print, 1× only for thumbnails. Both can be transparent; both keep the theme you picked.
| Option | Resolution | Transparent? | Where to use it |
|---|---|---|---|
| SVG | Vector — infinite; file size grows with node count, not pixels | Yes (no background unless you choose white) | Documentation sites, Confluence/Notion embeds, Figma and Illustrator, print, anything that will be zoomed or edited later |
| PNG 1× | Diagram's CSS size, e.g. 800 × 500 px | Yes | Email, chat previews, low-resolution thumbnails |
| PNG 2× | Twice the CSS size, e.g. 1600 × 1000 px | Yes | Slides, Retina/HiDPI screens, GitHub issues and pull requests, wikis that rasterise images |
| PNG 3× | Three times the CSS size, e.g. 2400 × 1500 px (capped at 40 MP) | Yes | Print at 300 dpi up to about 20 cm wide, posters, large displays |
| Copy SVG | Vector, as text on the clipboard | Yes | Pasting straight into an HTML file, a Markdown page that allows inline SVG, or a design tool |
How does the conversion work?
Mermaid turns your text into an SVG document — the same thing GitHub or Notion draws on screen. The SVG download is that document with an explicit pixel size and an XML header so every viewer opens it. For PNG, the page loads the SVG into an image, draws it onto a canvas that is 1×, 2× or 3× the SVG's size, fills the background if you chose white, and encodes the canvas as PNG. Labels are rendered as plain SVG text (htmlLabels: false) because browsers will not rasterise HTML inside an SVG, which is why other converters sometimes produce PNGs with empty boxes.
| Tool | Runs where | How to export | Options |
|---|---|---|---|
| This page | Browser, Mermaid 11 | Download PNG / Download SVG | Scale 1–3×, transparent or white, theme |
| mermaid.live (official editor) | Browser | Actions → PNG / SVG | Theme via config; PNG size follows the preview |
Mermaid CLI (mmdc) | Node.js + headless Chromium | npx -p @mermaid-js/mermaid-cli mmdc -i in.mmd -o out.png | -b transparent, -s 3 (scale), -t dark, -w 1600 (width), -o out.svg / out.pdf |
| VS Code (Markdown Preview Mermaid Support + an export extension) | Editor | Command palette → export | Depends on the extension; SVG and PNG |
| Kroki | HTTP API, self-hostable | GET /mermaid/png/<deflate+base64 code> | Also SVG and PDF; sends your code to the server |
| GitHub / GitLab Markdown | Renders only | No export button — screenshot or copy the code | Use this page or mmdc for a file |
How do I convert Mermaid to PNG in bulk or in CI?
Use the official Mermaid CLI. It drives a headless Chromium, so it needs Node.js and a one-time browser download, but it produces the same output as the browser and can be scripted over a folder of .mmd files.
# one file, transparent, 3x resolution, dark theme
npx -p @mermaid-js/mermaid-cli mmdc -i architecture.mmd -o architecture.png -b transparent -s 3 -t dark
# SVG and PDF: change the extension
npx -p @mermaid-js/mermaid-cli mmdc -i architecture.mmd -o architecture.svg
# every .mmd file in a folder (bash)
for f in docs/*.mmd; do npx -p @mermaid-js/mermaid-cli mmdc -i "$f" -o "${f%.mmd}.png" -s 2; doneQuestions
Is converting Mermaid to PNG here free, and is my diagram uploaded?
Free, unlimited, no account. The page loads Mermaid 11 from esm.sh once and renders in your browser; the PNG is produced by your browser's canvas and the SVG is Mermaid's own output. Nothing is sent to ChartCraft.
What resolution is the PNG?
The diagram's rendered size multiplied by the scale you choose. A diagram that renders at 800 × 500 CSS pixels downloads as 800 × 500 (1×), 1600 × 1000 (2×) or 2400 × 1500 (3×). The size is shown under the preview before you download. Very large diagrams are capped at 40 megapixels.
Can I get a transparent PNG from Mermaid?
Yes — leave the background on transparent. Mermaid draws no page background, so only nodes, edges and text are opaque. For the dark theme, a transparent PNG shows white text, so place it on a dark surface or choose a white background with the default theme instead.
PNG or SVG — which should I use?
SVG whenever the destination accepts it: it stays sharp at any zoom, is searchable, and can be edited later in Figma, Inkscape or Illustrator. PNG for slides, chat, email, issue trackers and CMSs that strip SVG. If in doubt, download both.
Why are the labels blank or in a different font in my PNG?
Blank labels happen when a tool rasterises Mermaid SVG that uses HTML labels (foreignObject): browsers refuse to draw those into a canvas. This page renders with htmlLabels: false, so every label is plain SVG text and rasterises correctly. Fonts: Mermaid's default stack is Trebuchet MS, Verdana, Arial; a PNG uses whichever of those your machine has.
How do I export Mermaid to PNG from the command line?
Install Node.js and run npx -p @mermaid-js/mermaid-cli mmdc -i diagram.mmd -o diagram.png -b transparent -s 3. The -s flag sets the scale, -b the background colour, -t the theme and -w a width in pixels. Change the output extension to .svg or .pdf for those formats.
Can I change the theme or colours before exporting?
Pick default, dark, neutral or forest in the theme control. For custom colours add a directive as the first line of your code, for example %%{init: {'theme': 'base', 'themeVariables': {'primaryColor': '#DCE3F3'}}}%%, or classDef / style lines inside the diagram; both are kept in the SVG and the PNG.
My code does not render — how do I find the error?
Paste it into the Mermaid syntax checker: it shows the line, the cause and the fix, and applies the safe fixes for you. Come back here once it is valid.