Um ein Mermaid-Zustandsdiagramm in Obsidian auf einem Mac zu vereinfachen, stelle jeden gültigen Übergang explizit dar, kürze die Beschriftungen und prüfe die Leserichtung. Vergleiche Quelle, Ziel und Übergangstext, bevor du das Ergebnis übernimmst.

Diese Anleitung verwendet vier synthetische Zustände, A bis D. Ziel ist es, ein Diagramm leichter lesbar zu machen und dabei seine direkten Übergänge, Rückwege sowie Start- und Endmarkierungen zu erhalten. Die Übergangstabelle bietet eine konkrete Möglichkeit, dies unabhängig davon zu prüfen, wie der Renderer die Pfeile positioniert.

Was muss beim Vereinfachen des Diagramms unverändert bleiben?

Trenne zunächst Änderungen an der Darstellung von Änderungen am Modell. Kürzere Anzeigenamen und eine andere Leserichtung können die Lesbarkeit verbessern. Einen Pfeil zu entfernen, verändert die Menge der direkten Übergänge, selbst wenn ein anderer Weg weiterhin zum selben Ziel führt.

Angenommen, es gibt sowohl einen direkten Übergang von A nach C als auch einen Weg über B. Wenn du den direkten Übergang löschst, muss der Leser einen Zwischenbesuch bei B erschließen. Die Erreichbarkeit bleibt erhalten, aber ein gültiger Übergang in einem Schritt geht verloren. Für diese Aufgabe reicht es nicht aus, irgendwann dasselbe Ziel zu erreichen.

Verwende das folgende Übergangsverzeichnis als ursprüngliche Spezifikation. Die Beschriftungen sind synthetische Ereignisnamen; innerhalb dieses Beispiels haben sie eine Bedeutung und müssen ihren ursprünglichen Pfeilen zugeordnet bleiben.

Quelle Ziel Übergangstext
Start A Keine
A B step
A C alternate
B C next
B A reset
C B back
C A reset
C D finish
D Ende Keine

Es gibt neun Übergänge, einschließlich Start und Ende. Zwei Pfeile haben dieselbe Beschriftung, reset, gehen aber von verschiedenen Zuständen aus. Behalte beide. Ebenso haben die Pfeile zwischen B und C unterschiedliche Richtungen und Beschriftungen; es sind separate Übergänge.

Erfasse bei einem größeren Diagramm vor der Bearbeitung jeden Übergang als Kombination aus Quelle, Ziel und Text. Wenn dein ursprünglicher Text Bedingungen oder Aktionen enthält, bewahre auch diese. Ein Abgleich der Gesamtzahl der Pfeile allein erkennt nicht, wenn sich das Ziel oder die Beschriftung eines Pfeils geändert hat.

Prüfe, welchen Renderer deine installierte Obsidian-Version verwendet

Öffne auf deinem Mac über das Zahnradsymbol in der Seitenleiste die Einstellungen und wähle dann Allgemein. Notiere die aktuelle App-Version und die Installationsversion, die oben angezeigt werden. Verwende die App-Version, wenn du nach den passenden Versionshinweisen suchst. Diese Stellen sind in der Obsidian-Hilfe zu den Einstellungen beschrieben.

Die Renderer-Version ist entscheidend. Obsidian 1.15.0 Desktop Early Access, datiert auf den 22. Oktober 2026, stellt die Diagramm-Rendering-Engine auf Pele um und gibt die Kompatibilität mit Mermaid-Syntax 12.1.0 an. In den Versionshinweisen steht außerdem, dass diese Version die Mermaid-Bibliothek nicht mehr enthält. Diese Aussage bezieht sich auf die genannte Version; sie identifiziert nicht den Renderer jeder installierten Obsidian-Version. Siehe die Versionshinweise zu Obsidian 1.15.0 Desktop.

Prüfe Syntaxkompatibilität und visuelles Erscheinungsbild getrennt. Ein Diagramm, das von einem anderen Editor akzeptiert wird, ist ein nützlicher Vergleich; das endgültige Ergebnis musst du jedoch in deiner installierten App überprüfen. Gehe nicht davon aus, dass eine Upstream-Layoutoption oder ein neueres Dokumentationsbeispiel sich in deinem lokalen Renderer genauso verhält.

Das folgende Beispiel verzichtet bewusst auf Rendererkonfiguration, Theme-Einstellungen und Styling. Wenn du bereits ein funktionierendes Diagramm hast, beginne mit dessen vorhandener Diagrammdeklaration und ändere jeweils nur ein Darstellungsdetail. Ein Upgrade ist nicht nötig, um das hier beschriebene Übergangsverzeichnis zu erstellen und Beschriftungen zu bearbeiten.

Erstelle eine kompakte Version mit expliziten Übergängen

Das vollständige Beispiel unten setzt alle neun Zeilen des Verzeichnisses um. Die sichtbaren Zustandsnamen sind bewusst kurz gehalten. Zustand A ist der Startpunkt, B und C haben Rückwege, und nur D hat einen Übergang zur Endmarkierung.

Mermaid dokumentiert Zustandsaliase, beschriftete Übergänge, Start- und Endmarkierungen sowie die Richtungsangabe in seiner Referenz zu Zustandsdiagrammen. Die dokumentierte Methode zum Einfügen in Obsidian ist ein Codeblock mit der Sprachkennung mermaid, wie unter Erweiterte Formatierungssyntax erläutert.

```mermaid
stateDiagram-v2
    direction LR

    state "Stage A" as A
    state "Stage B" as B
    state "Stage C" as C
    state "Stage D" as D

    [*] --> A

    A --> B : step
    A --> C : alternate

    B --> A : reset
    B --> C : next

    C --> A : reset
    C --> B : back
    C --> D : finish

    D --> [*]
```

Füge das vollständige Markdown-Beispiel einschließlich der öffnenden und schließenden Zeilen mit drei Backticks in eine Notiz ein. Der äußere Codeblock mit vier Backticks dient hier nur dazu, das Beispiel in diesem Artikel anzuzeigen; er gehört nicht zum Inhalt der Notiz.

Verwende Quelltextmodus, um den genauen Text zu prüfen. Wechsle zur Lesansicht, um das gerenderte Ergebnis anzusehen. Unter macOS schaltet Cmd+E zwischen Lese- und Bearbeitungsansicht um. Obsidian erläutert diese Steuerelemente unter Ansichten und Bearbeitungsmodus.

Die Übergangsanweisungen sind nach ihrem Quellzustand gruppiert, damit sich die ausgehenden Optionen jedes Zustands gemeinsam prüfen lassen. Diese Anordnung erleichtert die Pflege des Quelltexts; sie garantiert nicht, an welcher Stelle der Renderer die einzelnen Zustände platziert.

Probiere das Beispiel in der Notizbreite aus, die du normalerweise verwendest. Entferne dann nur die Zeile direction LR und vergleiche das Ergebnis. Behalte die Darstellung bei, die Verzweigungen und Rückwege leichter nachvollziehbar macht. Ein Diagramm von links nach rechts kann mehr Platz in der Breite benötigen. Beurteile das Ergebnis daher im tatsächlichen Notizbereich.

Kürze Beschriftungen nur so weit, wie es ihre Bedeutung zulässt. In diesem synthetischen Beispiel braucht Stage B keine weitere Erklärung. Behalte in deinem eigenen Diagramm alle Formulierungen bei, die zwei Zustände voneinander unterscheiden. Wenn eine längere Erklärung nötig ist, setze sie in einen angrenzenden Fließtextabsatz und stelle eine eindeutige Zuordnung zur Zustandskennung sicher.

Welche Abkürzungen können das Modell verändern?

Wiederholte Pfeile können dazu verleiten, einen gemeinsamen Zwischenknoten einzuführen. Überlege vorher, wofür dieser Knoten steht und ob die ursprünglichen direkten Übergänge weiterhin vorhanden sind.

Ein gemeinsamer Reset-Knoten verändert die direkten Wege

Im Verzeichnis führen B und C bei reset jeweils direkt zu A. Wenn du diese Pfeile durch Wege über einen neuen Zustand namens R ersetzt, entsteht ein Zwischenzustand und die ursprünglichen direkten Kanten entfallen. Der Leser kann weiterhin einen Weg zu A verfolgen, doch das Diagramm beschreibt nun andere Schritte.

Behalte für das genaue Ergebnis in diesem Artikel die beiden Reset-Pfeile bei. Ihre Wiederholung hält zwei gültige Ausgangsbedingungen für dasselbe Ereignis fest. Eine Verringerung ihres visuellen Platzbedarfs ist nur dann sinnvoll, wenn ihre Bedeutung erhalten bleibt.

Eine Verzweigung oder Gabelung braucht einen Grund im Modell

Mermaid dokumentiert <<choice>> für die Verzweigung zwischen Pfaden sowie <<fork>> und <<join>> für Gabelungs- und Zusammenführungsstrukturen. Das sind unterschiedliche Diagrammkonstrukte in der Referenz zu Zustandsdiagrammen.

Führe keines davon allein deshalb ein, um mehrere unübersichtliche Pfeile an einem gemeinsamen Knoten zusammenzuführen. In diesem Beispiel sollen direkte Übergänge zwischen Zuständen erhalten bleiben. Ein zusätzliches Zwischenelement würde eine separate Erklärung erfordern, wie seine Pfade dem ursprünglichen Modell entsprechen. Explizite Pfeile machen diese Zuordnung unmittelbar sichtbar.

Zusammengesetzte Zustände haben eine dokumentierte Einschränkung

Mermaid unterstützt zusammengesetzte Zustände, aber die Dokumentation untersagt ausdrücklich Übergänge zwischen internen Zuständen, die zu verschiedenen zusammengesetzten Zuständen gehören. Siehe Zusammengesetzte Zustände.

Wenn sich durch die Gruppierung deiner Knoten diese Situation ergibt, behalte die verbundenen Zustände für diese Aufgabe auf einer Ebene. Einen Pfeil zum äußeren zusammengesetzten Zustand zu verschieben, ändert seinen Endpunkt und ist nicht automatisch ein gleichwertiger Ersatz. Verwende Hierarchien, wenn sie die tatsächliche Struktur des Modells darstellen und du Ein- und Austrittsverhalten erklären kannst.

Für das Beispiel mit vier Zuständen bringt Verschachtelung wenig. Die sinnvolle Vereinfachung besteht darin, Beschriftungen zu kürzen und die Darstellung zu verbessern, während die Übergangsstruktur unverändert bleibt.

Prüfe sowohl die Übergänge als auch das gerenderte Ergebnis

Führe zwei Prüfdurchgänge durch, bevor du das ursprüngliche Diagramm ersetzt. Der erste überprüft das Modell; der zweite prüft, ob die gewählte Darstellung hilfreich ist.

  1. Vergleiche jede Zeile des Verzeichnisses mit einer Übergangsanweisung. Prüfe beide Endpunkte und die vollständige Beschriftung.
  2. Vergleiche jede Übergangsanweisung mit dem Verzeichnis. So erkennst du sowohl zusätzliche als auch fehlende Pfeile.
  3. Prüfe Start und Ende separat. Hier führt der Start ausschließlich zu A, und nur D führt zum Ende.
  4. Prüfe im gerenderten Diagramm, ob die Beschriftungen lesbar und die Pfeilspitzen unterscheidbar sind.
  5. Verfolge die Rückwege von B und C, da sie leicht übersehen werden, wenn man nur den Vorwärtsverlauf prüft.

Probiere für dieses Beispiel drei Leserichtungen aus: Start zu A, dann zu C, dann zu D, dann zum Ende; Start zu A, dann zu B, dann zurücksetzen zu A; und Start zu A, dann zu C, dann zurück zu B. Mit diesen Prüfungen werden der alternative Weg, das Zurücksetzen und die Rückverbindung abgedeckt. Sie ergänzen den Zeilenabgleich, ersetzen ihn aber nicht.

Ein deterministischer Textvergleich hat bestätigt, dass die neun Übergangsanweisungen des Beispiels einschließlich ihrer Beschriftungen mit dem Verzeichnis übereinstimmen. Bei der Erstellung wurde das Beispiel nicht in einer installierten Obsidian-App gerendert. Abstände und Pfeilverläufe müssen daher noch in deiner lokalen Version überprüft werden.

Wenn die Notiz den Code wörtlich anzeigt, prüfe zuerst, ob du sie in der Lesansicht ansiehst und ob der öffnende Codeblock mit mermaid beginnt. Wenn nach der Bearbeitung ein Parsefehler auftritt, kehre zum vollständigen Beispiel zurück und wende jeweils nur eine Änderung erneut an. Wenn lediglich das Layout unübersichtlich ist, behalte die Übergänge bei und vergleiche Beschriftungslänge, Richtung und verfügbare Breite des Notizbereichs.

Behalte die Version bei, deren Beschriftungen und Wege nach bestandenem Abgleich mit dem Verzeichnis am leichtesten zu lesen sind. Eine gelungene Vereinfachung ermöglicht es dem Leser, dieselben gültigen Übergänge mit weniger Aufwand nachzuvollziehen, während der Quelltext einfach zu prüfen und zu pflegen bleibt.

Quellen