Mermaid-Diagrammeditor
Rendern Sie Mermaid-Code – Flussdiagramme, Sequenz-, Klassen-, ER- und Gantt-Diagramme – zu einem SVG, das Sie ansehen und herunterladen können.
Eingabe
Ergebnis
Das Ergebnis erscheint hier.Mermaid macht aus ein paar Zeilen Text ein Diagramm, und GitHub, GitLab, Notion sowie die meisten Dokumentationswerkzeuge rendern es – doch wenn ein Diagramm nicht rendert oder Sie es als Bild für Folien oder ein Designdokument brauchen, möchten Sie es für sich allein sehen. Fügen Sie den Code ein, und dieser Editor rendert ihn mit Mermaid selbst, in der Seite, in einem von vier Themes. Ein Syntaxfehler kommt mit Mermaids eigener Meldung und Zeilennummer zurück; ein gültiges Diagramm als Vorschau und als SVG-Code, den Sie herunterladen oder in ein Designwerkzeug einfügen können.
So arbeitet es
- Es läuft die Mermaid-Bibliothek (Version 12), daher funktioniert jeder Diagrammtyp, den sie unterstützt: Flussdiagramm, Sequenz-, Klassen-, Zustands- und ER-Diagramm, Gantt, Kreisdiagramm, Mindmap, Zeitleiste und mehr.
- Beschriftungen werden als SVG-Text statt als eingebettetes HTML gezeichnet, sodass die Datei in Figma, Inkscape oder einem Browser-Tab gleich aussieht.
- Mermaid läuft im strikten Sicherheitsmodus: Klick-Handler und HTML in Beschriftungen sind deaktiviert, und die Vorschau wird als Bild angezeigt, sodass eingefügter Code kein Skript ausführen kann.
- Mermaid ist eine große Bibliothek und wird daher erst geladen, wenn Sie dieses Werkzeug zum ersten Mal ausführen.
Wohin Ihre Daten gehen
Nirgendwohin. Dieses Werkzeug läuft vollständig in Ihrem Browser: Der eingefügte Text wird von der Seite verarbeitet und weder an einen Server übertragen noch protokolliert.
Dieses Tool ist kostenlos und braucht kein Konto. Die Ergebnisse existieren nur in Ihrer geöffneten Seite und werden nirgends gespeichert.
Was es kostet
Dieses Werkzeug ist kostenlos, ohne Anmeldung und ohne Punkte.
Häufige Fragen
- Warum zeigt mein Diagramm einen Parse-Fehler?
- Mermaid meldet die Zeile und was es dort erwartet hat. Die üblichen Ursachen sind eine Beschriftung mit Klammern, Anführungszeichen oder einem Doppelpunkt – setzen Sie sie in doppelte Anführungszeichen, A["Label (v2)"] –, ein Pfeil ohne Ziel oder ein Schlüsselwort für den Diagrammtyp, das falsch geschrieben ist oder in der ersten Zeile fehlt.
- Kann ich statt SVG ein PNG bekommen?
- Dieses Werkzeug erzeugt SVG, das in jeder Größe scharf bleibt und von Dokumentationsseiten eingebettet wird. Für ein PNG öffnen Sie das heruntergeladene SVG mit dem Werkzeug SVG zu PNG auf dieser Website, das es in der gewünschten Auflösung rendert.
- Sieht mein Diagramm auf GitHub genauso aus?
- Das Layout stammt von Mermaid, die Struktur ist also dieselbe, aber GitHub rendert mit seiner eigenen Mermaid-Version und seinem eigenen Theme, das dem hellen oder dunklen Modus des Lesers folgt. Sehr neue Syntax funktioniert auf GitHub möglicherweise erst nach einem Update.
- Kann eine KI den Mermaid-Code für mich schreiben?
- Ja – das KI-Werkzeug für Mermaid-Diagramme auf dieser Website macht aus einer Beschreibung in normaler Sprache Mermaid-Code, mit Ihrem eigenen API-Schlüssel. Fügen Sie die Ausgabe hier ein, um sie zu prüfen und zu rendern.
Das Open Source dahinter
Dieses Werkzeug läuft auf mermaid-js/mermaid, veröffentlicht unter MIT. Wer dasselbe Verhalten im eigenen Programm braucht, greift zu dieser Bibliothek.
mermaid-js/mermaidAuch bekannt als
- mermaid editor
- mermaid live editor
- mermaid zu svg
- mermaid diagramm online
- mermaid diagramm rendern
- mermaid flussdiagramm