Edytor wykresów Gantta Mermaid
Wykres Gantta kładzie pracę na kalendarzu: co kiedy trwa, co się nakłada i co nie może ruszyć, dopóki coś innego się nie skończy. Sięgaj po niego, gdy sednem są daty i zależności. Jeśli potrzebujesz tylko kolejności, a nie dat, schemat blokowy jest lżejszy i nie gnije, gdy tylko harmonogram się przesunie.
Harmonogram wydania z zależnościami i kamieniem milowym
Wykresem Gantta, a nie rysunkiem pasków, czyni to `after a1`: zależność jest zadeklarowana, więc przesunięcie pierwszego zadania pociąga wszystko, co następuje po nim. Kamień milowy oznacza stałą datę, która nie zajmuje czasu.
gantt
title Wydanie 2.4
dateFormat DD.MM.YYYY
axisFormat %d.%m
excludes weekends
section Wytwarzanie
Kontrakt API :done, a1, 07.01.2026, 10d
Implementacja :active, a2, after a1, 20d
Testy wewnętrzne : a3, after a2, 8d
section Wydanie
Okres stabilizacji : b1, after a3, 5d
Decyzja o wydaniu :milestone, m1, after b1, 0d
Wdrożenie produkcyjne :crit, b2, after m1, 3dOmówione przykłady
1. Najprostszy poprawny wykres
`dateFormat` mówi Mermaidowi, jak CZYTAĆ daty, które piszesz; `axisFormat` steruje tym, jak są POKAZYWANE na osi. To dwa różne ustawienia i ich mylenie jest najczęstszym źródłem frustracji przy Gantcie.
gantt
title Sprint 14
dateFormat DD.MM.YYYY
section Praca
Zbuduj wyszukiwarkę :02.03.2026, 10d2. Identyfikatory zadań i zależności
Nadanie zadaniu identyfikatora pozwala kolejnym pisać `after <id>`. Gdy zależności są zadeklarowane, zmieniasz datę startu w jednym miejscu, a reszta harmonogramu podąża za nią.
gantt
title Migracja danych
dateFormat DD.MM.YYYY
section Przygotowanie
Audyt schematu :a1, 02.02.2026, 5d
Napisz mapowania :a2, after a1, 8d
section Wykonanie
Próba generalna :a3, after a2, 3d
Przełączenie :a4, after a3, 1d3. Słowa kluczowe stanu
`done`, `active` i `crit` zmieniają sposób rysowania paska. To najtańszy sposób, by wykres odpowiadał na pytanie «gdzie jesteśmy», a nie tylko «jaki był plan».
gantt
title Platforma, pierwszy kwartał
dateFormat DD.MM.YYYY
section Infrastruktura
Porządki w Terraformie :done, t1, 05.01.2026, 12d
Aktualizacja Kubernetesa :active, t2, 19.01.2026, 15d
Przegląd kosztów : t3, after t2, 5d
section Bezpieczeństwo
Audyt zależności :crit, s1, 12.01.2026, 6d4. Kamienie milowe
Kamień milowy to punkt, a nie odcinek: nadaj mu `0d`. Używaj ich do dat ustalonych przez coś spoza projektu — targów, terminu umownego, zamrożenia kodu.
gantt
title Plan premiery
dateFormat DD.MM.YYYY
section Inżynieria
Zamrożenie zakresu :milestone, m1, 01.04.2026, 0d
Polowanie na błędy : e1, 01.04.2026, 5d
Gałąź wydania :milestone, m2, after e1, 0d
section Komunikacja
Koniec embarga prasowego :milestone, m3, 15.04.2026, 0d5. Wyłączanie weekendów i świąt
`excludes weekends` sprawia, że czasy trwania nie liczą sobót i niedziel, więc zadanie na 10 dni zajmuje dwa tygodnie robocze zamiast kończyć się w środku weekendu. Święta wyłącza się pojedynczo po dacie, co w Polsce ma spore znaczenie w maju i w okolicach Bożego Ciała.
gantt
title Uruchomienie nowej usługi
dateFormat DD.MM.YYYY
excludes weekends, 01.05.2026, 03.05.2026, 04.06.2026
section Budowa
Postaw infrastrukturę :p1, 06.05.2026, 5d
Zepnij CI/CD :p2, after p1, 5d
section Przekazanie
Instrukcja i szkolenie :p3, after p2, 4dŚciąga ze składni wykresu Gantta
Z sześciu typów Gantt jest najmniej wyrozumiały w jednym miejscu — w wierszu zadania — i najbardziej wyrozumiały we wszystkim pozostałym. Właśnie dlatego tyle błędów przechodzi w nim niezauważenie.
| Składnia | Znaczenie |
|---|---|
| gantt | Otwiera diagram. |
| title Tekst | Tytuł wykresu. |
| dateFormat DD.MM.YYYY | Jak PARSOWAĆ daty, które piszesz. |
| dateFormat YYYY-MM-DD | Format ISO, ustawienie domyślne. |
| axisFormat %d.%m | Jak WYŚWIETLAĆ daty na osi. Ustawienie inne niż dateFormat. |
| excludes weekends | Pomijaj soboty i niedziele przy liczeniu czasu trwania. |
| excludes 01.05.2026 | Wyłącz konkretną datę. Tak usuwa się święta. |
| section Nazwa | Grupuje zadania w opisany pas. |
| Zadanie :id, 01.01.2026, 10d | Zadanie z jawnym początkiem i czasem trwania. |
| Zadanie :id, after inne, 10d | Zadanie startujące po zakończeniu `inne`. |
| Zadanie :done, id, ... | Ukończone — rysowane wyszarzone. |
| Zadanie :active, id, ... | W toku — rysowane z wyróżnieniem. |
| Zadanie :crit, id, ... | Krytyczne — rysowane kolorem akcentu. |
| Nazwa :milestone, id, data, 0d | Punkt w czasie, a nie odcinek. |
| 10d / 3w / 2h | Czas trwania w dniach, tygodniach, godzinach. Jednostka jest obowiązkowa. |
Sześć pułapek Gantta — a błędem jest tylko jedna
To właśnie odróżnia Gantta od pozostałych pięciu typów. Odtworzone na Mermaidzie 11.12.2: dokładnie jedna z sześciu poniższych zatrzymuje rysowanie. Pozostałe pięć daje całkiem wiarygodny i błędny harmonogram, co jest znacznie groźniejsze, bo nikt nie sprawdza ponownie diagramu, który się narysował.
Co widzisz
Parse error, kończy się na: Expecting 'taskData', got 'NL'
Dlaczego
Wiersz zadania bez dwukropka. Dwukropek oddziela nazwę wyświetlaną od danych zadania i bez niego nie ma czego parsować. To jedyna pułapka z tej listy, którą Mermaid odrzuca wprost.
Rozwiązanie
Wstaw dwukropek między nazwą a identyfikatorem.
gantt
dateFormat DD.MM.YYYY
section Praca
Projektowanie a1, 07.01.2026, 5dgantt
dateFormat DD.MM.YYYY
section Praca
Projektowanie :a1, 07.01.2026, 5dCo widzisz
Wykres się rysuje, ale daty wypadają dwa miesiące wcześniej
Dlaczego
To błąd typowy dla pisania po polsku i najdroższy na tej liście. Piszemy daty jako 01.03.2026, mając na myśli 1 marca, ale domyślny `dateFormat` to `YYYY-MM-DD`, a wobec daty z separatorami Mermaid interpretuje ją po amerykańsku, miesiącem naprzód. Zmierzone: `01.03.2026` przy `dateFormat YYYY-MM-DD` stawia zadanie na 3 stycznia. Żadnego ostrzeżenia; wykres wygląda znakomicie i jest przesunięty o dwa miesiące.
Rozwiązanie
Zadeklaruj `dateFormat DD.MM.YYYY` i pisz daty tak, jak piszesz zawsze. Sprawdzone: z tym formatem `01.03.2026` wypada dokładnie 1 marca.
gantt
dateFormat YYYY-MM-DD
section S
Projektowanie :a1, 01.03.2026, 10dgantt
dateFormat DD.MM.YYYY
section S
Projektowanie :a1, 01.03.2026, 10dCo widzisz
Wykres się rysuje, ale oś nagle obejmuje wiele miesięcy
Dlaczego
`after` wskazuje na nieistniejący identyfikator zadania — zwykle literówka albo zmieniona nazwa. Mermaid nie ostrzega: umieszcza zadanie w dowolnym punkcie, co rozciąga oś tak, by do niego sięgnąć. Dwa dziesięciodniowe zadania potrafią wylądować na osi obejmującej osiem miesięcy.
Rozwiązanie
Sprawdź, czy każde `after <id>` dokładnie odpowiada zadeklarowanemu identyfikatorowi. Nagła zmiana skali osi jest sygnałem.
gantt
dateFormat DD.MM.YYYY
section S
Projektowanie :a1, 07.01.2026, 10d
Budowa :a2, after projekt, 10dgantt
dateFormat DD.MM.YYYY
section S
Projektowanie :a1, 07.01.2026, 10d
Budowa :a2, after a1, 10dCo widzisz
Nazwa zadania jest ucięta na pierwszym dwukropku
Dlaczego
W nazwie zadania jest dwukropek. Pierwszy dwukropek to separator, więc wszystko po nim czytane jest jako dane zadania: `Etap 1: projekt` rysuje się jako zadanie o nazwie po prostu `Etap 1`, a słowo projekt znika.
Rozwiązanie
Żadnych dwukropków w nazwach zadań. Użyj myślnika albo przenieś szczegół do nazwy sekcji.
gantt
dateFormat DD.MM.YYYY
section S
Etap 1: projekt :a1, 07.01.2026, 10dgantt
dateFormat DD.MM.YYYY
section S
Etap 1 — projekt :a1, 07.01.2026, 10dCo widzisz
Pasek kurczy się do niczego
Dlaczego
Czas trwania bez jednostki. `5` to nie pięć dni: jednostka jest obowiązkowa i bez niej zadanie nie dostaje sensownej długości. Wykres i tak się rysuje, z zadaniem, które sprawia wrażenie niezajmującego czasu.
Rozwiązanie
Zawsze pisz jednostkę: `5d`, `3w`, `2h`.
gantt
dateFormat DD.MM.YYYY
section S
Projektowanie :a1, 07.01.2026, 5gantt
dateFormat DD.MM.YYYY
section S
Projektowanie :a1, 07.01.2026, 5dCo widzisz
Czasy trwania się zgadzają, ale daty zakończenia nie zgadzają się z rzeczywistością
Dlaczego
Brakuje `excludes weekends`. Domyślnie zadanie na 10 dni to dziesięć dni kalendarzowych razem z weekendami, więc wszystko dłuższe niż tydzień roboczy kończy się na wykresie wcześniej niż w praktyce. W Polsce dochodzą do tego długie majówki, przez co rozjazd na przestrzeni kwartału robi się trudny do obronienia na spotkaniu.
Rozwiązanie
Dodaj `excludes weekends` blisko początku, a za nim daty świąt — chyba że praca naprawdę idzie siedem dni w tygodniu.
gantt
dateFormat DD.MM.YYYY
section S
Migracja :a1, 01.06.2026, 10dgantt
dateFormat DD.MM.YYYY
excludes weekends
section S
Migracja :a1, 01.06.2026, 10dUwagi o renderowaniu
Zmierzone na Mermaidzie 11.12.2, którego używa ta strona. Gantt zachowuje się inaczej niż wszystkie pozostałe typy.
Jedyny typ o stałej szerokości rysowania
Wszystkie inne diagramy na tej stronie rosną w tę stronę, w którą rośnie ich zawartość. Wykres Gantta ma zawsze 1264 piksele szerokości viewBoksu, czy ma trzy zadania, czy czterdzieści; zmienia się wyłącznie wysokość, zmierzona między mniej więcej 172 a 1060 pikselami. Oś jest ściskana albo rozciągana, by zmieścić się w tej stałej szerokości, i dlatego plan dwuletni i dwutygodniowy wyglądają na równie gęste. Jeśli paski wychodzą nieczytelnie cienkie, problemem jest zakres dat, a nie liczba zadań.
Kropki w dacie nie pomagają — parsowanie i tak jest amerykańskie
Powtarzam to tutaj, bo to najdroższa pułapka przy pisaniu po polsku. Zmierzone: przy `dateFormat YYYY-MM-DD` data `01.03.2026` nie zgłasza błędu ani ostrzeżenia, tylko ustawia się na 3 stycznia — kropka jako separator w niczym nie podpowiada silnikowi, że to dzień i miesiąc. To samo dzieje się z ukośnikiem. Zadeklarowany `dateFormat DD.MM.YYYY` rozwiązuje sprawę całkowicie. To pierwszy wiersz, jaki warto dopisać do każdego polskiego Gantta.
Eksport do PNG jest dokładny co do piksela
Gantt rysuje etykiety zwykłym tekstem SVG, a nie osadzonym HTML-em, więc — inaczej niż schemat blokowy, diagram klas, stanów i ER — daje się rasteryzować bezpośrednio. Wyeksportowany PNG odpowiada ekranowi dokładnie, bez przerysowywania i bez przesunięć w składzie tekstu.
To on najbardziej ucierpiał na błędzie eksportu do PNG
Ponieważ Mermaid wypisuje `width="100%"` i nie podaje wysokości, przeglądarka wyliczała rozmiar eksportu względem domyślnego pudełka 300×150, a szeroka i niska proporcja Gantta czyniła z tego najgorszy możliwy przypadek: wykres 1280×148 eksportował się jako PNG 600×58. Teraz eksport czyta viewBox i ten sam wykres wychodzi w 2560×296. Warto wiedzieć, jeśli masz stare PNG-i z wykresami Gantta: nie dadzą się powiększyć.
Gramatyka jest pobłażliwa wszędzie poza dwukropkiem
Brakujące sekcje, nieznane słowa kluczowe stanu, daty w złym formacie i czasy trwania bez jednostki — wszystko to się rysuje. Odrzucany jest wyłącznie wiersz zadania bez dwukropka. Ta asymetria to najużyteczniejsza rzecz, jaką można wiedzieć o pisaniu wykresów Gantta: fakt, że wykres się narysował, nie mówi prawie nic o tym, czy jest poprawny.
Kiedy lepszy będzie inny diagram
Jeśli daty są zgadywane, wykres Gantta przedstawi je z precyzją, na którą nie zasłużyły, a ktoś ci je potem wypomni. Schemat blokowy pokazujący kolejność bez dat jest uczciwszy i nie wymaga poprawek, gdy harmonogram się przesuwa.
Jeśli plan zmienia się co tydzień, tekstowy Gantt pod kontrolą wersji jest naprawdę dobry — z diffa widać, co się przesunęło — ale diagram, którego nikt nie aktualizuje, jest gorszy niż brak diagramu. Oceń trzeźwo, który z dwóch właśnie robisz.
A do wszystkiego, co dotyczy równoważenia obciążenia, przepustowości albo przydziału na osoby, to niewłaściwe narzędzie. Mermaid rysuje paski na kalendarzu; nie wie, kto wykonuje pracę ani czy ta osoba nie jest już zajęta.
Inne typy diagramów
Autor Dominik Malsch · Ostatnia aktualizacja: