Mermaid Zustandsdiagramm-Spickzettel

Zustände und Übergänge

Ein Übergang ist ein Pfeil. Ein Doppelpunkt nach dem Pfeil ist das Ereignis, das ihn auslöst.

stateDiagram-v2
  [*] --> Idle
  Idle --> Running : start
  Running --> Idle : stop

Ein Zustandsdiagramm mit einem Startpunkt, der zu „Idle“ führt, dann zu „Running“, wenn er gestartet wird, und zurück zu „Idle“, wenn er gestoppt wird.

Start und Ende

Dieselbe [*]-Markierung macht beides: Der Pfeil hinein ist das Ende, der Pfeil heraus der Start.

stateDiagram-v2
  [*] --> Draft
  Draft --> Published
  Published --> [*]

Ein Startpunkt, dann eine Box namens „Draft“, dann eine Box namens „Published“, dann ein Endpunkt.

Eine Entscheidungsstelle

Eine Raute, die eine Frage stellt. Jeder ausgehende Pfeil ist eine Antwort.

stateDiagram-v2
  [*] --> Check
  Check --> Decide <<choice>>
  Decide --> Accepted : if valid
  Decide --> Rejected : if invalid

Ein Startpunkt führt zu einer Box namens „Check“, dann zu einer Raute namens „Decide“, die sich in „Accepted“ und „Rejected“ teilt.

Ein Zustand in einem Zustand

Geschweifte Klammern öffnen einen zusammengesetzten Zustand. Seine inneren Zustände liegen darin.

stateDiagram-v2
  [*] --> Active
  state Active {
    [*] --> NumLockOff
    NumLockOff --> NumLockOn : press
    NumLockOn --> NumLockOff : press
  }
  Active --> [*]

Eine Zustandsbox namens „Active“ mit zwei kleineren Zuständen darin, „NumLockOff“ und „NumLockOn“, verbunden durch einen beschrifteten Pfeil.

Gabel und Zusammenführung

Eine Gabel teilt den Fluss, eine Zusammenführung wartet auf alle Zweige.

stateDiagram-v2
  [*] --> Split <<fork>>
  Split --> A
  Split --> B
  A --> Merge <<join>>
  B --> Merge
  Merge --> [*]

Ein Startpunkt führt zu einem waagerechten Balken, der sich in zwei Zweige teilt, die beide zu einem zweiten waagerechten Balken und dann zu einem Endpunkt führen.

Notizen

Eine Notiz hängt an einem Zustand oder schwebt über zwei.

stateDiagram-v2
  [*] --> Draft
  Draft --> Review
  note right of Draft
    Still editable
  end note

Ein Zustandsdiagramm mit einer Notizbox rechts am Zustand „Draft“.

Richtung

Dasselbe Schlüsselwort wie im Flussdiagramm. Standard ist von oben nach unten.

stateDiagram-v2
  direction LR
  [*] --> Idle
  Idle --> Running : start

Ein Startpunkt, eine Box „Idle“ und eine Box „Running“, von links nach rechts angeordnet.