Mermaid to PNG Converter
Paste Mermaid code and download the diagram as a crisp PNG or SVG. Pick the scale, the background and the theme — or copy it straight to your clipboard as an image.
Free, no signup, no watermark — drawn in your browser, nothing uploaded.
How to convert Mermaid to PNG
- Paste your diagram — Paste Mermaid code into the left pane, or open a .mmd or .md file. Paste a whole README and only the ```mermaid block is kept.
- Check the preview — The right pane shows the image exactly as it will be saved, on the background you picked. A syntax error points to its line and column.
- Pick the look — Choose PNG or SVG, the scale (1×, 2× or 3×), a white, transparent or dark background, a Mermaid theme, and the hand-drawn look if you like it.
- Download or copy — Click Download PNG, or Copy image to paste the picture straight into a doc, a slide or a chat. The file is named after the diagram’s title.
PNG or SVG: what to use where
Both come from the same render, so they look the same. The difference is where the image is going.
| Where the diagram goes | Pick | Why |
|---|---|---|
| Slides (PowerPoint, Keynote, Google Slides) | PNG 2×, transparent | Sharp on projectors and retina screens, and it sits on any slide colour. |
| Word, Google Docs, Confluence, Notion | PNG 2×, white | Every editor accepts PNG; white matches the page. |
| Email and chat (Slack, Teams, Discord) | Copy image | Paste the picture directly — no file to attach. |
| Websites and docs you control | SVG | Vector: crisp at any zoom, and usually the smallest file. |
| Print and posters | PNG 3× or SVG | Three times the pixels of the on-screen size. |
| A README on GitHub or GitLab | No image needed | They render a ```mermaid block themselves, so you can keep the diagram as text. |
Backgrounds, themes and file names
Mermaid has five built-in themes: Default, Neutral, Dark, Forest and Base. The light themes draw dark text, the Dark theme draws light text — so a Dark-theme diagram needs a dark or transparent background, and the tool switches it for you. The export uses the theme you pick here, never this site’s light or dark mode.
A theme written into the diagram itself — in its frontmatter config or an %%{init: …}%% line — always wins over the picker:
---
title: Checkout flow
config:
theme: forest
---
flowchart LR
A[Cart] --> B[Checkout]That title also names the file: this one downloads as checkout-flow.png. Without a title the file is named after the diagram type, such as sequence-diagram.png, and you can type any name in the file name box.
Keep the source next to the image
An image can’t be edited later. Keep the Mermaid code too — in your repo, or in a README where GitHub draws it for you — and re-export when the diagram changes. The Mermaid Editor has templates for every diagram type and share links that carry the whole diagram.
Frequently Asked Questions
How do I convert a Mermaid diagram to PNG?
Paste the Mermaid code into the left pane, check the preview on the right, and click Download PNG. Choose 2× for a sharp image on retina screens and in slides, and pick a white, transparent or dark background before you download.
Is my diagram uploaded anywhere?
No. Mermaid runs in your browser tab: the diagram is drawn, turned into a PNG or SVG and saved on your device without being sent to a server. Your code is autosaved in this browser so it is still there when you come back.
How big will the PNG be?
At 1× the PNG is the diagram’s natural size in CSS pixels; 2× and 3× double and triple both sides. The preview shows the exact pixel size before you download. Very large diagrams are scaled down just enough to stay inside the biggest canvas a browser will draw (about 16,000 pixels on a side).
Can I export Mermaid with a transparent background?
Yes. Set Background to Transparent and both the PNG and the SVG keep a see-through background, which the preview shows as a checkerboard. Pair a transparent image with a light theme on light slides, or with the Dark theme on dark ones.
Why is the text unreadable on my dark slide?
Mermaid’s light themes draw dark text, and its Dark theme draws light text. Choose the Dark theme with a dark or transparent background for dark slides. The tool switches the background for you when you change between light and dark themes, and warns you when a diagram’s own theme does not suit the background.
Should I download PNG or SVG?
PNG works everywhere, including Word, Google Docs, Slack and every slide app. SVG is a vector file: it stays sharp at any zoom and is ideal for websites and print. Some apps, Microsoft Office and Inkscape among them, cannot draw the HTML labels Mermaid puts inside an SVG, so use PNG there.
Can I copy the diagram as an image instead of downloading it?
Yes. Copy image puts a PNG on your clipboard, ready to paste into a document, a slide or a chat message. The button appears in browsers that can put images on the clipboard, which current desktop browsers can.
Which Mermaid diagram types can I export?
Everything the bundled Mermaid renderer draws: flowcharts, sequence, class, state, ER, Gantt, pie, user journey, Git graph, mindmap, timeline, quadrant, requirement, C4, Sankey, XY chart, block, packet, kanban, architecture, radar, treemap, Venn and fishbone diagrams, Wardley maps and more. The Example menu loads a working starter for each of the 30 types.
Do mermaid.live links work here?
Yes. This page reads mermaid.live’s #pako: link format, so you can replace “mermaid.live/edit” in a shared link with this page’s address to open the same diagram here. Open in Mermaid Editor carries your diagram to the full editor the same way.
How is this different from the Mermaid CLI?
The official Mermaid CLI (mmdc -i diagram.mmd -o diagram.png) renders with a headless Chrome on your machine and suits build scripts. This page does the same job in the browser with nothing to install, plus a live preview, an error that points to the line, and one-click copy as image.