Een mermaid-diagram exporteren naar PNG, SVG of Markdown
Een diagram is alleen nuttig waar het gezien kan worden. Mermaid geeft je vier uitwegen — een afbeelding, een vector, de broncode, of een Markdown-blok dat zichzelf rendert — en de juiste keuze hangt volledig af van waar het diagram naartoe gaat. Dit is de korte versie, plus wat er misgaat bij elke optie.
Kies eerst het formaat
| Bestemming | Gebruik | Waarom |
|---|---|---|
| GitHub, GitLab, Notion, Obsidian | Een Markdown-blok | Het rendert native en blijft diffbaar — geen bestand om synchroon te houden. |
| Presentaties, een spec, een chatbericht | PNG | Plakbaar overal, heeft geen renderer nodig, ziet er overal hetzelfde uit. |
| Een website, een gedrukt document | SVG | Vector — scherp op elke grootte, en de tekst blijft selecteerbaar. |
| Een andere editor, een repo | .mmd-broncode | Later bewerkbaar. Een afbeelding is een doodlopende weg. |
Als de bestemming mermaid rendert, exporteer dan helemaal niet. Een diagram dat als tekst is vastgelegd, kan regel voor regel worden bekeken; hetzelfde diagram vastgelegd als PNG kan alleen worden vervangen.
Exporteren vanuit deze editor
Open het codetabblad — de exportknoppen staan in de werkbalk, en elk werkt op wat er op dat moment gerenderd is.
- SVG kopiëren — zet de
<svg>-markup op het klembord, klaar om direct te plakken in een HTML-bestand of een ontwerptool. - SVG downloaden — slaat
diagram.svgop. - PNG downloaden — slaat
diagram.pngop, gerenderd op 2x met een witte achtergrond zodat het scherp blijft op een scherm met hoge dichtheid en nooit als een transparante vlek op een witte dia terechtkomt. - .mmd downloaden — slaat de mermaid-broncode op als platte tekst.
- .md downloaden (Notion) — slaat de broncode op verpakt in een fenced ```mermaid-blok, wat Notion, GitHub en Obsidian renderen bij het plakken.
Voor een presentatie neem je de PNG. Voor alles wat later van formaat verandert — een documentkop, een poster, een print — neem je de SVG; een PNG die groter wordt gemaakt dan zijn exportgrootte wordt meteen wazig.
Bewaar het liever als tekst
Het fenced blok is de enige export die ter plekke bewerkbaar blijft. Drie backticks, het woord mermaid, je diagram, drie backticks:
```mermaid
flowchart LR
A[Write] --> B[Review]
B --> C[Merge]
```- GitHub — rendert in README-bestanden, issues, pull requests en reacties.
- GitLab — rendert in de wiki, issues en merge requests.
- Notion — plak in een codeblok en zet de taal op Mermaid.
- Obsidian — rendert in de preview en in gepubliceerde notities.
- Docusaurus / MkDocs Material / VitePress — mermaid-blokken renderen in gebouwde documentatie.
Wat er mis kan gaan
De PNG is wazig
Een PNG heeft een vaste resolutie: het wordt geëxporteerd op een vaste pixelgrootte en verder opschalen interpoleert. Deze editor exporteert daarom op 2x. Als dat nog niet genoeg is, exporteer dan de SVG en converteer die naar de gewenste grootte — of gebruik gewoon de SVG.
De SVG heeft geen achtergrond
SVG-exports zijn met opzet transparant, dus donkere knooptekst verdwijnt op een donkere dia. Zet de SVG op een lichte kaart, of neem de PNG, die op wit wordt geëxporteerd.
Lettertypen zien er elders anders uit
Een SVG verwijst naar lettertypefamilies in plaats van ze in te sluiten, dus een machine zonder dat lettertype vervangt het door een ander en de labelkaders komen niet meer overeen. Gebruik de PNG wanneer je geen controle hebt over de lettertypen van de kijker.
Het diagram is afgesneden
Export leest wat er op dat moment gerenderd is, dus centreer de weergave opnieuw voordat je een groot diagram exporteert. Als een knooplabel enorm is, breek het dan met <br> — mermaid wikkelt labels niet vanzelf af.
Exporteer in twee klikken
Open de editor, plak of teken je diagram, en neem de SVG, de PNG of de broncode. Niets zit achter een account.
Veelgestelde vragen
Hoe converteer ik mermaid naar PNG?
Render het diagram en gebruik dan PNG downloaden. De editor tekent de gerenderde SVG op een canvas op 2x schaal met een witte achtergrond en slaat het resultaat op — geen serverrondgang, dus het diagram verlaat je browser nooit.
Kan ik een transparante PNG exporteren?
Niet via de PNG-knop — die vult met opzet wit, omdat donkere diagramtekst op een transparante achtergrond onleesbaar is op de meeste plekken waar een PNG geplakt wordt. Exporteer in plaats daarvan de SVG; die is transparant.
Is er een groottelimiet?
Geen vaste. Export gebeurt in je browser, dus de praktische limiet is wat je browser kan renderen — wat ver voorbij het punt ligt waarop een diagram nog leesbaar is voor een mens.
Hoe houd ik het diagram bewerkbaar na het exporteren?
Bewaar de broncode. Download het .mmd-bestand of het Markdown-blok naast de afbeelding; een PNG of SVG kan niet worden teruggezet naar mermaid, maar de broncode plakt direct terug in de editor.