mermaid.design ist ein Online-Editor für Mermaid-Diagramme. Schreibe Mermaid-Syntax in reinem Text und sieh zu, wie daraus Flussdiagramme, Sequenzdiagramme, ER-Diagramme, Gantt-Diagramme und mehr entstehen — live gerendert, während du tippst.
Alles läuft lokal in deinem Browser: kein Konto, kein Upload, keine Server-Roundtrips. Dein Diagramm-Code bleibt auf deinem Gerät, und jeder Export wird genau dort erzeugt, wo du arbeitest.
Mehr als ein Einfügen-und-Vorschau-Werkzeug — eine vollständige Umgebung zum Entwerfen, Gestalten und Exportieren von Diagrammen als Code.
Ein leichter CodeMirror-Editor mit Mermaid-Syntax-Highlighting, Inline-Fehlern und synchronisierter Canvas-Auswahl, kombiniert mit einer Live-Vorschau mit Schwenken und Zoomen.
Bearbeite Beschriftungen und Diagrammelemente direkt auf der Canvas. Änderungen werden mit dem Mermaid-Quellcode synchronisiert; Auswahl sowie Rückgängig/Wiederholen werden zwischen Code und Vorschau geteilt.
Schreibe Mermaid schneller mit kontextbezogener Autovervollständigung, fertigen Snippets, Suchen und Ersetzen, Formatierung per Klick und Inline-Syntaxdiagnose.
Wechsle zwischen der offiziellen Mermaid-SVG-Ausgabe und einer ASCII-Engine, die dein Diagramm in reinem Text zeichnet — ideal für Terminals, Code-Kommentare und Doku.
Stelle alle 73 Mermaid-Theme-Variablen ein, starte mit über 20 eingebauten und Designer-Presets oder leite eine ganze Palette aus einer einzigen Ausgangsfarbe ab — und exportiere das Theme anschließend als JSON oder Frontmatter.
Passe 438 Mermaid-Rendering-Optionen in 33 übersichtlichen Gruppen an – von Layout und Abständen bis zum Verhalten einzelner Diagrammtypen, ganz ohne manuelle Bearbeitung der Konfigurations-JSON.
Starte aus einer Galerie mit Flussdiagramm-, Sequenz-, Zustands-, ER-, Gantt- und weiteren Vorlagen — jede wird vor dem Anwenden live mit deinem aktuellen Theme gerendert.
Lade dein Diagramm als SVG, PNG, JPG oder WebP herunter — optional mit transparentem Hintergrund — oder kopiere das ASCII-Rendering direkt in dein README.
Keine Anmeldung und kein Backend: Parsen, Rendern und Exportieren geschehen clientseitig, sodass sensible Architekturdiagramme dein Gerät nie verlassen.
Derselbe Mermaid-Code, gerendert nach deinem Geschmack — wechsle die Engine jederzeit über die Navigationsleiste.
Das klassische Mermaid-SVG-Rendering aus der Dokumentation, mit voller Kontrolle über jede Theme-Variable und jedes Render-Konfigurationsfeld.
Offiziellen Editor öffnen →Rendere Diagramme als ASCII-Art für Terminals, Code-Kommentare und Klartext-Dokumente — mit einstellbarem Zeichensatz und Schriftgröße.
ASCII-Modus ausprobieren →Beschreibe ein Diagramm in natürlicher Sprache und lass die KI den Mermaid-Code für dich entwerfen. Dieser Modus ist unterwegs.
Geplantes ansehen →Vom Flussdiagramm bis zum C4-Architekturdiagramm — was Mermaid unterstützt, kannst du hier entwerfen.
Starte von Grund auf, füge vorhandenen Code ein oder wähle eine der 31 Vorlagen aus der Galerie.
Passe Theme-Variablen an, wende ein Preset an oder wechsle zur Styled-Engine für Schatten und eigene Konturen — ganz ohne CSS.
Lade SVG, PNG, JPG oder WebP für Dokumente und Folien herunter oder TXT für das ASCII-Rendering. Dein Theme reist als JSON oder Frontmatter mit.
Nein. mermaid.design läuft vollständig in deinem Browser — öffne die Seite und beginne, Mermaid-Syntax zu tippen. Nichts zu installieren, nichts zu registrieren.
Nein. Parsen, Rendern und Exportieren geschehen lokal in deinem Browser. Dein Diagramm-Code wird im lokalen Speicher deines Browsers abgelegt und verlässt dein Gerät nie.
Alle von Mermaid 12 unterstützten Typen, darunter Flussdiagramme, Sequenzdiagramme, Klassendiagramme, Zustandsdiagramme, ER-Diagramme, Gantt-Diagramme, Mindmaps, Zeitachsen, Sankey-Diagramme, C4-Diagramme und mehr.
Du kannst Diagramme als SVG, PNG, JPG oder WebP (optional mit transparentem Hintergrund) herunterladen, ASCII-Renderings als Klartext exportieren und deine Theme-Konfiguration als JSON oder Mermaid-Frontmatter kopieren.
Ja. Diagramme, die du erstellst und exportierst, gehören dir — nutze sie in Dokumentation, Präsentationen, Blogartikeln oder Produkten, kommerziell oder nicht.
Ohne Anmeldung — der Editor oben wartet schon auf dich.