Met Mermaid worden een paar regels tekst een diagram. Markdown Preview Editor werkt als Mermaid editor met live voorbeeld: je typt de diagramcode in een Markdown-document en het voorbeeld tekent het terwijl je typt. Anders dan bij een losse diagramtool staat het diagram bij de tekst eromheen, zodat een ontwerpdocument, een README of een lesplan in één bestand blijft.
Wat is een Mermaid-diagram?
Een Mermaid-diagram is een diagram dat in platte tekst is beschreven. Je sleept geen vakjes en pijlen — je schrijft regels als A --> B, en Mermaid maakt de afbeelding voor je op. Het ondersteunt stroomdiagrammen, sequentiediagrammen, Gantt-diagrammen, toestands- en klassendiagrammen, taartdiagrammen, mindmaps en meer.
Omdat een diagram tekst is, pas je het makkelijk aan, staat het in versiebeheer en zie je wijzigingen terug in diffs. GitHub, GitLab, Obsidian en veel documentatietools geven Mermaid weer, dus dezelfde code werkt overal.
Zo teken je een diagram
- Open de editor. Ga naar de online editor.
- Voeg een Mermaid-blok toe. Typ drie backticks gevolgd door
mermaid, of gebruik de knop Mermaid-diagram in de werkbalkrij Geavanceerde editor om een sjabloon in te voegen. - Schrijf het diagram. Het voorbeeld rechts tekent het opnieuw terwijl je typt, zodat je een ontbrekende pijl of haak meteen ziet.
- Opslaan of delen. Sla het document op als
.md, exporteer het naar HTML of druk het af als pdf — diagrammen gaan mee.
Een eerste stroomdiagram:
markdown```mermaid
flowchart LR
A[Idee] --> B{De moeite waard?}
B -- ja --> C[Bouwen]
B -- nee --> D[Parkeren]
```
Soorten diagrammen
| Soort | Begint met | Geschikt voor |
|---|---|---|
| Stroomdiagram | flowchart TD / flowchart LR |
Processen, beslissingen, algoritmen |
| Sequentiediagram | sequenceDiagram |
API’s, inlogprocessen, klantreizen |
| Gantt-diagram | gantt |
Projectplanningen en tijdlijnen |
| Toestandsdiagram | stateDiagram-v2 |
Statussen van een bestelling of document |
| Klassendiagram | classDiagram |
Datamodellen en codestructuur |
| Taartdiagram | pie |
Aandelen in een totaal |
De volledige syntaxis per soort, met voorbeelden om te kopiëren, staat in onze handleiding over Mermaid-diagrammen in Markdown.
Waarom deze editor
- Live voorbeeld. Het diagram wordt bijgewerkt terwijl je typt; syntaxfouten zie je meteen.
- Tekst en diagrammen samen. Schrijf de uitleg, de formules en het stroomdiagram in één Markdown-bestand.
- Privé. Diagrammen worden in je browser getekend. Je code wordt niet naar een server gestuurd.
- Gratis en open source. Geen account, geen limiet op het aantal diagrammen.
Beperkingen
- Je kunt een los diagram niet apart als PNG of SVG downloaden. Diagrammen worden geëxporteerd als onderdeel van het document — in de HTML-export en in de pdf. Voor een losse afbeelding kun je de officiële Mermaid-tools gebruiken.
- Eigen thema’s en stijlen per knooppunt zijn beperkt: diagrammen hebben een strakke standaardopmaak die past bij het lichte of donkere thema.
- Diagrammen schrijf je als code; visueel slepen en neerzetten is er niet.
Wil je een bestaand Markdown-bestand met diagrammen bekijken? Gebruik de Markdown viewer, of ga terug naar de startpagina van de Markdown-editor.
Veelgestelde vragen
Is deze Mermaid editor gratis?
Ja. Hij is gratis en open source, zonder account en zonder limieten.
Welke soorten Mermaid-diagrammen worden ondersteund?
Stroomdiagrammen, sequentiediagrammen, Gantt-diagrammen, toestands-, klassen- en entiteit-relatiediagrammen, taartdiagrammen, mindmaps, tijdlijnen en de andere soorten die Mermaid ondersteunt.
Kan ik een Mermaid-diagram exporteren?
Diagrammen gaan mee als je het document naar HTML exporteert of als pdf afdrukt. Eén diagram apart downloaden als PNG of SVG kan niet.
Waarom wordt mijn Mermaid-diagram niet weergegeven?
Meestal is het een syntaxfout: een ontbrekende pijl, een niet-gesloten haak of speciale tekens in een label zonder aanhalingstekens. De eerste regel moet de soort diagram noemen, bijvoorbeeld flowchart TD.
Stuurt de editor mijn diagramcode ergens naartoe?
Nee. Het diagram wordt in je browser getekend en het document blijft op je apparaat.