Presentation slides
Place diagrams on branded Keynote, PowerPoint, or Google Slides backgrounds without a white rectangle.
Transparent background · slides and dark docs
Mermaid Transparent Background Export
Create Mermaid diagrams that sit cleanly on slides, dark documentation, branded cards, and custom page backgrounds. Preview on a checkerboard, then export a transparent PNG or WebP without a watermark.
No signup · No watermark · Transparent preview · Local browser rendering · Best for slides and branded layouts
Paste or edit Mermaid code
Replace the sample below, or load another example.
Load example
Paste Mermaid code here. Preview and export load locally in your browser.
Live previewSample preview · Transparent Docs
Render & export
Export controls activate after your diagram renders locally.
Flowchart
Mode
Default renderNative MermaidOptimized exportStyled download
Export style
Clean DocsGitHub READMEGitHub DarkTransparent DocsWarm Editorial✦ ProWhiteboard Sketch✦ ProAurora Noir✦ ProBlueprint✦ ProChampagne✦ ProEmerald Suite✦ ProEditorial✦ Pro
Scale
1x2x4x
Or exact width, e.g. 1200px wide
Output: Transparent · comfortable padding
Size: calculated after render
Filename: mermaid-flowchart-transparent-4x.png
How transparent Mermaid export works
Transparent export removes the background around the Mermaid diagram while keeping nodes, labels, and connectors readable. It is best paired with a theme that has enough contrast for the destination background.
Dark documentation
Use transparent export with a readable theme when diagrams need to sit inside dark docs or product pages.
Design and blog cards
Create diagram assets that can be layered on editorial cards, hero sections, and visual explainers.
Transparent background checklist
Use PNG for slides
PNG is the safest transparent format for slide decks and documentation screenshots.
Avoid JPG
JPG cannot preserve transparency. It will flatten the diagram onto a solid background.
Check contrast
Transparent does not mean universally readable. Choose a theme that contrasts with the final slide or page background.
FAQ
Questions about this Mermaid export workflow
Which Mermaid export formats support transparency?+
PNG is the safest transparent format. WebP can also preserve transparency in modern browsers. JPG does not support transparency.
Is the checkerboard included in the export?+
No. The checkerboard is only a preview aid so you can see transparent areas on the page.
Why does my transparent diagram look invisible on a dark background?+
The canvas is transparent, but a light style still draws dark lines and dark text meant for white pages. Switch to a dark style such as GitHub Dark, which is free, and keep Transparent background on.
Can I export transparent Mermaid diagrams for PowerPoint?+
Yes. Use transparent PNG at 2x or 4x for PowerPoint, Keynote, or Google Slides.
Should I use a transparent or a solid white background?+
Use transparent when the diagram sits on a colored, branded, or dark background so there is no white box around it. Use a solid white background when the destination is already white and you want a predictable, self-contained image.
Can I export a Mermaid diagram with a dark background?+
Yes. Choose GitHub Dark, a free style, to export on a dark canvas, or turn on Transparent background so your own dark slide shows through.
Is a Mermaid SVG export transparent?+
Yes. Mermaid SVG output has no background fill of its own, so it shows whatever sits behind it. That makes SVG a good transparent choice for web pages and Microsoft 365 documents; use PNG when the destination does not accept SVG.
How do I get a transparent background with mermaid-cli?+
Pass the background flag: mmdc -i diagram.mmd -o diagram.png -b transparent. If you do not want to install Node and Puppeteer for a one-off image, paste the code into the tool above and export a transparent PNG at 2x or 4x instead.
Does mermaid.ink render transparent images?+
Yes. mermaid.ink returns transparent images by default and accepts a bgColor query parameter when you need a solid color. Use this editor when you want to preview the transparent result on a checkerboard and pick a theme that stays readable on your slide before you download.