Mermaid Zustandsdiagramm-Viewer
Rendern Sie Mermaid-Zustandsdiagramme und Zustandsautomaten in Ihrem Browser. Vorschau von Übergängen und Export nach SVG oder PNG. Kostenloses Online-Tool.
Geben Sie Mermaid-Code ein, um Ihr Diagramm in der Vorschau anzuzeigen
Zustandsdiagramme modellieren das Verhalten eines Systems, indem sie alle möglichen Zustände und die Übergänge zwischen ihnen anzeigen, die durch Ereignisse ausgelöst werden. Sie sind unerlässlich für das Design von Zustandsautomaten, die Modellierung von Lebenszyklen von UI-Komponenten, die Dokumentation von Bestell-Workflows und die Spezifikation des Verhaltens von eingebetteten Systemen. Die `stateDiagram-v2`-Syntax von Mermaid wird häufig von KI-Assistenten generiert, wenn Entwickler Fragen stellen wie 'Modelliere die Zustände einer Zahlungsbestellung', 'Zeige mir den Lebenszyklus einer React-Komponente' oder 'Entwerfe den Zustandsautomaten für eine Ampel'. Das Einfügen der Ausgabe in Zolkit zeigt sofort, ob die Übergänge vollständig sind, ob Zustände unerreichbar sind und ob der 'Happy Path' und die Fehlerpfade korrekt verbunden sind. Der Zustandsdiagramm-Viewer von Zolkit unterstützt die `stateDiagram-v2`-Funktionen, einschließlich Anfangs- und Endzuständen (`[*]`), Übergangsbezeichnungen, zusammengesetzten Zuständen (verschachtelte Zustandsdiagramme), parallelen Zuständen mit `--`, Auswahl-Pseudozuständen und Notizen. Der Viewer rendert sowohl einfache endliche Automaten als auch komplexe hierarchische Zustandsautomaten, die in realen Anwendungen vorkommen.
Kostenloser Online Mermaid Diagramm-Viewer und Exporter
Der Mermaid Diagramm-Viewer von Zolkit ermöglicht es Ihnen, beliebigen Mermaid-Code einzufügen und sofort ein gerendertes Diagramm anzuzeigen – keine Installation, keine Anmeldung, kein Hochladen auf Server. Alles läuft in Ihrem Browser, was ihn zur schnellsten Methode macht, um KI-generierte Diagramme von Claude, ChatGPT oder Gemini zu überprüfen. Unterstützt alle gängigen Mermaid-Diagrammtypen: Flussdiagramme, Sequenzdiagramme, Klassendiagramme, ER-Diagramme, Gantt-Diagramme, Zustandsdiagramme, Mindmaps, Git-Graphen, Tortendiagramme und Zeitachsen.
Sofortige Live-Vorschau
Diagramme werden automatisch während der Eingabe gerendert, mit einer Verzögerung von 300 ms, sodass es sich nie träge anfühlt.
100% privat
Das gesamte Rendering findet in Ihrem Browser mit mermaid.js statt. Ihr Code wird niemals an einen Server gesendet.
SVG & PNG Export
Laden Sie Ihr Diagramm als scharfes Vektor-SVG oder als hochauflösendes 2× PNG herunter, bereit für Dokumente und Präsentationen.
Alle Mermaid Diagrammtypen
Unterstützt Flussdiagramme, Sequenzdiagramme, Klassendiagramme, ER-Diagramme, Gantt-Diagramme, Mindmaps, Git-Graphen und mehr.
Bereit für KI-Diagramme
Gebaut für das KI-Zeitalter – Vorschau von Diagrammen, die von Claude, ChatGPT, Gemini oder jedem LLM generiert wurden.
Immer kostenlos
Kein Konto erforderlich, keine Nutzungslimits, keine Wasserzeichen. Zolkit's Mermaid-Viewer ist für immer komplett kostenlos.
So zeigen Sie ein Mermaid-Diagramm in der Vorschau an
- 1
Fügen Sie Ihren Mermaid-Code in den Editor auf der linken Seite ein – Sie können ihn von einem KI-Assistenten kopieren oder manuell schreiben.
- 2
Das Diagramm wird sofort im Vorschaufenster auf der rechten Seite gerendert. Bei einem Syntaxfehler erklärt eine Meldung das Problem.
- 3
Klicken Sie auf 'SVG exportieren' oder 'PNG exportieren', um Ihr Diagramm als Datei herunterzuladen, die für Dokumentationen, Präsentationen oder zum Teilen bereit ist.
Häufig gestellte Fragen
Was ist der Unterschied zwischen stateDiagram und stateDiagram-v2?
`stateDiagram-v2` ist die aktuell empfohlene Syntax in Mermaid v10+. Sie fügt Unterstützung für zusammengesetzte (verschachtelte) Zustände, parallele Regionen, Auswahl-Pseudozustände, Forks und Joins hinzu – Funktionen, die im ursprünglichen `stateDiagram` fehlen. Die v1-Syntax funktioniert weiterhin aus Gründen der Abwärtskompatibilität, aber alle neuen Diagramme sollten `stateDiagram-v2` verwenden, um auf den vollständigen Funktionsumfang zugreifen zu können.
Wie zeige ich verschachtelte (zusammengesetzte) Zustände in Mermaid an?
Verwenden Sie einen `state`-Block mit geschweiften Klammern: `state Verarbeitung { [*] --> Validierung \n Validierung --> Abrechnung \n Abrechnung --> [*] }`. Der äußere Zustand 'Verarbeitung' enthält seine eigene innere Zustandsmaschine. Zusammengesetzte Zustände modellieren komplexe Workflows, bei denen ein übergeordneter Zustand interne Teilprozesse hat, wie z. B. eine Bestellung, die während des Status 'In Bearbeitung' mehrere Unterschritte durchläuft.
Wie füge ich Beschriftungen zu Zustandsübergängen hinzu?
Fügen Sie einen Doppelpunkt nach dem Übergangspfeil hinzu: `Leerlauf --> Laden : Benutzer sendet Formular`. Die Beschriftung dokumentiert das Ereignis oder die Bedingung, die den Übergang auslöst. Gut beschriftete Übergänge machen ein Zustandsdiagramm zu einer ausführbaren Spezifikation – Entwickler können jede Beschriftung direkt einer Funktionsaufruf, einem Ereignishandler oder einer API-Antwort in ihrer Implementierung zuordnen.
Was sind parallele Zustände und wann sollte ich sie verwenden?
Parallele Zustände (mit dem Trennzeichen `--` innerhalb eines zusammengesetzten Zustands) modellieren Teile eines Systems, die parallel laufen. Zum Beispiel könnte ein Musikplayer parallele Zustände für die Wiedergabe (spielend/pausiert) und die Anzeige (Vollbild/normal) haben. Verwenden Sie parallele Zustände, wenn zwei unabhängige Verhaltensweisen nebeneinander existieren und jede ihre eigene Zustandsmaschine benötigt, anstatt jede Kombination als separaten übergeordneten Zustand zu modellieren.