📅 Mermaid

Gantt-grafiek

Plan projecten op een heldere tijdlijn

Wat is een Gantt-grafiek?

Een Gantt-grafiek zet taken op een kalender met duren, afhankelijkheden en mijlpalen. Het is de projectmanagementstandaard om te laten zien wie wat doet, wanneer, en wat waarvan afhangt.

Gantt-grafieken duiken op in stuurgroepen en releaseplanningen, waar het publiek datums wil in plaats van logica. Als tekst geschreven krijgen ze een ongebruikelijk voordeel: het plan wordt gereviewd in dezelfde pull request als het werk dat het beschrijft. Hun zwakte is dat ze slecht verouderen — een Gantt is een momentopname van een intentie, en niets in Mermaid vertelt je dat hij al drie weken niet meer met de werkelijkheid overeenkomt.

Live voorbeeld

Mermaid-code
gantt
    title Product Launch
    dateFormat YYYY-MM-DD
    section Design
      Wireframes       :a1, 2026-01-05, 10d
      UI design        :a2, after a1, 14d
    section Build
      Backend API      :b1, 2026-01-12, 21d
      Frontend         :b2, after a2, 18d
    section Launch
      Beta testing     :c1, after b2, 10d
      Go live          :milestone, after c1, 0d
Live voorbeeld
2026-01-112026-01-182026-01-252026-02-012026-02-082026-02-152026-02-22Wireframes Backend API UI design Frontend Beta testing Go live DesignBuildLaunchProduct Launch

Wanneer gebruik je het

Productlanceringen en releaseplanningen plannen
Roadmaps communiceren naar stakeholders
Sprint- of migratiefasen met afhankelijkheden volgen

Veelgemaakte fouten

dateFormat past niet bij je datums

Met dateFormat YYYY-MM-DD wordt een taak die op 05/01/2026 begint niet geweigerd — hij wordt als een andere datum gelezen en de grafiek rekt stilletjes over maanden uit. Laat de twee overeenkomen, of declareer dateFormat DD/MM/YYYY.

Een dubbele punt in de taaknaam

Alles vóór de eerste dubbele punt is het label, dus Phase 1: discovery :a1, 2026-01-05, 7d rendert een taak “Phase 1” en laat de rest van de naam stilletjes vallen. Gebruik in taaknamen liever een streepje.

Een taak-id hergebruiken

Id’s moeten uniek zijn. Delen twee taken er een, dan verwijst after naar de laatste declaratie en springt een afhankelijke taak weken vooruit, zonder enige foutmelding. Prefix id’s per sectie — d1, b1, l1 — om ze te onderscheiden.

Basissyntaxis

.mmd
gantt
    dateFormat YYYY-MM-DD
    section Phase 1
      Task A :a1, 2026-01-01, 7d
      Task B :after a1, 5d
  • dateFormat YYYY-MM-DD axisFormat %d/%m

    dateFormat vertelt Mermaid hoe het de datums moet lezen die jij typt; axisFormat bepaalt hoe ze langs de as worden afgedrukt. De twee staan los van elkaar en verschillen vaak.

  • Backend API :active, b1, 2026-01-12, 21d

    Een taakregel is label, dan tags, id, start en duur. De tags zijn done, active, crit en milestone; de start is een datum of after b1.

  • excludes weekends todayMarker stroke-width:4px,stroke:#e11

    excludes haalt weekenden of genoemde datums uit de werkkalender. todayMarker geeft de lijn van vandaag een andere stijl, en todayMarker off verbergt hem helemaal.

  • section Launch Go live :milestone, m1, after c1, 0d

    Secties groeperen taken in werkstromen, elk met een eigen kleurband. Een mijlpaal met duur nul rendert als een ruit in plaats van als een balk.

Vragen over dit diagram

Kunnen taken van elkaar afhangen?

Ja — gebruik “after taskId” om taken te koppelen, en mijlpalen om belangrijke datums te markeren. Secties groeperen taken per werkstroom of team.

Is een tekstuele Gantt beter dan een projecttool?

Voor communicatie wel: hij leeft in je docs, versioneert mee met git en is in seconden bijgewerkt. Voor resourcemanagement combineer je hem met je PM-tool.

Hoe deel ik een Gantt-grafiek met mensen die geen Mermaid gebruiken?

Exporteer PNG voor slides en e-mail, SVG voor alles wat ingezoomd wordt, of publiceer het diagram als openbare pagina en stuur de link — een link blijft de actuele versie tonen nadat je het plan hebt bijgewerkt.

Kan een Mermaid-Gantt-grafiek toegewezen personen of voortgang tonen?

Nee. Er is geen resourcekolom en geen voortgangsbalk; de enige statusinformatie zijn de tags done, active en crit op een taak. Houd capaciteitsplanning in je projecttool en gebruik de grafiek om te communiceren.

Tekent Mermaid pijlen tussen afhankelijke taken?

Nee. after b1 zet wel de startdatum van een taak, maar tekent geen afhankelijkheidspijl, dus de koppeling blijft onzichtbaar voor de lezer. Zeg het in de taaknaam, of neem een flowchart als de afhankelijkheidsgraaf de boodschap is.

Hoe markeer ik de datum van vandaag op de grafiek?

Mermaid tekent standaard een markering op de huidige datum, afgeleid van de klok van wie het diagram rendert. todayMarker stroke-width:4px,stroke:#e11 geeft hem een andere stijl, en todayMarker off haalt hem weg — handig als de grafiek een herbruikbaar sjabloon is en geen levend plan.

Gantt-grafiek of een ander diagramtype?

Gantt-grafiek of tijdlijn?

Een Gantt gaat over werk dat nog moet gebeuren: duren, afhankelijkheden, een kritiek pad. Een tijdlijn gaat over gebeurtenissen met een datum maar zonder duur — releases, incidenten, bedrijfsgeschiedenis. Heeft niets in je lijst een lengte, dan wil je een tijdlijn.

Gantt-grafiek of flowchart?

Beide beschrijven een plan. De flowchart houdt de vertakkingen — wat als de audit faalt — en negeert de kalender; de Gantt houdt de kalender en plet elke vertakking tot één nominaal pad. Stuurgroepen willen de Gantt, deliveryteams vaak allebei.

Maak nu je Gantt-grafiek

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

Mermaid Studio openen