Zustandsdiagramm-Generator
Modellieren Sie einen Zustandsautomaten als Text und sehen Sie ihn dargestellt. Definieren Sie Zustände, Übergänge und Ereignisse mit Mermaids stateDiagram-v2 — Bestellungslebenszyklus, Verbindungszustände, Genehmigungsflüsse — alles auf Ihrem Gerät.
One step per line. Indent two spaces to branch beneath the line above.
Zustände, Übergänge und die dazwischen liegenden Ereignisse
Ein Zustandsdiagramm antwortet "was kann dieses Ding sein und wie bewegt es sich zwischen diesen Zuständen?" Mermaids stateDiagram-v2 wird direkt auf das abgebildet: "[*]" markiert den Anfang und das Ende, jede "A --> B: event" ist ein beschrifteter Übergang und ein zusammengesetzter "state Name { … }" verschachtelt Unterzustände für reicheres Verhalten. Es ist die klarste Möglichkeit, einen Bestellungslebenszyklus, ein Verbindungsprotokoll oder einen Dokumenten-Genehmigungspfad zu fixieren.
Das Schreiben als Text bedeutet, dass das Modell ehrlich bleibt. Fügen Sie einen Zustand hinzu, benennen Sie das Ereignis, das ihn erreicht, neu rendern — das Layout fließt automatisch um und das Diagramm treibt niemals von den Regeln ab, die es dokumentiert.
Von einem Status-Enum zu einem Bild
Wenn Ihr Code bereits ein Statusfeld hat — ausstehend, bezahlt, versandt, storniert — dreht ein Zustandsdiagramm diesen Enum in etwas, das ein ganzes Team vernünftig durchdenken kann, einschließlich der Übergänge, die Ihr Code ermöglicht und der, die er verbietet. Beschriften Sie jeden Pfeil mit dem Ereignis oder der Methode, die ihn auslöst, damit das Diagramm wie die Spec liest.
Legen Sie den Mermaid-Block in ein Design-Dokument oder einen Pull Request, und Reviewer können einen fehlenden Übergang oder einen unmöglichen Pfad entdecken, bevor er zu einem Bug wird.
Häufig gestellte Fragen
Wie erstelle ich ein Zustandsdiagramm aus Text?
Beginnen Sie mit "stateDiagram-v2", markieren Sie den Anfang mit "[*] --> First", dann fügen Sie Übergänge wie "Pending --> Paid: payment confirmed" hinzu. End-Zustände verwenden "Last --> [*]". Es wird live dargestellt und exportiert zu SVG oder PNG.
Wie beschrifte ich einen Übergang mit seinem Ereignis?
Setzen Sie den Trigger nach einem Doppelpunkt auf den Pfeil, zum Beispiel "Draft --> Submitted: submit". Die Beschriftung zeigt das Ereignis, die Methode oder den Zustand, der die Zustandsänderung verursacht.
Kann ich Zustände verschachteln (zusammengesetzte Zustände)?
Ja — wickeln Sie Unterzustände in "state Name { … }" mit ihrem eigenen "[*] --> …" Start. Die Zusammenfassung oben zeigt die Syntax; das Media-Player-Beispiel demonstriert einen zusammengesetzten Playing-Zustand.
Was ist der Unterschied zwischen einem Zustandsdiagramm und einem Flussdiagramm?
Ein Flussdiagramm zeigt einen Prozess — Schritte und Entscheidungen, die einmal ausgeführt werden. Ein Zustandsdiagramm zeigt die Zustände, die ein Objekt über seine Lebensdauer einnehmen kann und die Ereignisse, die es zwischen ihnen bewegen, daher sind Schleifen zu früheren Zuständen normal.
Wird mein Zustandsdiagramm irgendwo hochgeladen?
Nein. Es wird im Browser mit Mermaid dargestellt, daher verlassen Ihre Zustände, Ereignisse und interne Logik niemals Ihr Gerät.