🕰️ Mermaid

Tijdlijn

Vertel een verhaal jaar na jaar

Wat is een Tijdlijn?

Een tijdlijn zet gebeurtenissen chronologisch op een rij: bedrijfsgeschiedenis, projectmijlpalen, productevolutie, incidentretrospectives. Mermaid-tijdlijnen groeperen meerdere gebeurtenissen per periode en blijven leesbaar op elk formaat.

Tijdlijnen zijn het diagram van de terugblik: incidentpostmortems, slides over bedrijfsgeschiedenis, de “hoe zijn we hier beland”-paragraaf van een strategiedocument. Ze zijn ongewoon goed in het zichtbaar maken van gaten — drie gebeurtenissen in maart en daarna niets tot september is op zichzelf al een verhaal. Wat ze niet kunnen is schalen: perioden zijn labels, gelijkmatig verdeeld ongeacht het interval, en er wordt niets voor je gesorteerd. Een periode draagt bovendien niets dan tekst — geen eigenaar, geen link, geen status om op te filteren.

Live voorbeeld

Mermaid-code
timeline
    title History of the project
    2024 : Idea & prototype
    2025 : First customers
         : Seed funding
    2026 : EU expansion
         : AI features
Live voorbeeld
2024Idea & prototype2025First customersSeed funding2026EU expansionAI featuresHistory of the project

Wanneer gebruik je het

De geschiedenis van een bedrijf of product presenteren
Incidenttijdlijnen documenteren voor postmortems
Roadmapmijlpalen per kwartaal of jaar tonen

Veelgemaakte fouten

Perioden worden nooit gesorteerd

Mermaid tekent de perioden in de volgorde waarin je ze schreef, dus een regel uit 2026 boven een regel uit 2024 blijft daar staan. Er is geen chronologische controle en geen waarschuwing — sorteer de broncode zelf voordat je publiceert.

Perioden vóór de eerste sectie verdwijnen

Zodra een tijdlijn ook maar één sectie bevat, valt elke periode die vóór die eerste section-regel is gedeclareerd uit de rendering weg — stilletjes en zonder foutmelding. Geef die vroege perioden een eigen sectie, of gebruik helemaal geen secties.

Zinnen in plaats van gebeurtenissen

Gebeurtenistekst breekt af op een vaste breedte, dus een hele zin wordt vier gestapelde regels en blaast de hoogte van de hele grafiek op. Houd gebeurtenissen bij een paar woorden en zet het detail in de omringende tekst.

Basissyntaxis

.mmd
timeline
    title My timeline
    2025 : Event A
         : Event B
    2026 : Event C
  • timeline title History of the project

    De titel is optioneel maar doet het werk van een onderschrift, wat gaat tellen zodra het diagram los wordt geëxporteerd naar een slide of een postmortem.

  • 2025 : First customers

    Links van de dubbele punt staat het periodelabel — een jaar, een kwartaal, Sprint 12, wat je maar wilt. Het wordt nooit als datum geparseerd, dus elk formaat werkt.

  • 2024 : Idea : Prototype

    Extra dubbele punten op dezelfde regel voegen meer gebeurtenissen aan dezelfde periode toe, wat de broncode compact houdt als één jaar meerdere noemenswaardige momenten telt.

  • section Early days 2024 : Idea

    Secties groeperen opeenvolgende perioden tot een tijdperk en kleuren ze samen — handig om vóór en na een financieringsronde, een migratie of een storing te scheiden.

Vragen over dit diagram

Kan één periode meerdere gebeurtenissen bevatten?

Ja — voeg onder dezelfde periode extra regels toe die beginnen met “:” en ze stapelen zich verticaal onder die datum.

Tijdlijn of Gantt-grafiek?

De tijdlijn voor het verleden of het grote verhaal (gebeurtenissen op datums). De Gantt om werk te plannen (taken met duren en afhankelijkheden).

Kan ik een Mermaid-tijdlijn aan een postmortem in Confluence toevoegen?

Confluence heeft geen native Mermaid-ondersteuning: gebruik een macro uit de Marketplace of plak een geëxporteerde SVG of PNG. GitHub en GitLab renderen tijdlijnen rechtstreeks uit een codeblok, dus incidentrapporten in een repo hebben geen extra gereedschap nodig.

Hoe geef ik de secties van een tijdlijn een kleur?

Secties halen hun kleur uit de themaschaal. Overschrijf ze met een init-directive op de eerste regel — %%{init: {"themeVariables": {"cScale0": "#4f46e5"}}}%% — waarbij cScale0 de eerste sectie is, cScale1 de tweede, tot en met cScale11. Het palet zit ingebakken in de geëxporteerde SVG.

Kan ik een tijdlijn verticaal maken?

Nee — tijdlijnen renderen horizontaal en er is geen richtingsinstelling. Hij breekt nooit af: het diagram wordt alleen maar breder. Voor een lange geschiedenis die in een smalle kolom moet passen benut een flowchart van boven naar beneden of een gitGraph TB: de ruimte veel beter.

Kan ik een incidentrapport automatisch omzetten in een tijdlijn?

Plak het rapport in Mermaid Studio en de AI haalt de gedateerde gebeurtenissen eruit tot een tijdlijn die je daarna bewerkt. Behandel het als een eerste versie: controleer vóór publicatie of er niets in de verkeerde periode is beland.

Tijdlijn of een ander diagramtype?

Tijdlijn of user journey?

Beide zetten stappen van links naar rechts. Een tijdlijn gaat over wanneer: gedateerde gebeurtenissen, geen actor, geen score. Een user journey gaat over hoe het voelde: geordende stappen, een actor, een tevredenheidsscore. Heeft niemand de gebeurtenissen beleefd, dan wil je een tijdlijn.

Tijdlijn of git-graaf?

Een tijdlijn is vlak — elke gebeurtenis staat op één lijn. Een git-graaf vertakt. Releasegeschiedenis met parallelle onderhoudsbranches vraagt om de git-graaf; een productverhaal waarin de volgorde telt en de parallellie niet, vraagt om de tijdlijn.

Maak nu je Tijdlijn

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

Mermaid Studio openen