Zustandsdiagramme

"Ein Zustandsdiagramm ist eine Art Diagramm, das in der Informatik und verwandten Bereichen verwendet wird, um das Verhalten von Systemen zu beschreiben. Zustandsdiagramme setzen voraus, dass das beschriebene System aus einer endlichen Anzahl von Zuständen besteht; manchmal ist dies tatsächlich der Fall, während es in anderen Fällen eine sinnvolle Abstraktion darstellt." Wikipedia

Mermaid kann Zustandsdiagramme rendern. Die Syntax versucht, mit der in PlantUML verwendeten Syntax kompatibel zu sein, da dies es Benutzern erleichtert, Diagramme zwischen Mermaid und PlantUML auszutauschen.

Code:

Älterer Renderer:

Code:

In Zustandsdiagrammen werden Systeme in Bezug auf Zustände und die Art und Weise beschrieben, wie ein Zustand über einen Übergang in einen anderen Zustand wechseln kann. Das obige Beispieldiagramm zeigt drei Zustände: Still, Moving und Crash. Sie beginnen im Zustand Still. Von Still aus können Sie in den Zustand Moving wechseln. Von Moving aus können Sie entweder zurück in den Zustand Still oder in den Zustand Crash wechseln. Es gibt keinen Übergang von Still zu Crash. (Sie können nicht abstürzen, wenn Sie stillstehen.)

Zustände

Ein Zustand kann auf verschiedene Weise deklariert werden. Die einfachste Möglichkeit besteht darin, einen Zustand nur mit einer ID zu definieren:

Code:

Eine andere Möglichkeit ist die Verwendung des Schlüsselworts state mit einer Beschreibung wie unten gezeigt:

Code:

Eine weitere Möglichkeit, einen Zustand mit einer Beschreibung zu definieren, besteht darin, die Zustands-ID gefolgt von einem Doppelpunkt und der Beschreibung zu definieren:

Code:

Übergänge

Übergänge sind Pfade/Kanten, wenn ein Zustand in einen anderen übergeht. Dies wird mit einem Textpfeil "-->" dargestellt.

Wenn Sie einen Übergang zwischen zwei Zuständen definieren und die Zustände noch nicht definiert sind, werden die undefinierten Zustände mit der ID aus dem Übergang definiert. Sie können später Beschreibungen zu so definierten Zuständen hinzufügen.

Code:

Es ist möglich, Text zu einem Übergang hinzuzufügen, um zu beschreiben, was er darstellt:

Code:

Start und Ende

Es gibt zwei spezielle Zustände, die den Anfang und das Ende des Diagramms anzeigen. Diese werden mit der [*]-Syntax geschrieben, und die Richtung des Übergangs dazu definiert sie entweder als Start- oder Stoppzustand.

Code:

Verbundzustände

Bei der praktischen Verwendung von Zustandsdiagrammen erhält man oft Diagramme, die mehrdimensional sind, da ein Zustand mehrere interne Zustände haben kann. Diese werden in dieser Terminologie als Verbundzustände bezeichnet.

Um einen Verbundzustand zu definieren, müssen Sie das Schlüsselwort state gefolgt von einer ID und dem Rumpf des Verbundzustands zwischen {} verwenden. Sie können einen Verbundzustand wie einen einfachen Zustand in einer separaten Zeile benennen. Siehe das Beispiel unten:

Code:

Sie können dies in mehreren Ebenen tun:

Code:

Sie können auch Übergänge zwischen Verbundzuständen definieren:

Code:

Sie können keine Übergänge zwischen internen Zuständen definieren, die zu verschiedenen Verbundzuständen gehören

Wahl

Manchmal müssen Sie eine Wahl zwischen zwei oder mehr Pfaden modellieren, dies können Sie mit <<choice>> tun.

Code:

Verzweigungen

Es ist möglich, eine Verzweigung im Diagramm mit <<fork>> <<join>> anzugeben.

Code:

Notizen

Manchmal sagt nichts mehr aus als eine Haftnotiz. Das ist auch bei Zustandsdiagrammen der Fall.

Hier können Sie die Notiz rechts neben oder links neben einem Knoten platzieren.

Code:

Parallelität

Wie in PlantUML können Sie Parallelität mit dem ---Symbol angeben.

Code:

Richtung des Diagramms festlegen

Bei Zustandsdiagrammen können Sie die Anweisung direction verwenden, um die Richtung festzulegen, in die das Diagramm gerendert wird, wie in diesem Beispiel.

Code:

Kommentare

Kommentare können in ein Zustandsdiagramm eingefügt werden, die vom Parser ignoriert werden. Kommentare müssen in einer eigenen Zeile stehen und müssen mit %% (zwei Prozentzeichen) eingeleitet werden. Jeder Text nach dem Beginn des Kommentars bis zur nächsten neuen Zeile wird als Kommentar behandelt, einschließlich jeder Diagrammsyntax.

Styling mit classDefs

Wie bei anderen Diagrammen (z. B. Flussdiagrammen) können Sie einen Stil im Diagramm selbst definieren und diesen benannten Stil auf einen oder mehrere Zustände im Diagramm anwenden.

Dies sind die aktuellen Einschränkungen bei Zustandsdiagramm-classDefs:

1. Können nicht auf Start- oder Endzustände angewendet werden
2. Können nicht auf oder innerhalb von Verbundzuständen angewendet werden

Diese befinden sich in der Entwicklung und werden in einer zukünftigen Version verfügbar sein.

Sie definieren einen Stil mit dem Schlüsselwort classDef, das für "Klassendeklaration" steht (wobei "Klasse" etwas wie eine CSS-Klasse bedeutet) gefolgt von einem Namen für den Stil, und dann ein oder mehrere Eigenschafts-Wert-Paare. Jedes Eigenschafts-Wert-Paar ist ein gültiger CSS-Eigenschaftsname gefolgt von einem Doppelpunkt (:) und dann einem Wert.

Hier ist ein Beispiel für eine classDef mit nur einem Eigenschafts-Wert-Paar:

classDef movement font-style:italic;

wobei

• der Name des Stils movement ist
• die einzige Eigenschaft font-style ist und ihr Wert italic ist

Wenn Sie mehr als ein Eigenschafts-Wert-Paar haben möchten, setzen Sie ein Komma (,) zwischen jedes Eigenschafts-Wert-Paar.

Hier ist ein Beispiel mit drei Eigenschafts-Wert-Paaren:

classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow

wobei

• der Name des Stils badBadEvent ist
• die erste Eigenschaft fill ist und ihr Wert #f00 ist
• die zweite Eigenschaft color ist und ihr Wert white ist
• die dritte Eigenschaft font-weight ist und ihr Wert bold ist
• die vierte Eigenschaft stroke-width ist und ihr Wert 2px ist
• die fünfte Eigenschaft stroke ist und ihr Wert yellow ist

classDef-Stile auf Zustände anwenden

Es gibt zwei Möglichkeiten, einen classDef-Stil auf einen Zustand anzuwenden:

1. Verwenden Sie das Schlüsselwort class, um einen classDef-Stil auf einen oder mehrere Zustände in einer einzelnen Anweisung anzuwenden, oder
2. Verwenden Sie den :::-Operator, um einen classDef-Stil auf einen Zustand anzuwenden, während er in einer Übergangsanweisung verwendet wird (z. B. mit einem Pfeil zu/von einem anderen Zustand)

1. class-Anweisung

Eine class-Anweisung weist Mermaid an, die benannte classDef auf eine oder mehrere Klassen anzuwenden. Die Form ist:

class [ein oder mehrere Zustandsnamen, durch Kommas getrennt] [Name eines mit classDef definierten Stils]

Hier ist ein Beispiel, das den Stil badBadEvent auf einen Zustand namens Crash anwendet:

class Crash badBadEvent

Hier ist ein Beispiel, das den Stil movement auf die beiden Zustände Moving und Crash anwendet:

class Moving, Crash movement

Hier ist ein Diagramm, das die Beispiele in Aktion zeigt. Beachten Sie, dass der Zustand Crash zwei classDef-Stile angewendet hat: movement und badBadEvent

Code:

2. :::-Operator zum Anwenden eines Stils auf einen Zustand

Sie können einen classDef-Stil auf einen Zustand anwenden, indem Sie den :::-Operator (drei Doppelpunkte) verwenden. Die Syntax lautet:

[Zustand]:::[Stilname]

Sie können dies in einem Diagramm innerhalb einer Anweisung verwenden, die eine Klasse verwendet. Dies schließt die Start- und Endzustände ein. Zum Beispiel:

Code:

Leerzeichen in Zustandsnamen

Leerzeichen können zu einem Zustand hinzugefügt werden, indem der Zustand zuerst mit einer ID definiert und die ID später referenziert wird.

Im folgenden Beispiel gibt es einen Zustand mit der ID yswsii und der Beschreibung Ihr Zustand mit Leerzeichen. Nach der Definition wird yswsii im Diagramm im ersten Übergang ([*] --> yswsii) und auch im Übergang zu YetAnotherState (yswsii --> YetAnotherState) verwendet. (yswsii wurde so gestaltet, dass es sich von den anderen Zuständen unterscheidet.)

Code: