Gantt-diagram
Et Gantt-diagram er et stolpediagram som brukes til å vise prosjektframdrift og tiden som trengs for å fullføre et prosjekt. Gantt-diagrammet viser antall dager mellom startdato og sluttdato for prosjektets sluttelementer og samlelementer.
Merknader
Et Gantt-diagram registrerer hver planlagte oppgave som en sammenhengende stolpe som strekker seg fra venstre mot høyre. X-aksen representerer tid, og y-aksen registrerer de ulike oppgavene og rekkefølgen de fullføres i.
Enda viktigere: når datoer, dager eller et bestemt sett av datoer for en oppgave utelates, tilpasser Gantt-diagrammet disse endringene ved å forlenge med samme antall dager til høyre, i stedet for å lage hull inne i oppgaven .
Kopier
Bygg inn
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 utelatte datoene ligger mellom to oppgaver som starter etter hverandre, hoppes de utelatte datoene over på diagrammet og står tomme, og deretter starter oppgaven etter at de utelatte datoene er over. Som vist nedenfor:
Kopier
Bygg inn
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-diagrammet er nyttig for å spore tiden som trengs for å fullføre et prosjekt, men med noen justeringer kan det også brukes til å grafisk representere "ikke-arbeidsdager".
Syntaks
Kopier
Bygg inn
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
Oppgaver utføres som standard sammenhengende, og startdatoen for neste oppgave er som standard sluttdatoen for forrige oppgave.
Oppgavetittelen og metadataene skilles med et kolon ( : ), og metadataelementene skilles med komma ( , ). Gyldige tagger inkluderer active , done , crit og milestone . Tagger er valgfrie, men hvis de brukes, må de stå først. Etter at taggene er behandlet, tolkes de gjenstående metadataelementene slik:
- Hvis ett enkelt element er angitt, bestemmer det når oppgaven avsluttes. Det kan være en konkret dato eller tid, eller en varighet. Hvis en varighet er angitt, legges den til oppgavens startdato for å bestemme sluttdatoen, samtidig som eventuelle utelatelser tas hensyn til.
- Hvis to elementer er angitt, tolkes det siste elementet på samme måte som i forrige tilfelle. Det første elementet kan angi en eksplisitt startdato eller -tid (format angitt av dateFormat ), eller referere til en annen oppgave via after <otherTaskID> [[otherTaskID2 [otherTaskID3]]...] . I sistnevnte tilfelle settes oppgavens startdato basert på den seneste sluttdatoen til eventuelle refererte oppgaver.
- Hvis tre elementer er angitt, tolkes de to siste elementene som i tilfellene ovenfor. Det første elementet angir oppgavens ID, og kan refereres med later <taskID> -syntaksen.
| Metadata-syntaks | Startdato | Sluttdato | ID |
|---|---|---|---|
| <taskID>, <startDate>, <endDate> | startdate tolket med dateformat | endDate tolket med dateformat | taskID |
| <taskID>, <startDate>, <length> | startdate tolket med dateformat | Startdato + length | taskID |
| <taskID>, after <otherTaskId>, <endDate> | Sluttdatoen til den tidligere angitte oppgaven otherTaskID | endDate tolket med dateformat | taskID |
| <taskID>, after <otherTaskId>, <length> | Sluttdatoen til den tidligere angitte oppgaven otherTaskID | Startdato + length | taskID |
| <taskID>, <startDate>, until <otherTaskId> | startdate tolket med dateformat | Startdatoen til den tidligere angitte oppgaven otherTaskID | taskID |
| <taskID>, after <otherTaskId>, until <otherTaskId> | Sluttdatoen til den tidligere angitte oppgaven otherTaskID | Startdatoen til den tidligere angitte oppgaven otherTaskID | taskID |
| <startDate>, <endDate> | startdate tolket med dateformat | 使用 dateformat 解释的 enddate | Ikke aktuelt |
| <startDate>, <length> | startdate tolket med dateformat | Startdato + length | Ikke aktuelt |
| after <otherTaskID>, <endDate> | Sluttdatoen til den tidligere angitte oppgaven otherTaskID | 使用 dateformat 解释的 enddate | Ikke aktuelt |
| after <otherTaskID>, <length> | Sluttdatoen til den tidligere angitte oppgaven otherTaskID | Startdato + length | Ikke aktuelt |
| <startDate>, until <otherTaskId> | startdate tolket med dateformat | Startdatoen til den tidligere angitte oppgaven otherTaskID | Ikke aktuelt |
| after <otherTaskId>, until <otherTaskId> | Sluttdatoen til den tidligere angitte oppgaven otherTaskID | Startdatoen til den tidligere angitte oppgaven otherTaskID | Ikke aktuelt |
| <endDate> | Sluttdatoen til forrige oppgave | 使用 dateformat 解释的 enddate | Ikke aktuelt |
| <length> | Sluttdatoen til forrige oppgave | Startdato + length | Ikke aktuelt |
| until <otherTaskId> | Sluttdatoen til forrige oppgave | Startdatoen til den tidligere angitte oppgaven otherTaskID | Ikke aktuelt |
Varighetsformat
Når du angir <length> , bruker du et tall etterfulgt av ett av følgende enhetssuffikser:
| Enhet | Suffiks | Eksempel |
|---|---|---|
| Millisekund | ms | 50ms |
| Sekund | s | 30s |
| Minutt | m | 30m |
| Time | h | 4h |
| Dag | d | 7d |
| Uke | w | 3w |
| Måned | m | 2m |
| År | y | 1y |
Desimalverdier støttes også (for eksempel 2.5d ). Ugyldige varighetsmarkører (for eksempel 3dX ) ignoreres, og oppgaven får som standard varighet null.
For enkelhets skyld viser ikke tabellen flere oppgaver som er listet opp med after -syntaksen. Følgende er et eksempel:
Kopier
Bygg inn
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
Tittel
title er en valgfri streng som vises øverst i Gantt-diagrammet og beskriver hele diagrammet.
Utelatelse
excludes er en valgfri egenskap som godtar bestemte datoer (formatet YYYY-MM-DD), ukedager (for eksempel "sunday" ) eller "weekends" , men ordet "weekdays" kan ikke brukes. Disse datoene markeres i diagrammet og utelates fra beregningen av oppgavens varighet. Dette betyr at hvis en oppgaves varighet inneholder utelatte datoer, legges de utelatte dagene til oppgavens sluttid, for å sikre at oppgavens varighet samsvarer med det som er angitt i koden.
Helg
Når du utelater helger, kan du angi helgen til fredag og lørdag, eller lørdag og søndag. Som standard er helgen lørdag og søndag. For å definere startdagen for helgen kan du legge til en valgfri egenskap weekend på en ny linje, etterfulgt av friday eller saturday .
Kopier
Bygg inn
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
Seksjonsdeklarasjon
Du kan dele diagrammet inn i ulike seksjoner for å skille ulike deler av prosjektet (for eksempel utvikling og dokumentasjon).
For å gjøre dette bruker du section -syntaksen i begynnelsen av en linje og gir den et navn. Merk at i motsetning til tittelen på hele diagrammet, er dette navnet obligatorisk.
Milepæl
Du kan legge til milepæler i diagrammet. Milepæler er forskjellige fra oppgaver fordi de representerer et bestemt tidspunkt, og identifiseres av milestone -syntaksen. Følgende er et eksempel på bruk av milepæler: milepælens nøyaktige plassering bestemmes av milepælens startdato og oppgavens varighet, som vist nedenfor:
Kopier
Bygg inn
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
Vertikal markør
vert betyr at det legges til vertikale linjer i Gantt-diagrammet for enkelt å utheve viktige datoer, for eksempel frister, viktige hendelser eller kontrollpunkter. Disse markørene strekker seg over hele diagrammet og plasseres basert på datoen du oppgir. I motsetning til milepæler opptar ikke vertikale markører en linje. De er rent visuelle referansepunkter som bidrar til å bryte opp tidslinjen og gjøre viktige øyeblikk lettere å identifisere.
Kopier
Bygg inn
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
Angi dato
dateFormat definerer inndataformatet for datoer i Gantt-diagramelementer, og axisFormat definerer utdataformatet for datoer når diagrammet rendres.
Inndata-datoformat
Standard inndata-datoformat er YYYY-MM-DD , og du kan tilpasse dateFormat .
Kopier
Bygg inn
dateFormat YYYY-MM-DD
Følgende formatalternativer støttes:
| 输入 | Eksempel | Beskrivelse |
|---|---|---|
| YYYY | 2026 | 4-sifret årstall |
| YY | 26 | 2-sifret årstall |
| Q | 1..4 | Kvartall |
| M MM | 1..12 | Månedstall |
| D DD | 1..31 | Dag i måneden |
| Do | 1st..31st | Dag i måneden med ordenstall |
| 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, brukes sammen med a A |
| a A | am pm | Formiddag eller ettermiddag |
| m mm | 0..59 | Minutt |
| s ss | 0..59 | Sekunder |
| S | 0..9 | Tidels sekund |
| SS | 0..99 | Hundredels sekund |
| SSS | 0..999 | Tusendels sekund |
| Z ZZ | +12:00 | Forskyvning fra UTC, i formatet +-HH:mm , +-HHmm eller Z |
Utdatoformatet for aksen
Standard utdata-datoformat er YYYY-MM-DD . Du kan tilpasse axisFormat , for eksempel 2026-Q1 for første kvartal i 2026.
Kopier
Bygg inn
axisFormat %Y-%m-%d
Følgende formatstrenger støttes:
| Format,Definisjon | |
|---|---|
| %a | Forkortet navn på ukedag |
| %A | Fullstendig navn på ukedag |
| %b | Forkortet navn på måned |
| %B | Fullstendig navn på måned |
| %c | Lokalisert dato og tid |
| %d | Dato, desimaltall [01,31] |
| %e | Dato, desimaltall fylt med mellomrom [1,31], tilsvarer %_d |
| %H | Time (24-timersformat), desimaltall [00,23] |
| %I | Time (12-timersformat), desimaltall [01,12] |
| %j | Dag i året, desimaltall [001,366] |
| %m | Måned, desimaltall [01,12] |
| %M | Minutt, desimaltall [00,59] |
| %L | Millisekund, desimaltall [000, 999] |
| %p | Formiddag eller ettermiddag |
| %S | Sekund, desimaltall [00,59] |
| %U | Ukenummer i året (med søndag som første dag i uken), desimaltall [00,53] |
| %w | Ukedag, desimaltall fylt med mellomrom [0,6], der 0 representerer søndag |
| %W | Ukenummer i året (med mandag som første dag i uken), desimaltall [00,53] |
| %x | Lokalisert datorepresentasjon, som: 2026-09-18 |
| %X | Lokalisert tidsrepresentasjon, som: 14:30:00 |
| %y | Årstall uten århundre, desimaltall [00,99], for eksempel står 26 for 2026 |
| %Y | Årstall med århundre, desimaltall |
| %Z | Forkortelse for tidssonenavn, for eksempel "-0700" |
| %% | Escapetegn, brukes til å vise selve prosenttegnet % |
Aksemerker
Standard utdata-merker er automatiske. Du kan tilpasse tickInterval , for eksempel 1day eller 1week .
Kopier
Bygg inn
tickInterval 1day
Mønsteret er
Kopier
Bygg inn
/^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$/;
Ukesbasert tickInterval begynner som standard på søndag. Hvis du vil angi en annen ukedag som start for tickInterval , bruker du weekday -alternativet, med følgende kode:
Kopier
Bygg inn
gantt
tickInterval 1week
weekday monday
Kompakt modus-utdata
Kompakt modus lar deg vise flere oppgaver på samme linje. Visningsmodusen til grafen styres med den foregående YAML-innstillingen, og aktiverer kompakt modus for Gantt-diagrammet.
Kopier
Bygg inn
---
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
Du kan skrive kommentarer i et Gantt-diagram, og parseren ignorerer kommentaren. En kommentar må oppta en egen linje og må begynne med %% (to prosenttegn). All tekst fra kommentarens start til neste linjeskift betraktes som en kommentar, inkludert all diagram-syntaks.
Kopier
Bygg inn
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
Dagens markør
Du kan angi stil for markøren for gjeldende dato eller skjule den. For å angi stil legger du til en verdi for nøkkelen todayMarker .
Kopier
Bygg inn
todayMarker stroke-width:5px,stroke:#0f0,opacity:0.5
For å skjule markøren setter du todayMarker til off .
Kopier
Bygg inn
todayMarker off
Eksempel
Stolpe-Gantt-diagram
Kopier
Bygg inn
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-konfigurasjon)
Kopier
Bygg inn
---
# 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
