Ganttov diagram
Ganttov diagram je vrsta stolpčnega diagrama, ki se uporablja za prikaz napredka projekta in časa, potrebnega za dokončanje projekta. Ganttov diagram prikazuje število dni med začetnim in končnim datumom končnih in povzetih elementov projekta.
Opombe
Ganttov diagram vsako načrtovano opravilo zabeleži kot neprekinjeno vrstico, ki se razteza od leve proti desni. Os x predstavlja čas, os y pa beleži različna opravila in njihov vrstni red dokončanja.
Pomembneje je, da kadar so datumi, dnevi ali določen nabor datumov opravila izključeni, Ganttov diagram te spremembe prilagodi tako, da vrstico podaljša v desno za enako število dni, namesto da bi znotraj opravila ustvaril vrzeli .
Kopiraj
Vdelava
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
Če pa izključeni datum leži med dvema zaporedno začetima opraviloma, se izključeni datum na diagramu preskoči in pusti prazen, opravilo pa se nato začne po koncu izključenega datuma. Kot je prikazano spodaj:
Kopiraj
Vdelava
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
Ganttov diagram je uporaben za sledenje času, potrebnemu za dokončanje projekta, z nekaj prilagoditvami pa se lahko uporablja tudi za grafični prikaz "dela prostih dni".
Sintaksa
Kopiraj
Vdelava
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
Opravila so privzeto zaporedna, začetni datum naslednjega opravila pa je privzeto končni datum prejšnjega opravila.
Naslov opravila in njegovi metapodatki so ločeni z dvopičjem (:), elementi metapodatkov pa so med seboj ločeni z vejicami (,). Veljavne oznake vključujejo active, done, crit in milestone. Oznake so neobvezne, če pa se uporabijo, morajo biti na prvem mestu. Po obdelavi oznak so preostali elementi metapodatkov razloženi takole:
- Če je določen en element, ta določa, kdaj se opravilo konča. Lahko je določen datum ali čas ali pa trajanje. Če je določeno trajanje, se to prišteje začetnemu datumu opravila, da se določi končni datum opravila, pri čemer se upoštevajo morebitne izključitve.
- Če sta določena dva elementa, se drugi element razlaga enako kot v prejšnjem primeru. Prvi element lahko določa izrecni začetni datum ali čas (katerega oblika je določena z dateFormat) ali pa se sklicuje na drugo opravilo prek after <otherTaskID> [[otherTaskID2 [otherTaskID3]]...]. V slednjem primeru je začetni datum opravila nastavljen glede na najpoznejši končni datum katerega koli sklicevanega opravila.
- Če so določeni trije elementi, se zadnja dva razlagata kot v prejšnjem primeru. Prvi element bo predstavljal ID opravila, na katerega se lahko sklicujete s sintakso later <taskID>.
| Sintaksa metapodatkov | Začetni datum | Končni datum | ID |
|---|---|---|---|
| <taskID>, <startDate>, <endDate> | startdate, interpretiran z dateformat | endDate, interpretiran z dateformat | taskID |
| <taskID>, <startDate>, <length> | startdate, interpretiran z dateformat | Začetni datum + length | taskID |
| <taskID>, after <otherTaskId>, <endDate> | Končni datum predhodno določenega opravila otherTaskID | endDate, interpretiran z dateformat | taskID |
| <taskID>, after <otherTaskId>, <length> | Končni datum predhodno določenega opravila otherTaskID | Začetni datum + length | taskID |
| <taskID>, <startDate>, until <otherTaskId> | startdate, interpretiran z dateformat | Začetni datum predhodno določenega opravila otherTaskID | taskID |
| <taskID>, after <otherTaskId>, until <otherTaskId> | Končni datum predhodno določenega opravila otherTaskID | Začetni datum predhodno določenega opravila otherTaskID | taskID |
| <startDate>, <endDate> | startdate, interpretiran z dateformat | 使用 dateformat 解释的 enddate | Se ne uporablja |
| <startDate>, <length> | startdate, interpretiran z dateformat | Začetni datum + length | Se ne uporablja |
| after <otherTaskID>, <endDate> | Končni datum predhodno določenega opravila otherTaskID | 使用 dateformat 解释的 enddate | Se ne uporablja |
| after <otherTaskID>, <length> | Končni datum predhodno določenega opravila otherTaskID | Začetni datum + length | Se ne uporablja |
| <startDate>, until <otherTaskId> | startdate, interpretiran z dateformat | Začetni datum predhodno določenega opravila otherTaskID | Se ne uporablja |
| after <otherTaskId>, until <otherTaskId> | Končni datum predhodno določenega opravila otherTaskID | Začetni datum predhodno določenega opravila otherTaskID | Se ne uporablja |
| <endDate> | Končni datum prejšnjega opravila | 使用 dateformat 解释的 enddate | Se ne uporablja |
| <length> | Končni datum prejšnjega opravila | Začetni datum + length | Se ne uporablja |
| until <otherTaskId> | Končni datum prejšnjega opravila | Začetni datum predhodno določenega opravila otherTaskID | Se ne uporablja |
Oblika trajanja
Pri določanju <length> uporabite število, ki mu sledi eden od naslednjih priponk enote:
| Enota | Pripona | Primer |
|---|---|---|
| milisekunda | ms | 50ms |
| sekunda | s | 30s |
| minuta | m | 30m |
| ura | h | 4h |
| dan | d | 7d |
| teden | w | 3w |
| mesec | m | 2m |
| leto | y | 1y |
Podprte so tudi decimalne vrednosti (na primer 2.5d). Neveljavne oznake trajanja (na primer 3dX) se prezrejo, opravilo pa ima privzeto trajanje nič.
Zaradi preprostosti tabela ne prikazuje več opravil, naštetih s sintakso after. Spodaj je primer:
Kopiraj
Vdelava
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
Naslov
title je neobvezen niz, prikazan na vrhu Ganttovega diagrama, ki opisuje celoten diagram.
Izključitev
excludes je neobvezna lastnost, ki sprejema določene datume (v obliki YYYY-MM-DD), dneve v tednu (na primer "sunday") ali "weekends", ne sme pa uporabiti besede "weekdays". Ti datumi bodo označeni na diagramu in izključeni iz izračuna trajanja opravila. To pomeni, da če obdobje trajanja opravila vključuje izključene datume, se izključeni dnevi prištejejo končnemu času opravila, da se zagotovi, da je trajanje opravila skladno s tistim, ki je določeno v kodi.
Konec tedna
Pri izključitvi konca tedna lahko konec tedna nastavite na petek in soboto ali na soboto in nedeljo. Privzeto sta konec tedna sobota in nedelja. Če želite določiti začetni dan konca tedna, lahko v novo vrstico dodate neobvezno lastnost weekend, ki ji sledi friday ali saturday.
Kopiraj
Vdelava
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
Deklaracija odseka
Diagram lahko razdelite na različne odseke in tako ločite različne dele projekta (na primer razvoj in dokumentacijo).
V ta namen na začetku vrstice uporabite sintakso section in ji dodelite ime. Upoštevajte, da je to ime, za razliko od naslova celotnega diagrama, obvezno.
Mejnik
V diagram lahko dodate mejnike. Mejniki se razlikujejo od opravil, saj predstavljajo določen trenutek in so označeni s sintakso milestone. Sledi primer uporabe mejnikov: natančen položaj mejnika je določen z začetnim datumom mejnika in trajanjem opravila, kot je prikazano spodaj:
Kopiraj
Vdelava
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
Navpična oznaka
vert pomeni dodajanje navpičnih črt v Ganttov diagram, da se enostavno označijo pomembni datumi, na primer roki, pomembni dogodki ali kontrolne točke. Te oznake segajo čez celoten diagram in so nameščene glede na datum, ki ga navedete. Za razliko od mejnikov navpične oznake ne zasedajo vrstice. So zgolj vizualne referenčne točke, ki pomagajo razčleniti časovni trak in olajšajo prepoznavanje pomembnih trenutkov.
Kopiraj
Vdelava
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
Nastavitev datuma
dateFormat določa obliko vnosa datuma za elemente Ganttovega diagrama, axisFormat pa določa obliko izpisa datuma pri upodabljanju diagrama.
Oblika vnosa datuma
Privzeta oblika vnosa datuma je YYYY-MM-DD; dateFormat lahko prilagodite.
Kopiraj
Vdelava
dateFormat YYYY-MM-DD
Podprte so naslednje možnosti oblike:
| 输入 | Primer | Opis |
|---|---|---|
| YYYY | 2026 | 4-mestno leto |
| YY | 26 | 2-mestno leto |
| Q | 1..4 | Številka četrtletja |
| M MM | 1..12 | Številka meseca |
| D DD | 1..31 | Dan v mesecu |
| Do | 1st..31st | Dan v mesecu z vrstilnim števnikom |
| DDD DDDD | 1..365 | Dan v letu |
| X | 1410715640.579 | Časovni žig Unix |
| x | 1410715640579 | Časovni žig Unix v milisekundah |
| H HH | 0..23 | 24-urni čas |
| h hh | 1..12 | 12-urni čas, uporablja se z a A |
| a A | am pm | dopoldne ali popoldne |
| m mm | 0..59 | minuta |
| s ss | 0..59 | sekunde |
| S | 0..9 | desetinka sekunde |
| SS | 0..99 | stotinka sekunde |
| SSS | 0..999 | tisočinka sekunde |
| Z ZZ | +12:00 | Odmik od UTC, v obliki +-HH:mm, +-HHmm ali Z |
Oblika izpisa datuma osi
Privzeta oblika izpisa datuma je YYYY-MM-DD. axisFormat lahko prilagodite, na primer 2026-Q1 pomeni prvo četrtletje leta 2026.
Kopiraj
Vdelava
axisFormat %Y-%m-%d
Podprti so naslednji nizi oblike:
| Oblika,Definicija | |
|---|---|
| %a | Skrajšano ime dneva v tednu |
| %A | Polno ime dneva v tednu |
| %b | Skrajšano ime meseca |
| %B | Polno ime meseca |
| %c | Lokaliziran datum in čas |
| %d | Datum, decimalno število [01,31] |
| %e | Datum, decimalno število, zapolnjeno s presledki [1,31], enako %_d |
| %H | Ura (24-urni zapis), decimalno število [00,23] |
| %I | Ura (12-urni zapis), decimalno število [01,12] |
| %j | Dan v letu, decimalno število [001,366] |
| %m | Mesec, decimalno število [01,12] |
| %M | Minuta, decimalno število [00,59] |
| %L | Milisekunda, decimalno število [000, 999] |
| %p | dopoldne ali popoldne |
| %S | Sekunda, decimalno število [00,59] |
| %U | Teden v letu (z nedeljo kot prvim dnem tedna), decimalno število [00,53] |
| %w | Dan v tednu, decimalno število, zapolnjeno s presledki [0,6], pri čemer 0 predstavlja nedeljo |
| %W | Teden v letu (s ponedeljkom kot prvim dnem tedna), decimalno število [00,53] |
| %x | Lokaliziran prikaz datuma, na primer: 2026-09-18 |
| %X | Lokaliziran prikaz časa, na primer: 14:30:00 |
| %y | Leto brez stoletja, decimalno število [00,99], na primer 26 predstavlja leto 2026 |
| %Y | Leto s stoletjem, decimalno število |
| %Z | Okrajšava imena časovnega pasu, na primer "-0700" |
| %% | Ubežni znak za prikaz samega znaka odstotka % |
Oznaka osi
Privzeti izpis oznak je samodejen. tickInterval lahko prilagodite, na primer 1day ali 1week.
Kopiraj
Vdelava
tickInterval 1day
Vzorec je
Kopiraj
Vdelava
/^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$/;
tickInterval, ki temelji na tednu, se privzeto začne v nedeljo. Če želite določiti drug delovni dan kot začetek tickInterval, uporabite možnost weekday, kot v naslednji kodi:
Kopiraj
Vdelava
gantt
tickInterval 1week
weekday monday
Izhod v kompaktnem načinu
Kompaktni način vam omogoča prikaz več opravil v isti vrstici. Z nastavitvijo YAML na začetku nadzorujete način prikaza grafa in omogočite kompaktni način za Ganttov diagram.
Kopiraj
Vdelava
---
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
V Ganttov diagram lahko vnesete komentarje, ki jih razčlenjevalnik prezre. Komentar mora zavzemati celotno vrstico in se mora začeti z %% (dvojnim odstotkom). Vsako besedilo od začetka komentarja do naslednjega znaka za novo vrstico se obravnava kot komentar, vključno s katero koli sintakso diagrama.
Kopiraj
Vdelava
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
Oznaka za danes
Oznaki za trenutni datum lahko nastavite slog ali jo skrijete. Za nastavitev sloga dodajte vrednost ključu todayMarker.
Kopiraj
Vdelava
todayMarker stroke-width:5px,stroke:#0f0,opacity:0.5
Za skritje oznake nastavite todayMarker na off.
Kopiraj
Vdelava
todayMarker off
Primer
Stolpčni Ganttov diagram
Kopiraj
Vdelava
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
Časovni trak (vključno s komentarji, CSS in konfiguracijo na začetku)
Kopiraj
Vdelava
---
# 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
