How to Put a Mermaid Diagram in PowerPoint or Google Slides (Without Losing the Text)

To put a Mermaid diagram into PowerPoint or Google Slides, export it as a PNG and insert it as a picture: Insert > Pictures in PowerPoint, Insert > Image in Google Slides. Make the PNG at least as wide, in pixels, as the area it will fill on screen: 1920 pixels for a diagram that fills a 16:9 slide, about 960 for half a slide, and double that if it has to stay sharp on a 4K screen. Avoid SVG for slides. Mermaid's SVGs often show no text at all in PowerPoint, and Google Slides does not accept SVG files.

Why does the text disappear from a Mermaid SVG in PowerPoint?

Mermaid draws labels as HTML by default. Its htmlLabels setting is on unless you turn it off, and with it on, each label sits inside an SVG element called foreignObject: a small piece of web page embedded in the image. Browsers display that perfectly, which is why the diagram looks fine in mermaid.live or a ChatGPT preview. PowerPoint and Inkscape do not render SVG the way a browser does, so they show the boxes and arrows with the words missing.

It is a known, long-running problem. A September 2025 report on Mermaid's GitHub, "SVGs do not display properly in Inkscape or Powerpoint", was closed by a maintainer who explained that Mermaid's SVGs are built for browser-based rendering, so programs that work differently lose things like text, and that fixing it would mean changing how the SVG is generated. Google Slides sidesteps the question: Google's Slides documentation lists PNG, JPEG and GIF as image formats, under 50 MB and no more than 25 megapixels. SVG is not on the list.

Can you make the SVG work instead?

Sometimes. Turning htmlLabels off makes Mermaid write labels as ordinary SVG text, which PowerPoint can show. Put these lines above the diagram in mermaid.live (the format comes from Mermaid's own documentation), then export the SVG again:

---
config:
  htmlLabels: false
---
flowchart LR
    A[Plan] --> B[Build] --> C[Launch]

Two cautions. Mermaid's changelog says it applies this setting "whenever possible", so not every diagram type is guaranteed to change, and the labels are laid out by a different method. Open the SVG in PowerPoint and check every box before the meeting, not during it. If you do not need a vector file, a large PNG is simpler and works everywhere: PowerPoint, Google Slides, Keynote, Word and Canva.

What size should the PNG be for a 16:9 slide?

Slides are measured in inches or centimetres, but what decides sharpness is the screen. PowerPoint's default Widescreen slide is 13.333 x 7.5 inches (33.867 x 19.05 cm), a 16:9 shape, and Google Slides offers Widescreen 16:9 under File > Page setup. Shown full screen on a 1920 x 1080 display, a 16:9 slide is 1920 x 1080 pixels, so:

Bigger is fine, since both programs scale the picture down to fit. A 3840 x 2160 PNG is about 8.3 megapixels, well inside Google Slides' 25 megapixel cap. Recent PowerPoint versions keep inserted pictures at high fidelity by default; if one still looks soft on Windows, check File > Options > Advanced > Image Size and Quality.

Shape matters as much as size. A flowchart that runs top to bottom (flowchart TD) makes a tall, narrow image that shrinks to unreadable on a wide slide. Change the first line to flowchart LR and the same diagram lays out left to right, which fills a 16:9 slide far better.

How do you export the diagram as a slide-ready PNG?

• mermaid.live (free): paste the code, open Actions, set PNG size to Width, type 1920 or 3840 and click PNG. Paste only the code, without the ```mermaid fence lines, and export one diagram at a time.
• Renda's Mermaid to PNG: paste the code, or a whole ChatGPT or Claude reply, and it finds every diagram. The default PNG is the diagram at its own size at 2x, cropped to the diagram with a white margin, which suits a diagram placed beside text. Pick the slide size instead and the diagram is centred and scaled to fit inside a margin, ready to fill a slide. Several diagrams come out as one PNG each, handy when a deck needs five of them. Five PNGs a month are free.

Either way the background is solid (white on the second route), which suits light slides. On a dark template, place the diagram on a white rounded rectangle rather than fighting the colours. If the code will not render at all, the guide to Mermaid syntax errors covers the usual causes.

How do you insert the PNG and keep it sharp?

1. PowerPoint: Insert > Pictures > This Device on Windows, or Insert > Pictures > Picture from File on a Mac, then choose the PNG.
2. Google Slides: Insert > Image > Upload from computer.
3. Resize from a corner while holding Shift, so the proportions stay fixed. Dragging a side handle stretches the text.
4. Do not enlarge a small PNG to fill the slide. If it has to grow, export a wider one instead; scaling up is what makes diagrams blurry.
5. Paste the Mermaid code into the speaker notes. When someone asks for a change, you edit the code and re-export rather than redrawing anything.

Can the diagram stay editable in PowerPoint?

Not as a Mermaid diagram. PowerPoint and Google Slides do not read Mermaid, and a request on Mermaid's GitHub to export editable PowerPoint or Google Slides diagrams has been open since July 2022. None of the routes above produce a PowerPoint file either. The practical workflow is to treat the code as the source and the PNG as the output: change the code, re-render, replace the picture. If you need boxes you can drag around inside PowerPoint, you have to rebuild the diagram with PowerPoint's own shapes or SmartArt. For a broader look at where ChatGPT diagrams come from and how to export them, see how to turn a ChatGPT flowchart into an image.

Frequently asked questions