Mermaid Design Mermaid Design

Über uns

mermaid.design ist ein kostenloser Online-Mermaid-Diagramm-Editor. Schreiben Sie links Mermaid-Syntax und sehen Sie rechts ein live gerendertes Diagramm. Die gesamte Verarbeitung findet vollständig in Ihrem Browser statt — Ihre Diagramme verlassen niemals Ihr Gerät.

Hauptfunktionen

  • Live-Vorschau: Diagramme werden während der Eingabe neu gerendert, mit sofortiger Syntaxprüfung und Fehlermeldungen
  • Zwei Darstellungsmodi: Rendern Sie Ihr Diagramm als gestochen scharfes SVG oder als ASCII-Art, die Sie in Code-Kommentare, Dokumentationen oder Terminals einfügen können
  • Diagramm-Themes: Mermaid-Themes per Klick, darunter Standard, Neutral, Wald, Dunkel und Basis, dazu benutzerdefinierte Hintergrundfarben oder ein transparenter Hintergrund
  • ASCII-Darstellung: Wandeln Sie Flussdiagramme und Sequenzdiagramme in textbasierte Diagramme um — mit Unicode- oder reinem ASCII-Zeichensatz und anpassbarer Schriftgröße
  • Schwenken & Zoomen: Ziehen zum Schwenken und Strg/⌘ + Scrollen zum Zoomen, mit einer schwebenden Symbolleiste für präzise Steuerung
  • Code-Editor: Monaco-basierter Editor (dieselbe Engine wie VS Code) mit Mermaid-Syntaxhervorhebung
  • Vorlagen: Eine integrierte Galerie mit Vorlagen für Flussdiagramme, Sequenzdiagramme, Klassendiagramme, Zustandsdiagramme, ER-Diagramme, Gantt-Diagramme, Kreisdiagramme, Git-Graphen, Mindmaps und User Journeys
  • Export: Laden Sie Ihr Diagramm als SVG, PNG, JPG oder WebP in 1x-, 2x- oder 4x-Auflösung herunter — oder als ASCII-Klartext
  • Rein clientseitig: Keine Server, keine Uploads — alles läuft lokal in Ihrem Browser

Unterstützte Diagrammtypen

Flussdiagramme, Sequenzdiagramme, Klassendiagramme, Zustandsdiagramme, ER-Diagramme, Gantt-Diagramme, Kreisdiagramme, Git-Graphen, Mindmaps, User Journeys, C4-Diagramme, Zeitstrahlen und Anforderungsdiagramme — alles, was die Mermaid-Engine unterstützt.

Feedback

Wenn Sie Fragen oder Anregungen zu unserem Tool haben, können Sie uns gerne kontaktieren.