Mermaid.js Zustandsdiagramm-Syntaxanleitung

Was ist ein Zustandsdiagramm?

Ein Zustandsdiagramm (auch bekannt als Statechart) ist ein Verhaltens-UML-Diagramm das den endlichen Lebenszyklus eines einzelnen Objekts oder einer Untereinheit modelliert. Als Kern-UML-Diagrammtyp, zeigt es die diskreten Zustände, die eine Entität annehmen kann, die externen Ereignisse oder Auslöser, die einen Wechsel zwischen diesen Zuständen erzwingen (Übergänge), sowie die bedingten Regelverzweigungen, die die Ausführungswege verändern. Diese Abbildung ist entscheidend für die Verfolgung komplexer Objekt-Lebenszyklen, wie beispielsweise die Fortschrittsverfolgung einer Bestellung von der Erfüllung bis zur Lieferung, eine Benutzersitzungs-Timeout-Sequenz oder eine eingebettete Hardware-Schleife.

Mit Mermaid.js, können Sie Ihre reaktiven Zustandsmaschinen mit einem deklarativen, textbasierten Schema definieren. Der Parser berechnet automatisch den optimalen Layout-Abstand, verarbeitet rekursive Schleifenpfeile und skaliert die Grenzen der Zustandscontainer reibungslos.

Grundlagen der Syntaxanleitung: Elemente und Konstrukte

Um ein genaues, standardskonformes UML-Zustandsdiagramm in Mermaid zu gestalten, müssen Sie Ein- und Ausgangsmarker, Übergangssätze, zusammengesetzte Verschachtelungen und bedingte Auswahlblöcke beherrschen.

1. Definition von Eingangs-, Ausgangs- und Standardzuständen

Sie initialisieren eine Zustandsfläche in Zeile eins mit dem Befehl stateDiagram-v2 Schlüsselwort. Lebenszyklen erfordern explizite Start- und Endpunkte, die durch ein festes Kreissymbol ([*]):

• Anfangszustand (Eingang): [*] --> Zustandsname (Markiert, wo der Lebenszyklus beginnt).
• Endzustand (Ausgang): Zustandsname --> [*] (Markiert, wo der Lebenszyklus endet).

stateDiagram-v2
    [*] --> Leerlauf
    Leerlauf --> [*]

2. Konfigurieren von Übergangsauslösern und Ereignisbezeichnungen

Um eine Zustandsänderung darzustellen, verbinden Sie Ihre definierten Zustands-Tokens mit einer standardmäßigen Pfeillinie (“-->). Um das genaue Ereignis, die API-Antwort oder die Mausklick-Aktion zu dokumentieren, die diesen Übergang auslöst, fügen Sie einen Doppelpunkt (“:) gefolgt von Ihrem beschreibenden Text:

stateDiagram-v2
    Aktiv --> Suspended : ZahlungFehlgeschlagen
    Suspended --> Aktiv : RechnungBezahlt

3. Implementieren von bedingten Auswahlblöcken

Um verzweigte Bewertungsschleifen zu behandeln, verwenden Sie die<<choice>>Stereotyp. Dies erzeugt eine klare Raute auf der Zeichenfläche, die einen einzelnen eingehenden Übergangspfad basierend auf Laufzeit-Logikprüfungen in mehrere unterschiedliche ausgehende Pfade aufteilt:

stateDiagram-v2
    state check_status <<choice>>
    [*] --> check_status
    check_status --> PremiumUser : wenn Kontostand >= 100
    check_status --> StandardUser : wenn Kontostand < 100

4. Strukturieren von zusammengesetzten (verschachtelten) Zuständen

Beim Modellieren eines komplexen Systems kann ein einzelner Hoch-Level-Zustand seinen eigenen unabhängigen inneren Lebenszyklus enthalten. Sie können eine verschachtelte Unterzustandsstruktur erstellen, indem Sie einen übergeordneten Zustand definieren, gefolgt von einem Block in geschweiften Klammern:

stateDiagram-v2
    state OrderProcessing {
        [*] --> Verpackung
        Verpackung --> Etikettierung
    }

Best Practices für saubere Zustandsmaschinen-Layouts

• Halten Sie Zustands-Tokens kurz:Verwenden Sie kurze CamelCase-Textzeichenfolgen für Ihre internen Zustands-Tokens (z. B. WartendAufRueckzahlung). Wenn Sie einen langen beschreibenden Titel auf der Zeichenfläche benötigen, verwenden Sie diestate "Beschreibender Textblock" als Token Syntax zum Erstellen eines expliziten Alias.
• Einen einzigen Einstiegspunkt durchsetzen: Beginnen Sie Ihr Diagramm immer mit einem einzigen [*] Knoten. Mehrere Ausgangspunkte können Benutzer verwirren, die den Ursprungspfad der Systeminitialisierung verfolgen möchten.
• Verwenden Sie immer stateDiagram-v2: Wählen Sie immer den stateDiagram-v2 Schlüsselwort anstelle des veralteten stateDiagram Flag. Der v2-Rendering-Engine wird ein aktualisierter Layout-Algorithmus verwendet, der eine sauberere Linienführung und bessere Verschachtelungsausrichtungen bietet.

Realitätsnahe Beispiele für Mermaid.js-Zustandsdiagramme

Beispiel 1: Lebenszyklus einer digitalen Wallet-Transaktion (Auswahlzweige und Fehler-Schleifen)

Dieser funktionale Entwurf modelliert den Lebenszyklus einer digitalen Zahlungstransaktion und zeigt, wie eine Transaktion von einem ersten Einreichungspunkt über einen Betrugsprüfungs-Zweig in endgültige Buchungsstände übergeht.

stateDiagram-v2
    Zustand fraud_check <<choice>>

    [*] --> TransSubmitted
    TransSubmitted --> fraud_check : ExecuteRiskAssessment

    fraud_check --> TransApproved : Risikowert niedrig
    fraud_check --> TransFlagged : Risikowert erhöht
    
    TransFlagged --> TransApproved : Manuelle Manager-Übersteuerung
    TransFlagged --> TransDeclined : Sicherheitszeitüberschreitung
    
    TransApproved --> SettlementPending : Ledger-Commit
    SettlementPending --> TransCompleted : Bankabwicklung erfolgreich
    
    TransDeclined --> [*]
    TransCompleted --> [*]

Syntax-Aufschlüsselung: Dieser Arbeitsablauf nutzt eine <<choice>> Block, um Sicherheitswerte direkt am Anfang zu bewerten. Die Transaktion wechselt entlang unterschiedlicher Pfade basierend auf diesen Werten, wobei klare Ereignisnamen (wie ExecuteRiskAssessment) direkt auf den Übergangspfeilen dokumentiert sind.

Beispiel 2: E-Commerce-Auftragsabwicklungspipeline (zusammengesetzte verschachtelte Systeme)

Dieser fortgeschrittene Unternehmensentwurf beschreibt einen vollständigen Versand- und Auftragsverwaltungslebenszyklus und verwendet verschachtelte zusammengesetzte Blöcke, um die internen Abläufe innerhalb der Auslieferungsphase darzustellen.

stateDiagram-v2
    [*] --> OrderPlaced
    
    OrderPlaced --> InFulfillment : Zahlung eingefangen
    
    Zustand InFulfillment {
        [*] --> ItemPicking
        ItemPicking --> QualityAudit : BatchPicked
        QualityAudit --> SecureBoxPacking : Prüfung bestanden
        SecureBoxPacking --> CarrierManifest Generated : Etikett gedruckt
    }
    
    InFulfillment --> Shipped : Carrier-Handshake
    Shipped --> Delivered : Zustellung bestätigt
    
    Delivered --> [*]

Syntax-Aufspaltung: Indem Sie Schritte innerhalb des state InFulfillment {...} Körpereblock erstellen Sie eine klare strukturelle Grenze auf der Leinwand. Die Engine behandelt diesen Block als einen einzigen konsolidierten übergeordneten Zustand, während ihre internen Arbeitsablauf-Schritte sequenziell gerendert werden, was komplexe mehrschichtige Lebenszyklen leicht navigierbar macht.