Zustandsdiagramm
Erfassen Sie jeden Zustand und jeden Übergang eines Systems
Was ist ein Zustandsdiagramm?
Ein Zustandsdiagramm zeigt die möglichen Zustände eines Objekts und die Ereignisse, die es zwischen ihnen bewegen: Bestelllebenszyklen, Dokumenten-Workflows, UI-Zustände, Verbindungsmanagement. Unverzichtbar, wann immer „in welchem Zustand sind wir?“ zählt.
Zustandsdiagramme gehören in Spezifikationen, in denen „darf eine Bestellung von erstattet zurück auf versandt gehen?“ eine Antwort haben muss. Sie sind das einzige Diagramm, das unerlaubte Übergänge sichtbar macht: Was nicht gezeichnet ist, ist nicht erlaubt — damit wird das Bild zum Testplan. Ihre Grenze ist die Kombinatorik: Zwei unabhängige Automaten in einem Diagramm ergeben ein Kreuzprodukt, das niemand mehr liest. Trennen Sie sie oder verschachteln Sie sie in zusammengesetzten Zuständen.
Live-Beispiel
stateDiagram-v2
[*] --> Draft
Draft --> Review : submit
Review --> Draft : request changes
Review --> Approved : approve
Approved --> Published : publish
Published --> Archived : archive
Archived --> [*]Wann einsetzen
Häufige Fehler
Mehrteilige Zustandsnamen zerfallen
Waiting for payment --> Paid erzeugt drei Zustände namens Waiting, for und payment. Benennen Sie den Zustand einmal mit state "Waiting for payment" as waiting und nutzen Sie dann in jedem Übergang die kurze ID waiting.
Verschachteltes [*] ist nicht der Start
Ein [*] innerhalb eines zusammengesetzten Zustands markiert dessen Einstiegspunkt, nicht den des Diagramms. Sind alle Ihre [*] verschachtelt, hat das Diagramm selbst keinen Einstiegspunkt und der Leser weiß nicht, wo er anfangen soll.
Übergangsbeschriftungen sind Ereignisse, kein Code
Der Text nach dem Doppelpunkt ist freier Text: score > 80 wird angezeigt, aber nie ausgewertet, und zwei Übergänge dürfen widersprüchliche Bedingungen tragen. Prüfen Sie die Beschriftungen wie Prosa, nicht wie Logik.
Grundlegende Syntax
stateDiagram-v2
[*] --> Idle
Idle --> Active : start
Active --> [*] : stopstateDiagram-v2 direction LRNutzen Sie den -v2-Renderer, auf den die aktuelle Syntax ausgelegt ist. direction LR passt zu langen linearen Lebenszyklen, die sonst unten aus der Seite laufen.
[*] --> Draft Draft --> Review : submit[*] ist links vom Pfeil der Startmarker und rechts davon der Endzustand. Der Text nach dem Doppelpunkt benennt das Ereignis, das den Übergang auslöst.
state Payment { [*] --> Pending Pending --> Captured }Ein zusammengesetzter Zustand versteckt einen Unterautomaten hinter einem Kasten. Ein Übergang kann den zusammengesetzten Zustand selbst adressieren und betritt ihn dann über dessen eigenen Startmarker.
state gate <<choice>> gate --> Approved : score > 80Ein <<choice>>-Pseudozustand verzweigt anhand einer Bedingung, ohne dass Sie dafür einen künstlichen Zustand erfinden. <<fork>> und <<join>> tun dasselbe für parallele Pfade.
Fragen zu diesem Diagramm
Was ist der Unterschied zu einem Flowchart?
Ein Flowchart folgt einem Prozess von Anfang bis Ende. Ein Zustandsdiagramm beschreibt alle möglichen Zustände einer Sache und die Ereignisse, die Übergänge auslösen — einschließlich Zyklen und Fehlerzuständen.
Unterstützt Mermaid verschachtelte Zustände?
Ja — stateDiagram-v2 unterstützt zusammengesetzte (verschachtelte) Zustände, Forks, Joins, Verzweigungen und Notizen für realistische Zustandsautomaten.
Kann ein Mermaid-Zustandsdiagramm Guards sowie Entry- und Exit-Aktionen ausdrücken?
Nicht formal. Ein Übergang trägt eine einzige freie Beschriftung, ein Guard wie score > 80 steht dort also als Prosa und wird von nichts erzwungen. Eine Syntax für Entry- oder Exit-Aktionen gibt es ebenfalls nicht — schreiben Sie sie in eine Notiz neben den Zustand.
Wie zeige ich einen Zustand, der auf sich selbst zurückführt?
Schreiben Sie denselben Zustand auf beide Seiten des Pfeils: Draft --> Draft : edit. Mermaid zeichnet das als Schleife am Kasten und behält die Beschriftung; mehrere Übergänge zwischen denselben zwei Zuständen behalten außerdem jeweils ihre eigene Beschriftung, statt zu verschmelzen.
Kann ich einen einzelnen Zustand einfärben?
Ja. classDef bad fill:#fdd definiert einen Stil, class Failed bad wendet ihn auf einen oder mehrere Zustände an, sodass Fehler- oder Endzustände hervorstechen. Die Formatierung steht im Quelltext und übersteht deshalb den Export nach PNG und SVG.
Wie exportiere ich ein Zustandsdiagramm für eine Präsentation?
Exportieren Sie PNG in 2× oder 4× für projizierte Folien, oder SVG, wenn das Tool es akzeptiert — SVG bleibt scharf und der Text markierbar. Der Mermaid-Quelltext bleibt die Fassung, die Sie bearbeiten und neu exportieren.
Zustandsdiagramm oder ein anderer Diagrammtyp?
Zustandsdiagramm oder Sequenzdiagramm?
Ein Sequenzdiagramm zeigt einen Pfad durch mehrere Teilnehmer, ein Zustandsdiagramm alle Pfade durch einen Teilnehmer. Lautet die interessante Frage „was hat die API geantwortet“, nehmen Sie ein Sequenzdiagramm. Lautet sie „können wir jemals hierher zurückkommen“, nehmen Sie ein Zustandsdiagramm.
Zustandsdiagramm oder Klassendiagramm?
Das Klassendiagramm gibt einer Bestellung ihre Felder und Beziehungen, das Zustandsdiagramm gibt ihr ein Leben. Schreiben Sie das Klassendiagramm, wenn gefragt wird, welche Daten existieren, und das Zustandsdiagramm, wenn gefragt wird, welche Übergänge der Code ablehnen muss. Anspruchsvolle Domänen brauchen beide.
Erstellen Sie jetzt Ihr Zustandsdiagramm
Beschreiben Sie es in natürlicher Sprache — die KI schreibt den Mermaid-Code für Sie.
Mermaid Studio öffnen