Gantt-schema
Ett Gantt-schema är ett stapeldiagram som används för att visa projektets framsteg och tiden som krävs för att slutföra ett projekt. Gantt-schemat visar antalet dagar mellan start- och slutdatum för projektets terminalelement och sammanfattningselement.
Att observera
Ett Gantt-schema registrerar varje planerad uppgift som en kontinuerlig stapel som sträcker sig från vänster till höger. x-axeln representerar tid, y-axeln registrerar olika uppgifter och ordningen de slutförs i.
Ännu viktigare: när datum, antal dagar eller en specifik uppsättning datum för en uppgift undantas, anpassar Gantt-schemat dessa ändringar genom att förlänga med samma antal dagar till höger, istället för att skapa luckor inuti uppgiften .
Kopiera
Bädda in
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 om de undantagna datumen ligger mellan två uppgifter som startar i följd hoppas de undantagna datumen över och lämnas tomma i diagrammet, varefter uppgiften börjar efter att de undantagna datumen har passerat. Som visas nedan:
Kopiera
Bädda in
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-scheman är användbara för att följa tiden som krävs för att slutföra ett projekt, men med vissa justeringar kan de också användas för att grafiskt representera "icke-arbetsdagar".
Syntax
Kopiera
Bädda in
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
Uppgifter utförs i följd som standard, och nästa uppgifts startdatum är som standard föregående uppgifts slutdatum.
Uppgiftens titel och dess metadata separeras med ett kolon (:), och metadata-poster separeras med kommatecken (,). Giltiga taggar inkluderar active, done, crit och milestone. Taggar är valfria, men om de används måste de placeras först. Efter att taggarna har hanterats tolkas de återstående metadata-posterna enligt följande:
- Om ett enskilt objekt anges avgör det när uppgiften slutar. Det kan vara ett specifikt datum eller en tid, eller en varaktighet. Om en varaktighet anges läggs den till uppgiftens startdatum för att bestämma uppgiftens slutdatum, med hänsyn till eventuella undantag.
- Om två objekt anges tolkas det senare objektet på samma sätt som i föregående fall. Det första objektet kan ange ett explicit startdatum eller en tid (vars format anges av dateFormat ), eller referera till en annan uppgift via after <otherTaskID> [[otherTaskID2 [otherTaskID3]]...] . I det senare fallet bestäms uppgiftens startdatum utifrån det senaste slutdatumet för alla refererade uppgifter.
- Om tre objekt anges tolkas de två sista objekten enligt föregående fall. Det första objektet anger uppgiftens ID och kan refereras med later <taskID> -syntaxen.
| Metadatasyntax | Startdatum | Slutdatum | ID |
|---|---|---|---|
| <taskID>, <startDate>, <endDate> | startdate tolkat med dateformat | endDate tolkat med dateformat | taskID |
| <taskID>, <startDate>, <length> | startdate tolkat med dateformat | Startdatum + length | taskID |
| <taskID>, after <otherTaskId>, <endDate> | Slutdatum för den tidigare angivna uppgiften otherTaskID | endDate tolkat med dateformat | taskID |
| <taskID>, after <otherTaskId>, <length> | Slutdatum för den tidigare angivna uppgiften otherTaskID | Startdatum + length | taskID |
| <taskID>, <startDate>, until <otherTaskId> | startdate tolkat med dateformat | Startdatum för den tidigare angivna uppgiften otherTaskID | taskID |
| <taskID>, after <otherTaskId>, until <otherTaskId> | Slutdatum för den tidigare angivna uppgiften otherTaskID | Startdatum för den tidigare angivna uppgiften otherTaskID | taskID |
| <startDate>, <endDate> | startdate tolkat med dateformat | 使用 dateformat 解释的 enddate | Ej tillämpligt |
| <startDate>, <length> | startdate tolkat med dateformat | Startdatum + length | Ej tillämpligt |
| after <otherTaskID>, <endDate> | Slutdatum för den tidigare angivna uppgiften otherTaskID | 使用 dateformat 解释的 enddate | Ej tillämpligt |
| after <otherTaskID>, <length> | Slutdatum för den tidigare angivna uppgiften otherTaskID | Startdatum + length | Ej tillämpligt |
| <startDate>, until <otherTaskId> | startdate tolkat med dateformat | Startdatum för den tidigare angivna uppgiften otherTaskID | Ej tillämpligt |
| after <otherTaskId>, until <otherTaskId> | Slutdatum för den tidigare angivna uppgiften otherTaskID | Startdatum för den tidigare angivna uppgiften otherTaskID | Ej tillämpligt |
| <endDate> | Föregående uppgifts slutdatum | 使用 dateformat 解释的 enddate | Ej tillämpligt |
| <length> | Föregående uppgifts slutdatum | Startdatum + length | Ej tillämpligt |
| until <otherTaskId> | Föregående uppgifts slutdatum | Startdatum för den tidigare angivna uppgiften otherTaskID | Ej tillämpligt |
Format för varaktighet
När <length> anges används ett tal följt av ett av följande enhetssuffix:
| Enhet | Suffix | Exempel |
|---|---|---|
| Millisekund | ms | 50ms |
| Sekund | s | 30s |
| Minut | m | 30m |
| Timme | h | 4h |
| Dag | d | 7d |
| Vecka | w | 3w |
| Månad | m | 2m |
| År | y | 1y |
Decimala värden stöds också (till exempel 2.5d). Ogiltiga varaktighetsmarkörer (till exempel 3dX) ignoreras, och uppgiften får standardvaraktigheten noll.
För enkelhetens skull visar tabellen inte flera uppgifter listade med after -syntaxen. Följande är ett exempel:
Kopiera
Bädda in
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 är en valfri sträng som visas högst upp i Gantt-schemat och beskriver hela diagrammet.
Undantag
excludes är en valfri egenskap som accepterar specifika datum (format YYYY-MM-DD), veckodagar (till exempel "sunday") eller "weekends", men ordet "weekdays" kan inte användas. Dessa datum markeras i diagrammet och undantas från beräkningen av uppgiftens varaktighet. Detta innebär att om uppgiftens varaktighet innehåller undantagna datum läggs de undantagna dagarna till uppgiftens sluttid, så att uppgiftens varaktighet överensstämmer med den som anges i koden.
Helg
När helger undantas kan helgen ställas in på fredag och lördag, eller lördag och söndag. Som standard är helgen lördag och söndag. För att definiera helgens startdag kan du lägga till en valfri egenskap weekend på en ny rad, följt av friday eller saturday.
Kopiera
Bädda in
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
Sektionsdeklaration
Du kan dela in diagrammet i olika sektioner för att separera olika delar av projektet (till exempel utveckling och dokumentation).
För att göra detta, använd section -syntaxen i början av en rad och ge den ett namn. Observera att detta namn, till skillnad från hela diagrammets titel, är obligatoriskt.
Milstolpe
Du kan lägga till milstolpar i diagrammet. Milstolpar skiljer sig från uppgifter eftersom de representerar en specifik tidpunkt och identifieras av milestone -syntaxen. Följande är ett exempel på användning av milstolpar: milstolpens exakta position bestäms av milstolpens startdatum och uppgiftens varaktighet, som visas nedan:
Kopiera
Bädda in
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 markering
vert betyder att lägga till en vertikal linje i Gantt-schemat för att enkelt markera viktiga datum, till exempel deadlines, viktiga händelser eller kontrollpunkter. Dessa markeringar sträcker sig över hela diagrammet och placeras utifrån det datum du anger. Till skillnad från milstolpar upptar vertikala markeringar inte en rad. De är enbart visuella referenspunkter som hjälper till att dela upp tidslinjen och göra viktiga tidpunkter lättare att identifiera.
Kopiera
Bädda in
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
Ange datum
dateFormat definierar inmatningsformatet för datum för Gantt-schemats element, och axisFormat definierar utmatningsformatet för datum vid rendering av diagrammet.
Inmatningsdatumformat
Standardformatet för inmatningsdatum är YYYY-MM-DD, och du kan anpassa dateFormat .
Kopiera
Bädda in
dateFormat YYYY-MM-DD
Följande formatalternativ stöds:
| 输入 | Exempel | Beskrivning |
|---|---|---|
| YYYY | 2026 | 4-siffrigt år |
| YY | 26 | 2-siffrigt år |
| Q | 1..4 | Kvartalssiffra |
| M MM | 1..12 | Månadssiffra |
| D DD | 1..31 | Dag i månaden |
| Do | 1st..31st | Dag i månaden med ordningstal |
| DDD DDDD | 1..365 | Dag på året |
| X | 1410715640.579 | Unix-tidsstämpel |
| x | 1410715640579 | Unix-tidsstämpel i millisekunder |
| H HH | 0..23 | 24-timmars tid |
| h hh | 1..12 | 12-timmars tid, används tillsammans med a A |
| a A | am pm | fm eller em |
| m mm | 0..59 | Minut |
| s ss | 0..59 | Sekunder |
| S | 0..9 | Tiondels sekund |
| SS | 0..99 | Hundradels sekund |
| SSS | 0..999 | Tusendels sekund |
| Z ZZ | +12:00 | Förskjutning mot UTC, i formatet +-HH:mm, +-HHmm eller Z |
Axelns utmatningsdatumformat
Standardformatet för utmatningsdatum är YYYY-MM-DD. Du kan anpassa axisFormat , till exempel 2026-Q1 som betyder första kvartalet 2026.
Kopiera
Bädda in
axisFormat %Y-%m-%d
Följande formatsträngar stöds:
| Format,Definition | |
|---|---|
| %a | Förkortat veckodagsnamn |
| %A | Fullständigt veckodagsnamn |
| %b | Förkortat månadsnamn |
| %B | Fullständigt månadsnamn |
| %c | Lokaliserat datum och klockslag |
| %d | Dag, decimaltal [01,31] |
| %e | Dag, utrymmesfylld decimaltal [1,31], motsvarar %_d |
| %H | Timme (24-timmarsformat), decimaltal [00,23] |
| %I | Timme (12-timmarsformat), decimaltal [01,12] |
| %j | Dag på året, decimaltal [001,366] |
| %m | Månad, decimaltal [01,12] |
| %M | Minut, decimaltal [00,59] |
| %L | Millisekund, decimaltal [000, 999] |
| %p | fm eller em |
| %S | Sekund, decimaltal [00,59] |
| %U | Vecka på året (med söndag som veckans första dag), decimaltal [00,53] |
| %w | Veckodag, utrymmesfylld decimaltal [0,6], där 0 representerar söndag |
| %W | Vecka på året (med måndag som veckans första dag), decimaltal [00,53] |
| %x | Lokaliserad datumrepresentation, till exempel: 2026-09-18 |
| %X | Lokaliserad tidsrepresentation, till exempel: 14:30:00 |
| %y | År utan sekel, decimaltal [00,99], till exempel 26 för år 2026 |
| %Y | År med sekel, decimaltal |
| %Z | Förkortning för tidszonens namn, till exempel "-0700" |
| %% | Escape-tecken för att visa själva procenttecknet % |
Axelmarkering
Standardutmatningsmarkeringen är automatisk. Du kan anpassa tickInterval , till exempel 1day eller 1week .
Kopiera
Bädda in
tickInterval 1day
Mönstret är
Kopiera
Bädda in
/^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$/;
Veckobaserad tickInterval börjar som standard på söndag. Om du vill ange en annan veckodag som start för tickInterval , använd alternativet weekday , som i följande kod:
Kopiera
Bädda in
gantt
tickInterval 1week
weekday monday
Utdata i kompakt läge
Kompakt läge gör att du kan visa flera uppgifter på samma rad. Använd YAML-inställningen ovan för att styra grafens visningsläge och aktivera kompakt läge för Gantt-schemat.
Kopiera
Bädda in
---
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 infoga kommentarer i ett Gantt-schema, och parsern ignorerar kommentaren. En kommentar måste uppta en egen rad och börja med %% (två procenttecken). All text från kommentarens början till nästa radbrytning betraktas som en kommentar, inklusive all diagram-syntax.
Kopiera
Bädda in
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 markering
Du kan ange stil för markeringen av aktuellt datum eller dölja markeringen. För att ange stil, lägg till ett värde för nyckeln todayMarker .
Kopiera
Bädda in
todayMarker stroke-width:5px,stroke:#0f0,opacity:0.5
För att dölja markeringen, ställ in todayMarker på off.
Kopiera
Bädda in
todayMarker off
Exempel
Stapel-Gantt-schema
Kopiera
Bädda in
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 och frontmatter-konfiguration)
Kopiera
Bädda in
---
# 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
