Gantt-kaavio
Gantt-kaavio on pylväskaavio, jota käytetään näyttämään projektin edistymistä ja aikaa, joka tarvitaan projektin valmiiksi saattamiseen. Gantt-kaavio näyttää päivien määrän projektin päätöselementtien ja yhteenvetoelementtien aloitus- ja päättymispäivien välillä.
Huomioitavaa
Gantt-kaaviossa jokainen suunniteltu tehtävä merkitään vasemmalta oikealle ulottuvaksi yhtenäiseksi palkiksi. x-akseli edustaa aikaa ja y-akseli tallentaa eri tehtävät ja niiden suoritusjärjestyksen.
Mikä vielä tärkeämpää, kun tehtävän päivämäärä, päivien määrä tai tietty päivämääräjoukko suljetaan pois, Gantt-kaavio mukautuu näihin muutoksiin pidentämällä saman päivämäärän verran oikealle sen sijaan, että se loihtisi aukon tehtävän sisään .
Kopioi
Upotus
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
Jos poissuljetut päivämäärät ovat kuitenkin kahden peräkkäin alkavan tehtävän välissä, poissuljetut päivämäärät ohitetaan kaaviossa ja jätetään tyhjiksi, minkä jälkeen tehtävä alkaa poissuljettujen päivämäärien päätyttyä. Kuten alla näkyy:
Kopioi
Upotus
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-kaavio on hyödyllinen projektin valmiiksi saamiseen kuluvan ajan seuraamisessa, mutta sitä voidaan hienoisin muutoksin käyttää myös "vapaapäivien" graafiseen esittämiseen.
Syntaksi
Kopioi
Upotus
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
Tehtävät ovat oletuksena peräkkäisiä, ja seuraavan tehtävän aloituspäivä on oletuksena edellisen tehtävän päättymispäivä.
Tehtävän nimi ja sen metatiedot erotetaan kaksoispisteellä (:) ja metatietokohteet pilkulla (,). Kelvollisia merkintöjä ovat active, done, crit ja milestone. Merkinnät ovat valinnaisia, mutta jos niitä käytetään, ne on sijoitettava ensimmäiseksi. Kun merkinnät on käsitelty, loput metatietokohteet tulkitaan seuraavasti:
- Jos määritetään yksi kohde, se määrittää, milloin tehtävä päättyy. Se voi olla tietty päivämäärä tai aika taikka kesto. Jos määritetään kesto, se lisätään tehtävän aloituspäivään tehtävän päättymispäivän määrittämiseksi, kun mahdolliset poissulkemiset otetaan huomioon.
- Jos määritetään kaksi kohdetta, jälkimmäinen kohde tulkitaan samalla tavalla kuin edellisessä tapauksessa. Ensimmäinen kohde voi määrittää selkeän aloituspäivämäärän tai -ajan (muoto määritetään dateFormat-asetuksella) tai viitata toiseen tehtävään muodossa after <otherTaskID> [[otherTaskID2 [otherTaskID3]]...]. Jälkimmäisessä tapauksessa tehtävän aloituspäivä asetetaan viitattujen tehtävien myöhäisimmän päättymispäivän mukaan.
- Jos määritetään kolme kohdetta, kaksi viimeistä kohdetta tulkitaan edellisen tapauksen mukaisesti. Ensimmäinen kohde edustaa tehtävän tunnistetta, ja siinä voidaan viitata later <taskID> -syntaksilla.
| Metatietojen syntaksi | Aloituspäivä | Päättymispäivä | ID |
|---|---|---|---|
| <taskID>, <startDate>, <endDate> | startdate tulkittuna dateformat-muodolla | endDate tulkittuna dateformat-muodolla | taskID |
| <taskID>, <startDate>, <length> | startdate tulkittuna dateformat-muodolla | Aloituspäivä + length | taskID |
| <taskID>, after <otherTaskId>, <endDate> | Aiemmin määritetyn tehtävän otherTaskID päättymispäivä | endDate tulkittuna dateformat-muodolla | taskID |
| <taskID>, after <otherTaskId>, <length> | Aiemmin määritetyn tehtävän otherTaskID päättymispäivä | Aloituspäivä + length | taskID |
| <taskID>, <startDate>, until <otherTaskId> | startdate tulkittuna dateformat-muodolla | Aiemmin määritetyn tehtävän otherTaskID aloituspäivä | taskID |
| <taskID>, after <otherTaskId>, until <otherTaskId> | Aiemmin määritetyn tehtävän otherTaskID päättymispäivä | Aiemmin määritetyn tehtävän otherTaskID aloituspäivä | taskID |
| <startDate>, <endDate> | startdate tulkittuna dateformat-muodolla | 使用 dateformat 解释的 enddate | Ei sovellettavissa |
| <startDate>, <length> | startdate tulkittuna dateformat-muodolla | Aloituspäivä + length | Ei sovellettavissa |
| after <otherTaskID>, <endDate> | Aiemmin määritetyn tehtävän otherTaskID päättymispäivä | 使用 dateformat 解释的 enddate | Ei sovellettavissa |
| after <otherTaskID>, <length> | Aiemmin määritetyn tehtävän otherTaskID päättymispäivä | Aloituspäivä + length | Ei sovellettavissa |
| <startDate>, until <otherTaskId> | startdate tulkittuna dateformat-muodolla | Aiemmin määritetyn tehtävän otherTaskID aloituspäivä | Ei sovellettavissa |
| after <otherTaskId>, until <otherTaskId> | Aiemmin määritetyn tehtävän otherTaskID päättymispäivä | Aiemmin määritetyn tehtävän otherTaskID aloituspäivä | Ei sovellettavissa |
| <endDate> | Edellisen tehtävän päättymispäivä | 使用 dateformat 解释的 enddate | Ei sovellettavissa |
| <length> | Edellisen tehtävän päättymispäivä | Aloituspäivä + length | Ei sovellettavissa |
| until <otherTaskId> | Edellisen tehtävän päättymispäivä | Aiemmin määritetyn tehtävän otherTaskID aloituspäivä | Ei sovellettavissa |
Keston muoto
Määritettäessä <length> käytetään numeroa, jota seuraa yksi seuraavista yksikköpäätteistä:
| Yksikkö | Pääte | Esimerkki |
|---|---|---|
| Millisekunti | ms | 50ms |
| Sekunti | s | 30s |
| Minuutti | m | 30m |
| Tunti | h | 4h |
| Päivä | d | 7d |
| Viikko | w | 3w |
| Kuukausi | m | 2m |
| Vuosi | y | 1y |
Myös desimaaliarvoja tuetaan (esimerkiksi 2.5d). Virheelliset kestomerkinnät (esimerkiksi 3dX) jätetään huomiotta, ja tehtävän kestoksi tulee oletuksena nolla.
Yksinkertaisuuden vuoksi taulukko ei näytä useita after-syntaksilla lueteltuja tehtäviä. Seuraavassa on esimerkki:
Kopioi
Upotus
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
Otsikko
title on valinnainen merkkijono, joka näytetään Gantt-kaavion yläosassa ja kuvaa koko kaaviota.
Poissulkeminen
excludes on valinnainen ominaisuus, joka hyväksyy tietyn päivämäärän (muodossa YYYY-MM-DD), viikonpäivän (esimerkiksi "sunday") tai "weekends", mutta sanaa "weekdays" ei voi käyttää. Nämä päivämäärät merkitään kaavioon ja jätetään pois tehtävän keston laskennasta. Tämä tarkoittaa, että jos tehtävän kesto sisältää poissuljettuja päivämääriä, poissuljetut päivät lisätään tehtävän päättymisaikaan, jotta tehtävän kesto vastaa koodissa määritettyä.
Viikonloppu
Viikonloppuja poissuljettaessa viikonlopuksi voidaan asettaa perjantai ja lauantai tai lauantai ja sunnuntai. Oletuksena viikonloppu on lauantai ja sunnuntai. Viikonlopun alkupäivän määrittämiseksi voit lisätä uudelle riville valinnaisen ominaisuuden weekend ja sen perään friday tai saturday.
Kopioi
Upotus
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
Osan määrittely
Voit jakaa kaavion osiin erottaaksesi projektin eri osat (esimerkiksi kehitys ja dokumentointi) toisistaan.
Tätä varten käytä rivin alussa section-syntaksia ja anna sille nimi. Huomaa, että toisin kuin koko kaavion otsikko, tämä nimi on pakollinen.
Virstanpylväs
Voit lisätä kaavioon virstanpylväitä. Virstanpylväät eroavat tehtävistä siten, että ne edustavat tiettyä ajankohtaa, ja ne tunnistetaan milestone-syntaksilla. Seuraavassa on esimerkki virstanpylväiden käytöstä: virstanpylvään tarkka sijainti määräytyy virstanpylvään aloituspäivän ja tehtävän keston perusteella, kuten alla näkyy:
Kopioi
Upotus
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
Pystymerkki
vert tarkoittaa pystyviivan lisäämistä Gantt-kaavioon tärkeiden päivämäärien, kuten määräaikojen, tärkeiden tapahtumien tai tarkistuspisteiden, korostamiseksi helposti. Nämä merkit ulottuvat koko kaavion läpi ja sijoitetaan antamiesi päivämäärien mukaan. Toisin kuin virstanpylväät, pystymerkit eivät vie riviä. Ne ovat puhtaasti visuaalisia viitepisteitä, jotka auttavat jaksottamaan aikajanaa ja tekevät tärkeistä hetkistä helpommin tunnistettavia.
Kopioi
Upotus
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
Aseta päivämäärä
dateFormat määrittää Gantt-kaavion elementtien päivämäärän syöttömuodon, ja axisFormat määrittää päivämäärän tulostusmuodon kaaviota renderöitäessä.
Syöttöpäivämäärän muoto
Oletusarvoinen syöttöpäivämäärän muoto on YYYY-MM-DD; voit mukauttaa dateFormat-asetusta.
Kopioi
Upotus
dateFormat YYYY-MM-DD
Seuraavia muotovaihtoehtoja tuetaan:
| 输入 | Esimerkki | Kuvaus |
|---|---|---|
| YYYY | 2026 | 4-numeroinen vuosi |
| YY | 26 | 2-numeroinen vuosi |
| Q | 1..4 | Neljännesvuoden numero |
| M MM | 1..12 | Kuukauden numero |
| D DD | 1..31 | Kuukauden päivä |
| Do | 1st..31st | Kuukauden päivä järjestyslukuna |
| DDD DDDD | 1..365 | Vuoden päivä |
| X | 1410715640.579 | Unix-aikaleima |
| x | 1410715640579 | Unix-millisekuntiaikaleima |
| H HH | 0..23 | 24 tunnin aika |
| h hh | 1..12 | 12 tunnin aika, käytetään yhdessä a A kanssa |
| a A | am pm | Aamu tai iltapäivä |
| m mm | 0..59 | Minuutti |
| s ss | 0..59 | Sekuntien määrä |
| S | 0..9 | Kymmenesosasekunti |
| SS | 0..99 | Sadasosasekunti |
| SSS | 0..999 | Tuhannesosasekunti |
| Z ZZ | +12:00 | Poikkeama UTC:stä muodossa +-HH:mm, +-HHmm tai Z |
Koordinaattiakselin tulostuspäivämäärän muoto
Oletusarvoinen tulostuspäivämäärän muoto on YYYY-MM-DD. Voit mukauttaa axisFormat-asetusta, esimerkiksi 2026-Q1 tarkoittaa vuoden 2026 ensimmäistä neljännestä.
Kopioi
Upotus
axisFormat %Y-%m-%d
Seuraavia muotomerkkijonoja tuetaan:
| Muoto,Määritelmä | |
|---|---|
| %a | Viikonpäivän lyhennetty nimi |
| %A | Viikonpäivän täydellinen nimi |
| %b | Kuukauden lyhennetty nimi |
| %B | Kuukauden täydellinen nimi |
| %c | Lokalistoitu päivämäärä ja aika |
| %d | Päivä, desimaaliluku [01,31] |
| %e | Päivä, välilyönnillä täytetty desimaaliluku [1,31], vastaa %_d |
| %H | Tunti (24 tunnin kello), desimaaliluku [00,23] |
| %I | Tunti (12 tunnin kello), desimaaliluku [01,12] |
| %j | Vuoden päivänumero, desimaaliluku [001,366] |
| %m | Kuukausi, desimaaliluku [01,12] |
| %M | Minuutti, desimaaliluku [00,59] |
| %L | Millisekunti, desimaaliluku [000, 999] |
| %p | Aamu tai iltapäivä |
| %S | Sekunti, desimaaliluku [00,59] |
| %U | Vuoden viikko (sunnuntai viikon ensimmäisenä päivänä), desimaaliluku [00,53] |
| %w | Viikonpäivä, välilyönnillä täytetty desimaaliluku [0,6], jossa 0 edustaa sunnuntaita |
| %W | Vuoden viikko (maanantai viikon ensimmäisenä päivänä), desimaaliluku [00,53] |
| %x | Lokalistoitu päivämääräesitys, kuten: 2026-09-18 |
| %X | Lokalistoitu aikaesitys, kuten: 14:30:00 |
| %y | Vuosi ilman vuosisataa, desimaaliluku [00,99], esimerkiksi 26 tarkoittaa vuotta 2026 |
| %Y | Vuosi vuosisadan kanssa, desimaaliluku |
| %Z | Aikavyöhykkeen nimen lyhenne, esimerkiksi "-0700" |
| %% | Escape-merkki, jota käytetään prosenttimerkin % itsensä näyttämiseen |
Akselin jako
Oletusarvoinen tulostusjako on automaattinen. Voit mukauttaa tickInterval-asetusta, esimerkiksi 1day tai 1week.
Kopioi
Upotus
tickInterval 1day
Malli on
Kopioi
Upotus
/^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$/;
Viikkopohjainen tickInterval alkaa oletuksena sunnuntaista. Jos haluat määrittää toisen viikonpäivän, josta tickInterval alkaa, käytä weekday-vaihtoehtoa seuraavasti:
Kopioi
Upotus
gantt
tickInterval 1week
weekday monday
Kompaktin tilan tuloste
Kompakti tila sallii useiden tehtävien näyttämisen samalla rivillä. Kaavion näyttötilaa ohjataan edessä olevalla YAML-asetuksella, joka ottaa kompaktin tilan käyttöön Gantt-kaaviossa.
Kopioi
Upotus
---
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
Gantt-kaavioon voi syöttää kommentteja, jotka jäsentäjä jättää huomiotta. Kommentin on oltava omalla rivillään ja alettava merkinnällä %% (kaksoisprosenttimerkki). Kaikki teksti kommentin alusta seuraavaan rivinvaihtoon asti tulkitaan kommentiksi, mukaan lukien mahdollinen kaaviosyntaksi.
Kopioi
Upotus
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
Tämän päivän merkki
Voit tyylitellä nykyisen päivämäärän merkin tai piilottaa sen. Tylittelyä varten lisää arvo todayMarker-avaimeen.
Kopioi
Upotus
todayMarker stroke-width:5px,stroke:#0f0,opacity:0.5
Merkin piilottamiseksi aseta todayMarker arvoon off.
Kopioi
Upotus
todayMarker off
Esimerkki
Pylväs-Gantt-kaavio
Kopioi
Upotus
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
Aikajana (sisältää kommentit, CSS:n ja edessä olevan kokoonpanon)
Kopioi
Upotus
---
# 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
