Ganto diagrama
Ganto diagrama – tai stulpelinė diagrama, naudojama projekto eigai ir laikui, reikalingam projektui užbaigti, parodyti. Ganto diagrama rodo dienų skaičių tarp projekto galinių elementų ir apibendrinamųjų elementų pradžios ir pabaigos datų.
Pastabos
Ganto diagrama kiekvieną suplanuotą užduotį įrašo kaip ištisinę juostą, besitęsiančią iš kairės į dešinę. X ašis žymi laiką, Y ašis – skirtingas užduotis ir jų atlikimo eiliškumą.
Dar svarbiau, kai tam tikros užduoties datos, dienos ar konkretus datų rinkinys yra išbraukiami, Ganto diagrama prisitaiko prie šių pakeitimų pratęsdama tiek pat dienų į dešinę, o ne kurdama tarpus užduoties viduje.
Kopijuoti
Įterpti
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
Tačiau jei išbrauktos datos patenka tarp dviejų nuosekliai prasidedančių užduočių, išbrauktos datos diagramoje bus praleistos ir paliktos tuščios, o užduotis prasidės pasibaigus išbrauktoms datoms. Kaip parodyta žemiau:
Kopijuoti
Įterpti
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
Ganto diagrama naudinga stebint laiką, reikalingą projektui užbaigti, tačiau šiek tiek pakoregavus ją galima naudoti ir „ne darbo dienoms“ grafiškai pavaizduoti.
Sintaksė
Kopijuoti
Įterpti
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
Pagal numatytuosius nustatymus užduotys atliekamos nuosekliai; kitos užduoties pradžios data pagal numatytuosius nustatymus yra ankstesnės užduoties pabaigos data.
Užduoties pavadinimas ir jos metaduomenys atskiriami dvitaškiu (:), o metaduomenų elementai – kableliais (,). Galiojančios žymos: active, done, crit ir milestone. Žymos yra neprivalomos, tačiau jei naudojamos, turi būti pateiktos pirmiausia. Apdorojus žymas, likę metaduomenų elementai aiškinami taip:
- Jei nurodytas vienas elementas, jis nusako, kada užduotis baigiasi. Tai gali būti konkreti data ar laikas arba trukmė. Jei nurodyta trukmė, ji pridedama prie užduoties pradžios datos, kad būtų nustatyta užduoties pabaigos data, atsižvelgiant į visus išbraukimus.
- Jei nurodyti du elementai, pastarasis aiškinamas taip pat kaip ankstesniu atveju. Pirmasis elementas gali nurodyti aiškią pradžios datą ar laiką (formatas nustatomas pagal dateFormat) arba nurodyti nuorodą į kitą užduotį per after <otherTaskID> [[otherTaskID2 [otherTaskID3]]...]. Pastaruoju atveju užduoties pradžios data nustatoma pagal vėliausią bet kurios nurodytos užduoties pabaigos datą.
- Jei nurodyti trys elementai, paskutiniai du aiškinami kaip ankstesniu atveju. Pirmasis elementas žymės užduoties ID, kurį galima nurodyti naudojant later <taskID> sintaksę.
| Metaduomenų sintaksė | Pradžios data | Pabaigos data | ID |
|---|---|---|---|
| <taskID>, <startDate>, <endDate> | startdate, aiškinama naudojant dateformat | endDate, aiškinama naudojant dateformat | taskID |
| <taskID>, <startDate>, <length> | startdate, aiškinama naudojant dateformat | Pradžios data + length | taskID |
| <taskID>, after <otherTaskId>, <endDate> | Anksčiau nurodytos užduoties otherTaskID pabaigos data | endDate, aiškinama naudojant dateformat | taskID |
| <taskID>, after <otherTaskId>, <length> | Anksčiau nurodytos užduoties otherTaskID pabaigos data | Pradžios data + length | taskID |
| <taskID>, <startDate>, until <otherTaskId> | startdate, aiškinama naudojant dateformat | Anksčiau nurodytos užduoties otherTaskID pradžios data | taskID |
| <taskID>, after <otherTaskId>, until <otherTaskId> | Anksčiau nurodytos užduoties otherTaskID pabaigos data | Anksčiau nurodytos užduoties otherTaskID pradžios data | taskID |
| <startDate>, <endDate> | startdate, aiškinama naudojant dateformat | 使用 dateformat 解释的 enddate | Netaikoma |
| <startDate>, <length> | startdate, aiškinama naudojant dateformat | Pradžios data + length | Netaikoma |
| after <otherTaskID>, <endDate> | Anksčiau nurodytos užduoties otherTaskID pabaigos data | 使用 dateformat 解释的 enddate | Netaikoma |
| after <otherTaskID>, <length> | Anksčiau nurodytos užduoties otherTaskID pabaigos data | Pradžios data + length | Netaikoma |
| <startDate>, until <otherTaskId> | startdate, aiškinama naudojant dateformat | Anksčiau nurodytos užduoties otherTaskID pradžios data | Netaikoma |
| after <otherTaskId>, until <otherTaskId> | Anksčiau nurodytos užduoties otherTaskID pabaigos data | Anksčiau nurodytos užduoties otherTaskID pradžios data | Netaikoma |
| <endDate> | Ankstesnės užduoties pabaigos data | 使用 dateformat 解释的 enddate | Netaikoma |
| <length> | Ankstesnės užduoties pabaigos data | Pradžios data + length | Netaikoma |
| until <otherTaskId> | Ankstesnės užduoties pabaigos data | Anksčiau nurodytos užduoties otherTaskID pradžios data | Netaikoma |
Trukmės formatas
Nurodant <length>, naudojamas skaičius ir po jo viena iš šių vienetų priesagų:
| Vienetas | Priesaga | Pavyzdys |
|---|---|---|
| Milisekundė | ms | 50ms |
| Sekundė | s | 30s |
| Minutė | m | 30m |
| Valanda | h | 4h |
| Diena | d | 7d |
| Savaitė | w | 3w |
| Mėnuo | m | 2m |
| Metai | y | 1y |
Taip pat palaikomos dešimtainės reikšmės (pavyzdžiui, 2.5d). Negaliojantys trukmės žymekliai (pavyzdžiui, 3dX) ignoruojami, o užduoties trukmė pagal numatytuosius nustatymus nustatoma nulinė.
Paprastumo dėlei lentelėje nerodomos kelios užduotys, išvardytos naudojant after sintaksę. Toliau pateikiamas pavyzdys:
Kopijuoti
Įterpti
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
Pavadinimas
title yra neprivaloma eilutė, rodoma Ganto diagramos viršuje, apibūdinanti visą diagramą.
Išbraukimas
excludes yra neprivaloma savybė, priimanti konkrečias datas (YYYY-MM-DD formatu), savaitės dienas (pavyzdžiui, "sunday") arba "weekends", tačiau negalima naudoti žodžio "weekdays". Šios datos bus pažymėtos diagramoje ir neįtrauktos į užduoties trukmės skaičiavimą. Tai reiškia, kad jei užduoties trukmė apima išbrauktas datas, išbrauktų dienų skaičius bus pridėtas prie užduoties pabaigos laiko, užtikrinant, kad užduoties trukmė atitiktų kode nurodytą.
Savaitgalis
Išbraukdami savaitgalius, savaitgalį galite nustatyti kaip penktadienį ir šeštadienį arba šeštadienį ir sekmadienį. Pagal numatytuosius nustatymus savaitgalis yra šeštadienis ir sekmadienis. Norėdami apibrėžti savaitgalio pradžios dieną, naujoje eilutėje galite pridėti neprivalomą savybę weekend ir po jos – friday arba saturday.
Kopijuoti
Įterpti
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
Skyriaus deklaracija
Galite suskirstyti diagramą į atskirus skyrius, atskirdami skirtingas projekto dalis (pavyzdžiui, kūrimą ir dokumentaciją).
Tam eilutės pradžioje naudokite section sintaksę ir suteikite jai pavadinimą. Atkreipkite dėmesį, kad, kitaip nei visos diagramos pavadinimas, šis pavadinimas yra privalomas.
Etapas
Galite pridėti etapų į diagramą. Etapai skiriasi nuo užduočių, nes jie žymi konkretų laiką ir identifikuojami milestone sintakse. Toliau pateikiamas etapų naudojimo pavyzdys: tiksli etapo vieta nustatoma pagal etapo pradžios datą ir užduoties trukmę, kaip parodyta žemiau:
Kopijuoti
Įterpti
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
Vertikalioji žymė
vert reiškia vertikalios linijos pridėjimą prie Ganto diagramos, kad būtų galima lengvai paryškinti svarbias datas, pavyzdžiui, terminus, svarbius įvykius ar kontrolinius taškus. Šios žymės tęsiasi per visą diagramą ir yra išdėstomos pagal jūsų nurodytas datas. Skirtingai nei etapai, vertikalios žymės neužima eilutės. Jos yra vien vizualūs atskaitos taškai, padedantys suskaidyti laiko juostą ir lengviau atpažinti svarbias akimirkas.
Kopijuoti
Įterpti
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
Datos nustatymas
dateFormat apibrėžia Ganto diagramos elementų datos įvesties formatą, o axisFormat apibrėžia datos išvesties formatą atvaizduojant diagramą.
Įvesties datos formatas
Numatytasis įvesties datos formatas yra YYYY-MM-DD; galite tinkinti dateFormat.
Kopijuoti
Įterpti
dateFormat YYYY-MM-DD
Palaikomos šios formato parinktys:
| 输入 | Pavyzdys | Aprašymas |
|---|---|---|
| YYYY | 2026 | 4 skaitmenų metai |
| YY | 26 | 2 skaitmenų metai |
| Q | 1..4 | Ketvirčio skaičius |
| M MM | 1..12 | Mėnesio skaičius |
| D DD | 1..31 | Mėnesio diena |
| Do | 1st..31st | Mėnesio diena su kelintiniu skaičiumi |
| DDD DDDD | 1..365 | Metų diena |
| X | 1410715640.579 | Unix laiko žyma |
| x | 1410715640579 | Unix milisekundžių laiko žyma |
| H HH | 0..23 | 24 valandų laikas |
| h hh | 1..12 | 12 valandų laikas, naudojamas su a A |
| a A | am pm | Priešpiet arba popiet |
| m mm | 0..59 | Minutė |
| s ss | 0..59 | Sekundžių skaičius |
| S | 0..9 | Dešimtoji sekundės dalis |
| SS | 0..99 | Šimtoji sekundės dalis |
| SSS | 0..999 | Tūkstantoji sekundės dalis |
| Z ZZ | +12:00 | Poslinkis nuo UTC, formatu +-HH:mm, +-HHmm arba Z |
Koordinačių ašių išvesties datos formatas
Numatytasis išvesties datos formatas yra YYYY-MM-DD. Galite tinkinti axisFormat, pavyzdžiui, 2026-Q1 reiškia 2026 metų pirmąjį ketvirtį.
Kopijuoti
Įterpti
axisFormat %Y-%m-%d
Palaikomos šios formato eilutės:
| Formatas,Apibrėžimas | |
|---|---|
| %a | Sutrumpintas savaitės dienos pavadinimas |
| %A | Visas savaitės dienos pavadinimas |
| %b | Sutrumpintas mėnesio pavadinimas |
| %B | Visas mėnesio pavadinimas |
| %c | Lokalizuota data ir laikas |
| %d | Diena, dešimtainis skaičius [01,31] |
| %e | Diena, tarpais papildytas dešimtainis skaičius [1,31], atitinka %_d |
| %H | Valanda (24 valandų formatu), dešimtainis skaičius [00,23] |
| %I | Valanda (12 valandų formatu), dešimtainis skaičius [01,12] |
| %j | Metų diena, dešimtainis skaičius [001,366] |
| %m | Mėnuo, dešimtainis skaičius [01,12] |
| %M | Minutė, dešimtainis skaičius [00,59] |
| %L | Milisekundė, dešimtainis skaičius [000, 999] |
| %p | Priešpiet arba popiet |
| %S | Sekundė, dešimtainis skaičius [00,59] |
| %U | Metų savaitė (kai savaitė prasideda sekmadienį), dešimtainis skaičius [00,53] |
| %w | Savaitės diena, tarpais papildytas dešimtainis skaičius [0,6], kur 0 žymi sekmadienį |
| %W | Metų savaitė (kai savaitė prasideda pirmadienį), dešimtainis skaičius [00,53] |
| %x | Lokalizuota datos išraiška, pavyzdžiui: 2026-09-18 |
| %X | Lokalizuota laiko išraiška, pavyzdžiui: 14:30:00 |
| %y | Metai be šimtmečio, dešimtainis skaičius [00,99], pavyzdžiui, 26 žymi 2026 metus |
| %Y | Metai su šimtmečiu, dešimtainis skaičius |
| %Z | Laiko juostos pavadinimo santrumpa, pavyzdžiui, "-0700" |
| %% | Escape simbolis, naudojamas pačiam procento ženklui % rodyti |
Ašių žymės
Numatytosios išvesties žymės yra automatinės. Galite tinkinti tickInterval, pavyzdžiui, 1day arba 1week.
Kopijuoti
Įterpti
tickInterval 1day
Šablonas yra
Kopijuoti
Įterpti
/^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$/;
Savaitėmis pagrįstas tickInterval pagal numatytuosius nustatymus prasideda nuo sekmadienio. Jei norite nurodyti kitą darbo dieną, nuo kurios prasideda tickInterval, naudokite weekday parinktį, kaip parodyta kode:
Kopijuoti
Įterpti
gantt
tickInterval 1week
weekday monday
Kompaktiško režimo išvestis
Kompaktiškas režimas leidžia vienoje eilutėje rodyti kelias užduotis. Diagramos rodymo režimas valdomas ankstesniais YAML nustatymais; taip Ganto diagramai įjungiamas kompaktiškas režimas.
Kopijuoti
Įterpti
---
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
Ganto diagramoje galima įrašyti komentarą; analizatorius jį ignoruos. Komentaras turi užimti atskirą eilutę ir prasidėti %% (dvigubu procento ženklu). Bet koks tekstas nuo komentaro pradžios iki kito eilutės lūžio laikomas komentaru, įskaitant bet kokią diagramos sintaksę.
Kopijuoti
Įterpti
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
Šiandienos žymė
Galite nustatyti dabartinės datos žymės stilių arba ją paslėpti. Norėdami nustatyti stilių, pridėkite reikšmę todayMarker raktui.
Kopijuoti
Įterpti
todayMarker stroke-width:5px,stroke:#0f0,opacity:0.5
Norėdami paslėpti žymę, nustatykite todayMarker į off.
Kopijuoti
Įterpti
todayMarker off
Pavyzdys
Stulpelinė Ganto diagrama
Kopijuoti
Įterpti
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
Laiko juosta (su komentarais, CSS ir išankstine konfigūracija)
Kopijuoti
Įterpti
---
# 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
