Ga naar inhoud

Diagrammen

Een diagram teken je niet, je schrijft het. Je zet de onderdelen en de pijlen in een codeblok met de taal mermaid, en de site maakt er een tekening van. Wijzigen is dan gewoon tekst aanpassen.

Een stroomschema

Voor een reeks stappen, eventueel met een keuze:

flowchart TD
  A[Inschrijven] --> B{Vraagt de bijeenkomst iets?}
  B -- Nee --> D[Winkelmandje]
  B -- Ja --> C[Uw gegevens en vragen invullen]
  C --> D
  D --> E[Afrekenen]
```mermaid
flowchart TD
  A[Inschrijven] --> B{Vraagt de bijeenkomst iets?}
  B -- Nee --> D[Winkelmandje]
  B -- Ja --> C[Uw gegevens en vragen invullen]
  C --> D
  D --> E[Afrekenen]
```
  • flowchart TD tekent van boven naar beneden; flowchart LR van links naar rechts.
  • [tekst] is een blok, {tekst} een keuze (een ruit).
  • --> is een pijl; -- Ja --> een pijl met tekst erbij.

Een volgordediagram

Voor wie wat doet, en in welke volgorde:

sequenceDiagram
  actor D as Deelnemer
  participant E as EventOps
  participant V as VIES
  participant M as Mollie
  D->>E: Zakelijk afrekenen
  E->>V: Bestaat dit BTW-nummer?
  V-->>E: Ja
  E->>M: Betaling starten
  M-->>D: Betaalpagina
  D->>M: Betalen
  M-->>E: Betaald
  E-->>D: Bevestiging met factuur
```mermaid
sequenceDiagram
  actor D as Deelnemer
  participant E as EventOps
  participant V as VIES
  participant M as Mollie
  D->>E: Zakelijk afrekenen
  E->>V: Bestaat dit BTW-nummer?
  V-->>E: Ja
  E->>M: Betaling starten
  M-->>D: Betaalpagina
  D->>M: Betalen
  M-->>E: Betaald
  E-->>D: Bevestiging met factuur
```
  • actor is een persoon, participant een systeem.
  • ->> is een vraag of opdracht, -->> (gestippeld) het antwoord.

Meer soorten

Mermaid kan nog veel meer: tijdlijnen, toestanden, taartdiagrammen. Kijk op mermaid.js.org voor voorbeelden. Probeer een diagram eerst uit in de Mermaid Live Editor, en plak het daarna hier.

Houd het klein

Een diagram met meer dan een stuk of acht blokken leest niemand meer. Splits het dan op, of leg het uit in genummerde stappen.