Guide · Mermaid in PowerPoint
How to Put Mermaid Diagrams in PowerPoint
PowerPoint has no built-in Mermaid support, so diagram code pasted into a slide just shows text. The reliable workflow is to render the code in your browser, export it as a transparent PNG or SVG, and place that image on the slide. Transparent output sits on top of your deck's background instead of boxing the diagram into a white rectangle, and 4x scale stays sharp even on conference projectors.
No signup · No watermark · Local browser rendering · Transparent PNG up to 4x
Does PowerPoint render Mermaid natively?
No version of PowerPoint, including Microsoft 365, renders Mermaid syntax on its own. Office add-ins for Mermaid exist, but they must be installed into Office, which company-managed machines often block, and the main one is built around a paid diagram service. Converting the diagram to an image needs none of that: it works in every PowerPoint version, on every platform, with nothing installed.
Put a Mermaid diagram on a PowerPoint slide
- 1
Paste your Mermaid code
Drop your diagram code into the converter below. It renders locally in your browser — nothing is uploaded, which matters for unreleased roadmaps and internal architecture decks.
- 2
Match the look to your slide
For light decks, use the transparent background with the Clean Docs style — the diagram blends onto the slide with no white box. For dark decks, switch to GitHub Dark (free) so labels stay readable; dark slides make black diagram text invisible.
- 3
Export PNG at 4x — or SVG
Projectors and large canvases magnify every pixel. A 4x transparent PNG keeps labels crisp when the slide is blown up. On PowerPoint 2016 or later, SVG is even better: it is vector, so it stays sharp at any size.
- 4
Place it on the slide
Use Insert → Pictures → This Device, or drag the file straight onto the slide. Resize from a corner handle to keep proportions, crop with the Crop tool if needed, and add a line of alt text so screen readers can describe the figure.
Export your diagram here
Paste your Mermaid code below, pick a style, and download the image. Everything renders locally in your browser — no signup, no watermark.
Export controls activate after your diagram renders locally.
Which export works best on slides?
Blends over any slide background, from white corporate templates to gradient covers. 4x scale survives projectors, TV screens, and zoomed-in print handouts.
PowerPoint 2016, 2019, and Microsoft 365 insert SVG natively. Vector output scales to any slide size without a hint of blur.
JPG compression softens thin connector lines and small labels, and it cannot do transparency. Use PNG or SVG instead.
FAQ
Questions about this workflow
Can PowerPoint render Mermaid code directly?+
No. PowerPoint has no Mermaid engine in any version, including Microsoft 365. Render the code to a PNG or SVG image and insert it like any other picture.
How do I embed a Mermaid diagram in PowerPoint?+
Embedding is just inserting an image: paste your code into the converter above, export a transparent PNG at 4x (or SVG), then use Insert → Pictures → This Device and position it on the slide. Nothing is linked back to the code, so keep the code or the Share link somewhere findable.
Transparent or white background — which should I use?+
Transparent when the slide already has a background you want to show through: the diagram sits directly on it with no white box. White only when you deliberately want the diagram framed as a panel. On dark slides, also switch the style to a dark theme like GitHub Dark so text stays visible.
Why does my diagram look blurry on the projector?+
It was exported at 1x screen resolution and stretched across a large slide. Re-export at 4x, or switch to SVG, which is vector and never pixelates.
Does SVG work in PowerPoint?+
Yes in PowerPoint 2016, 2019, and Microsoft 365, which insert SVG files as scalable graphics. PowerPoint 2013 and earlier do not support SVG — export a 4x PNG for those audiences.
Can I edit the diagram after it is on the slide?+
PowerPoint treats it as a picture, so edit the Mermaid code, not the image. Keep the code — or copy this editor's Share link into the slide's notes — then re-export and use Change Picture to swap the image in place, keeping its position and size.
Do I need a PowerPoint add-in for Mermaid diagrams?+
No. Add-ins exist but require an Office installation step that managed corporate machines often block. For a figure in a deck you need neither an add-in nor an account: export the image here and insert it.
How do I keep diagrams consistent across a whole deck?+
Pick one style preset and one export scale, then use them for every diagram in the deck. This editor's Share links carry the full diagram plus its settings, so save one link per diagram and every re-export keeps the same look.
Is my diagram uploaded anywhere during conversion?+
No. Rendering happens locally in your browser, so unreleased product plans and internal architecture diagrams never leave your machine.