Mermaid Editor
Erstellen Sie Flussdiagramme, Sequenzdiagramme, Gantt-Charts und mehr aus Text mit dem Mermaid-Editor. Rendern, zoomen und als SVG oder PNG im Browser exportieren.
Was ist Mermaid?
Mermaid ist eine Open-Source-Diagrammsprache, mit der sich Diagramme aus reinem Text erstellen lassen - ähnlich wie Markdown. Knoten und Verbindungen werden in einfacher Syntax beschrieben, der Renderer zeichnet das Diagramm automatisch.
Welche Diagrammtypen werden unterstützt?
Der Editor liefert Beispiele für Flussdiagramme, Sequenz-, Klassen-, Zustands- und ER-Diagramme, Gantt-Charts, Kreisdiagramme, Mindmaps und Zeitleisten. Mermaid 11 unterstützt viele weitere Varianten zum manuellen Eingeben.
Wie erstelle ich ein Diagramm?
Wählen Sie ein Beispiel aus dem Dropdown oder tippen Sie Ihren Code in den linken Editor. Die Vorschau rendert etwa 350 ms nach dem Tippen neu; bei Syntaxfehlern zeigt ein rotes Panel die genaue Fehlermeldung, das alte Diagramm bleibt erhalten.
Wird mein Code irgendwohin gesendet?
Nein. Alles wird lokal in Ihrem Browser mit JavaScript gerendert. Ihr Code verlässt Ihr Gerät nie.
Wie exportiere ich mein Diagramm?
Mit SVG herunterladen erhalten Sie eine skalierbare Vektordatei, mit PNG herunterladen ein Bild in doppelter Auflösung (optional mit transparentem Hintergrund). Code kopieren legt den Mermaid-Quelltext in die Zwischenablage.
Warum schlägt der PNG-Export manchmal fehl?
Einige Mermaid-Features werden über foreignObject gerendert, das Browser möglicherweise nicht auf eine Canvas rastern. Dann meldet der PNG-Export einen Fehler - der SVG-Download funktioniert jedoch immer, da keine Rasterung nötig ist.
Wie funktioniert der Zoom?
Die Vorschau unterstützt 0,5x bis 2x. Die Tasten + und - schreiten um 10 % fort, Einpassen skaliert das Diagramm auf den Vorschaubereich und 100 % stellt die Originalgröße wieder her.
Kann ich Mermaid in meiner eigenen Dokumentation nutzen?
Ja. GitHub, GitLab und viele Dokumentationstools rendern Mermaid-Blöcke nativ - Umschließen Sie Ihren Code mit einem mermaid-Codeblock, und er wird automatisch dargestellt.
Unterstützt der Editor den Dunkelmodus?
Ja. Das Diagramm folgt dem Plattform-Theme: Beim Wechsel in den Dunkelmodus wird es automatisch mit Mermaids Dark-Theme neu gerendert.
Tipps für lesbare Diagramme?
Kurze Knotenbeschriftungen verwenden, eine passende Richtung wählen (TD von oben nach unten, LR von links nach rechts), sehr große Graphen in Subgraphen aufteilen und die Beispiele als Vorlage nutzen.
So verwenden Sie Mermaid Editor
Mermaid verwandelt schlichten Text in Flussdiagramme, Sequenzdiagramme, Gantt-Charts und mehr. Dieser Live-Editor rendert Ihren Code schon beim Tippen neu — vollständig im Browser, nichts verlässt Ihr Gerät.
- Wählen Sie im Dropdown „Beispiel“ einen Ausgangspunkt — neun fertige Diagramme decken Fluss-, Sequenz-, Klassen-, Zustands-, ER-, Gantt-, Kreis-, Mindmap- und Zeitleisten-Diagramme ab; die Auswahl lädt den passenden Code in den Editor.
- Bearbeiten Sie den Mermaid-Code im linken Bereich; die Vorschau rechts rendert etwa eine Drittelsekunde nach dem letzten Tastenanschlag neu. Zeigt das rote Panel einen Syntaxfehler, bleibt das zuletzt gültige Diagramm sichtbar, während Sie korrigieren.
- Zoomen Sie mit den Plus- und Minus-Buttons zwischen 50 % und 200 %, klicken Sie auf „Einpassen“, um das Diagramm in den Vorschaukasten zu skalieren, oder auf „100%“ für die Originalgröße.
- Aktivieren Sie „Transparenter Hintergrund“, wenn das PNG ohne weißen Untergrund sein soll, und klicken Sie dann auf „SVG herunterladen“ oder „PNG herunterladen“ — das PNG wird in doppelter Auflösung exportiert und bleibt eingebettet scharf.
- Klicken Sie auf „Code kopieren“, um den Mermaid-Quellcode in die Zwischenablage zu holen — für Doku, Wikis oder Versionsverwaltung.
Rendert ein Diagramm nicht, kommentieren Sie zuletzt geänderte Zeilen aus, um den Fehler einzugrenzen — die Fehlermeldung nennt die betroffene Zeile, und die Vorschau behält Ihre letzte funktionende Version, bis die Syntax wieder stimmt.
Verwandte Tools
- Code zu Bild Wandeln Sie Code-Snippets in teilbare Bilder mit Syntaxhervorhebung, benutzerdefinierten Themes und Fensterdekorationen um. 100% Privatsphäre, alles in Ihrem Browser.
- Markdown-Vorschau Kostenloser Online-Markdown-Editor mit Live-Vorschau. Schreiben, rendern und exportieren Sie Markdown mit voller GFM-Unterstützung.
- SVG-Viewer & Editor SVG-Dateien online anzeigen, bearbeiten und optimieren. Echtzeit-Vorschau, Code-Bearbeitung und Optimierungstools.
- JSON-Baumansicht Visualisieren Sie JSON-Daten als interaktiven einklappbaren Baum. Suchen Sie nach Schlüsseln und Werten, verfolgen Sie JSONPath beim Hovern und verarbeiten Sie große Dateien mit Lazy Loading. Drag & Drop von .json-Dateien wird unterstützt.
- Hash-Prüfer MD5, SHA-1, SHA-256, SHA-512 Datei-Hashes lokal berechnen und prüfen
- Chmod-Rechner Kostenloser Online-Chmod-Rechner zur Visualisierung und Berechnung von Linux-Dateiberechtigungen mit Kontrollkästchen. Sofortige Umwandlung zwischen numerischer (755, 644) und symbolischer Notation (rwxr-xr-x). Unterstützt Sonderberechtigungen wie setuid, setgid, sticky bit.
- ASCII-Tabelle Vollständige ASCII-Zeichencodierungsreferenz mit Dezimal-, Hexadezimal-, Oktal-, Binärcodes, HTML-Entities und Beschreibungen. Sofortige Suche und Filterung.
- Hex-Betrachter Zeigen Sie Dateiinhalte im Hex-Dump-Format mit Suche, Offset-Navigation und virtuellem Scrollen an