💬 Mermaid

Sequentiediagram

Laat zien hoe systemen en mensen met elkaar praten

Open dit voorbeeld in de editor Genereer er een met AI

Wat is een Sequentiediagram?

Een sequentiediagram toont de berichten die deelnemers in de tijd uitwisselen: API-aanroepen, authenticatieflows, communicatie tussen microservices. Het is de standaardmanier om interacties in softwarearchitectuur te documenteren.

Sequentiediagrammen verdienen hun plek in ontwerpreviews en incidentrapporten, waar de vraag altijd dezelfde is: wie riep wie aan, in welke volgorde, en wat kwam er terug. Niets legt een volgordefout of een ontbrekende timeout sneller bloot. Wat ze niet tonen is toestand — een levenslijn zegt dat een deelnemer bezig is, nooit in welke interne toestand hij zit of wat hij tussen twee runs onthoudt.

Live voorbeeld

Mermaid-code

sequenceDiagram
    autonumber
    participant U as User
    participant A as API
    participant D as Database
    U->>A: POST /login
    A->>D: SELECT user
    D-->>A: user row
    A-->>U: 200 + JWT token
    U->>A: GET /profile (Bearer)
    A-->>U: 200 profile

Live voorbeeld

Wanneer gebruik je het

API-flows, authenticatie en betaalprotocollen documenteren

Microservice-interacties ontwerpen vóór de implementatie

Productie-incidenten debuggen door de werkelijke aanroepketen in kaart te brengen

Veelgemaakte fouten

Activaties die openblijven

Bij elke + hoort een -, en bij elke activate een deactivate. Een ongepaard stel tekent ofwel een balk die tot onderaan het diagram doorloopt, ofwel faalt met “Trying to inactivate an inactive participant”.

Deelnemers staan in volgorde van declaratie

Mermaid plaatst deelnemers van links naar rechts in de volgorde waarin het ze tegenkomt, dus iemand die alleen in een foutafhandeling voorkomt belandt uiterst rechts. Declareer elke deelnemer vooraf met een participant-regel, in de volgorde die je wilt.

Eén pijl is nog geen aanroep

A->B tekent een doorgetrokken lijn zonder pijlpunt, wat leest alsof er niets gebeurt. Synchrone aanroepen zijn ->>, antwoorden -->>, en fire-and-forget-berichten -). De streepjes bepalen alleen de lijnstijl; de pijlpunt draagt de betekenis.

Basissyntaxis

.mmd

sequenceDiagram
    participant A as Alice
    participant B as Bob
    A->>B: Sync request
    B-->>A: Async response

sequenceDiagram autonumber
autonumber zet voor elk bericht een nummer, zodat reviewers in een opmerking naar “stap 4” kunnen verwijzen in plaats van te omschrijven welke pijl ze bedoelen.
U->>+API: POST /orders API-->>-U: 201 Created
Een + op een pijl opent een activatiebalk bij de ontvanger en een - sluit hem, wat precies laat zien hoe lang elke deelnemer met de aanroep bezig is.
note over API,DB: single transaction
Notities dragen het detail dat pijlen niet kwijt kunnen: transactiegrenzen, retrybeleid, timeouts. Gebruik note left of en note right of om er een aan één deelnemer te hangen.
box Payment domain participant PSP end
Een box tekent een gelabeld kader om deelnemers die tot hetzelfde systeem of team behoren. Zet een kleurnaam vóór het label om het kader te tinten.

Vragen over dit diagram

Wat betekenen de pijltypen in een Mermaid-sequentiediagram?

Doorgetrokken pijlen (->>) zijn synchrone aanroepen, gestippelde pijlen (-->>) antwoorden of asynchrone berichten. Activaties tonen wanneer een deelnemer bezig is met verwerken.

Kan ik lussen en voorwaarden tonen?

Ja — Mermaid ondersteunt de blokken loop, alt (if/else), opt (optioneel) en par (parallel) om de logica van echte protocollen uit te drukken.

Kan ik een sequentiediagram in de beschrijving van een GitHub-pull request zetten?

Ja — plak de code in een codeblok met de taalaanduiding mermaid en GitHub rendert hem inline in pull requests, issues en opmerkingen. Anders dan een schermafbeelding is het diagram bij de volgende wijziging als tekst te diffen.

Kan een Mermaid-sequentiediagram verstreken tijd of latency tonen?

Nee. De verticale as is alleen volgorde — er is geen tijdschaal, dus twee pijlen met een milliseconde ertussen zien er hetzelfde uit als twee met een uur ertussen. Zet het getal in een notitie, of neem een Gantt-grafiek als de duur de kern is.

Hoe toon ik een deelnemer die er maar een deel van de flow is?

Declareer hem waar hij verschijnt met create participant Worker en beëindig hem met destroy Worker. De levenslijn begint dan bij het bericht dat hem aanmaakt en eindigt op een kruisje: zo teken je een job, een sessie of een tijdelijk proces.

Hoe licht ik een groep berichten uit?

Zet ze in rect rgb(240,240,255) … end om de achtergrond te arceren, handig om een retryblok of een transactie te markeren. Rect-blokken kunnen genest worden, dus een retry binnen een transactie blijft leesbaar. De blokken loop, alt en opt tekenen bovendien hun eigen gelabelde kader.

Sequentiediagram of een ander diagramtype?

Sequentiediagram of flowchart?

Tel de systemen. Eén proces binnen één component is een flowchart; twee of meer deelnemers die berichten uitwisselen is een sequentiediagram. Betrap je jezelf erop dat je “Service B ontvangt…” in een flowchartblok schrijft, schakel dan over — levenslijnen doen dat werk voor je.

Sequentiediagram of toestandsdiagram?

Beide beschrijven gedrag in de tijd. Een sequentiediagram volgt één run door het systeem en toont het verkeer tussen deelnemers; een toestandsdiagram dekt alle runs van één deelnemer en toont wat die onthoudt. Debug met het eerste, specificeer met het tweede.

Verken de andere diagramtypen

🔀 Flowchart 🧩 Klassediagram 🗄️ Entiteit-relatiediagram 🔄 Toestandsdiagram 📅 Gantt-grafiek 🥧 Cirkeldiagram 🧠 Mindmap 🌿 Git-graaf 🕰️ Tijdlijn 🚶 User journey 🎯 Kwadrantgrafiek

Maak nu je Sequentiediagram

Beschrijf het in gewone taal — de AI schrijft de Mermaid-code voor je.

Mermaid Studio openen