Ein UML-Zustandsdiagramm ist ein leistungsfähiges visuelles Werkzeug, das das dynamische Verhalten eines Systems modelliert, indem es zeigt, wie es sich in Reaktion auf Ereignisse zwischen verschiedenen Zuständen bewegt. Es erfasst den Lebenszyklus eines Objekts oder Prozesses – indem es zeigt, was es sein kann sein kann, was eine Änderung auslöst und welche Aktionen während Zustandsänderungen stattfinden – wodurch es ideal für das Verständnis komplexer Systeme wie Ampeln, Automaten, Anmeldeprozesse oder Spielcharaktere ist. Indem man sich auf Zustände (wie „Rot“, „Warten auf Zahlung“ oder „Springen“), Übergänge (ausgelöst durch Ereignisse wie „Zeit abgelaufen“ oder „Taste gedrückt“) und Bedingungen (Wächter) konzentriert, bietet das Zustandsdiagramm Klarheit, verhindert logische Lücken und dient als Grundlage sowohl für die Gestaltung als auch für den Code. Ob Sie nun ein Anfänger sind, der Systemmodellierung lernt, oder ein Entwickler, der robuste Software erstellt, das Meistern von Zustandsdiagrammen verleiht Ihnen die Fähigkeit, Systemverhalten präzise und klar zu denken, zu gestalten und zu kommunizieren.

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

💡 Ziel: Lernen Sie, realweltliche Systeme mit Zustandsmaschinen zu modellieren – von der Idee bis hin zu einem sauberen, professionell aussehenden Diagramm.

🔑 Wichtige Konzepte, die Sie zuerst verstehen müssen

Begriff	Was es bedeutet	Warum es wichtig ist
Zustand	Ein Zustand oder eine Situation, in der sich das System befindet (z. B. `Rot`, `Warten auf Münze`)	Zeigt an, was im Moment geschieht
Ereignis	Etwas, das eine Änderung auslöst (z. B. `Münze einwerfen`, `Zeit abgelaufen`)	Verursacht Bewegung zwischen Zuständen
Übergang	Ein Pfeil von einem Zustand zum anderen	Verbindet Zustände über Ereignisse
Anfangszustand	Der Ausgangspunkt (●)	Es gibt immer genau einen
Endzustand	Ende des Prozesses (○)	Optional — nicht immer erforderlich
Wächter [Bedingung]	Bedingung, die erfüllt sein muss, damit die Transition stattfindet	Fügt Logik hinzu (z. B. wenn genug Geld vorhanden?)
Aktion / Eintritt/tun	Was passiert beim Betreten, während oder Verlassen eines Zustands	Fügt Zuständen Verhalten hinzu

📌 Denken Sie:
„Dieses System kann sich in X Zuständen.
Wenn Y eintritt, wechselt es zu Z.”
Das ist eine Zustandsmaschine!

🛠 Schritt 0 – Einstellung: Stellen Sie diese Fragen

Bevor Sie etwas zeichnen:

In welchen deutlich unterschiedlichen Situationen kann sich dieses Ding befinden?
Welche EreignisseVerursachen (Benutzeraktionen, Zeit, Fehler) Änderungen?
Kann es gleichzeitig in zwei Zuständen sein? (Nein → einfache Zustandsmaschinen sind wechselseitig ausschließend.)

👉 Beispiel: Ein Lichtschalterist entweder Ein oder Aus. Nie beides gleichzeitig.

🧩 Schritt 1 – Wähle ein konkretes Objekt zum Modellieren aus

✅ Gute Anfänger-Auswahlen:

Drehkreuz (verriegelt/entriegelt)
Ampel (rot/green/gelb)
Verkaufsautomat
Anmelde-System
Bestellstatus: Erstellt → Bezahlt → Versandt → Geliefert

❌ Vermeide:

„Der gesamte Online-Shop“ → zu groß
„Die Benutzererfahrung“ → zu ungenau

✏️ Beginne einfach.Beherrsche zuerst das kleine Beispiel.

📌 Schritt 2 – Liste die Zustände auf (Verwende Substantive oder Partizipien)

Schreibe 4–8 realistische Zustände.

Verwende Adjektive oder Partizipien um es wie einen Zustand aussehen zu lassen:

Rot
Grün
Gelb
Warten auf Münze
Ausgabe des Artikels
Vorbereiten
Zahlung fehlgeschlagen

✅ Tipp: Wenn du mehr als 10 Zustände hast → teile das System in kleinere Systeme auf.

🖌 Schritt 3 – Zeichne Zustände als abgerundete Rechtecke

Verwende abgerundete Rechtecke:

[ Rot ]
[ Grün ]
[ Warten auf Münze ]

✅ Werkzeuge:

draw.io / diagrams.net (beste kostenlose Wahl)

Excalidraw (Handzeichnungseffekt)

PlantUML (textbasiert → einfach in Versionskontrolle integrierbar)

Lucidchart / Miro

🔷 Schritt 4 – Füge den Anfangszustand (schwarzer Punkt) hinzu

Zeichne einen gefüllten schwarzen Kreis mit einem Pfeil, der auf den ersten Zustand zeigt.

[*] --> Rot

Der [*] bedeutet „Anfangszustand“ – es ist der Ausgangspunkt.

➡️ Schritt 5 – Zeichne Übergänge mit Ereignissen

Für jeden Zustand frage:

„Was kann hier passieren, das mich aus diesem Zustand herausführt?“

Beschrifte die Pfeile mit:

Ereignis [Wächter] / Aktion

🔹 Fang einfach an: einfach nur Ereignis oder Ereignis / Aktion

Häufige Ereignisse:

Münze einwerfen
Zeit läuft ab
Zahlung fehlgeschlagen
Knopf gedrückt
Fußgängerknopf
Zeitüberschreitung

✅ Schritt 6 – Endzustand hinzufügen (optional)

Verwende eine Kreis mit dickem Rand für Endzustand.

[Zugestellt] --> [●]

Nicht alle Systeme haben Endzustände (wie Ampeln, die ewig laufen).

🔁 Schritt 7 – Realistische Sonderfälle hinzufügen

Fragen:

Kann man abbrechen? → füge hinzu Abbrechen → zurück zu Warten
Läuft die Zeit ab? → Zeitüberschreitung → zurück zu Warten
Kann es fehlschlagen? → füge hinzu Fehler → Zurück zum Start
Kann es im selben Zustand verbleiben? →Selbstübergang

Beispiel fürSelbstübergang (mehr Geld hinzufügen):

[Hat Guthaben] -- Münze eingelegt --> [Hat Guthaben]

🚦 Schritt 8 – Verwenden Sie Wächter für intelligente Logik

Wenndas gleiche Ereignisführt zuverschiedene Ergebnisse, verwenden SieWächter.

Beispiel:

Wenn Sie drückenpedButton währendGrün, aber es gibt noch keine Nachfrage → Sie gehen inGrün mit Fußgänger wartend.

Aber wenn die Nachfrage bereits gesetzt ist → ignorieren Sie sie einfach.

[Fahrzeug Grün] --> [Fahrzeug Grün] : pedButton / Nachfrage festlegen = true

Dies ist einSelbstübergang mit Aktion – kein neuer Zustand.

🎯 Schritt 9 – Eintritts-/Durchführungs-/Ausgangsaktionen hinzufügen (Optional, aber mächtig)

Sie können Aktionen schreibeninnerhalb des Zustandskastens:

[Rot]
Eintritt / Rot einschalten
Ausgang / Rot ausschalten
durchführen / 30 Sekunden warten

Hilft, das Verhalten zu klären, ohne Übergänge zu überladen.

✅ Schritt 10 – Abschluss-Checkliste (Stellen Sie sich selbst die Fragen)

✅ Überprüfen	Warum es wichtig ist
Ein anfänglicher Zustand?	Muss irgendwo beginnen
Alle Zustände haben ausgehende Pfeile (außer dem Endzustand)?	Keine Sackgassen
Keine unerreichbare Zustände?	Jeder Zustand sollte erreichbar sein
Übergänge mit Ereignissen beschriftet?	Klare Ursache-Wirkung-Beziehung
Pfeile sagen nicht „gehe zu X“ – der Pfeil zeigt nur die Richtung an	Übersichtlicher
Abbruch-/Zeitüberschreitung-/Fehlerpfade enthalten?	Reale Systeme versagen – seien Sie darauf vorbereitet
Passt das Diagramm auf den Bildschirm?	Übersichtlich und lesbar

📋 Kurzübersicht: PlantUML-Syntax (UML-Standard)

Symbol	Bedeutung
`[*]`	Anfangszustand
`[*] --> Zustand`	Beginnen Sie in diesem Zustand
`Zustand --> Zustand`	Übergang
`Ereignis [Wächter] / Aktion`	Beschriftung auf Pfeil
`Zustand "Name"`	Benannter Zustand (optional)
`Zustand "X" als X`	Alias für komplexe Namen
`Hinweis rechts vom Zustand`	Kommentarfeld

🎯 Beispiel 1: Einfacher Ampelzyklus (3-Zustand-Zyklus)

Perfekt für absolute Anfänger.

🧠 Einsatz im echten Leben:

Grundzyklus einer Ampel: Rot → Grün → Gelb → Rot

✅ Zustände:

Rot
Grün
Gelb

🔄 Ereignisse:

Zeit abgelaufen (nach 30s, 25s, 5s)

🛠 PlantUML-Code (Kopierfertig):

@startuml
skinparam monochrome true
[*] --> Rot
Rot --> Grün : nach(30s)nZeit abgelaufen
Grün --> Gelb : nach(25s)nZeit abgelaufen
Gelb --> Rot   : nach(5s)nZeit abgelaufen

Rot   : Eintritt / Rot ein schalten
Grün : Eintritt / Grün ein schalten
Gelb: Eintritt / Gelb ein schalten

Hinweis rechts von Rot
  Fahrzeuge müssen anhalten
end Hinweis

Hinweis rechts von Grün
  Fahrzeuge dürfen fahren
end Hinweis

Hinweis rechts von Gelb
  Vorbereitung zum Anhalten
end Hinweis
@enduml

✅ Wie man verwendet:
Gehe zu https://www.plantuml.com/plantuml, füge den Code ein und drücke „Generieren“.

🖼️ Ausgabe: Ein sauber aussehendes, animiertes Zustandsmaschinen-Diagramm.

🎯 Beispiel 2: Realistisches Ampel-System mit Fußgängeranforderung

Die am lehrreichsten Version — führt Wächter, Selbstübergänge und komplexe Logik ein.

🧠 Praxisbeispiel:

Fußgänger drücken eine Taste, um die Straße zu überqueren.
Die Ampel wartet länger, wenn jemand wartet.
Nach Ende des Grüns geht sie auf Gelb → Rot → Fußgängerzeichen → blinkendes Nicht-Überqueren → zurück auf Grün.

📌 Hauptzustände:

FahrzeugGrün_KeinBedarf – Grün, kein Fußgänger wartet
FahrzeugGrün_FußgängerWartet – Grün, jemand hat die Taste gedrückt
FahrzeugGelb – Gelblicht (kein Überqueren)
AlleRot – Sicherheitspuffer (sehr kurz)
FußgängerZeichen – Überqueren-Zeichen eingeschaltet
FußgängerFreigabe – blinkendes Nicht-Überqueren (Freigabefrist)

🧩 Hauptübergänge:

FußgängerTaste → falls nicht wartend → Bedarf setzen
→ Zeit abgelaufen → auf Gelb wechseln (falls Grünzeit erreicht)
FußgängerTaste – während Gelb/Rot → Bedarf merken
timerWalk → zu blinkendem Nicht-Gehen wechseln
timerClearance → zurücksetzen und zu Grün wechseln

🚨 Hinweis: Diese Version verwendet Wächter und Selbstübergänge, zeigt warum Zustandsmaschinen mächtig sind.

✅ PlantUML-Code (Vollständig funktionstüchtig, sofort verwendbar):

@startuml
skinparam monochrome true
skinparam shadowing false
skinparam dpi 120

[*] --> VehicleGreen_NoDemand

state "Fahrzeug Grünn(kein Fußgängerbedarf)" as VG_No
state "Fahrzeug Grünn(Fußgänger wartet)"   as VG_Wait
state "Fahrzeug Gelb"                  as VYellow
state "Alle Rotn(Sicherheitspuffer)"      as AllRed
state "Fußgänger Gehen"                    as PedWalk
state "Fußgänger Freigaben(blinkendes Nicht-Gehen)" as PedClear

VG_No --> VG_Wait : pedButton / setPedDemand = true
VG_No --> VYellow : nach(35s)nor (pedDemand && minGreenTimeMet)
VG_Wait --> VYellow : nach(45s)nverlängertes Grün bei wartendem Fußgänger
VG_Wait --> VG_Wait : pedButton / ignorieren (bereits wartend)
VYellow --> AllRed : nach(4s)
AllRed --> PedWalk : nach(1s)
PedWalk --> PedClear : nach(10s)nLaufzeit abgelaufen
PedClear --> VG_No : nach(5s)nFreigabe abgeschlossenn/ resetPedDemand

note bottom of VG_No
  Normalbetrieb
  Kein Fußgängerbedarf
end note

note right of PedClear
  Fußgänger beenden die Querung
  Blinkendes Nicht-Gehen-Schild
end note

note right of VG_Wait
  Fußgänger hat die Taste gedrückt
  Grün wird um bis zu 10s verlängert
end note

note right of VYellow
  Vorbereitung zum Stoppen
  Fahrzeuglicht wechselt
end note

note right of PedWalk
  Gehen-Schild ist aktiv
  Fußgänger dürfen queren
end note
@enduml

💡 Warum dies besser ist als die einfache Version?

Zeigt Realitätsnähe

Zeigt auf Wächter (falls pedDemand)

Verwendet Selbstübergänge (VG_Wait --> VG_Wait)

Modelliert echtes Verhalten: Grün kann verlängert werden!

Klare Trennung zwischen Fahrzeug und Fußgänger Logik

🎓 Empfohlene Übungsbeispiele (in der Reihenfolge bearbeiten)

#	Beispiel	Zeit	Gelernte Fähigkeiten
1	Lichtschalter (Ein ↔ Aus)	5 min	Grundlegende Übergänge
2	Drehkreuz (Verriegelt ↔ Entriegelt)	10 min	Ereignisse, Wächter
3	Ampel (3-Zustands-Zyklus)	10 min	Timer, Eingangsaktionen
4	Verkaufsautomat (Warten → Bezahlen → Ausgeben)	15 min	Mehrere Ereignisse, Geldlogik
5	Anmeldung (leer → Eingabe → Absenden → Erfolg/Fehler)	15 min	Fehlerbehandlung, Endzustände
6	Bestellstatus (6 Zustände)	20 min	Modellierung von realen Systemen

✅ Beginnen Sie mit Nr. 1–3 auf Papier oder in draw.io. Verwenden Sie dann PlantUML für den Rest.

🧠 Letzte Tipps für den Erfolg

Beginnen Sie klein — versuchen Sie nicht, alles auf einmal einzubeziehen.
Verwenden Sie echte Namen — Warten auf Münze, nicht Zustand1.
Übergänge klar beschriften — Knopf gedrückt, Zeitüberschreitung, Zahlung fehlgeschlagen.
Zeichnen Sie es zuerst von Hand — und digitalisieren Sie es dann.
Testen Sie es mental: „Kann dieses System stecken bleiben?“ → Wenn ja, fügen Sie einen Übergang hinzu.

📌 Zusammenfassung: Ihre Checkliste für den Zustandsautomat

✅ Ein [*] (Anfangszustand)
✅ Runde Rechtecke für Zustände
✅ Pfeile für Übergänge
✅ Ereignisse an Pfeilen (nach(30s), fußgängerButton)
✅ Wächter dort, wo nötig ([fußgängerAnfrage])
✅ Selbstübergänge für wiederholte Aktionen
✅ Ein- und Ausgangsaktionen für Verhalten
✅ Sauberes Layout, lesbare Schrift

🎯 Abschließende Worte: Sie sind jetzt bereit!

Sie haben gerade gelernt:

Was ein Zustandsmaschinen-Diagrammist
Wie man in Zuständen und Ereignissen denkt
Wie man zeichnetund liestsie wie ein Profi
Wie man reale Systeme modelliert, wie Ampeln
Wie man PlantUML verwendet saubere, wartbare Diagramme erstellen

🎉 Sie lernen nicht nur UML — Sie lernen, wie man echte Systeme modellieren kann, ein Zustand nach dem anderen.

📌 Nächste Schritte (Ihr Lernpfad)

Zeichnen Sie die 3-Zustands-Ampel von Hand — keine Werkzeuge, nur Papier.
Probieren Sie PlantUML aus mit dem Code oben — sehen Sie es rendern.
Ändern: Ändern Sie die Wartezeiten. Fügen Sie den Zustand „Notfallüberschreibung“ hinzu.
Probieren Sie die Automaten aus → gleiche Logik, aber mit Geld.
Zeichnen Sie Ihr eigenes: Ein Spielfigur (laufen → springen → angreifen → tot).

💬 Benötigen Sie Hilfe? Versuchen Sie dies: „Ich versuche, ein [Ihr System] — können Sie mir helfen, einen Zustandsautomaten zu erstellen?“

🙌 Letzte Überlegung

🔄 Alles, was sich verändert — egal ob eine Lampe, eine Anmeldung oder eine Bestellung — kann mit einem Zustandsautomaten modelliert werden.
Sie müssen kein Programmierer sein, um es zu verstehen. Sie müssen nur fragen: „Was kann diese Sache sein, und was verursacht die Veränderung?“

✅ Sie wissen nun, wie man ein professionelles, funktionierendes Zustandsdiagramm erstellt — von Anfänger bis hin zu einem selbstsicheren Modellierer.

🎉 Viel Spaß beim Zeichnen von Diagrammen!
Lassen Sie mich wissen, wenn Sie eine druckbare PDF-Version, eine Quiz oder eine Programmieraufgabe zur Überprüfung Ihrer Fähigkeiten wünschen.

Komplette Schritt-für-Schritt-Anleitung: So erstellen Sie ein Zustandsmaschinen-Diagramm (für absolute Anfänger)