Ganttdiagram
Et Gantt-diagram er en slags søjlediagram, der viser projektets fremdrift og den tid, det tager at afslutte et projekt. Et Gantt-diagram viser antallet af dage mellem startdatoen og slutdatoen for projektets terminalelementer og summeringselementer.
Bemærkninger
Et Gantt-diagram registrerer hver planlagt opgave som en sammenhængende bjælke, der strækker sig fra venstre mod højre. X-aksen repræsenterer tid, og y-aksen registrerer de forskellige opgaver og deres rækkefølge.
Endnu vigtigere er det, at når datoer, dage eller et bestemt sæt datoer for en opgave udelades, tilpasser Gantt-diagrammet sig disse ændringer ved at forlænge med det samme antal dage til højre i stedet for at skabe huller inde i opgaven.
Kopiér
Integrer
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
Men hvis de udeladte datoer ligger mellem to opgaver, der starter lige efter hinanden, springes de udeladte datoer over og efterlades tomme i diagrammet, hvorefter opgaven starter efter de udeladte datoers udløb. Som vist nedenfor:
Kopiér
Integrer
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
Gantt-diagrammer er nyttige til at følge den tid, det tager at afslutte et projekt, men med visse justeringer kan de også bruges til grafisk at repræsentere "ikke-arbejdsdage".
Syntaks
Kopiér
Integrer
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
Opgaver er som standard fortløbende, og startdatoen for den næste opgave er som standard slutdatoen for den foregående opgave.
Opgavetitlen og dens metadata adskilles med et kolon (:), og metadataelementer adskilles med kommaer (,). Gyldige etiketter omfatter active, done, crit og milestone. Etiketter er valgfrie, men hvis de bruges, skal de stå først. Når etiketterne er behandlet, fortolkes de resterende metadataelementer som følger:
- Hvis der angives et enkelt element, afgør det, hvornår opgaven slutter. Det kan være en bestemt dato eller et bestemt tidspunkt eller en varighed. Hvis der angives en varighed, lægges den til opgavens startdato for at bestemme opgavens slutdato, idet der tages højde for eventuelle udelukkelser.
- Hvis der angives to elementer, fortolkes det sidste element på samme måde som i det foregående tilfælde. Det første element kan angive en eksplicit startdato eller -tid (formatet angives af dateFormat) eller referere til en anden opgave via after <otherTaskID> [[otherTaskID2 [otherTaskID3]]...]. I sidstnævnte tilfælde fastsættes opgavens startdato ud fra den seneste slutdato for de refererede opgaver.
- Hvis der angives tre elementer, fortolkes de sidste to elementer som i de foregående tilfælde. Det første element angiver opgavens ID og kan refereres med syntaksen later <taskID>.
| Metadatasyntaks | Startdato | Slutdato | ID |
|---|---|---|---|
| <taskID>, <startDate>, <endDate> | startdate fortolket med dateformat | endDate fortolket med dateformat | taskID |
| <taskID>, <startDate>, <length> | startdate fortolket med dateformat | Startdato + length | taskID |
| <taskID>, after <otherTaskId>, <endDate> | Slutdatoen for den tidligere angivne opgave otherTaskID | endDate fortolket med dateformat | taskID |
| <taskID>, after <otherTaskId>, <length> | Slutdatoen for den tidligere angivne opgave otherTaskID | Startdato + length | taskID |
| <taskID>, <startDate>, until <otherTaskId> | startdate fortolket med dateformat | Startdatoen for den tidligere angivne opgave otherTaskID | taskID |
| <taskID>, after <otherTaskId>, until <otherTaskId> | Slutdatoen for den tidligere angivne opgave otherTaskID | Startdatoen for den tidligere angivne opgave otherTaskID | taskID |
| <startDate>, <endDate> | startdate fortolket med dateformat | 使用 dateformat 解释的 enddate | Ikke relevant |
| <startDate>, <length> | startdate fortolket med dateformat | Startdato + length | Ikke relevant |
| after <otherTaskID>, <endDate> | Slutdatoen for den tidligere angivne opgave otherTaskID | 使用 dateformat 解释的 enddate | Ikke relevant |
| after <otherTaskID>, <length> | Slutdatoen for den tidligere angivne opgave otherTaskID | Startdato + length | Ikke relevant |
| <startDate>, until <otherTaskId> | startdate fortolket med dateformat | Startdatoen for den tidligere angivne opgave otherTaskID | Ikke relevant |
| after <otherTaskId>, until <otherTaskId> | Slutdatoen for den tidligere angivne opgave otherTaskID | Startdatoen for den tidligere angivne opgave otherTaskID | Ikke relevant |
| <endDate> | Slutdatoen for den foregående opgave | 使用 dateformat 解释的 enddate | Ikke relevant |
| <length> | Slutdatoen for den foregående opgave | Startdato + length | Ikke relevant |
| until <otherTaskId> | Slutdatoen for den foregående opgave | Startdatoen for den tidligere angivne opgave otherTaskID | Ikke relevant |
Varighedsformat
Når der angives <length>, bruges et tal efterfulgt af et af følgende enhedssuffikser:
| Enhed | Suffiks | Eksempel |
|---|---|---|
| Millisekund | ms | 50ms |
| Sekund | s | 30s |
| Minut | m | 30m |
| Time | h | 4h |
| Dag | d | 7d |
| Uge | w | 3w |
| Måned | m | 2m |
| År | y | 1y |
Decimalværdier understøttes også (f.eks. 2.5d). Ugyldige varighedsmarkeringer (f.eks. 3dX) ignoreres, og opgaven får som standard en varighed på nul.
For nemheds skyld viser tabellen ikke flere opgaver oplistet med after-syntaksen. Nedenfor er et eksempel:
Kopiér
Integrer
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 er en valgfri streng, der vises øverst i Gantt-diagrammet og beskriver hele diagrammet.
Udeladelse
excludes er en valgfri egenskab, der accepterer bestemte datoer (formatet YYYY-MM-DD), ugedage (f.eks. "sunday") eller "weekends", men ordet "weekdays" kan ikke bruges. Disse datoer markeres i diagrammet og udelukkes fra beregningen af opgavens varighed. Det betyder, at hvis en opgaves varighed omfatter udeladte datoer, lægges de udeladte dage til opgavens sluttidspunkt for at sikre, at opgavens varighed stemmer overens med det, der er angivet i koden.
Weekend
Ved udelukkelse af weekend kan weekenden sættes til fredag og lørdag eller lørdag og søndag. Som standard er weekenden lørdag og søndag. For at definere weekendens startdag kan du tilføje den valgfrie egenskab weekend på en ny linje efterfulgt af friday eller saturday.
Kopiér
Integrer
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
Sektionserklæring
Du kan opdele diagrammet i sektioner for at adskille forskellige dele af projektet (f.eks. udvikling og dokumentation).
For at gøre dette skal du bruge section-syntaksen i begyndelsen af en linje og give den et navn. Bemærk, at dette navn i modsætning til hele diagrammets titel er obligatorisk.
Milepæl
Du kan tilføje milepæle til diagrammet. Milepæle er forskellige fra opgaver, fordi de repræsenterer et bestemt tidspunkt og identificeres med milestone-syntaksen. Nedenfor er et eksempel på brug af milepæle: En milepæls nøjagtige placering bestemmes af milepælens startdato og opgavens varighed, som vist nedenfor:
Kopiér
Integrer
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
Lodret markering
vert angiver, at der tilføjes en lodret linje i Gantt-diagrammet for nemt at fremhæve vigtige datoer, f.eks. deadlines, vigtige hændelser eller kontrolpunkter. Disse markeringer strækker sig over hele diagrammet og placeres ud fra den dato, du angiver. I modsætning til milepæle optager lodrette markeringer ikke en linje. De er udelukkende visuelle referencepunkter, der hjælper med at opdele tidslinjen og gør vigtige øjeblikke lettere at identificere.
Kopiér
Integrer
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
Angiv dato
dateFormat definerer datoinputformatet for Gantt-diagrammets elementer, og axisFormat definerer datooutputformatet ved rendering af diagrammet.
Inputdatoformat
Standard-inputdatoformatet er YYYY-MM-DD, og du kan tilpasse dateFormat.
Kopiér
Integrer
dateFormat YYYY-MM-DD
Følgende formatmuligheder understøttes:
| 输入 | Eksempel | Beskrivelse |
|---|---|---|
| YYYY | 2026 | Firecifret årstal |
| YY | 26 | Tocifret årstal |
| Q | 1..4 | Kvartalstal |
| M MM | 1..12 | Månedstal |
| D DD | 1..31 | Dag i måneden |
| Do | 1st..31st | Dag i måneden med ordenstal |
| DDD DDDD | 1..365 | Dag i året |
| X | 1410715640.579 | Unix-tidsstempel |
| x | 1410715640579 | Unix-tidsstempel i millisekunder |
| H HH | 0..23 | 24-timers tid |
| h hh | 1..12 | 12-timers tid, bruges sammen med a A |
| a A | am pm | AM eller PM |
| m mm | 0..59 | Minut |
| s ss | 0..59 | Sekunder |
| S | 0..9 | Tiendedele af et sekund |
| SS | 0..99 | Hundrededele af et sekund |
| SSS | 0..999 | Tusindedele af et sekund |
| Z ZZ | +12:00 | Forskydning i forhold til UTC, i formatet +-HH:mm, +-HHmm eller Z |
Aksernes outputdatoformat
Standard-outputdatoformatet er YYYY-MM-DD. Du kan tilpasse axisFormat, f.eks. repræsenterer 2026-Q1 første kvartal af 2026.
Kopiér
Integrer
axisFormat %Y-%m-%d
Følgende formatstrenge understøttes:
| Format,Definition | |
|---|---|
| %a | Forkortet navn på ugedag |
| %A | Fuldt navn på ugedag |
| %b | Forkortet navn på måned |
| %B | Fuldt navn på måned |
| %c | Lokaliseret dato og tid |
| %d | Dato, decimaltal [01,31] |
| %e | Dato, mellemrumsudfyldt decimaltal [1,31], svarer til %_d |
| %H | Time (24-timers ur), decimaltal [00,23] |
| %I | Time (12-timers ur), decimaltal [01,12] |
| %j | Dag i året, decimaltal [001,366] |
| %m | Måned, decimaltal [01,12] |
| %M | Minut, decimaltal [00,59] |
| %L | Millisekund, decimaltal [000, 999] |
| %p | AM eller PM |
| %S | Sekund, decimaltal [00,59] |
| %U | Uge i året (med søndag som ugens første dag), decimaltal [00,53] |
| %w | Ugedag, mellemrumsudfyldt decimaltal [0,6], hvor 0 repræsenterer søndag |
| %W | Uge i året (med mandag som ugens første dag), decimaltal [00,53] |
| %x | Lokaliseret datorepræsentation, f.eks.: 2026-09-18 |
| %X | Lokaliseret tidsrepræsentation, f.eks.: 14:30:00 |
| %y | Årstal uden århundrede, decimaltal [00,99], f.eks. repræsenterer 26 år 2026 |
| %Y | Årstal med århundrede, decimaltal |
| %Z | Forkortelse for tidszonenavn, f.eks. "-0700" |
| %% | Escapetegn, bruges til at vise selve procenttegnet % |
Aksemarkeringer
Standard-outputmarkeringerne er automatiske. Du kan tilpasse tickInterval, f.eks. 1day eller 1week.
Kopiér
Integrer
tickInterval 1day
Mønsteret er
Kopiér
Integrer
/^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$/;
Et uge-baseret tickInterval begynder som standard om søndagen. Hvis du vil angive en anden ugedag, som tickInterval starter på, skal du bruge weekday-indstillingen som i følgende kode:
Kopiér
Integrer
gantt
tickInterval 1week
weekday monday
Output i kompakt tilstand
Kompakt tilstand gør det muligt at vise flere opgaver på samme linje. Diagrammets visningstilstand styres via den forrige YAML-indstilling, som aktiverer kompakt tilstand for Gantt-diagrammet.
Kopiér
Integrer
---
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
Kommentarer kan indtastes i et Gantt-diagram, og parseren ignorerer dem. En kommentar skal stå på sin egen linje og skal begynde med %% (dobbelt procenttegn). Al tekst fra kommentarens begyndelse til næste linjeskift betragtes som en kommentar, inklusive enhver diagramsyntaks.
Kopiér
Integrer
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 for i dag
Du kan style markeringen for den aktuelle dato eller skjule den. For at angive stil skal du tilføje en værdi til nøglen todayMarker.
Kopiér
Integrer
todayMarker stroke-width:5px,stroke:#0f0,opacity:0.5
For at skjule markeringen skal du sætte todayMarker til off.
Kopiér
Integrer
todayMarker off
Eksempel
Søjlebaseret Gantt-diagram
Kopiér
Integrer
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
Tidslinje (med kommentarer, CSS og frontmatter-konfiguration)
Kopiér
Integrer
---
# 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
