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 · GitHub README
Render & export
Export controls activate after your diagram renders locally.
Flowchart
Mode
Default renderNative MermaidOptimized exportStyled download
Export style
Clean DocsGitHub READMENotion DocWhiteboard SketchTransparent DocsGitHub DarkLinear DarkTokyo NightSlide TransparentSlide DarkExecutive DeckEditorial Card
Scale
1x2x4x
Output: White · comfortable padding
Size: calculated after render
Filename: mermaid-flowchart-white-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 export may be transparent but the diagram theme still needs contrast. Use a dark-friendly or presentation preset before downloading.
Can I export transparent Mermaid diagrams for PowerPoint?+
Yes. Use transparent PNG at 2x or 4x for PowerPoint, Keynote, or Google Slides.