# Mermaid Zustandsdiagramm-Spickzettel

Zustände, die Übergänge dazwischen und die Verzweigungen in der Mitte.

## Zustände und Übergänge

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

```mermaid
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.](/diagrams/state/transitions.svg)

## Start und Ende

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

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

![Ein Startpunkt, dann eine Box namens „Draft“, dann eine Box namens „Published“, dann ein Endpunkt.](/diagrams/state/start-end.svg)

## Eine Entscheidungsstelle

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

```mermaid
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.](/diagrams/state/choice.svg)

## Ein Zustand in einem Zustand

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

```mermaid
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.](/diagrams/state/composite.svg)

## Gabel und Zusammenführung

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

```mermaid
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.](/diagrams/state/fork-join.svg)

## Notizen

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

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

![Ein Zustandsdiagramm mit einer Notizbox rechts am Zustand „Draft“.](/diagrams/state/notes.svg)

## Richtung

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

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

![Ein Startpunkt, eine Box „Idle“ und eine Box „Running“, von links nach rechts angeordnet.](/diagrams/state/direction.svg)

## In Mernyx zeichnen

Öffne eine .mmd-Datei, verschiebe einen Knoten auf der Canvas, und der Quellcode kommt mit. Nativ auf macOS, ohne Browser dazwischen.