Was ist der Mermaid-Live-Editor?

Es ist ein Tool im Browser, das Mermaid-Code in Echtzeit in ein gerendertes Diagramm umwandelt, sodass du Flussdiagramme, Sequenzdiagramme und mehr neben deiner Quelle vorschauen und als SVG exportieren kannst.

Welche Diagrammtypen unterstützt der Mermaid-Live-Editor?

Er rendert Standard-Mermaid-Syntax einschließlich Flussdiagramme, Sequenzdiagramme, Gantt-Diagramme, Klassendiagramme und Zustandsdiagramme, dieselbe Syntax, die in GitHub und vielen Dokumentationstools verwendet wird.

Wie exportiere ich ein Mermaid-Diagramm als Bild?

Sobald dein Diagramm rendert, klicke auf Herunterladen, um es als SVG-Datei zu speichern, die du in Dokumente einfügen oder in jedem Vektoreditor öffnen kannst.

Warum zeigt mein Mermaid-Diagramm einen Syntaxfehler?

Der Renderer validiert Mermaid-Code und zeigt die Parser-Meldung inline; die meisten Fehler kommen von einer fehlenden Diagrammtyp-Deklaration oder unausgeglichenen Klammern und Pfeilen.

Passt das gerenderte Diagramm zu meinem Dunkelmodus?

Ja. Der Mermaid-Live-Editor erkennt, ob du im hellen oder dunklen Modus betrachtest, und wendet automatisch das passende Mermaid-Theme an.

Bleibt mein Mermaid-Diagrammcode privat?

Ja. Deine Mermaid-Quelle wird lokal in deinem Browser gerendert und verlässt dein Gerät nie, sodass nichts auf einen Server hochgeladen wird.

Mermaid-Diagramm-Renderer

Rendere Mermaid-Diagramme (Fluss, Sequenz, Gantt) als SVG in deinem Browser.

Dein Mermaid-Code wird lokal in deinem Browser gerendert und nichts wird auf einen Server hochgeladen.

Musst du ein exportiertes Diagramm verkleinern? Probiere den SVG Optimizer.

Über Mermaid-Diagramm-Renderer

Dieser Mermaid-Live-Editor verwandelt einfachen Mermaid-Code beim Tippen in gerenderte Diagramme, wobei das Rendern in dem Moment beginnt, in dem du einfügst. Wirf ein Flussdiagramm, Sequenzdiagramm, Gantt-Diagramm, Klassendiagramm oder Zustandsdiagramm hinein und beobachte, wie das SVG sofort neben deiner Quelle erscheint. Er ist für Entwickler, technische Autoren und Architekten gebaut, die Diagramme in Dokumenten, README-Dateien oder Design-Notizen halten und eine schnelle Möglichkeit zum Vorschauen und Exportieren wollen. Der Mermaid-Diagramm-Renderer erkennt helle und dunkle Themes automatisch, um deiner Ansicht zu entsprechen, meldet Syntaxfehler inline, sodass du sie schnell beheben kannst, und lässt dich das Ergebnis als sauberes SVG herunterladen. Da alles lokal in deinem Browser verarbeitet wird, verlässt deine Diagrammquelle dein Gerät nie und nichts wird auf einen Server hochgeladen.

Funktionen

Live-Rendering von Mermaid-Code zu SVG beim Tippen
Unterstützt Flussdiagramme, Sequenz-, Gantt-, Klassen-, Zustands- und weitere Diagrammtypen
Inline-Syntaxfehlermeldungen zeigen Probleme in deinem Code genau an
Erkennt helles und dunkles Theme automatisch, passend zu deiner aktuellen Ansicht
Lade das gerenderte Diagramm als saubere SVG-Datei herunter
Strikter Sicherheitsmodus bereinigt Diagramminhalte während des Renderns
Läuft vollständig in deinem Browser, sodass nichts auf einen Server hochgeladen wird

So verwendest du Mermaid-Diagramm-Renderer

Füge deinen Mermaid-Code in das Eingabefeld ein oder tippe ihn.
Beobachte, wie das Diagramm automatisch im Ausgabebereich rendert.
Behebe etwaige Inline-Syntaxfehlermeldungen, falls sie erscheinen.
Wechsle dein Browser- oder App-Theme, um helle oder dunkle Gestaltung vorzuschauen.
Klicke auf Herunterladen, um das Ergebnis als diagram.svg zu speichern.

Beispiel

Eingabe

graph TD
  A[Start] --> B{Funktioniert?}
  B -->|Ja| C[Ausliefern]
  B -->|Nein| D[Beheben]
  D --> B

Ausgabe

Ein gerendertes SVG-Flussdiagramm: ein Start-Kasten fließt in eine Funktioniert?-Entscheidungsraute, der Ja-Zweig zeigt auf Ausliefern, der Nein-Zweig zeigt auf Beheben, und Beheben führt zurück zur Entscheidung.

Ein einfaches Flussdiagramm zu herunterladbarem SVG gerendert.

Häufige Fehler & Fehlerbehebung

Parse-Fehler oder "Syntax error in text" wird statt eines Diagramms angezeigt. — Prüfe, ob die erste Zeile einen gültigen Diagrammtyp deklariert (z. B. graph TD, sequenceDiagram, gantt) und ob Pfeile und Klammern ausgeglichen sind.
Knotenbeschriftungen mit Sonderzeichen wie Klammern oder Anführungszeichen brechen das Rendern. — Setze den Beschriftungstext in doppelte Anführungszeichen, zum Beispiel A["Meine (Beschriftung)"], damit Mermaid die Zeichen wörtlich behandelt.
Das Diagramm rendert, aber die Farben sehen gegen deinen Hintergrund falsch aus. — Der Renderer folgt automatisch deinem hellen oder dunklen Theme; wechsle dein App-Theme, um die passende Gestaltung zu erhalten.
Einrückung oder Tabs verursachen unerwartetes Layout in Flussdiagrammen. — Nutze konsistente Leerzeichen für die Einrückung und halte jeden Knoten oder Link in einer eigenen Zeile.

Häufig gestellte Fragen

Was ist der Mermaid-Live-Editor?: Es ist ein Tool im Browser, das Mermaid-Code in Echtzeit in ein gerendertes Diagramm umwandelt, sodass du Flussdiagramme, Sequenzdiagramme und mehr neben deiner Quelle vorschauen und als SVG exportieren kannst.
Welche Diagrammtypen unterstützt der Mermaid-Live-Editor?: Er rendert Standard-Mermaid-Syntax einschließlich Flussdiagramme, Sequenzdiagramme, Gantt-Diagramme, Klassendiagramme und Zustandsdiagramme, dieselbe Syntax, die in GitHub und vielen Dokumentationstools verwendet wird.
Wie exportiere ich ein Mermaid-Diagramm als Bild?: Sobald dein Diagramm rendert, klicke auf Herunterladen, um es als SVG-Datei zu speichern, die du in Dokumente einfügen oder in jedem Vektoreditor öffnen kannst.
Warum zeigt mein Mermaid-Diagramm einen Syntaxfehler?: Der Renderer validiert Mermaid-Code und zeigt die Parser-Meldung inline; die meisten Fehler kommen von einer fehlenden Diagrammtyp-Deklaration oder unausgeglichenen Klammern und Pfeilen.
Passt das gerenderte Diagramm zu meinem Dunkelmodus?: Ja. Der Mermaid-Live-Editor erkennt, ob du im hellen oder dunklen Modus betrachtest, und wendet automatisch das passende Mermaid-Theme an.
Bleibt mein Mermaid-Diagrammcode privat?: Ja. Deine Mermaid-Quelle wird lokal in deinem Browser gerendert und verlässt dein Gerät nie, sodass nichts auf einen Server hochgeladen wird.