Complete gids voor Mermaid.js-diagrammen
Leer professionele diagrammen maken met eenvoudige, tekstgebaseerde syntax
Wat is Mermaid.js?
Mermaid is een op JavaScript gebaseerde diagram- en chartingtool die Markdown-geïnspireerde tekstdefinities gebruikt om diagrammen dynamisch te maken en te wijzigen. Het is een open-sourceproject waarmee je diagrammen kunt genereren uit eenvoudige tekstbeschrijvingen.
In plaats van complexe tekentools te gebruiken, schrijf je code-achtige syntax die je diagram beschrijft, en Mermaid rendert het als een visueel diagram. Deze aanpak maakt diagrammen versiebeheerbaar, eenvoudig te updaten en perfect voor documentatie.
Mermaid integreert naadloos met documentatieplatforms, wiki's en markdown-bestanden, waardoor het een favoriet hulpmiddel is onder ontwikkelaars en technische schrijvers.
Waarom Mermaid.js gebruiken?
- Versiebeheer: diagrammen zijn tekstbestanden en kunnen in Git naast je code worden bijgehouden
- Snelle updates: pas een paar regels tekst aan in plaats van complete diagrammen te hertekenen
- Consistentie: Mermaid regelt automatisch layout en styling en zorgt voor consistente diagrammen
- Geen designtools nodig: geen Visio, Lucidchart of andere dure tools
- Documentatie als code: houd diagrammen in dezelfde repository als je documentatie
- Platformonafhankelijk: werkt in browsers en Node.js en integreert met veel platforms
- Gratis en open source: geen licentiekosten, actieve community
- Meerdere diagramtypes: ondersteunt flowcharts, sequentiediagrammen, klassendiagrammen en meer
Ondersteunde diagramtypes
Mermaid ondersteunt een brede variëteit aan diagramtypes voor uiteenlopende documentatiebehoeften:
Stroomdiagram
Visualiseer workflows, processen en beslisboomstructuren met knopen en pijlen.
flowchart TD
A[Start] --> B{Decision}
B -->|Yes| C[Process]
B -->|No| D[Alternative]
C --> E[End]
D --> EUse case: Procesflows, algoritmen, beslislogica
Sequentiediagram
Toont interacties tussen verschillende actoren of systemen in de tijd.
sequenceDiagram
participant User
participant API
participant DB
User->>API: Request data
API->>DB: Query
DB-->>API: Results
API-->>User: ResponseUse case: API-interacties, systeemcommunicatie, gebruikersflows
Klassendiagram
Modelleer objectgeoriënteerde systemen met klassen, attributen en relaties.
classDiagram
class Animal {
+String name
+int age
+makeSound()
}
class Dog {
+bark()
}
Animal <|-- DogUse case: Softwarearchitectuur, OOP-ontwerp, databaseschema's
Toestandsdiagram
Geeft toestanden en overgangen in een systeem of proces weer.
stateDiagram-v2
[*] --> Idle
Idle --> Loading: Start
Loading --> Success: Complete
Loading --> Error: Fail
Success --> [*]
Error --> Idle: RetryUse case: Toestandsmachines, lifecyclemanagement, UI-states
ER-diagram
Modelleer databasestructuren en relaties tussen entiteiten.
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE_ITEM : contains
CUSTOMER {
int id
string name
string email
}Use case: Databaseontwerp, datamodellering, systeemarchitectuur
Gantt-diagram
Plan en visualiseer projectplanningen en tijdlijnen.
gantt
title Project Timeline
dateFormat YYYY-MM-DD
section Phase 1
Design :a1, 2024-01-01, 30d
Development :a2, after a1, 45dUse case: Projectplanning, sprinttijdlijnen, roadmaps
Cirkeldiagram
Laat proportionele data en percentages visueel zien.
pie title Distribution
"Category A" : 42
"Category B" : 30
"Category C" : 28Use case: Enquête-resultaten, marktaandeel, resource-allocatie
Git-grafiek
Visualiseer Git-branchingstrategieën en commitgeschiedenis.
gitGraph
commit
branch develop
checkout develop
commit
checkout main
merge developUse case: Documentatie van Git-workflows, branchingstrategieën
Aan de slag met Mermaid
1. Kies je diagramtype
Begin met te bepalen welk diagramtype het beste weergeeft wat je wilt tonen. Elk diagramtype begint met een specifiek sleutelwoord zoals 'flowchart', 'sequenceDiagram' of 'classDiagram'.
2. Schrijf de tekstsyntax
Gebruik Mermaid's eenvoudige syntax om je diagram te beschrijven. De syntax is intuïtief en leest bijna als natuurlijke taal. Bijvoorbeeld: 'A --> B' maakt een pijl van A naar B.
3. Bekijk je diagram
Gebruik onze online viewer of een Mermaid-compatibele tool om je diagram in realtime te zien renderen. Pas het aan tot je tevreden bent.
4. Exporteer en deel
Exporteer je diagram als SVG of PNG voor presentaties, of deel een URL met je team. Je kunt Mermaid ook direct in Markdown-bestanden insluiten.
Best practices
- Houd diagrammen gefocust op één concept of workflow
- Gebruik betekenisvolle labels die de daadwerkelijke bedrijfslogica beschrijven
- Splits complexe diagrammen op in kleinere, onderling verbonden diagrammen
- Voeg opmerkingen toe met %% om complexe secties te verklaren
- Gebruik consistente naamgevingsconventies in je diagrammen
- Test je diagrammen in de doelomgeving voordat je ze afrondt
- Voeg richtingaanwijzingen (TD, LR) toe om de layout te sturen wanneer nodig
- Gebruik subgraphs om gerelateerde knopen in flowcharts te groeperen
- Gebruik styling-opties spaarzaam om de leesbaarheid te behouden
- Versiebeheer je diagramsourcebestanden samen met je code
Veelvoorkomende use cases
Softwaredocumentatie
Documenteer systeemarchitectuur, API-flows en componentinteracties naast je code.
Projectplanning
Maak Gantt-diagrammen voor sprintplanning, projecttijdlijnen en resource-allocatie.
Technische voorstellen
Visualiseer voorgestelde oplossingen, systeemontwerpen en architectuurbeslissingen.
User journeys
Breng gebruikersflows, klantervaringen en interactiepatronen in kaart.
Databaseontwerp
Modelleer entiteitsrelaties, schemastructuren en data-afhankelijkheden.
Procesdocumentatie
Documenteer bedrijfsprocessen, workflows en standaardprocedures.
Educatieve materialen
Maak duidelijke, versiebeheerbare diagrammen voor tutorials en technische cursussen.
API-documentatie
Illustreer request/response-flows, authenticatiesequenties en endpoint-interacties.
Aanvullende bronnen
Veelgestelde vragen
Veelgestelde vragen over het gebruik van de Mermaid Viewer en het maken van diagrammen
Klaar om je eerste diagram te maken?
Probeer onze gratis online Mermaid-viewer en begin binnen enkele minuten professionele diagrammen te maken.
Open de Mermaid Viewer