Extract Mermaid diagrams from Markdown

Mermaid in Markdown, explained

Markdown files embed diagrams in fenced code blocks that start with ```mermaid. GitHub, GitLab, Obsidian and many documentation tools draw these blocks as diagrams — but only inside their own pages. As soon as you need the pictures somewhere else, in a slide deck, a Word document or a ticket, you are left copying code block by block. This page does it for the whole file at once.

How to extract every diagram

1. Paste the Markdown or upload a .md file (or drag it onto the tool).
2. Each ```mermaid, ~~~mermaid or ```mmd block is rendered as a thumbnail, along with the heading it sits under.
3. Untick any you do not need, choose PNG (1x, 2x, 3x) or SVG, and click Download ZIP.

Sensible file names

Files are named after the nearest heading above each diagram — a diagram under “## Checkout sequence” becomes checkout-sequence.svg. Diagrams without a heading are numbered diagram-01, diagram-02 and so on, matching their order in the document, and duplicate names get a suffix so nothing is overwritten.

Broken diagrams are flagged, not skipped silently

AI-written documents often contain a diagram or two with syntax errors. Those cards show a plain-English explanation and a Fix it button that opens the code in the Mermaid syntax fixer. Diagrams that render can be opened one by one in the Mermaid viewer for zooming and theme changes.

Want to read the document too?

If you also want to read the text around the diagrams, open the file in the MD viewer. Every diagram there gets its own PNG and SVG buttons, and files with two or more diagrams have an Export all (ZIP) button at the top. As with every openmdfile tool, the file is processed in your browser and never uploaded. Single diagrams can also go straight to SVG or PNG.