🔄 Mermaid

Diagram stanów

Uchwyć każdy stan i przejście systemu

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

Czym jest Diagram stanów?

Diagram stanów pokazuje stany, w jakich może znajdować się obiekt, oraz zdarzenia, które go między nimi przenoszą: cykle życia zamówień, obiegi dokumentów, stany UI, obsługa połączeń. Niezbędny zawsze, gdy liczy się pytanie „w jakim jesteśmy stanie?”.

Diagramy stanów należą do specyfikacji, w których pytanie „czy zamówienie może wrócić ze zwróconego do wysłanego?” musi mieć odpowiedź. To jedyny diagram, który uwidacznia przejścia niedozwolone: czego nie narysowano, tego nie wolno, dzięki czemu obrazek staje się planem testów. Ich ograniczeniem jest kombinatoryka — dwie niezależne maszyny na jednym diagramie dają iloczyn, którego nikt nie przeczyta. Rozdziel je albo zagnieźdź w stanach złożonych.

Żywy przykład

Kod Mermaid

stateDiagram-v2
    [*] --> Draft
    Draft --> Review : submit
    Review --> Draft : request changes
    Review --> Approved : approve
    Approved --> Published : publish
    Published --> Archived : archive
    Archived --> [*]

Żywy przykład

Kiedy go używać

Modelowanie cykli życia zamówień, zgłoszeń lub dokumentów

Projektowanie stanów komponentów UI i połączeń

Specyfikowanie reguł biznesowych wokół zmian statusu

Częste błędy

Wielowyrazowe nazwy stanów rozpadają się

Waiting for payment --> Paid tworzy trzy stany: Waiting, for oraz payment. Nazwij stan raz przez state "Waiting for payment" as waiting, a potem w każdym przejściu używaj krótkiego identyfikatora waiting.

Zagnieżdżone [*] to nie start diagramu

Zapis [*] wewnątrz stanu złożonego oznacza punkt wejścia tego stanu, a nie całego diagramu. Jeśli każde [*] jest zagnieżdżone, sam diagram nie ma punktu wejścia i czytelnik nie wie, od czego zacząć.

Etykiety przejść to zdarzenia, nie kod

Tekst po dwukropku jest dowolny: score > 80 zostanie wyświetlone, ale nigdy obliczone, a dwa przejścia mogą bez protestu nieść sprzeczne warunki. Czytaj te etykiety jak prozę, nie jak logikę.

Podstawowa składnia

.mmd

stateDiagram-v2
    [*] --> Idle
    Idle --> Active : start
    Active --> [*] : stop

stateDiagram-v2 direction LR
Używaj renderera -v2, bo to pod niego pisana jest obecna składnia. Dodane direction LR pasuje do długich, liniowych cykli życia, które inaczej uciekną poza dolną krawędź strony.
[*] --> Draft Draft --> Review : submit
Zapis [*] po lewej stronie strzałki to znacznik startu, a po prawej — stan końcowy. Tekst po dwukropku nazywa zdarzenie wyzwalające przejście.
state Payment { [*] --> Pending Pending --> Captured }
Stan złożony chowa całą podmaszynę za jednym prostokątem. Przejście może celować w sam stan złożony, wchodząc do niego przez jego własny znacznik startu.
state gate <<choice>> gate --> Approved : score > 80
Pseudostan wyboru rozgałęzia diagram na warunku, bez wymyślania dla niego sztucznego stanu. Znaczniki <<fork>> i <<join>> robią to samo dla ścieżek równoległych.

Pytania o ten diagram

Czym to się różni od schematu blokowego?

Schemat blokowy śledzi proces od początku do końca. Diagram stanów opisuje wszystkie możliwe stany jednej rzeczy i zdarzenia wywołujące przejścia — łącznie z cyklami i stanami błędów.

Czy Mermaid obsługuje stany zagnieżdżone?

Tak — stateDiagram-v2 obsługuje stany złożone (zagnieżdżone), rozwidlenia, złączenia, wybory i notatki, pozwalając budować realistyczne maszyny stanów.

Czy diagram stanów w Mermaid wyraża warunki oraz akcje wejścia i wyjścia?

Nie formalnie. Przejście niesie jedną etykietę z dowolnym tekstem, więc warunek w rodzaju score > 80 jest tam prozą i nic go nie egzekwuje. Nie ma też składni akcji wejścia ani wyjścia — umieść je w notatce obok stanu.

Jak pokazać stan, który wraca do samego siebie?

Wpisz ten sam stan po obu stronach strzałki: Draft --> Draft : edit. Mermaid rysuje pętlę przy prostokącie i zachowuje etykietę, a kilka przejść między tą samą parą stanów zachowuje osobne etykiety, zamiast się zlewać w jedną.

Czy mogę pokolorować jeden stan inaczej?

Tak. classDef bad fill:#fdd definiuje styl, a class Failed bad go stosuje, dzięki czemu stany błędu albo końcowe rzucają się w oczy. Stylowanie żyje w źródle, więc przetrwa eksport do PNG i SVG.

Jak wyeksportować diagram stanów do prezentacji?

Eksportuj PNG w 2× albo 4× na slajdy wyświetlane z projektora, albo SVG, jeśli narzędzie je przyjmuje — SVG zostaje ostry i zachowuje zaznaczalny tekst. Wersją, którą edytujesz i eksportujesz ponownie, pozostaje źródło Mermaid.

Diagram stanów czy inny typ diagramu?

Diagram stanów czy diagram sekwencji?

Diagram sekwencji pokazuje jedną ścieżkę przez wielu uczestników; diagram stanów — wszystkie ścieżki jednego uczestnika. Jeśli interesuje Cię, co odpowiedziało API, sięgnij po sekwencję. Jeśli pytasz, czy da się tu jeszcze wrócić, sięgnij po stany.

Diagram stanów czy diagram klas?

Diagram klas nadaje zamówieniu pola i relacje; diagram stanów nadaje mu życie. Diagram klas pisz, gdy ludzie pytają, jakie dane istnieją, a diagram stanów wtedy, gdy pytają, które przejścia kod ma odrzucać.

Poznaj pozostałe typy diagramów

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

Stwórz swój Diagram stanów już teraz

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

Otwórz Mermaid Studio