Ganttův diagram
Ganttův diagram je sloupcový graf používaný k zobrazení průběhu projektu a času potřebného k dokončení projektu. Ganttův diagram zobrazuje počet dní mezi datem zahájení a datem dokončení koncových a souhrnných prvků projektu.
Poznámky
Ganttův diagram zaznamenává každou plánovanou úlohu jako souvislý pruh táhnoucí se zleva doprava. Osa x představuje čas, osa y zaznamenává různé úlohy a pořadí jejich dokončení.
Ještě důležitější je, že pokud je datum, počet dní nebo konkrétní sada dat u úlohy vyloučena, Ganttův diagram se přizpůsobí těmto změnám prodloužením doprava o stejný počet dní, místo aby v úloze vytvořil mezery .
Kopírovat
Vložení
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
Pokud však vyloučené datum leží mezi dvěma úlohami, které začínají po sobě, vyloučené datum se v diagramu přeskočí a zůstane prázdné a úloha pak začne po skončení vyloučeného data. Jak je znázorněno níže:
Kopírovat
Vložení
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ův diagram je užitečný pro sledování času potřebného k dokončení projektu, ale s určitými úpravami jej lze použít i k grafickému znázornění „nepracovních dnů“.
Syntaxe
Kopírovat
Vložení
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
Úlohy probíhají ve výchozím nastavení nepřetržitě a datum zahájení další úlohy je ve výchozím nastavení datem ukončení předchozí úlohy.
Název úlohy a její metadata se oddělují dvojtečkou (:) a položky metadat se oddělují čárkami (,). Platné značky zahrnují active, done, crit a milestone. Značky jsou volitelné, ale pokud se použijí, musí být uvedeny na začátku. Po zpracování značek se zbývající položky metadat interpretují takto:
- Pokud je zadána jediná položka, určuje, kdy úloha skončí. Může to být konkrétní datum nebo čas, případně trvání. Pokud je zadáno trvání, přičte se k datu zahájení úlohy, aby se určilo datum ukončení úlohy, s ohledem na případná vyloučení.
- Pokud jsou zadány dvě položky, druhá položka se interpretuje stejně jako v předchozím případě. První položka může určit výslovné datum nebo čas zahájení (formát určuje dateFormat), nebo může odkazovat na jinou úlohu pomocí after <otherTaskID> [[otherTaskID2 [otherTaskID3]]...]. V druhém případě se datum zahájení úlohy nastaví podle nejzazšího data ukončení jakékoli odkazované úlohy.
- Pokud jsou zadány tři položky, poslední dvě položky se interpretují podle předchozích případů. První položka bude představovat ID úlohy, na kterou lze odkazovat pomocí syntaxe later <taskID>.
| Syntaxe metadat | Datum zahájení | Datum ukončení | ID |
|---|---|---|---|
| <taskID>, <startDate>, <endDate> | startdate interpretované pomocí dateformat | endDate interpretované pomocí dateformat | taskID |
| <taskID>, <startDate>, <length> | startdate interpretované pomocí dateformat | Datum zahájení + length | taskID |
| <taskID>, after <otherTaskId>, <endDate> | Datum ukončení dříve zadané úlohy otherTaskID | endDate interpretované pomocí dateformat | taskID |
| <taskID>, after <otherTaskId>, <length> | Datum ukončení dříve zadané úlohy otherTaskID | Datum zahájení + length | taskID |
| <taskID>, <startDate>, until <otherTaskId> | startdate interpretované pomocí dateformat | Datum zahájení dříve zadané úlohy otherTaskID | taskID |
| <taskID>, after <otherTaskId>, until <otherTaskId> | Datum ukončení dříve zadané úlohy otherTaskID | Datum zahájení dříve zadané úlohy otherTaskID | taskID |
| <startDate>, <endDate> | startdate interpretované pomocí dateformat | 使用 dateformat 解释的 enddate | Nevztahuje se |
| <startDate>, <length> | startdate interpretované pomocí dateformat | Datum zahájení + length | Nevztahuje se |
| after <otherTaskID>, <endDate> | Datum ukončení dříve zadané úlohy otherTaskID | 使用 dateformat 解释的 enddate | Nevztahuje se |
| after <otherTaskID>, <length> | Datum ukončení dříve zadané úlohy otherTaskID | Datum zahájení + length | Nevztahuje se |
| <startDate>, until <otherTaskId> | startdate interpretované pomocí dateformat | Datum zahájení dříve zadané úlohy otherTaskID | Nevztahuje se |
| after <otherTaskId>, until <otherTaskId> | Datum ukončení dříve zadané úlohy otherTaskID | Datum zahájení dříve zadané úlohy otherTaskID | Nevztahuje se |
| <endDate> | Datum ukončení předchozí úlohy | 使用 dateformat 解释的 enddate | Nevztahuje se |
| <length> | Datum ukončení předchozí úlohy | Datum zahájení + length | Nevztahuje se |
| until <otherTaskId> | Datum ukončení předchozí úlohy | Datum zahájení dříve zadané úlohy otherTaskID | Nevztahuje se |
Formát trvání
Při zadání <length> použijte číslo následované jednou z následujících přípon jednotek:
| Jednotka | Přípona | Příklad |
|---|---|---|
| milisekunda | ms | 50ms |
| sekunda | s | 30s |
| minuta | m | 30m |
| hodina | h | 4h |
| den | d | 7d |
| týden | w | 3w |
| měsíc | m | 2m |
| rok | y | 1y |
Podporovány jsou také desetinné hodnoty (například 2.5d). Neplatné značky trvání (například 3dX) budou ignorovány a úloha bude mít výchozí trvání nula.
Pro zjednodušení tabulka nezobrazuje více úloh uvedených pomocí syntaxe after. Následuje příklad:
Kopírovat
Vložení
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
Název
title je volitelný řetězec zobrazený v horní části Ganttova diagramu, který popisuje celý diagram.
Vyloučení
excludes je volitelná vlastnost, která přijímá konkrétní datum (formát YYYY-MM-DD), den v týdnu (například "sunday") nebo "weekends", ale nelze použít slovo "weekdays". Tato data se vyznačí v diagramu a vyloučí z výpočtu trvání úlohy. To znamená, že pokud období trvání úlohy zahrnuje vyloučená data, vyloučené dny se přičtou k času ukončení úlohy, aby trvání úlohy odpovídalo hodnotě zadané v kódu.
Víkend
Při vyloučení víkendu lze víkend nastavit na pátek a sobotu nebo na sobotu a neděli. Ve výchozím nastavení je víkend sobota a neděle. Chcete-li definovat počáteční den víkendu, můžete na nový řádek přidat volitelnou vlastnost weekend následovanou friday nebo saturday.
Kopírovat
Vložení
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
Deklarace části
Diagram můžete rozdělit na jednotlivé části a oddělit tak různé části projektu (například vývoj a dokumentaci).
Za tímto účelem použijte na začátku řádku syntaxi section a pojmenujte ji. Všimněte si, že na rozdíl od názvu celého diagramu je tento název povinný.
Milník
Do diagramu můžete přidat milníky. Milníky se liší od úloh, protože představují konkrétní čas a jsou označeny syntaxí milestone. Následuje příklad použití milníku: přesná poloha milníku je určena datem zahájení milníku a trváním úlohy, jak je znázorněno níže:
Kopírovat
Vložení
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
Vertikální značka
vert znamená přidání svislé čáry do Ganttova diagramu pro snadné zvýraznění důležitých dat, jako jsou termíny, důležité události nebo kontrolní body. Tyto značky se táhnou celým diagramem a umisťují se podle vámi zadaného data. Na rozdíl od milníků vertikální značky nezabírají řádek. Jsou čistě vizuálními referenčními body, které pomáhají rozdělit časovou osu a usnadňují rozpoznání důležitých okamžiků.
Kopírovat
Vložení
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
Nastavení data
dateFormat definuje vstupní formát data prvků Ganttova diagramu; axisFormat definuje výstupní formát data při vykreslování diagramu.
Vstupní formát data
Výchozí vstupní formát data je YYYY-MM-DD; dateFormat můžete přizpůsobit.
Kopírovat
Vložení
dateFormat YYYY-MM-DD
Podporovány jsou následující možnosti formátu:
| 输入 | Příklad | Popis |
|---|---|---|
| YYYY | 2026 | Čtyřmístný rok |
| YY | 26 | Dvojmístný rok |
| Q | 1..4 | Číslo čtvrtletí |
| M MM | 1..12 | Číslo měsíce |
| D DD | 1..31 | Den v měsíci |
| Do | 1st..31st | Pořadový den v měsíci |
| DDD DDDD | 1..365 | Den v roce |
| X | 1410715640.579 | Časové razítko Unix |
| x | 1410715640579 | Časové razítko Unix v milisekundách |
| H HH | 0..23 | Čas ve 24hodinovém formátu |
| h hh | 1..12 | Čas ve 12hodinovém formátu, používá se s a A |
| a A | am pm | Dopoledne nebo odpoledne |
| m mm | 0..59 | minuta |
| s ss | 0..59 | Sekundy |
| S | 0..9 | Desetina sekundy |
| SS | 0..99 | Setina sekundy |
| SSS | 0..999 | Tisícina sekundy |
| Z ZZ | +12:00 | Posun od UTC ve formátu +-HH:mm, +-HHmm nebo Z |
Výstupní formát data osy
Výchozí výstupní formát data je YYYY-MM-DD. Můžete přizpůsobit axisFormat, například 2026-Q1 představuje první čtvrtletí roku 2026.
Kopírovat
Vložení
axisFormat %Y-%m-%d
Podporovány jsou následující řetězce formátu:
| Formát,Definice | |
|---|---|
| %a | Zkrácený název dne v týdnu |
| %A | Úplný název dne v týdnu |
| %b | Zkrácený název měsíce |
| %B | Úplný název měsíce |
| %c | Lokalizované datum a čas |
| %d | Datum, desítkové číslo [01,31] |
| %e | Datum, desítkové číslo vyplněné mezerami [1,31], odpovídá %_d |
| %H | Hodina (24hodinový formát), desítkové číslo [00,23] |
| %I | Hodina (12hodinový formát), desítkové číslo [01,12] |
| %j | Den v roce, desítkové číslo [001,366] |
| %m | Měsíc, desítkové číslo [01,12] |
| %M | Minuty, desítkové číslo [00,59] |
| %L | Milisekundy, desítkové číslo [000, 999] |
| %p | Dopoledne nebo odpoledne |
| %S | Sekundy, desítkové číslo [00,59] |
| %U | Týden v roce (první den týdne je neděle), desítkové číslo [00,53] |
| %w | Den v týdnu, desítkové číslo vyplněné mezerami [0,6], kde 0 představuje neděli |
| %W | Týden v roce (první den týdne je pondělí), desítkové číslo [00,53] |
| %x | Lokalizované znázornění data, například: 2026-09-18 |
| %X | Lokalizované znázornění času, například: 14:30:00 |
| %y | Rok bez století, desítkové číslo [00,99], například 26 představuje rok 2026 |
| %Y | Rok se stoletím, desítkové číslo |
| %Z | Zkratka názvu časového pásma, například "-0700" |
| %% | Escape znak pro zobrazení samotného znaku procenta % |
Dílky osy
Výchozí výstupní dílky jsou automatické. Můžete přizpůsobit tickInterval, například 1day nebo 1week.
Kopírovat
Vložení
tickInterval 1day
Vzor je
Kopírovat
Vložení
/^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$/;
tickInterval založený na týdnech začíná ve výchozím nastavení nedělí. Pokud chcete zadat jiný pracovní den, kterým tickInterval začíná, použijte možnost weekday, kód je následující:
Kopírovat
Vložení
gantt
tickInterval 1week
weekday monday
Výstup v kompaktním režimu
Kompaktní režim umožňuje zobrazit více úloh na stejném řádku. Režim zobrazení grafu se řídí předchozím nastavením YAML, které povolí kompaktní režim pro Ganttův diagram.
Kopírovat
Vložení
---
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
Do Ganttova diagramu můžete vkládat komentáře, které parser ignoruje. Komentář musí zabírat samostatný řádek a musí začínat %% (dvěma znaky procenta). Veškerý text od začátku komentáře do dalšího znaku nového řádku je považován za komentář, včetně jakékoli syntaxe diagramu.
Kopírovat
Vložení
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
Značka dneška
Můžete nastavit styl značky aktuálního data nebo ji skrýt. Chcete-li nastavit styl, přidejte hodnotu pro klíč todayMarker.
Kopírovat
Vložení
todayMarker stroke-width:5px,stroke:#0f0,opacity:0.5
Chcete-li značku skrýt, nastavte todayMarker na off.
Kopírovat
Vložení
todayMarker off
Příklad
Sloupcový Ganttův diagram
Kopírovat
Vložení
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
Časová osa (obsahující komentáře, CSS a frontmatter konfiguraci)
Kopírovat
Vložení
---
# 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
