Pełny poradnik krok po kroku: Jak stworzyć diagram maszyny stanów (dla początkujących)

A Diagram stanu UML to potężne narzędzie wizualne, które modeluje zachowanie dynamiczne systemu, ilustrując, jak przechodzi on między różnymi stanami w odpowiedzi na zdarzenia. Zapisuje cykl życia obiektu lub procesu — pokazując, co może być być, co wywołuje zmianę i jakie działania zachodzą podczas zmian stanów — co czyni go idealnym narzędziem do zrozumienia skomplikowanych systemów, takich jak sygnalizacje świetlne, automaty do sprzedawania towarów, procesy logowania lub postacie w grach. Skupiając się na stanach (np. „Czerwony”, „Oczekiwanie na wpłatę” lub „Skok”), przejściach (wywoływanych zdarzeniami, takimi jak „wygaśnięcie timera” lub „naciśnięcie przycisku”) i warunkach (ochronach), diagramy stanów zapewniają przejrzystość, zapobiegają lukom logicznym i stanowią podstawę zarówno projektowania, jak i kodowania. Niezależnie od tego, czy jesteś początkującym uczącym się modelowania systemów, czy programistą tworzącym niezawodne oprogramowanie, opanowanie diagramów stanów wyposaży Cię w umiejętność myślenia, projektowania i komunikowania zachowania systemu z precyzją i jasnością.

State Machines for Everyone — Part 1 Introduction | by Alex Dodge | Well Red | Medium

💡 Cel: Naucz się modelować rzeczywiste systemy za pomocą maszyn stanów — od pomysłu po czysty, profesjonalnie wyglądający diagram.

🔑 Kluczowe pojęcia, które musisz zrozumieć na początku

Pojęcie Co oznacza Dlaczego to ma znaczenie
Stan Stan lub sytuacja, w jakiej się znajduje system (np. Czerwony, Oczekiwanie na monetę) Pokazuje, co dzieje się w danej chwili
Zdarzenie Coś, co wywołuje zmianę (np. Włożenie monety, Wygaśnięcie timera) Powoduje przemieszczanie się między stanami
Przejście Strzałka od jednego stanu do drugiego Łączy stany za pomocą zdarzeń
Stan początkowy Punkt początkowy (●) Zawsze jest jeden
Stan końcowy Koniec procesu (○) Opcjonalne — nie zawsze potrzebne
Warunek [warunek] Warunek, który musi być spełniony, aby przejście miało miejsce Dodaje logikę (np. czy wystarczająco dużo pieniędzy?)
Działanie / wejście / wykonanie Co się dzieje podczas wejścia, trwania lub wyjścia z stanu Dodaje zachowanie do stanów

📌 Myśl:
“Ten system może znajdować się w X stanach.
Gdy Y się zdarza, przechodzi do Z.”
To maszyna stanów!

🛠 Krok 0 – Umysł: Zadaj te pytania

Zanim narysujesz cokolwiek:

  • Jakie są jasno różne sytuacje w jakich sytuacjach może się znajdować?

  • Jakie zdarzeniaCzy (działania użytkownika, czas, błędy) powodują zmiany?

  • Czy może być w dwóch stanach jednocześnie? (Nie → podstawowe maszyny stanów są wzajemnie wykluczające się.)

👉 Przykład: A przełącznik światłajest alboWłączonyalboWyłączony. Nigdy oba jednocześnie.

🧩 Krok 1 – Wybierz jedną konkretną rzecz do zamodelowania

✅ Dobrymi wyborami dla początkujących są:

  • Przepust (zablokowany/odblokowany)

  • Sygnalizacja świetlna (czerwony/zielony/żółty)

  • Automat do sprzedawania towarów

  • System logowania

  • Status zamówienia: Utworzono → Opłacono → Wysłano → Dostarczono

❌ Unikaj:

  • „Cała sklep internetowy” → zbyt duży

  • „Doświadczenie użytkownika” → zbyt ogólnikowe

✏️ Zacznij od prostego.Najpierw opanuj mały przykład.

📌 Krok 2 – Wypisz stany (użyj rzeczowników lub czasowników obecnych)

Zapisz 4–8 realistycznych stanów.

Użyj przymiotników lub czasowników obecnych aby wyglądał jak stan:

  • Czerwony

  • Zielony

  • Żółty

  • Oczekiwanie na monetę

  • Wydawanie przedmiotu

  • Przygotowanie

  • Płatność nie powiodła się

✅ Porada: Jeśli masz więcej niż 10 stanów → podziel system na mniejsze części.

🖌 Krok 3 – Rysowanie stanów jako zaokrąglonych prostokątów

Użyj zaokrąglonych prostokątów:

[ Czerwony ]
[ Zielony ]
[ Oczekiwanie na monetę ]

✅ Narzędzia:

  • draw.io / diagrams.net (najlepszy darmowy wybór)

  • Excalidraw (efekt rysunku ręcznego)

  • PlantUML (oparte na tekście → łatwe do kontroli wersji)

  • Lucidchart / Miro

🔷 Krok 4 – Dodanie stanu początkowego (czarny punkt)

Narysuj wypełniony czarny okrąg z strzałką wskazującą na pierwszy stan.

[*] --> Czerwony

Znaczy to [*] oznacza „stan początkowy” — to punkt startowy.

➡️ Krok 5 – Rysowanie przejść zdarzeniami

Dla każdego stanu zapytaj:

„Co może się tu wydarzyć, co sprawi, że opuszczę ten stan?”

Oznacz strzałki:

zdarzenie [warunek] / działanie

🔹 Zacznij od prostego: po prostu zdarzenie lub zdarzenie / działanie

Typowe zdarzenia:

  • Włóż monetę

  • upływa czas

  • płatność nie powiodła się

  • przycisk został naciśnięty

  • przycisk pieszy

  • przekroczono czas

✅ Krok 6 – Dodaj stan końcowy (opcjonalnie)

Użyj okrąg z grubym obramowaniem dla stanu końcowego.

[Dostarczono] --> [●]

Nie wszystkie systemy mają stany końcowe (np. sygnalizacja świetlna, która działa bez końca).

🔁 Krok 7 – Dodaj realistyczne przypadki brzegowe

Zapytaj:

  • Czy można anulować? → dodaj Anuluj → powrót do Poczekaj

  • Czy czas się skończy? → przekroczono czas → powrót do Oczekiwanie

  • Czy może się nie powieść? → dodaj błąd → Powrót do początku

  • Czy może pozostać w tym samym stanie? → przejście samoistne

Przykład przejście samoistne (dodanie więcej pieniędzy):

[Ma kredyt] -- włożono monete --> [Ma kredyt]

🚦 Krok 8 – Użyj warunków (guards) do inteligentnej logiki

Gdy to samo zdarzenie prowadzi do różnych wyników, użyj warunków (guards).

Przykład:

Jeśli naciśniesz pedButton podczas Zielone, ale jeszcze nie ma zapotrzebowania → wchodzisz do Zielone z oczekującym pieszym.

Ale jeśli zapotrzebowanie jest już ustawione → po prostu je ignorujesz.

[Zielone dla pojazdów] --> [Zielone dla pojazdów] : pedButton / ustaw zapotrzebowanie = true

To jest przejście samoistne z działaniem — nie nowy stan.

🎯 Krok 9 – Dodaj akcje wejścia/ działania/wyjścia (opcjonalnie, ale potężnie)

Można zapisać akcjewewnątrz pola stanu:

[Czerwony]
wejście / włącz czerwony
wyjście / wyłącz czerwony
działanie / czekaj 30 sekund

Pomaga wyjaśnić zachowanie bez zatruwania przejść.

✅ Krok 10 – Ostateczna lista kontrolna (zadaj sobie pytania)

✅ Sprawdź Dlaczego to ma znaczenie
Jeden stan początkowy? Muszą zacząć się gdzieś
Wszystkie stany mają wychodzące strzałki (z wyjątkiem końcowego)? Brak martwych końców
Brak nieosiągalnych stanów? Każdy stan powinien być osiągalny
Czy przejścia są oznaczone zdarzeniami? Jasna przyczynowo-skutkowa relacja
Strzałki nie mówią „idź do X” — strzałka pokazuje kierunek Lepsze
Czy uwzględniono ścieżki anulowania / wygaśnięcia / błędów? Prawdziwe systemy zawodzą — przygotuj się na to
Czy diagram mieści się na ekranie? Czysty i czytelny

📋 Szybki przewodnik: składnia PlantUML (standard UML)

Symbol Znaczenie
[*] Stan początkowy
[*] --> Stan Rozpocznij od tego stanu
Stan --> Stan Przejście
zdarzenie [warunek] / działanie Etykieta na strzałce
stan "Nazwa" Stan o nazwie (opcjonalnie)
stan "X" jako X Alias dla złożonych nazw
notatka po prawej stronie Stanu Pole komentarza

🎯 Przykład 1: Prosty sygnał świetlny (cykl trzystanowy)

Idealne dla początkujących.

🧠 Zastosowanie w rzeczywistym świecie:

  • Podstawowy cykl sygnału świetlnego: Czerwony → Zielony → Żółty → Czerwony

✅ Stany:

  • Czerwony

  • Zielony

  • Żółty

🔄 Zdarzenia:

  • wygaśnięcie timera (po 30s, 25s, 5s)

🛠 Kod PlantUML (gotowy do kopiowania i wklejania):

@startuml
skinparam monochrome true
[*] --> Czerwony
Czerwony --> Zielony : po(30s)nwygaśnięcie timera
Zielony --> Żółty : po(25s)nwygaśnięcie timera
Żółty --> Czerwony   : po(5s)nwygaśnięcie timera

Czerwony   : entry / włącz czerwony
Zielony : entry / włącz zielony
Żółty: entry / włącz żółty

notatka po prawej stronie Czerwony
  Samochody muszą zatrzymać się
koniec notatki

notatka po prawej stronie Zielony
  Samochody mogą jechać
koniec notatki

notatka po prawej stronie Żółty
  Przygotuj się do zatrzymania
koniec notatki
@enduml

✅ Jak używać:
Przejdź do https://www.plantuml.com/plantuml, wklej kod i naciśnij „Generuj”.

🖼️ Wynik: czysty, wyglądający jak animacja diagram maszyn stanów.

🎯 Przykład 2: Realistyczny sygnał świetlny z prośbą pieszych

Ponieważ najbardziej edukacyjna wersja — wprowadza warunki, przejścia samodzielne i złożoną logikę.

🧠 Zastosowanie w rzeczywistym świecie:

  • Piesi naciskają przycisk, aby przekroczyć ulicę.

  • Światło czeka dłużej, jeśli ktoś czeka.

  • Po zakończeniu zielonego, przechodzi do żółtego → czerwonego → chodź → mигające nie chodź → z powrotem do zielonego.

📌 Kluczowe stany:

  1. ZieloneDlaPojazdów_BrakProśby – zielone, brak oczekujących pieszych

  2. ZieloneDlaPojazdów_PieszyCzekający – zielone, ktoś nacisnął przycisk

  3. ŻółteDlaPojazdów – żółte światło (bez chodzenia)

  4. WszystkieCzerwone – bufor bezpieczeństwa (bardzo krótki)

  5. PieszyChodź – włączone znak chodź

  6. PieszyUwolnienie – migające nie chodź (czas zwolnienia)

🧩 Kluczowe przejścia:

  • przyciskPieszy → jeśli nie czekają → ustaw prośbę

  •  → wygaśnięcie timera → przejdź do żółtego (jeśli czas zielonego został spełniony)

  • przyciskPieszy — podczas żółtego/czerwonego → pamiętaj o prośbie

  • timerWalk → przejdź do mигającego „nie chodź”

  • timerClearance → zresetuj i wróć do zielonego

🚨 Uwaga: Ta wersja używa warunków i przejść samodzielnych, pokazując dlaczego maszyny stanów są potężne.

✅ Kod PlantUML (pełnie działający, gotowy do użycia):

@startuml
skinparam monochrome true
skinparam shadowing false
skinparam dpi 120

[*] --> VehicleGreen_NoDemand

state "Zielone dla pojazdówn(brak żądania pieszych)" as VG_No
state "Zielone dla pojazdówn(piesi czekają)"   as VG_Wait
state "Żółte dla pojazdów"                  as VYellow
state "Wszystkie czerwonen(bufor bezpieczeństwa)"      as AllRed
state "Pieszy chodź"                    as PedWalk
state "Czas przejścian(migający znak „nie chodź”)" as PedClear

VG_No --> VG_Wait : pedButton / setPedDemand = true
VG_No --> VYellow : po(35s)nor (pedDemand && minGreenTimeMet)
VG_Wait --> VYellow : po(45s)ndłuższe zielone, gdy piesi czekają
VG_Wait --> VG_Wait : pedButton / zignoruj (już czekają)
VYellow --> AllRed : po(4s)
AllRed --> PedWalk : po(1s)
PedWalk --> PedClear : po(10s)nwygaszenie czasu chodzenia
PedClear --> VG_No : po(5s)nprzejście zakończonen/ resetPedDemand

note bottom of VG_No
  Normalne działanie
  Brak żądania pieszych
end note

note right of PedClear
  Piesi kończą przejście
  Migający znak „nie chodź”
end note

note right of VG_Wait
  Piesi nacisnęli przycisk
  Zieleń przedłuża się do 10s
end note

note right of VYellow
  Przygotowanie do zatrzymania
  Zmiana światła pojazdów
end note

note right of PedWalk
  Znak „chodź” jest włączony
  Piesi mogą przekroczyć ulicę
end note
@enduml

💡 Dlaczego to jest lepsze niż prosta wersja?

  • Pokazuje złożoność rzeczywistego świata

  • Demonstruje warunki (jeśli pedDemand)

  • Używa przejścia samodzielne (VG_Wait --> VG_Wait)

  • Modeluje rzeczywiste zachowanie: zieleń może być przedłużona!

  • Jasne rozdzielenie między pojazd i pieszy logika

🎓 Zalecane ćwiczenia praktyczne (wykonaj w kolejności)

# Przykład Czas Opanowane umiejętności
1 Wyłącznik światła (Włączony ↔ Wyłączony) 5 min Podstawowe przejścia
2 Bramka (Zablokowana ↔ Odblokowana) 10 min Zdarzenia, warunki
3 Sygnalizacja świetlna (cykl trójstanowy) 10 min Liczniki, akcje wejścia
4 Automat do sprzedaży (oczekiwanie → płatność → wydawanie) 15 min Wiele zdarzeń, logika pieniędzy
5 Logowanie (puste → wpisywanie → wysyłanie → sukces/porażka) 15 min Obsługa błędów, stany końcowe
6 Stan zamówienia (6 stanów) 20 min Modelowanie systemów z życia wziętych

✅ Zacznij od punktów #1–3 na papierze lub w draw.io. Następnie użyj PlantUML do reszty.

🧠 Ostateczne porady dotyczące sukcesu

  • Zacznij od małego — nie próbuj zawrzeć wszystkiego naraz.

  • Użyj rzeczywistych nazw — Oczekiwanie na monetę, a nie Stan1.

  • Jasno oznacz przejścia — przycisk naciśnięty, przekroczenie limitu czasu, płatność nie powiodła się.

  • Najpierw narysuj to ręcznie — a następnie z cyfrowym przekształceniem.

  • Spróbuj to przetestować w myślach: „Czy ten system może się zawiesić?” → jeśli tak, dodaj przejście.

📌 Podsumowanie: Twoja lista kontrolna maszyny stanów

✅ Jeden [*] (stan początkowy)
✅ Zaokrąglone prostokąty dla stanów
✅ Strzałki dla przejść
✅ Zdarzenia na strzałkach (po(30s), przyciskPieszych)
✅ Warunki tam, gdzie są potrzebne ([żądaniePieszych])
✅ Przejścia samodzielne dla powtarzanych działań
✅ Działania wejścia/wyjścia dla zachowania
✅ Czyste ułożenie, czytelny czcionka

🎯 Ostateczne słowa: jesteś gotowy!

Dowiedziałeś się już:

  • Co to jest diagram maszyn stanów to

  • Jak myśleć w kategoriach stanów i zdarzeń

  • Jak rysować i czytać je jak profesjonalista

  • Jak modelować rzeczywiste systemy, takie jak sygnalizacja świetlna

  • Jak korzystać z PlantUMLpisać czyste, utrzymywalne diagramy

🎉 Nie uczysz się tylko UML — uczysz się, jak modelować rzeczywiste systemy, po jednym stanie naraz.

📌 Kolejne kroki (Twój plan nauki)

  1. Narysuj ręcznie sygnał świetlny z trzema stanami— bez narzędzi, tylko papier.

  2. Spróbuj PlantUMLz kodem powyżej — zobacz, jak się renderuje.

  3. Zmodyfikuj: Zmień czasy oczekiwania. Dodaj stan „przeciążenie awaryjne”.

  4. Spróbuj maszynę do sprzedawania towarów→ ta sama logika, ale z pieniędzmi.

  5. Narysuj swój własny: Postać z gry (idzie → skacze → atakuje → martwy).

💬 Potrzebujesz pomocy? Spróbuj: „Próbuję zamodelować system [Twój system]— możesz mi pomóc stworzyć maszynę stanów?”

🙌 Ostateczna myśl

🔄 Wszystko, co się zmienia — niezależnie czy to światło, logowanie czy zamówienie — można zamodelować za pomocą maszyny stanów.
Nie musisz być programistą, żeby to zrozumieć. Wystarczy, że zadasz sobie pytanie:„W jakim stanie może się znajdować to coś, a co powoduje jego zmianę?”

✅ Teraz już wiesz, jak tworzyć profesjonalne, działające diagramy maszyn stanów — od początkującego do pewnego modelera.

🎉 Miłego rysowania diagramów!
Daj mi znać, jeśli chcesz wersję do druku w formacie PDF, quiz lub wyzwanie programistyczne, by sprawdzić swoje umiejętności.

Leave a Reply