Gratis · Geen registratie · Werkt met .mmd-bestanden

Mermaid gantt-diagram-editor

Een gantt-diagram legt het werk op de kalender: wat hoe lang duurt, wat overlapt en wat niet kan beginnen voordat iets anders klaar is. Pak het erbij wanneer data en afhankelijkheden de kern zijn. Heb je alleen de volgorde nodig en geen data, dan is een stroomdiagram lichter en verrot het niet zodra de planning schuift.

Open dit in de editor →Lees de gids

Een releaseplanning met afhankelijkheden en een mijlpaal

Wat dit een gantt-diagram maakt in plaats van een tekening met balken, is `after a1`: de afhankelijkheid is gedeclareerd, dus de eerste taak verschuiven sleept alles mee wat erna komt. De mijlpaal markeert een vaste datum die geen tijd kost. De regel `dateFormat DD-MM-YYYY` is niet optioneel: zonder loop je in de datumval die hieronder staat.

gantt
    title Release 2.4
    dateFormat DD-MM-YYYY
    axisFormat %d-%m
    excludes weekends

    section Ontwikkeling
    API-contract        :done,      a1, 07-01-2026, 10d
    Implementatie       :active,    a2, after a1, 20d
    Interne tests       :           a3, after a2, 8d

    section Release
    Stabilisatieperiode :           b1, after a3, 5d
    Releasebesluit      :milestone, m1, after b1, 0d
    Uitrol naar productie :crit,    b2, after m1, 3d
Open dit in de editor
Advertentie

Uitgewerkte voorbeelden

1. Het eenvoudigste correcte diagram

`dateFormat` vertelt Mermaid hoe het de data die jij schrijft moet LEZEN; `axisFormat` bepaalt hoe ze op de as worden GETOOND. Dat zijn twee losse instellingen, en ze door elkaar halen is de meest voorkomende bron van ergernis bij gantt.

gantt
    title Sprint 14
    dateFormat DD-MM-YYYY
    section Werk
    Bouw de zoekfunctie :02-03-2026, 10d
In de editor openen

2. Taak-id's en afhankelijkheden

Een taak een id geven laat latere taken `after <id>` schrijven. Met gedeclareerde afhankelijkheden verander je de startdatum op één plek en volgt de rest van de planning vanzelf.

gantt
    title Datamigratie
    dateFormat DD-MM-YYYY
    section Voorbereiding
    Schema doorlichten   :a1, 02-02-2026, 5d
    Mappings schrijven   :a2, after a1, 8d
    section Uitvoering
    Generale repetitie   :a3, after a2, 3d
    Omschakelen          :a4, after a3, 1d
In de editor openen

3. Statussleutelwoorden

`done`, `active` en `crit` veranderen hoe de balk getekend wordt. Het is de goedkoopste manier om het diagram niet alleen «wat was het plan» maar ook «waar staan we» te laten beantwoorden.

gantt
    title Platform, eerste kwartaal
    dateFormat DD-MM-YYYY
    section Infrastructuur
    Terraform opschonen  :done,   t1, 05-01-2026, 12d
    Kubernetes bijwerken :active, t2, 19-01-2026, 15d
    Kostenreview         :        t3, after t2, 5d
    section Beveiliging
    Afhankelijkheidsaudit :crit,  s1, 12-01-2026, 6d
In de editor openen

4. Mijlpalen

Een mijlpaal is een punt, geen interval: geef hem `0d`. Gebruik ze voor data die van buiten het project komen — een beurs, een contractuele termijn, een code freeze.

gantt
    title Lanceerplan
    dateFormat DD-MM-YYYY
    section Techniek
    Scope bevriezen      :milestone, m1, 01-04-2026, 0d
    Bugjacht             :          e1, 01-04-2026, 5d
    Releasetak           :milestone, m2, after e1, 0d
    section Communicatie
    Einde persembargo    :milestone, m3, 15-04-2026, 0d
In de editor openen

5. Weekenden en feestdagen uitsluiten

`excludes weekends` zorgt dat looptijden zaterdag en zondag niet meetellen, zodat een taak van 10 dagen twee werkweken beslaat in plaats van midden in het weekend te eindigen. Feestdagen sluit je per datum uit; in Nederland scheelt dat rond Koningsdag en Bevrijdingsdag merkbaar.

gantt
    title Nieuwe dienst in gebruik nemen
    dateFormat DD-MM-YYYY
    excludes weekends, 27-04-2026, 05-05-2026

    section Bouw
    Infrastructuur opzetten :p1, 20-04-2026, 5d
    CI/CD aansluiten        :p2, after p1, 5d
    section Overdracht
    Handleiding en training :p3, after p2, 4d
In de editor openen

Overzicht van de gantt-syntaxis

Van de zes typen is gantt op één punt het minst vergevingsgezind — de taakregel — en op al het andere het meest. Precies daarom glippen er zoveel fouten onopgemerkt doorheen.

SyntaxisBetekenis
ganttOpent het diagram.
title TekstTitel van het diagram.
dateFormat DD-MM-YYYYHoe de data die jij schrijft GELEZEN worden. Dit is de juiste regel voor het Nederlands.
dateFormat YYYY-MM-DDISO-formaat, de standaardinstelling.
axisFormat %d-%mHoe data op de as WORDEN GETOOND. Een andere instelling dan dateFormat.
excludes weekendsSla zaterdag en zondag over bij het berekenen van looptijden.
excludes 27-04-2026Sluit een specifieke datum uit. Zo haal je feestdagen eruit.
section NaamGroepeert taken in een benoemde baan.
Taak :id, 01-01-2026, 10dTaak met een expliciete start en looptijd.
Taak :id, after andere, 10dTaak die start zodra `andere` klaar is.
Taak :done, id, ...Afgerond — grijs getekend.
Taak :active, id, ...Loopt — met nadruk getekend.
Taak :crit, id, ...Kritiek — in de accentkleur getekend.
Naam :milestone, id, datum, 0dEen punt in de tijd, geen interval.
10d / 3w / 2hLooptijd in dagen, weken, uren. De eenheid is verplicht.
Advertentie

De zes valkuilen van gantt — en maar één is een fout

Dit is wat gantt van de andere vijf typen onderscheidt. Nagemaakt op Mermaid 11.12.2: precies één van de zes hieronder stopt het tekenen. De andere vijf leveren een volstrekt geloofwaardige en verkeerde planning op, wat veel gevaarlijker is, want niemand controleert een diagram dat gewoon getekend is nog eens na.

Wat je ziet

Parse error die eindigt op: Expecting 'taskData', got 'NL'

Waarom

Een taakregel zonder dubbele punt. De dubbele punt scheidt de getoonde naam van de taakgegevens, en zonder valt er niets te ontleden. Het is de enige valkuil uit deze lijst die Mermaid ronduit weigert.

Oplossing

Zet een dubbele punt tussen de naam en de id.

Fout
gantt
    dateFormat DD-MM-YYYY
    section Werk
    Ontwerp a1, 07-01-2026, 5d
Goed
gantt
    dateFormat DD-MM-YYYY
    section Werk
    Ontwerp :a1, 07-01-2026, 5d

Wat je ziet

Het diagram tekent, maar de data vallen twee maanden eerder

Waarom

Dit is de duurste fout van deze lijst bij Nederlands schrijven, en het koppelteken maakt hem verraderlijker dan elders. We schrijven 01-03-2026 en bedoelen 1 maart, maar het standaard-`dateFormat` is `YYYY-MM-DD` en bij een datum met scheidingstekens leest Mermaid hem op zijn Amerikaans, met de maand voorop. Gemeten: `01-03-2026` onder `dateFormat YYYY-MM-DD` zet de taak op 3 januari — de eerste datum op de as wordt 03-01-2026. Dat het koppelteken óók het ISO-scheidingsteken is, helpt dus niets. Geen waarschuwing; het diagram ziet er prima uit en staat twee maanden verkeerd.

Oplossing

Declareer `dateFormat DD-MM-YYYY` en schrijf de data zoals je ze altijd schrijft. Getoetst: met dat formaat valt `01-03-2026` precies op 1 maart.

Fout
gantt
    dateFormat YYYY-MM-DD
    axisFormat %d-%m-%Y
    section S
    Ontwerp :a1, 01-03-2026, 10d
Goed
gantt
    dateFormat DD-MM-YYYY
    axisFormat %d-%m-%Y
    section S
    Ontwerp :a1, 01-03-2026, 10d

Wat je ziet

Het diagram tekent, maar de as beslaat opeens vele maanden

Waarom

Een `after` die naar een niet-bestaande taak-id wijst — meestal een tikfout of een hernoemde taak. Mermaid waarschuwt niet: het zet de taak op een willekeurig punt, wat de as oprekt om erbij te komen. Twee taken van tien dagen kunnen zo op een as van acht maanden belanden.

Oplossing

Controleer of elke `after <id>` exact overeenkomt met een gedeclareerde id. Een plotselinge schaalsprong van de as is het signaal.

Fout
gantt
    dateFormat DD-MM-YYYY
    section S
    Ontwerp :a1, 07-01-2026, 10d
    Bouw :a2, after ontwerp, 10d
Goed
gantt
    dateFormat DD-MM-YYYY
    section S
    Ontwerp :a1, 07-01-2026, 10d
    Bouw :a2, after a1, 10d

Wat je ziet

De taaknaam is afgekapt bij de eerste dubbele punt

Waarom

Er staat een dubbele punt in de taaknaam. De eerste dubbele punt is het scheidingsteken, dus alles erna wordt als taakgegevens gelezen: `Fase 1: ontwerp` tekent als een taak die simpelweg `Fase 1` heet, en het woord ontwerp verdwijnt. Sectienamen hebben er geen last van — getoetst.

Oplossing

Geen dubbele punten in taaknamen. Gebruik een gedachtestreepje of verplaats het detail naar de sectienaam.

Fout
gantt
    dateFormat DD-MM-YYYY
    section S
    Fase 1: ontwerp :a1, 07-01-2026, 10d
Goed
gantt
    dateFormat DD-MM-YYYY
    section S
    Fase 1 — ontwerp :a1, 07-01-2026, 10d

Wat je ziet

De balk krimpt tot niets

Waarom

Looptijd zonder eenheid. `5` is geen vijf dagen: de eenheid is verplicht en zonder krijgt de taak geen zinnige lengte. Het diagram tekent alsnog, met een taak die de indruk wekt geen tijd te kosten.

Oplossing

Schrijf altijd de eenheid: `5d`, `3w`, `2h`.

Fout
gantt
    dateFormat DD-MM-YYYY
    section S
    Ontwerp :a1, 07-01-2026, 5
Goed
gantt
    dateFormat DD-MM-YYYY
    section S
    Ontwerp :a1, 07-01-2026, 5d

Wat je ziet

De looptijden kloppen, maar de einddata stroken niet met de werkelijkheid

Waarom

`excludes weekends` ontbreekt. Standaard is een taak van 10 dagen tien kalenderdagen inclusief weekenden, dus alles wat langer duurt dan een werkweek eindigt op het diagram eerder dan in de praktijk. In Nederland komen daar de vrije dagen rond eind april en begin mei bij, en over een kwartaal wordt het verschil lastig te verdedigen in een overleg.

Oplossing

Zet `excludes weekends` bovenin, gevolgd door de feestdagen — tenzij er werkelijk zeven dagen per week wordt doorgewerkt.

Fout
gantt
    dateFormat DD-MM-YYYY
    section S
    Migratie :a1, 20-04-2026, 10d
Goed
gantt
    dateFormat DD-MM-YYYY
    excludes weekends, 27-04-2026, 05-05-2026
    section S
    Migratie :a1, 20-04-2026, 10d

Aantekeningen over het tekenen

Gemeten op Mermaid 11.12.2, de versie die deze site gebruikt. Gantt gedraagt zich anders dan alle andere typen.

Het enige type met een vaste tekenbreedte

Alle andere diagrammen op deze site groeien in de richting waarin hun inhoud groeit. Een gantt-diagram heeft altijd een viewBox van 1264 pixels breed, of het nu drie taken heeft of veertig; alleen de hoogte verandert, gemeten tussen ongeveer 172 en 1060 pixels. De as wordt samengeperst of uitgerekt om in die vaste breedte te passen, en daarom zien een tweejarenplan en een tweewekenplan er even dicht uit. Komen de balken onleesbaar dun uit, dan is het datumbereik het probleem en niet het aantal taken.

Het koppelteken helpt niet — het ontleden blijft Amerikaans

Ik herhaal het hier, want dit is de duurste val bij Nederlands schrijven en het koppelteken maakt hem extra gemeen: het is immers óók het ISO-scheidingsteken, dus je verwacht dat Mermaid het herkent. Gemeten: onder `dateFormat YYYY-MM-DD` levert `01-03-2026` geen fout en geen waarschuwing op, het gaat gewoon op 3 januari staan. Hetzelfde gebeurt met de schuine streep en met de punt. Een gedeclareerde `dateFormat DD-MM-YYYY` lost het volledig op. Dat is de eerste regel die je aan elk Nederlands gantt-diagram toevoegt.

De PNG-export klopt tot op de pixel

Gantt tekent zijn labels als gewone SVG-tekst en niet als ingebedde HTML, dus — anders dan het stroomdiagram en de klassen-, toestands- en ER-diagrammen — laat het zich rechtstreeks rasteren. De geëxporteerde PNG komt exact overeen met het scherm, zonder hertekening en zonder verschuiving in de tekstzetting.

Dit type leed het meest onder het PNG-exportdefect

Doordat Mermaid `width="100%"` uitschrijft en geen hoogte opgeeft, berekende de browser het exportformaat ten opzichte van het standaardkader van 300×150, en de brede, lage verhouding van gantt maakte dat het slechtst denkbare geval: een diagram van 1280×148 exporteerde als PNG van 600×58. Nu leest de export de viewBox en komt hetzelfde diagram uit op 2560×296. Handig om te weten als je oude PNG's van gantt-diagrammen hebt: die zijn niet te vergroten.

De grammatica is overal soepel behalve bij de dubbele punt

Ontbrekende secties, onbekende statussleutelwoorden, data in het verkeerde formaat en looptijden zonder eenheid — het tekent allemaal. Het enige dat geweigerd wordt is een taakregel zonder dubbele punt. Die scheefheid is het nuttigste dat je over het schrijven van gantt-diagrammen kunt weten: dat het diagram getekend is, zegt vrijwel niets over de vraag of het klopt.

Wanneer een ander diagram beter past

Zijn de data geschat, dan presenteert een gantt-diagram ze met een precisie die ze niet verdiend hebben, en daar wordt je later op aangesproken. Een stroomdiagram dat de volgorde zonder data toont is eerlijker en hoeft niet bijgewerkt te worden zodra de planning schuift.

Verandert het plan wekelijks, dan is een tekstueel gantt onder versiebeheer echt goed — uit de diff zie je wat er verschoven is — maar een diagram dat niemand bijwerkt is slechter dan geen diagram. Bepaal nuchter welke van de twee je aan het maken bent.

En voor alles wat met werklastverdeling, capaciteit of toewijzing aan personen te maken heeft, is dit het verkeerde gereedschap. Mermaid tekent balken op een kalender; het weet niet wie het werk doet of dat die persoon al bezet is.

Andere diagramtypen

Geschreven door Dominik Malsch · Laatst bijgewerkt:

Editor openen →