🕰️ Mermaid

Oś czasu

Opowiedz historię rok po roku

Otwórz ten przykład w edytorze Wygeneruj własny z AI

Czym jest Oś czasu?

Oś czasu układa wydarzenia chronologicznie: historia firmy, kamienie milowe projektu, ewolucja produktu, retrospektywy incydentów. Osie czasu Mermaid grupują wiele wydarzeń w jednym okresie i pozostają czytelne w każdym rozmiarze.

Oś czasu to diagram retrospektywy: postmortemy incydentów, slajdy z historią firmy, sekcja „jak tu doszliśmy” w dokumencie strategicznym. Wyjątkowo dobrze uwidacznia luki — trzy wydarzenia w marcu i nic aż do września to już opowieść sama w sobie. Czego nie potrafi, to skalować: okresy są etykietami rozstawionymi równomiernie niezależnie od odstępu, a nic nie jest za Ciebie sortowane. Okres nie niesie też niczego poza tekstem — żadnego właściciela, odnośnika ani statusu do filtrowania.

Żywy przykład

Kod Mermaid

timeline
    title History of the project
    2024 : Idea & prototype
    2025 : First customers
         : Seed funding
    2026 : EU expansion
         : AI features

Żywy przykład

Kiedy go używać

Prezentowanie historii firmy lub produktu

Dokumentowanie chronologii incydentów na potrzeby postmortemów

Pokazywanie kamieni milowych roadmapy według kwartałów lub lat

Częste błędy

Okresy nigdy nie są sortowane

Mermaid rysuje okresy w kolejności zapisu, więc wpis z 2026 umieszczony nad wpisem z 2024 tam pozostanie. Nie ma żadnej kontroli chronologii ani ostrzeżenia — posortuj źródło samodzielnie przed publikacją.

Okresy nad pierwszą sekcją znikają

Gdy tylko oś czasu zawiera choć jedną sekcję, każdy okres zadeklarowany przed tą pierwszą linią section wypada z renderu — po cichu i bez żadnego błędu. Daj tym wczesnym okresom własną sekcję albo zrezygnuj z sekcji w ogóle.

Zdania zamiast wydarzeń

Treść wydarzenia zawija się na stałej szerokości, więc całe zdanie zmienia się w cztery ułożone pod sobą linie i rozdyma wysokość całego wykresu. Ogranicz wydarzenia do kilku słów, a szczegóły przenieś do dokumentu wokół.

Podstawowa składnia

.mmd

timeline
    title My timeline
    2025 : Event A
         : Event B
    2026 : Event C

timeline title History of the project
Tytuł jest opcjonalny, ale pełni rolę podpisu, co zaczyna mieć znaczenie, gdy diagram trafia samodzielnie na slajd albo do postmortemu.
2025 : First customers
Po lewej stronie dwukropka stoi etykieta okresu — rok, kwartał, Sprint 12, cokolwiek. Nigdy nie jest parsowana jako data, więc dowolny format zadziała.
2024 : Idea : Prototype
Kolejne dwukropki w tej samej linii dopisują następne wydarzenia do tego samego okresu, co utrzymuje zwięzłość źródła, gdy jeden rok mieści kilka ważnych momentów.
section Early days 2024 : Idea
Sekcje łączą kolejne okresy w jedną erę i kolorują je razem — przydaje się to do rozdzielenia tego, co przed i po rundzie finansowania, migracji albo awarii.

Pytania o ten diagram

Czy jeden okres może zawierać kilka wydarzeń?

Tak — dodaj kolejne linie zaczynające się od „:” pod tym samym okresem, a ułożą się pionowo pod tą datą.

Oś czasu czy wykres Gantta?

Oś czasu do opowiadania o przeszłości lub ujęcia ogólnego (wydarzenia z datami). Gantt do planowania pracy (zadania z czasami trwania i zależnościami).

Czy mogę dodać oś czasu Mermaid do postmortemu w Confluence?

Confluence nie ma natywnego wsparcia dla Mermaida, więc użyj makra z Marketplace albo wklej wyeksportowany SVG lub PNG. GitHub i GitLab renderują osie czasu wprost z bloku ogrodzonego, więc raporty z incydentów trzymane w repozytorium nie wymagają dodatkowych narzędzi.

Jak pokolorować sekcje osi czasu?

Sekcje biorą kolory ze skali motywu. Nadpiszesz je dyrektywą init w pierwszej linii — %%{init: {"themeVariables": {"cScale0": "#4f46e5"}}}%% — gdzie cScale0 to pierwsza sekcja, cScale1 druga, aż do cScale11. Paleta zostaje wtopiona w wyeksportowany SVG.

Czy mogę ustawić oś czasu pionowo?

Nie — osie czasu renderują się poziomo i nie ma ustawienia kierunku. Nigdy się nie zawijają: diagram robi się wyłącznie coraz szerszy. Długą historię, która ma zmieścić się w wąskiej kolumnie, znacznie lepiej wykorzysta schemat blokowy z góry na dół albo gitGraph TB:.

Czy mogę zamienić raport z incydentu w oś czasu automatycznie?

Wklej raport do Mermaid Studio, a AI wydobędzie datowane wydarzenia na oś czasu, którą potem poprawisz. Traktuj to jak pierwszą wersję: okresy zachowują kolejność, w jakiej zostały wydobyte, więc przed publikacją sprawdź chronologię.

Oś czasu czy inny typ diagramu?

Oś czasu czy podróż użytkownika?

Obie układają kroki od lewej do prawej. Oś czasu mówi kiedy: datowane wydarzenia, bez aktora i bez ocen. Podróż mówi, jak to się odczuwało: uporządkowane kroki, aktor, ocena satysfakcji. Jeśli nikt tych wydarzeń nie przeżył, potrzebujesz osi czasu.

Oś czasu czy graf Git?

Oś czasu jest płaska — każde wydarzenie leży na jednej linii. Graf Git się rozgałęzia. Historia wydań z równoległymi gałęziami utrzymaniowymi wymaga grafu Git; opowieść o produkcie, w której liczy się kolejność, a nie równoległość, wymaga osi czasu.

Poznaj pozostałe typy diagramów

🔀 Schemat blokowy 💬 Diagram sekwencji 🧩 Diagram klas 🗄️ Diagram związków encji 🔄 Diagram stanów 📅 Wykres Gantta 🥧 Wykres kołowy 🧠 Mapa myśli 🌿 Graf Git 🚶 Podróż użytkownika 🎯 Wykres ćwiartkowy

Stwórz swój Oś czasu już teraz

Opisz go naturalnym językiem — AI napisze kod Mermaid za Ciebie.

Otwórz Mermaid Studio