Mermaid-Diagramm-Editor
Mermaid-Code schreiben, Flussdiagramme und mehr sehen und als SVG oder PNG exportieren
- Dateien verlassen Ihr Gerät nicht
- Läuft im Browser
- Kostenlos, ohne Anmeldung, ohne Wasserzeichen
VorschauMermaid wird geladen…
So verwenden Sie: Mermaid-Diagramm-Editor
Schreiben Sie Mermaid-Code und sehen Sie das Diagramm beim Tippen: Flussdiagramme, Sequenz-, Klassen-, Zustands- und ER-Diagramme, Gantt, Kreisdiagramm, Mindmap, Zeitleiste und Git-Graph. Die Vorschau lässt sich zoomen und verschieben; der Export erfolgt als SVG oder PNG in bis zu 4-facher Größe, gerendert im Browser.
- 1
Schreiben Sie Mermaid-Code in den Editor oder wählen Sie unter „Beispiel“ ein Diagramm als Ausgangspunkt.
- 2
Wählen Sie ein Design: „Standard“, „Neutral“, „Dunkel“ oder „Wald“.
- 3
Prüfen Sie die Vorschau: Scrollen oder Zwei-Finger-Geste zum Zoomen, Ziehen zum Verschieben, dazu „Einpassen“ und „Vollbild“.
- 4
Legen Sie „Hintergrund“ und „PNG-Größe“ fest und klicken Sie auf SVG oder PNG zum Herunterladen oder auf „SVG kopieren“ bzw. „PNG kopieren“.
Häufige Fragen
Wird mein Diagrammcode an einen Server gesendet?
Nein. Mermaid läuft in der Seite, Code und Diagramme bleiben in Ihrem Browser. Der Code wird lokal gespeichert, damit er beim nächsten Mal noch da ist.
Was passiert bei einem Syntaxfehler?
Der Fehler erscheint mit Zeilennummer unter dem Editor, und die Vorschau zeigt weiterhin das zuletzt erfolgreich gerenderte Diagramm.
Kann ich mit transparentem Hintergrund exportieren?
Ja. Stellen Sie „Hintergrund“ vor dem Export von SVG oder PNG auf „Transparent“.
Wie bekomme ich ein schärferes PNG?
Wählen Sie als PNG-Größe 2×, 3× oder 4×. Die genauen Pixelmaße stehen neben der Einstellung.
Gibt es ein Tastenkürzel zum Speichern?
Strg/⌘ + S im Editor lädt das SVG herunter. In der Vorschau zoomen + und −, die Pfeiltasten verschieben, 0 setzt auf 100 % zurück und F passt das Diagramm ein.