Diagram Gantta
Diagram Gantta to wykres słupkowy służący do prezentacji postępu projektu oraz czasu potrzebnego na ukończenie projektu. Diagram Gantta pokazuje liczbę dni między datami rozpoczęcia i zakończenia elementów końcowych i zbiorczych projektu.
Uwagi
Diagram Gantta rejestruje każde zaplanowane zadanie jako ciągły pasek rozciągający się od lewej do prawej. Oś x reprezentuje czas, a oś y rejestruje różne zadania i kolejność ich ukończenia.
Co ważniejsze, gdy daty, dni lub określony zestaw dat danego zadania są wykluczone, diagram Gantta dostosuje się do tych zmian, wydłużając się w prawo o tę samą liczbę dni, zamiast tworzyć przerwy wewnątrz zadania.
Kopiuj
Osadź
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
Jeśli jednak wykluczone daty znajdują się między dwoma kolejno rozpoczynającymi się zadaniami, wykluczone daty zostaną pominięte i pozostawione puste na diagramie, a zadanie rozpocznie się po zakończeniu wykluczonych dat. Jak pokazano poniżej:
Kopiuj
Osadź
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
Diagram Gantta jest przydatny do śledzenia czasu potrzebnego na ukończenie projektu, ale przy pewnych dostosowaniach można go również wykorzystać do graficznego przedstawienia "dni wolnych od pracy".
Składnia
Kopiuj
Osadź
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
Zadania są domyślnie realizowane kolejno; data rozpoczęcia następnego zadania domyślnie odpowiada dacie zakończenia poprzedniego zadania.
Tytuł zadania i jego metadane są oddzielone dwukropkiem (:), a elementy metadanych są oddzielone przecinkami (,). Prawidłowe etykiety obejmują active, done, crit i milestone. Etykiety są opcjonalne, ale jeśli są używane, muszą znajdować się na początku. Po przetworzeniu etykiet pozostałe elementy metadanych interpretuje się następująco:
- Jeśli określono pojedynczy element, decyduje on o tym, kiedy zadanie się kończy. Może to być konkretna data lub godzina, albo czas trwania. Jeśli określono czas trwania, zostanie on dodany do daty rozpoczęcia zadania w celu ustalenia daty zakończenia, z uwzględnieniem wszelkich wykluczeń.
- Jeśli określono dwa elementy, drugi element interpretuje się tak samo jak w poprzednim przypadku. Pierwszy element może określać wyraźną datę lub godzinę rozpoczęcia (format określony przez dateFormat) albo odwoływać się do innego zadania za pomocą after <otherTaskID> [[otherTaskID2 [otherTaskID3]]...]. W tym drugim przypadku data rozpoczęcia zadania zostanie ustawiona na podstawie najpóźniejszej daty zakończenia wszelkich przywoływanych zadań.
- Jeśli określono trzy elementy, dwa ostatnie elementy interpretuje się jak w poprzednich przypadkach. Pierwszy element będzie reprezentował ID zadania; można się do niego odwołać za pomocą składni later <taskID>.
| Składnia metadanych | Data rozpoczęcia | Data zakończenia | ID |
|---|---|---|---|
| <taskID>, <startDate>, <endDate> | startdate interpretowana za pomocą dateformat | endDate interpretowana za pomocą dateformat | taskID |
| <taskID>, <startDate>, <length> | startdate interpretowana za pomocą dateformat | Data rozpoczęcia + length | taskID |
| <taskID>, after <otherTaskId>, <endDate> | Data zakończenia wcześniej określonego zadania otherTaskID | endDate interpretowana za pomocą dateformat | taskID |
| <taskID>, after <otherTaskId>, <length> | Data zakończenia wcześniej określonego zadania otherTaskID | Data rozpoczęcia + length | taskID |
| <taskID>, <startDate>, until <otherTaskId> | startdate interpretowana za pomocą dateformat | Data rozpoczęcia wcześniej określonego zadania otherTaskID | taskID |
| <taskID>, after <otherTaskId>, until <otherTaskId> | Data zakończenia wcześniej określonego zadania otherTaskID | Data rozpoczęcia wcześniej określonego zadania otherTaskID | taskID |
| <startDate>, <endDate> | startdate interpretowana za pomocą dateformat | 使用 dateformat 解释的 enddate | Nie dotyczy |
| <startDate>, <length> | startdate interpretowana za pomocą dateformat | Data rozpoczęcia + length | Nie dotyczy |
| after <otherTaskID>, <endDate> | Data zakończenia wcześniej określonego zadania otherTaskID | 使用 dateformat 解释的 enddate | Nie dotyczy |
| after <otherTaskID>, <length> | Data zakończenia wcześniej określonego zadania otherTaskID | Data rozpoczęcia + length | Nie dotyczy |
| <startDate>, until <otherTaskId> | startdate interpretowana za pomocą dateformat | Data rozpoczęcia wcześniej określonego zadania otherTaskID | Nie dotyczy |
| after <otherTaskId>, until <otherTaskId> | Data zakończenia wcześniej określonego zadania otherTaskID | Data rozpoczęcia wcześniej określonego zadania otherTaskID | Nie dotyczy |
| <endDate> | Data zakończenia poprzedniego zadania | 使用 dateformat 解释的 enddate | Nie dotyczy |
| <length> | Data zakończenia poprzedniego zadania | Data rozpoczęcia + length | Nie dotyczy |
| until <otherTaskId> | Data zakończenia poprzedniego zadania | Data rozpoczęcia wcześniej określonego zadania otherTaskID | Nie dotyczy |
Format czasu trwania
Podczas określania <length> użyj liczby, po której następuje jeden z następujących sufiksów jednostek:
| Jednostka | Sufiks | Przykład |
|---|---|---|
| Milisekunda | ms | 50ms |
| Sekunda | s | 30s |
| Minuta | m | 30m |
| Godzina | h | 4h |
| Dzień | d | 7d |
| Tydzień | w | 3w |
| Miesiąc | m | 2m |
| Rok | y | 1y |
Obsługiwane są również wartości dziesiętne (np. 2.5d). Nieprawidłowe znaczniki czasu trwania (np. 3dX) zostaną zignorowane, a zadanie będzie miało domyślny czas trwania równy zero.
Dla uproszczenia tabela nie pokazuje wielu zadań wymienionych za pomocą składni after. Oto przykład:
Kopiuj
Osadź
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
Tytuł
title to opcjonalny ciąg znaków wyświetlany na górze diagramu Gantta, opisujący cały diagram.
Wykluczenia
excludes to opcjonalna właściwość przyjmująca określoną datę (w formacie YYYY-MM-DD), dzień tygodnia (np. "sunday") lub "weekends", ale nie można użyć słowa "weekdays". Daty te zostaną zaznaczone na diagramie i wykluczone z obliczeń czasu trwania zadania. Oznacza to, że jeśli okres trwania zadania obejmuje wykluczone daty, wykluczone dni zostaną dodane do czasu zakończenia zadania, aby czas trwania zadania był zgodny z określonym w kodzie.
Weekend
Przy wykluczaniu weekendów można ustawić weekend na piątek i sobotę lub sobotę i niedzielę. Domyślnie weekend to sobota i niedziela. Aby zdefiniować dzień rozpoczęcia weekendu, możesz dodać w nowej linii opcjonalną właściwość weekend, po której następuje friday lub saturday.
Kopiuj
Osadź
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
Deklaracja sekcji
Możesz podzielić diagram na sekcje, oddzielając różne części projektu (na przykład rozwój i dokumentację).
W tym celu użyj na początku wiersza składni section i nadaj jej nazwę. Należy zauważyć, że w przeciwieństwie do tytułu całego diagramu ta nazwa jest wymagana.
Kamień milowy
Możesz dodać kamienie milowe do diagramu. Kamienie milowe różnią się od zadań, ponieważ reprezentują konkretny punkt w czasie i są identyfikowane przez składnię milestone. Oto przykład użycia kamieni milowych: dokładna pozycja kamienia milowego jest określana przez jego datę początkową i czas trwania zadania, jak pokazano poniżej:
Kopiuj
Osadź
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
Znacznik pionowy
vert oznacza dodanie linii pionowej na diagramie Gantta, aby łatwo wyróżnić ważne daty, takie jak terminy, ważne zdarzenia lub punkty kontrolne. Znaczniki te rozciągają się na cały diagram i są pozycjonowane na podstawie podanej daty. W przeciwieństwie do kamieni milowych znaczniki pionowe nie zajmują wiersza. Są one wyłącznie wizualnymi punktami odniesienia, które pomagają dzielić os czasu, ułatwiając rozpoznanie ważnych momentów.
Kopiuj
Osadź
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
Ustawianie daty
dateFormat definiuje format wejściowy daty elementów diagramu Gantta, a axisFormat definiuje format wyjściowy daty podczas renderowania diagramu.
Format daty wejściowej
Domyślny format daty wejściowej to YYYY-MM-DD; możesz dostosować dateFormat.
Kopiuj
Osadź
dateFormat YYYY-MM-DD
Obsługiwane są następujące opcje formatu:
| 输入 | Przykład | Opis |
|---|---|---|
| YYYY | 2026 | Rok czterocyfrowy |
| YY | 26 | Rok dwucyfrowy |
| Q | 1..4 | Numer kwartału |
| M MM | 1..12 | Numer miesiąca |
| D DD | 1..31 | Dzień miesiąca |
| Do | 1st..31st | Dzień miesiąca z liczbą porządkową |
| DDD DDDD | 1..365 | Dzień roku |
| X | 1410715640.579 | Znacznik czasu Unix |
| x | 1410715640579 | Znacznik czasu Unix w milisekundach |
| H HH | 0..23 | Czas 24-godzinny |
| h hh | 1..12 | Czas 12-godzinny, używany razem z a A |
| a A | am pm | Przed południem lub po południu |
| m mm | 0..59 | Minuta |
| s ss | 0..59 | Sekunda |
| S | 0..9 | Dziesiąta część sekundy |
| SS | 0..99 | Setna część sekundy |
| SSS | 0..999 | Tysięczna część sekundy |
| Z ZZ | +12:00 | Przesunięcie względem UTC, w formacie +-HH:mm, +-HHmm lub Z |
Format wyjściowy daty osi
Domyślny format daty wyjściowej to YYYY-MM-DD. Możesz dostosować axisFormat, na przykład 2026-Q1 oznacza pierwszy kwartał 2026 roku.
Kopiuj
Osadź
axisFormat %Y-%m-%d
Obsługiwane są następujące ciągi formatujące:
| Format,Definicja | |
|---|---|
| %a | Skrócona nazwa dnia tygodnia |
| %A | Pełna nazwa dnia tygodnia |
| %b | Skrócona nazwa miesiąca |
| %B | Pełna nazwa miesiąca |
| %c | Zlokalizowana data i godzina |
| %d | Data, liczba dziesiętna [01,31] |
| %e | Data, liczba dziesiętna wypełniona spacjami [1,31], odpowiada %_d |
| %H | Godzina (format 24-godzinny), liczba dziesiętna [00,23] |
| %I | Godzina (format 12-godzinny), liczba dziesiętna [01,12] |
| %j | Dzień roku, liczba dziesiętna [001,366] |
| %m | Miesiąc, liczba dziesiętna [01,12] |
| %M | Minuta, liczba dziesiętna [00,59] |
| %L | Milisekunda, liczba dziesiętna [000, 999] |
| %p | Przed południem lub po południu |
| %S | Sekunda, liczba dziesiętna [00,59] |
| %U | Tydzień roku (z niedzielą jako pierwszym dniem tygodnia), liczba dziesiętna [00,53] |
| %w | Dzień tygodnia, liczba dziesiętna wypełniona spacjami [0,6], gdzie 0 oznacza niedzielę |
| %W | Tydzień roku (z poniedziałkiem jako pierwszym dniem tygodnia), liczba dziesiętna [00,53] |
| %x | Zlokalizowana reprezentacja daty, np. 2026-09-18 |
| %X | Zlokalizowana reprezentacja czasu, np. 14:30:00 |
| %y | Rok bez wieku, liczba dziesiętna [00,99], np. 26 oznacza rok 2026 |
| %Y | Rok z wiekiem, liczba dziesiętna |
| %Z | Skrót nazwy strefy czasowej, na przykład "-0700" |
| %% | Znak ucieczki, używany do wyświetlenia samego znaku procentu % |
Podziałka osi
Domyślna podziałka wyjściowa jest automatyczna. Możesz dostosować tickInterval, na przykład 1day lub 1week.
Kopiuj
Osadź
tickInterval 1day
Wzorzec to
Kopiuj
Osadź
/^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$/;
Tygodniowy tickInterval domyślnie zaczyna się od niedzieli. Jeśli chcesz określić inny dzień tygodnia, od którego zaczyna się tickInterval, użyj opcji weekday, jak w poniższym kodzie:
Kopiuj
Osadź
gantt
tickInterval 1week
weekday monday
Wyjście w trybie kompaktowym
Tryb kompaktowy pozwala wyświetlać wiele zadań w tej samej linii. Tryb wyświetlania diagramu jest kontrolowany przez poprzedzające ustawienie YAML; włącz tryb kompaktowy dla diagramu Gantta.
Kopiuj
Osadź
---
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
W diagramie Gantta można wprowadzać komentarze, które parser zignoruje. Komentarz musi zajmować osobną linię i zaczynać się od %% (podwójny znak procentu). Każdy tekst od początku komentarza do następnego znaku nowej linii będzie traktowany jako komentarz, w tym dowolna składnia diagramu.
Kopiuj
Osadź
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
Znacznik dzisiejszej daty
Możesz nadać styl znacznikowi bieżącej daty lub go ukryć. Aby nadać styl, dodaj wartość do klucza todayMarker.
Kopiuj
Osadź
todayMarker stroke-width:5px,stroke:#0f0,opacity:0.5
Aby ukryć znacznik, ustaw todayMarker jako off.
Kopiuj
Osadź
todayMarker off
Przykład
Słupkowy diagram Gantta
Kopiuj
Osadź
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
Oś czasu (zawierająca komentarze, CSS i konfigurację nagłówkową)
Kopiuj
Osadź
---
# 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
