Gantt-diagram
Een Gantt-diagram is een staafdiagram dat wordt gebruikt om de voortgang van een project en de tijd die nodig is om een project te voltooien weer te geven. Het Gantt-diagram toont het aantal dagen tussen de begin- en einddatum van eindige en samenvattende elementen van een project.
Aandachtspunten
Het Gantt-diagram registreert elke geplande taak als een doorlopende balk die zich van links naar rechts uitstrekt. De x-as vertegenwoordigt de tijd en de y-as registreert de verschillende taken en de volgorde waarin ze worden voltooid.
Belangrijker is dat wanneer de datum, het aantal dagen of een specifieke reeks datums van een taak wordt uitgesloten, het Gantt-diagram deze wijzigingen opvangt door met hetzelfde aantal dagen naar rechts te verlengen, in plaats van een opening binnen de taak te creëren.
Kopiëren
Insluiten
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
excludes 2026-03-16,2026-03-18,2026-03-19
section Section
A task :a1, 2026-03-07, 7d
Another task :after a1, 5d
Als de uitgesloten datums echter tussen twee opeenvolgend beginnende taken vallen, worden de uitgesloten datums in het diagram overgeslagen en leeg gelaten, waarna de taak na het einde van de uitgesloten datums begint. Zoals hieronder weergegeven:
Kopiëren
Insluiten
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
excludes Sunday, Friday, Saturday
section Section
A task :a1, 2026-03-07, 5d
Another task :after a1, 7d
Het Gantt-diagram is nuttig voor het volgen van de tijd die nodig is om een project te voltooien, maar met enkele aanpassingen kan het ook worden gebruikt om grafisch "niet-werkdagen" weer te geven.
Syntaxis
Kopiëren
Insluiten
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
excludes weekends
%% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
section A section
Completed task :done, des1, 2026-01-06,2026-01-08
Active task :active, des2, 2026-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2026-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :until isadded
Functionality added :milestone, isadded, 2026-01-25, 0d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h
Add another diagram to demo page :48h
Taken volgen elkaar standaard opeenvolgend op; de begindatum van de volgende taak is standaard de einddatum van de vorige taak.
De taaktitel en zijn metadata worden gescheiden door een dubbele punt (:), en metadata-items worden gescheiden door komma's (,). Geldige labels zijn active, done, crit en milestone. Labels zijn optioneel, maar moeten, indien gebruikt, vooraan staan. Na verwerking van de labels worden de resterende metadata-items als volgt geïnterpreteerd:
- Als één item is opgegeven, bepaalt dit wanneer de taak eindigt. Het kan een specifieke datum of tijd zijn, of een duur. Als een duur is opgegeven, wordt deze bij de begindatum van de taak opgeteld om de einddatum te bepalen, rekening houdend met eventuele uitsluitingen.
- Als twee items zijn opgegeven, wordt het laatste item op dezelfde manier geïnterpreteerd als in het vorige geval. Het eerste item kan een expliciete begindatum of -tijd opgeven (het formaat wordt bepaald door dateFormat), of verwijzen naar een andere taak via after <otherTaskID> [[otherTaskID2 [otherTaskID3]]...]. In het laatste geval wordt de begindatum van de taak ingesteld op basis van de laatste einddatum van de eventuele waarnaar verwezen taken.
- Als drie items zijn opgegeven, worden de laatste twee items geïnterpreteerd zoals in de vorige gevallen. Het eerste item vertegenwoordigt de ID van de taak en kan worden gerefereerd met de syntaxis later <taskID>.
| Metadatasyntaxis | Begindatum | Einddatum | ID |
|---|---|---|---|
| <taskID>, <startDate>, <endDate> | startdate geïnterpreteerd met dateformat | endDate geïnterpreteerd met dateformat | taskID |
| <taskID>, <startDate>, <length> | startdate geïnterpreteerd met dateformat | Begindatum + length | taskID |
| <taskID>, after <otherTaskId>, <endDate> | De einddatum van de eerder opgegeven taak otherTaskID | endDate geïnterpreteerd met dateformat | taskID |
| <taskID>, after <otherTaskId>, <length> | De einddatum van de eerder opgegeven taak otherTaskID | Begindatum + length | taskID |
| <taskID>, <startDate>, until <otherTaskId> | startdate geïnterpreteerd met dateformat | De begindatum van de eerder opgegeven taak otherTaskID | taskID |
| <taskID>, after <otherTaskId>, until <otherTaskId> | De einddatum van de eerder opgegeven taak otherTaskID | De begindatum van de eerder opgegeven taak otherTaskID | taskID |
| <startDate>, <endDate> | startdate geïnterpreteerd met dateformat | 使用 dateformat 解释的 enddate | Niet van toepassing |
| <startDate>, <length> | startdate geïnterpreteerd met dateformat | Begindatum + length | Niet van toepassing |
| after <otherTaskID>, <endDate> | De einddatum van de eerder opgegeven taak otherTaskID | 使用 dateformat 解释的 enddate | Niet van toepassing |
| after <otherTaskID>, <length> | De einddatum van de eerder opgegeven taak otherTaskID | Begindatum + length | Niet van toepassing |
| <startDate>, until <otherTaskId> | startdate geïnterpreteerd met dateformat | De begindatum van de eerder opgegeven taak otherTaskID | Niet van toepassing |
| after <otherTaskId>, until <otherTaskId> | De einddatum van de eerder opgegeven taak otherTaskID | De begindatum van de eerder opgegeven taak otherTaskID | Niet van toepassing |
| <endDate> | De einddatum van de vorige taak | 使用 dateformat 解释的 enddate | Niet van toepassing |
| <length> | De einddatum van de vorige taak | Begindatum + length | Niet van toepassing |
| until <otherTaskId> | De einddatum van de vorige taak | De begindatum van de eerder opgegeven taak otherTaskID | Niet van toepassing |
Duurformaat
Bij het opgeven van <length> gebruik je een getal gevolgd door een van de volgende eenheidsachtervoegsels:
| Eenheid | Achtervoegsel | Voorbeeld |
|---|---|---|
| milliseconde | ms | 50ms |
| seconde | s | 30s |
| minuut | m | 30m |
| uur | h | 4h |
| dag | d | 7d |
| week | w | 3w |
| maand | m | 2m |
| jaar | y | 1y |
Decimale waarden worden ook ondersteund (bijvoorbeeld 2.5d). Ongeldige duurmarkeringen (bijvoorbeeld 3dX) worden genegeerd en de taak krijgt standaard een duur van nul.
Voor de eenvoud toont de tabel niet meerdere taken die met de syntaxis after zijn vermeld. Hieronder volgt een voorbeeld:
Kopiëren
Insluiten
gantt
apple :a, 2026-07-20, 1w
banana :crit, b, 2026-07-23, 1d
cherry :active, c, after b a, 1d
kiwi :d, 2026-07-20, until b c
Titel
title is een optionele tekenreeks die bovenaan het Gantt-diagram wordt weergegeven en het hele diagram beschrijft.
Uitsluiten
excludes is een optionele eigenschap die een specifieke datum (formaat YYYY-MM-DD), een dag van de week (bijvoorbeeld "sunday") of "weekends" accepteert, maar het woord "weekdays" kan niet worden gebruikt. Deze datums worden in het diagram gemarkeerd en uitgesloten van de berekening van de taakduur. Dit betekent dat als de duur van een taak uitgesloten datums bevat, het aantal uitgesloten dagen bij de eindtijd van de taak wordt opgeteld, zodat de duur van de taak overeenkomt met wat in de code is opgegeven.
Weekend
Bij het uitsluiten van weekends kun je het weekend instellen op vrijdag en zaterdag, of op zaterdag en zondag. Standaard is het weekend zaterdag en zondag. Om de begindag van het weekend te definiëren, kun je op een nieuwe regel de optionele eigenschap weekend toevoegen, gevolgd door friday of saturday.
Kopiëren
Insluiten
gantt
title A Gantt Diagram Excluding Fri - Sat weekends
dateFormat Букмекерлар-MM-DD
excludes weekends
weekend friday
section Section
A task :a1, 2026-01-01, 30d
Another task :after a1, 20d
Sectiedeclaratie
Je kunt het diagram in secties verdelen om verschillende delen van het project (bijvoorbeeld ontwikkeling en documentatie) te scheiden.
Gebruik hiervoor de syntaxis section aan het begin van een regel en geef deze een naam. Let op: anders dan de titel van het hele diagram is deze naam verplicht.
Mijlpaal
Je kunt mijlpalen aan het diagram toevoegen. Mijlpalen verschillen van taken omdat ze een specifiek tijdstip vertegenwoordigen en worden aangeduid met de syntaxis milestone. Hieronder volgt een voorbeeld van het gebruik van mijlpalen: de exacte positie van de mijlpaal wordt bepaald door de begindatum van de mijlpaal en de duur van de taak, zoals hieronder weergegeven:
Kopiëren
Insluiten
gantt
dateFormat HH:mm
axisFormat %H:%M
Initial milestone : milestone, m1, 17:49, 2m
Task A : 10m
Task B : 5m
Final milestone : milestone, m2, 18:08, 4m
Verticale markering
vert voegt een verticale lijn toe aan het Gantt-diagram om belangrijke datums, zoals deadlines, belangrijke gebeurtenissen of controlepunten, gemakkelijk te markeren. Deze markeringen lopen over het hele diagram en worden gepositioneerd op basis van de datum die je opgeeft. Anders dan mijlpalen nemen verticale markeringen geen regel in beslag. Ze zijn puur visuele referentiepunten die helpen de tijdlijn op te splitsen, zodat belangrijke momenten gemakkelijker te herkennen zijn.
Kopiëren
Insluiten
gantt
dateFormat HH:mm
axisFormat %H:%M
Initial vert : vert, v1, 17:30, 2m
Task A : 3m
Task B : 8m
Final vert : vert, v2, 17:58, 4m
Datum instellen
dateFormat definieert het formaat van de datuminvoer voor Gantt-elementen, en axisFormat definieert het formaat van de datumuitvoer bij het renderen van het diagram.
Invoerdatumformaat
Het standaard invoerdatumformaat is YYYY-MM-DD; je kunt dateFormat aanpassen.
Kopiëren
Insluiten
dateFormat YYYY-MM-DD
De volgende formaatopties worden ondersteund:
| 输入 | Voorbeeld | Beschrijving |
|---|---|---|
| YYYY | 2026 | Jaar met 4 cijfers |
| YY | 26 | Jaar met 2 cijfers |
| Q | 1..4 | Kwartaalnummer |
| M MM | 1..12 | Maandnummer |
| D DD | 1..31 | Dag van de maand |
| Do | 1st..31st | Dag van de maand met rangtelwoord |
| DDD DDDD | 1..365 | Dag van het jaar |
| X | 1410715640.579 | Unix-tijdstempel |
| x | 1410715640579 | Unix-tijdstempel in milliseconden |
| H HH | 0..23 | 24-uurstijd |
| h hh | 1..12 | 12-uurstijd, gebruikt in combinatie met a A |
| a A | am pm | AM of PM |
| m mm | 0..59 | minuut |
| s ss | 0..59 | Seconden |
| S | 0..9 | Tiende van een seconde |
| SS | 0..99 | Honderdste van een seconde |
| SSS | 0..999 | Duizendste van een seconde |
| Z ZZ | +12:00 | Offset ten opzichte van UTC, in het formaat +-HH:mm, +-HHmm of Z |
Het uitvoerdatumformaat van de as
Het standaard uitvoerdatumformaat is YYYY-MM-DD. Je kunt axisFormat aanpassen, bijvoorbeeld 2026-Q1 voor het eerste kwartaal van 2026.
Kopiëren
Insluiten
axisFormat %Y-%m-%d
De volgende formaattekenreeksen worden ondersteund:
| Formaat,Definitie | |
|---|---|
| %a | Afgekorte naam van de weekdag |
| %A | Volledige naam van de weekdag |
| %b | Afgekorte naam van de maand |
| %B | Volledige naam van de maand |
| %c | Gelokaliseerde datum en tijd |
| %d | Datum, decimaal getal [01,31] |
| %e | Datum, met spaties opgevuld decimaal getal [1,31], komt overeen met %_d |
| %H | Uur (24-uursklok), decimaal getal [00,23] |
| %I | Uur (12-uursklok), decimaal getal [01,12] |
| %j | Dag van het jaar, decimaal getal [001,366] |
| %m | Maand, decimaal getal [01,12] |
| %M | Minuut, decimaal getal [00,59] |
| %L | Milliseconde, decimaal getal [000, 999] |
| %p | AM of PM |
| %S | Seconde, decimaal getal [00,59] |
| %U | Week van het jaar (met zondag als eerste dag van de week), decimaal getal [00,53] |
| %w | Weekdag, met spaties opgevuld decimaal getal [0,6], waarbij 0 zondag vertegenwoordigt |
| %W | Week van het jaar (met maandag als eerste dag van de week), decimaal getal [00,53] |
| %x | Gelokaliseerde datumnotatie, zoals: 2026-09-18 |
| %X | Gelokaliseerde tijdnotatie, zoals: 14:30:00 |
| %y | Jaar zonder eeuw, decimaal getal [00,99], bijvoorbeeld 26 voor het jaar 2026 |
| %Y | Jaar met eeuw, decimaal getal |
| %Z | Afkorting van tijdzonenaam, bijvoorbeeld "-0700" |
| %% | Escape-teken om het procentteken % zelf weer te geven |
Asmarkeringen
De standaard uitvoermarkering is automatisch. Je kunt tickInterval aanpassen, bijvoorbeeld 1day of 1week.
Kopiëren
Insluiten
tickInterval 1day
Het patroon is
Kopiëren
Insluiten
/^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$/;
Op weken gebaseerde tickInterval begint standaard op zondag. Als je een andere werkdag wilt opgeven waarop tickInterval begint, gebruik je de optie weekday, als volgt in de code:
Kopiëren
Insluiten
gantt
tickInterval 1week
weekday monday
Uitvoer in compacte modus
De compacte modus laat je meerdere taken op dezelfde regel weergeven. De weergavemodus van de grafiek wordt geregeld via de voorgaande YAML-instelling, waarmee de compacte modus voor het Gantt-diagram wordt ingeschakeld.
Kopiëren
Insluiten
---
displayMode: compact
---
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2026-01-01, 30d
Another task :a2, 2026-01-20, 25d
Another one :a3, 2026-02-10, 20d
Je kunt opmerkingen in een Gantt-diagram invoeren; de parser negeert deze opmerking. Opmerkingen moeten op een eigen regel staan en moeten beginnen met %% (dubbel procentteken). Alle tekst vanaf het begin van de opmerking tot het volgende regeleinde wordt als opmerking beschouwd, inclusief eventuele diagram-syntaxis.
Kopiëren
Insluiten
gantt
title A Gantt Diagram
%% This is a comment
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1, 20d
section Another
Task in Another :2014-01-12, 12d
another task :24d
Markering van vandaag
Je kunt de markering van de huidige datum een stijl geven of verbergen. Om een stijl in te stellen, voeg je een waarde toe aan de sleutel todayMarker.
Kopiëren
Insluiten
todayMarker stroke-width:5px,stroke:#0f0,opacity:0.5
Om de markering te verbergen, stel je todayMarker in op off.
Kopiëren
Insluiten
todayMarker off
Voorbeeld
Staaf-Gantt-diagram
Kopiëren
Insluiten
gantt
title Git Issues - days since last update
dateFormat X
axisFormat %s
section Issue19062
71 : 0, 71
section Issue19401
36 : 0, 36
section Issue193
34 : 0, 34
section Issue7441
9 : 0, 9
section Issue1300
5 : 0, 5
Tijdlijn (met opmerkingen, CSS en frontmatter-configuratie)
Kopiëren
Insluiten
---
# Frontmatter config, YAML comments
title: Ignored if specified in chart
displayMode: compact #gantt specific setting but works at this level too
config:
# theme: forest
# themeCSS: " #item36 { fill: CadetBlue } "
themeCSS: " // YAML supports multiline strings using a newline markers:
#item36 { fill: CadetBlue }
// Custom marker workaround CSS from forum (below)
rect[id^=workaround] { height: calc(100% - 50px) ; transform: translate(9px, 25px); y: 0; width: 1.5px; stroke: none; fill: red; }
text[id^=workaround] { fill: red; y: 100%; font-size: 15px;}
"
gantt:
useWidth: 400
rightPadding: 0
topAxis: true #false
numberSectionStyles: 2
---
gantt
title Timeline - Gantt Sampler
dateFormat YYYY
axisFormat %y
%% this next line doesn't recognise 'decade' or 'year', but will silently ignore
tickInterval 1decade
section Issue19062
71 : item71, 1900, 1930
section Issue19401
36 : item36, 1913, 1935
section Issue1300
94 : item94, 1910, 1915
5 : item5, 1920, 1925
0 : milestone, item0, 1918, 1s
9 : vert, 1906, 1s %% not yet official
64 : workaround, 1923, 1s %% custom CSS object https://github.com/mermaid-js/mermaid/issues/3250
