Zustandsdiagramm
Die Mermaid-Statussyntax ist mit der in plantUml verwendeten Syntax kompatibel, was es Benutzern erleichtert, Diagramme zwischen mermaid und plantUml zu teilen.
Kopieren
Einbetten
---
title: Simple sample
---
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Alter Editor:
Kopieren
Einbetten
stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Neuer Editor:
In einem Zustandsdiagramm wird ein System anhand seiner Zustände und der Art und Weise beschrieben, wie ein Zustand durch Übergänge in einen anderen Zustand wechselt. Das obige Beispieldiagramm zeigt drei Zustände: Stillstand, Bewegung und Kollision. Du beginnst im Stillstand, und vom Stillstand aus kannst du in den Bewegungszustand wechseln. Vom Bewegungszustand aus kannst du in den Stillstand zurückkehren oder in den Kollisionszustand wechseln. Es gibt keinen Übergang vom Stillstand zum Kollisionszustand. (Wenn du stillstehst, kollidierst du nicht.)
状态
Zustände können auf verschiedene Arten deklariert werden; die einfachste Methode ist, einen Zustand nur mit einer id zu definieren:
Kopieren
Einbetten
stateDiagram-v2
stateId
Eine andere Methode ist die Verwendung der state-Syntax mit folgender Beschreibung:
Kopieren
Einbetten
stateDiagram-v2
state "This is a state description" as s2
Eine weitere Methode, einen Zustand mit Beschreibung zu definieren, ist, zuerst die Zustands-ID zu definieren und dann einen Doppelpunkt und die Beschreibung hinzuzufügen:
Kopieren
Einbetten
stateDiagram-v2
s2 : This is a state description
Übergang
Ein Übergang ist die Verbindungslinie, wenn ein Zustand in einen anderen Zustand übergeht, dargestellt mit dem Textpfeil "-->".
Wenn du einen Übergang zwischen zwei Zuständen definierst und die Zustände noch nicht definiert sind, werden die undefinierten Zustände mit der id aus dem Übergang definiert. Danach kannst du den auf diese Weise definierten Zuständen eine Beschreibung hinzufügen.
Kopieren
Einbetten
stateDiagram-v2
s1 --> s2
Zum Übergang kann Text hinzugefügt werden, um zu beschreiben, was er darstellt:
Kopieren
Einbetten
stateDiagram-v2
s1 --> s2: A transition
Start und Ende
Es gibt zwei besondere Zustände, die den Start und das Ende eines Diagramms darstellen. Diese beiden Zustände werden mit der Syntax [*] dargestellt; die Richtung des Übergangs zu diesem Zustand bestimmt, ob es sich um einen Start- oder Endzustand handelt.
Kopieren
Einbetten
stateDiagram-v2
[*] --> s1
s1 --> [*]
Zusammengesetzter Zustand
In der Praxis triffst du bei Zustandsdiagrammen häufig auf mehrdimensionale Diagramme, da ein Zustand mehrere interne Zustände haben kann, was als zusammengesetzter Zustand bezeichnet wird.
Um einen zusammengesetzten Zustand zu definieren, musst du die state-Syntax verwenden, gefolgt von einer id, und den Hauptteil des zusammengesetzten Zustands in geschweiften Klammern {} schreiben. Du kannst den zusammengesetzten Zustand wie einen einfachen Zustand in einer separaten Zeile benennen. Siehe das Beispiel unten:
Kopieren
Einbetten
stateDiagram-v2
[*] --> First
state First {
[*] --> second
second --> [*]
}
[*] --> NamedComposite
NamedComposite: Another Composite
state NamedComposite {
[*] --> namedSimple
namedSimple --> [*]
namedSimple: Another simple
}
Du kannst auf mehreren Ebenen arbeiten:
Kopieren
Einbetten
stateDiagram-v2
[*] --> First
state First {
[*] --> Second
state Second {
[*] --> second
second --> Third
state Third {
[*] --> third
third --> [*]
}
}
}
Du kannst auch Übergänge zwischen zusammengesetzten Zuständen definieren:
Kopieren
Einbetten
stateDiagram-v2
[*] --> First
First --> Second
First --> Third
state First {
[*] --> fir
fir --> [*]
}
state Second {
[*] --> sec
sec --> [*]
}
state Third {
[*] --> thi
thi --> [*]
}
Hinweis: Übergänge zwischen internen Zuständen, die zu verschiedenen zusammengesetzten Zuständen gehören, können nicht definiert werden.
Auswahl
Manchmal musst du die Entscheidung zwischen zwei oder mehr Pfaden simulieren, was mit <<choice>> erreicht werden kann.
Kopieren
Einbetten
stateDiagram-v2
state if_state <<choice>>
[*] --> IsPositive
IsPositive --> if_state
if_state --> False: if n < 0
if_state --> True : if n >= 0
Verzweigung/Zusammenführung
Mit <<fork>> <<join>> kann im Diagramm eine Verzweigung/Zusammenführung angegeben werden.
Kopieren
Einbetten
stateDiagram-v2
state fork_state <<fork>>
[*] --> fork_state
fork_state --> State2
fork_state --> State3
state join_state <<join>>
State2 --> join_state
State3 --> join_state
join_state --> State4
State4 --> [*]
Hinweis
Die Verwendung von Kommentaren im Zustandsdiagramm ermöglicht eine klarere Darstellung; der Kommentar kann wahlweise rechts oder links vom Knoten platziert werden.
Kopieren
Einbetten
stateDiagram-v2
State1: The state with a note
note right of State1
Important information! You can write
notes.
end note
State1 --> State2
note left of State2 : This is the note to the left.
Parallelität
Wie in plantUml kannst du die Parallelität mit dem Bindestrich-Symbol -- angeben.
Kopieren
Einbetten
stateDiagram-v2
[*] --> Active
state Active {
[*] --> NumLockOff
NumLockOff --> NumLockOn : EvNumLockPressed
NumLockOn --> NumLockOff : EvNumLockPressed
--
[*] --> CapsLockOff
CapsLockOff --> CapsLockOn : EvCapsLockPressed
CapsLockOn --> CapsLockOff : EvCapsLockPressed
--
[*] --> ScrollLockOff
ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
}
Diagrammrichtung festlegen
Für ein Zustandsdiagramm kannst du mit einer Richtungsanweisung die Rendering-Richtung des Diagramms festlegen, wie in diesem Beispiel gezeigt.
Kopieren
Einbetten
stateDiagram
direction LR
[*] --> A
A --> B
B --> C
state B {
direction LR
a --> b
}
B --> D
Kommentar
Im Zustandsdiagramm können Kommentare eingegeben werden, die der Editor ignoriert. Ein Kommentar muss mit einem doppelten Prozentzeichen (%%) beginnen; der gesamte Text von dieser Markierung bis zum nächsten Zeilenumbruch wird als Kommentar betrachtet, einschließlich jeglicher Diagrammsyntax. Ein Kommentar kann eine eigene Zeile einnehmen oder am Ende einer Anweisung stehen.
Kopieren
Einbetten
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Stil mit classDefs festlegen
Aktuelle Einschränkungen von classDef im Zustandsdiagramm:
1. Kann nicht auf Start- oder Endzustände angewendet werden
2. Kann nicht auf zusammengesetzte Zustände oder innerhalb zusammengesetzter Zustände angewendet werden
Du kannst Stile mit der classDef-Syntax definieren (d. h. die Abkürzung für class definition, wobei "class" ähnlich wie eine Klasse in CSS funktioniert). Auf classDef folgt der Stilname, dann ein oder mehrere 'Eigenschaft-Wert'-Paare, wobei jedes 'Eigenschaft-Wert'-Paar aus einem gültigen CSS-Eigenschaftsnamen, einem Doppelpunkt (:) und dem entsprechenden Wert besteht.
Im Folgenden findest du ein Beispiel für ein classDef mit nur einem 'Eigenschaft-Wert'-Paar:
Kopieren
Einbetten
classDef movement font-style:italic;
- Der Stilname ist movement
- Die einzige Eigenschaft ist font-style, der Wert ist italic
Wenn du mehrere 'Eigenschaft-Wert'-Paare haben möchtest, kannst du zwischen jedes 'Eigenschaft-Wert'-Paar ein Komma (,) setzen.
Im Folgenden findest du ein Beispiel mit drei 'Eigenschaft-Wert'-Paaren:
Kopieren
Einbetten
classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
- Der Stilname ist badBadEvent
- Die erste Eigenschaft ist fill, ihr Wert ist #f00
- Die zweite Eigenschaft ist color, ihr Wert ist white
- Die dritte Eigenschaft ist font-weight, ihr Wert ist bold
- Die vierte Eigenschaft ist stroke-width, ihr Wert ist 2px
- Die fünfte Eigenschaft ist stroke, ihr Wert ist yellow
classDef-Stil auf einen Zustand anwenden
Es gibt zwei Möglichkeiten, einen classDef-Stil auf einen Zustand anzuwenden:
- Verwende die class-Syntax, um classDef-Stile in einer Anweisung auf einen oder mehrere Zustände anzuwenden
- Verwende den Operator :::, um classDef-Stile anzuwenden, wenn der Zustand in einer Übergangsanweisung verwendet wird (z. B. mit einem Pfeil, der auf einen anderen Zustand zeigt oder von ihm kommt)
1. class-Anweisung
Die class-Anweisung teilt Mermaid mit, dass das angegebene classDef auf eine oder mehrere Klassen angewendet werden soll. Die Form lautet:
Kopieren
Einbetten
class [one or more state names, separated by commas] [name of a style defined with classDef]
Im Folgenden findest du ein Beispiel, das den Stil badBadEvent auf einen Zustand namens Crash anwendet:
Kopieren
Einbetten
class Crash badBadEvent
Im Folgenden findest du ein Beispiel, das den Stil movement auf die beiden Zustände Moving und Crash anwendet:
Kopieren
Einbetten
class Moving,Crash movement
Hier ist ein Beispiel. Beachte, dass auf den Zustand Crash zwei classDef-Stile angewendet werden: movement und badBadEvent
Kopieren
Einbetten
stateDiagram
direction TB
accTitle: This is the accessible title
accDescr: This is an accessible description
classDef notMoving fill:white
classDef movement font-style:italic
classDef badBadEvent fill:pink,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
[*]--> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
class Still notMoving
class Moving, Crash movement
class Crash badBadEvent
class end badBadEvent
2. Stil für einen Zustand mit dem Operator ::: anwenden
Du kannst den Operator ::: verwenden, um einen classDef-Stil auf einen Zustand anzuwenden. Die Syntax lautet:
Kopieren
Einbetten
[state]:::[style name]
Du kannst es in einer Anweisung anwenden, die eine Klasse verwendet; dazu gehören auch der Start- und der Endzustand. Zum Beispiel:
Kopieren
Einbetten
stateDiagram
direction TB
accTitle: This is the accessible title
accDescr: This is an accessible description
classDef notMoving fill:white
classDef movement font-style:italic;
classDef badBadEvent fill:pink,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
[*] --> Still:::notMoving
Still --> [*]
Still --> Moving:::movement
Moving --> Still
Moving --> Crash:::movement
Crash:::badBadEvent --> [*]
Leerzeichen im Zustandsnamen
Du kannst den Zustand zuerst mit einer id definieren und dann später diese id referenzieren, um dem Zustand Leerzeichen hinzuzufügen.
Im folgenden Beispiel gibt es einen Zustand mit der ID yswsii und der Beschreibung ''Your state with spaces in it''. Nach der Definition wird yswsii im ersten Übergang des Diagramms verwendet ([*] --> yswsii) und auch beim Übergang zu YetAnotherState verwendet (yswsii --> YetAnotherState). yswsii wurde so gestaltet, dass es sich von anderen Zuständen unterscheidet.
Kopieren
Einbetten
stateDiagram
classDef yourState font-style:italic,font-weight:bold,fill:white
yswsii: Your state with spaces in it
[*] --> yswsii:::yourState
[*] --> SomeOtherState
SomeOtherState --> YetAnotherState
yswsii --> YetAnotherState
YetAnotherState --> [*]
