Export Mermaid diagrams with a transparent background
No white box. Set the canvas to Transparent and the exported PNG carries a real alpha channel — the diagram sits directly on a dark slide, a coloured doc section, or a branded template. The layout is beautified before export, and scale goes up to 4× so it stays sharp when projected.
Where transparent export earns its keep
Drop the diagram straight onto a dark deck or a branded template — no white rectangle floating over your design. The alpha channel keeps only the diagram.
Landing pages, blog posts, and docs with tinted section backgrounds keep their colour behind the diagram instead of a hard white box breaking the layout.
Compose the diagram over a gradient or illustration in your card template. Transparent export means the diagram layers cleanly in any design tool.
How transparent Mermaid export works
Flowchart, sequence, class, state, ER, and more — paste the code and the editor renders a live preview.
One click rewrites the layout into presentation shape. Then pick Transparent as the canvas background — the checkerboard confirms there is no backing panel.
PNG ships with a real alpha channel at 1×, 2×, or 4× scale. SVG ships without a background panel. Either way, what the preview shows is what you get.
Frequently asked questions
How do I export a Mermaid diagram with a transparent background?
Paste your Mermaid source into the editor, click beautify, set the canvas background to Transparent, then export PNG. The file is written with a real alpha channel — no white box behind the diagram. No signup is required.
Why does my transparent diagram look invisible on a dark slide?
With the background removed, dark strokes and labels can vanish against a dark surface. Pick a theme whose lines and text stay legible on dark backgrounds before exporting — the export preserves exactly what the preview shows, so if it reads well in the preview it reads well on the slide.
Is the checkerboard pattern included in the export?
No. The checkerboard you see behind a transparent canvas is just the editor's way of showing that there is no background. The exported PNG contains only the diagram over true transparency.
Can I use a transparent Mermaid PNG in PowerPoint or Keynote?
Yes. PNG alpha transparency is supported by PowerPoint, Keynote, and Google Slides — the diagram sits directly on your slide background or branded template with no rectangle around it. Export at 2× or 4× so it stays sharp when projected.
Does SVG export also support a transparent background?
Yes. Choose the transparent canvas and the exported SVG ships without a background panel, so the page or slide colour shows through. SVG is the better pick for docs and the web; PNG is safer for slide decks and tools that do not render SVG.
Should I use a transparent or solid background?
Transparent when the diagram sits on a coloured, dark, or branded surface — slides, section backgrounds, social cards. Solid when the destination is unpredictable (ticket attachments, chat uploads) and you want guaranteed contrast everywhere.
Ready to export without the white box?
Open the editor, paste your Mermaid source, set the canvas to Transparent, export. No signup.