Co to jest diagram czasowy?
Diagram czasowy to narzędzie do wizualizacji chronologicznej służące do mapowania zdarzeń lub punktów kontrolnych projektu wzdłuż liniowego odcinka czasu. Podczas gdy wykresy Gantta obsługują złożone zależności zadań i ich trwanie, diagram czasowy skupia się na kiedy— zapewnia jasną, łatwą do przeczytania narrację o rozwoju projektu lub cyklu wydania systemu.
Z użyciem Mermaid.js, możesz zdefiniować swój diagram czasowy przy użyciu prostego, hierarchicznego formatu tekstu. Silnik automatycznie obsługuje odstępy, formatowanie dat lub etykiet okresów oraz wyrównanie znaczników zdarzeń wzdłuż centralnej osi czasowej.
Podstawowy przewodnik składniowy
Aby stworzyć poprawny, działający diagram czasowy, musisz zdefiniować okres osi i przypisać zdarzenia do konkretnych sekcji.
1. Inicjowanie diagramu czasowego
Inicjujesz płótno przy użyciu słowa kluczowego timelinesłowo kluczowe. Struktura tworzona jest poprzez definiowanie sekcji (które działają jako grupy) i przypisywanie zdarzeń (lub dat) do tych sekcji.
timeline
tytuł Historia rozwoju systemu
sekcja 2025
Q1 : Wersja Alpha
sekcja 2026
Q2 : Wersja Beta
2. Dodawanie szczegółów do zdarzeń
Możesz dodać wiele szczegółów do jednego znacznika czasowego, używając listy rozdzielonej dwukropkami. Jest to przydatne do podsumowania kluczowych wyników lub numerów wersji związanych z konkretną datą lub okresem.
timeline
sekcja Q3 2026
Wydanie : v1.0.0
: Ulepszenia wydajności
: Naprawy bezpieczeństwa
Przykład rzeczywistego diagramu czasowego Mermaid.js: plan wydania produktu
Ten szablon modeluje wieloletni plan rozwoju produktu, grupując wydania według roku finansowego i wyróżniając kluczowe wyniki dla każdego cyklu.
linia czasu
tytuł Plan rozwoju produktu 2026-2027
sekcja 2026
Q1: Faza odkrywania
: Rozmowy z zaangażowanymi stronami
Q2: Rozwój MVP
: Projektowanie podstawowego interfejsu API
Q3: Wersja betowa
: Pętle zwrotu użytkowników
sekcja 2027
Q1: Pełny uruchomienie
: Skalowanie globalne
Najlepsze praktyki dla linii czasu
- Trzymaj kategorie krótkie: Użyj
sekcjaaby oznaczać grupowania najwyższego poziomu (takie jak lata lub główne fazy), utrzymując faktyczne zdarzenia pod nimi konkretne i działające. - Spójny format dat:Upewnij się, że zdarzenia na liście czasu są w kolejności chronologicznej w kodzie, ponieważ silnik Mermaid śledzi sekwencję Twojego skryptu, aby określić rozmieszczenie układu.
- Użyj szczegółów, aby nadać kontekst:Nie zatłaczaj głównej osi zbyt dużo tekstu. Użyj formatu zdarzenia wieloliniowego, aby rozłożyć „co się stało”, zamiast robić etykietę daty zbyt długą.