Mermaid-Diagramm-Editor
Auf der einen Seite tippen Sie Mermaid, auf der anderen entsteht dabei das Diagramm. Ein Fehler wird in seiner Zeile markiert, während die letzte funktionierende Fassung sichtbar bleibt. Alles läuft in diesem Browser-Tab.
So funktioniert es
Mermaid ist eine Art, ein Diagramm als Text zu schreiben. Ein paar Zeilen wie „A --> B“ werden zu einem Flussdiagramm, einem Sequenzdiagramm, einem Klassen- oder Datenbankdiagramm, einem Gantt-Diagramm oder einer Mindmap. GitHub, GitLab, Notion und die meisten Dokumentationswerkzeuge zeichnen es direkt an Ort und Stelle, deshalb sind Diagramme in READMEs und Dokumentationen so oft Mermaid. Was sie nicht bieten, ist ein guter Ort, um eines zu schreiben.
Dieser Editor zeichnet das Diagramm, während Sie tippen. Ist eine Zeile falsch, wird sie unterstrichen, und die Meldung sagt, was Mermaid erwartet hat. Die letzte funktionierende Fassung bleibt abgedunkelt sichtbar, damit das Bild nicht jedes Mal verschwindet, wenn Sie gerade mitten in einem Pfeil sind. Große Diagramme lassen sich verschieben und zoomen.
Wenn es passt, speichern Sie es als SVG oder als PNG in der Größe für seinen Zweck: ein Dokument, eine Folie oder eine gedruckte Seite. Sie können es auch direkt in die Zwischenablage kopieren. Ihr Entwurf bleibt zwischen zwei Besuchen in diesem Browser, und ein Link zum Teilen trägt das Diagramm in sich selbst, sodass nichts davon je auf einem Server gespeichert wird.
So verwenden Sie es
- 1 Mermaid tippen oder einfügen, eine .mmd- oder Markdown-Datei öffnen oder mit einem Beispiel beginnen.
- 2 Die Vorschau beobachten. Ist eine Zeile unterstrichen, korrigieren Sie sie; die Meldung sagt, was Mermaid erwartet hat.
- 3 Ein Aussehen wählen und die Vorschau verschieben oder zoomen, um die Details zu prüfen.
- 4 SVG oder PNG herunterladen, das Bild kopieren oder einen Link zum Teilen des Diagramms kopieren.
Gut zu wissen
- Beim Öffnen einer Markdown-Datei wird ihr erster ```mermaid-Block geöffnet, so lässt sich das Diagramm einer README für sich bearbeiten.
- Ein Beispiel ersetzt den Inhalt des Editors, und Ctrl+Z holt Ihr Diagramm zurück.
- SVG bleibt in jeder Größe scharf und ist die Wahl fürs Web. PNG nehmen Folien, Chat-Apps und Textverarbeitungen am zuverlässigsten an.
- Ein Theme, das im Diagramm mit einer %%{init}%%-Zeile gesetzt ist, hat Vorrang vor der Einstellung Aussehen.
- Nichts wird hochgeladen. Das Diagramm wird in diesem Tab gezeichnet, und Links zum Teilen tragen es in dem Teil der Adresse, den ein Browser nie an einen Server schickt.
Browser-Unterstützung
- Chrome 94 und neuer
- Firefox 93 und neuer · volle Geschwindigkeit ab 113
- Safari 16.4 und neuer
- Edge 94 und neuer
Das sind die ältesten Versionen mit allem, was das Werkzeug benutzt. Sie werden aus dem Werkzeug selbst errechnet und ändern sich also mit ihm.
Versionsnummern geprüft am 2026-09-04.
Häufige Fragen
Wird mein Diagramm irgendwohin hochgeladen?
Nein. Mermaid läuft in diesem Browser-Tab, und Ihr Entwurf wird nur in diesem Browser gespeichert. Sie können das in den Entwicklerwerkzeugen Ihres Browsers auf dem Tab „Netzwerk“ nachprüfen: Beim Tippen wird nichts gesendet.
Wie funktionieren Links zum Teilen ohne Server?
Das Diagramm wird komprimiert und in den Teil des Links nach dem # geschrieben. Browser schicken diesen Teil nie an die Website, also öffnet der Link das Diagramm auf jedem Gerät, ohne dass die Seite selbst es je erhält. Ein langes Diagramm ergibt einen langen Link.
Welche Diagrammtypen werden unterstützt?
Alles, was Mermaid 12 zeichnet: Flussdiagramme, Sequenz-, Klassen-, Zustands- und Entity-Relationship-Diagramme, Gantt-Diagramme, Kreisdiagramme, Mindmaps, Zeitstrahlen, User Journeys, Git-Graphen, Quadrantendiagramme, Sankey- und XY-Diagramme sowie die neueren Block-, Packet-, Architektur-, Kanban-, Radar- und Treemap-Diagramme.
Warum ist eine Zeile unterstrichen?
Dort hat Mermaid aufgehört, das Diagramm zu verstehen. Die Meldung daneben stammt von Mermaid selbst und nennt, was es dort erwartet hat. Oft liegt der eigentliche Fehler kurz davor, etwa eine Klammer oder ein Anführungszeichen, das nie geschlossen wurde.
Wie groß wird das PNG?
Das hängt vom Zweck ab. Für ein Dokument doppelt so groß, wie das Diagramm gezeichnet ist, damit es auch auf Bildschirmen mit hoher Pixeldichte scharf bleibt. Für Folien so groß, wie auf einen 4K-Bildschirm passt. Für den Druck so groß, wie auf A4 bei 300 dpi passt. Die Schaltfläche zeigt die genaue Pixelgröße vor dem Herunterladen.
Kann ich ein Diagramm aus meiner README bearbeiten?
Ja. Öffnen Sie die Markdown-Datei, und ihr erster Mermaid-Block wird im Editor geöffnet. Wenn Sie fertig sind, kopieren Sie den Text zurück in die Datei.
Ist es sicher, ein Diagramm zu öffnen, das mir jemand geschickt hat?
Diagramme werden im strikten Modus von Mermaid gezeichnet. Alles, was Code ausführen könnte, wird entfernt, und eine Zeile im Diagramm kann diesen Modus nicht abschalten.
Verwandte Werkzeuge
Ihre Dateien werden auf Ihrem Gerät verarbeitet und nicht hochgeladen. Sie können das in den Entwicklerwerkzeugen Ihres Browsers unter dem Tab „Netzwerk“ überprüfen.