Live-Vorschau
Jede Codeänderung wird sofort gerendert, sodass Syntax- und Layoutprobleme schnell sichtbar werden.
Diagramme online erstellen
Erstellen Sie Mermaid-Diagramme online mit Live-Vorschau, Vorlagen und Beispielen. Export als PNG, SVG, PDF oder MMD, Teilen per Link – Daten bleiben im Browser.
Kostenloser Diagramm-Editor im Browser
Mermaid-Diagramme kostenlos online erstellen
Mermaid-Code schreiben oder einfügen, Änderungen sofort sehen, mit Vorlagen starten und als PNG, SVG, PDF oder MMD exportieren. Ihre Daten werden im Browser verarbeitet.
- 100 % kostenlos
- 33 Diagrammtypen
- Verarbeitung im Browser
- 4 Exportformate
Alles, um Mermaid-Code in Diagramme zu verwandeln
Ein schneller, codebasierter Workflow für Entwickler, Produktteams, Technical Writer, Studierende und Lehrende.
Vorlagen und Beispiele
Starten Sie mit Flussdiagrammen, Sequenzdiagrammen, ER-Diagrammen, Gantt, Architektur und weiteren Beispielen.
33 Diagrammtypen
Von Flussdiagrammen und Mindmaps bis C4, Sankey, Wardley Maps, Syntaxdiagrammen und ZenUML.
PNG-, SVG-, PDF- und MMD-Export
Laden Sie Rasterbild, skalierbare Vektorgrafik, Druckdokument oder den Mermaid-Quelltext herunter.
Teilen per Link
Erzeugen Sie einen Link, damit Kollegen, Kunden oder Mitstudierende dasselbe Diagramm schnell öffnen.
Datenschutz im Browser
Bearbeitung, Rendering und Datenverarbeitung laufen im Browser und helfen, sensible Inhalte auf dem Gerät zu halten.
11 Oberflächensprachen
Verfügbar in English, 简体中文, Tiếng Việt, Русский, Português (Brasil), Español, Français, 日本語, 한국어, Deutsch und العربية.
Für Diagram as Code
Diagramme bleiben editierbar, prüfbar und gut mit Versionskontrolle nutzbar.
In drei Schritten zum Diagramm
- 01
Mermaid-Code schreiben oder einfügen
Wählen Sie eine Vorlage, öffnen Sie ein Beispiel oder fügen Sie Code aus Dokumentation, GitHub, ChatGPT, Claude oder anderen Quellen ein.
- 02
Beim Schreiben live prüfen
Das Diagramm aktualisiert sich sofort, während Sie Beschriftungen, Beziehungen, Richtung, Stil und Layout anpassen.
- 03
Exportieren oder teilen
PNG, SVG, PDF oder MMD herunterladen oder einen Freigabelink erstellen.
33 Mermaid-Diagrammtypen entdecken
Wählen Sie die passende Visualisierung für Software, Prozesse, Projekte, Datenmodelle, Strategie, Forschung und Dokumentation.
- Flussdiagramm
- Klassendiagramm
- Sequenzdiagramm
- Entity-Relationship-Diagramm
- Zustandsdiagramm
- Mindmap
- Architekturdiagramm
- Blockdiagramm
- C4-Diagramm
- Cynefin-Framework
- Event Modeling
- Gantt-Diagramm
- Git-Graph
- Ishikawa-Diagramm (Fischgräte)
- Kanban-Board
- Netzwerkpaket-Diagramm
- Kreisdiagramm
- Quadrantendiagramm
- Radardiagramm
- Syntaxdiagramm (ABNF)
- Syntaxdiagramm (EBNF)
- Syntaxdiagramm (IR)
- Syntaxdiagramm (PEG)
- Anforderungsdiagramm
- Sankey-Diagramm
- Zeitachse
- Baumansicht
- Treemap
- User-Journey-Map
- Venn-Diagramm
- Wardley Maps
- XY-Diagramm
- ZenUML
Für echte Dokumentationsarbeit
Softwareentwickler
Dokumentieren Sie APIs, Services, Datenmodelle, Zustandswechsel, Git-Flows, Netzwerkpakete und Systemarchitektur.
Produkt- und Projektteams
Visualisieren Sie User Journeys, Prozesse, Roadmaps, Kanban, Zeitachsen, Anforderungen und Projektpläne.
Technical Writer
Erstellen Sie pflegbare Grafiken für READMEs, Wissensdatenbanken, Spezifikationen, Tutorials und interne Dokumentation.
Studierende und Lehrende
Erklären Sie komplexe Systeme, vergleichen Sie Konzepte, bauen Sie Mindmaps und verwandeln Sie Notizen in klare Diagramme.
Das passende Format für jeden Workflow
Vom Browser-Preview zu Dokumenten, Design, Druck, Präsentation oder Versionskontrolle – ohne neu zu zeichnen.
- PNG
- Hochwertiges Rasterbild für Folien, Dokumente, Chats und schnelles Teilen.
- SVG
- Skalierbares Vektorformat, das im Web, in Design-Tools und bei jedem Zoom scharf bleibt.
- Portables Format für Druck, Berichte, Reviews und Archivierung.
- MMD
- Originaler Mermaid-Quelltext zum späteren Bearbeiten, Wiederverwenden und Versionieren.
Diagrammdaten bleiben im Browser
Mermaid-Inhalte werden clientseitig verarbeitet. Das eignet sich für Architektur, interne Prozesse, Datenbankmodelle und andere Diagramme, die nicht zu einem externen Dienst hochgeladen werden sollen.
Häufig gestellte Fragen
Ist der Mermaid Online Editor wirklich kostenlos?
Ja. Editor, Vorlagen, Beispiele, Live-Vorschau, Linkfreigabe sowie PNG-, SVG-, PDF- und MMD-Export sind kostenlos.
Was ist Mermaid?
Mermaid ist eine textbasierte Diagrammsyntax. Knoten, Beziehungen, Ereignisse oder Zeitachsen werden als Code beschrieben und als visuelles Diagramm gerendert.
Welche Diagrammtypen werden unterstützt?
33 Kategorien, darunter Fluss-, Klassen-, Sequenz-, ER- und Zustandsdiagramme, Mindmaps, Architektur, C4, Gantt, Git, Kanban, Sankey, Zeitachsen, User Journey, Venn, Wardley Maps, XY und ZenUML.
Kann ich PNG, SVG, PDF und MMD exportieren?
Ja. PNG ist für normale Bilder, SVG für skalierbare Vektoren, PDF für Druck und formelle Dokumente, MMD für editierbaren Quelltext.
Wird mein Mermaid-Code an einen Server gesendet?
Die Website ist für Verarbeitung im Browser ausgelegt; Arbeitsdaten bleiben bei normaler Bearbeitung und normalem Export clientseitig.
Wie funktioniert das Teilen per Link?
Erstellen Sie im Editor einen Link und senden Sie ihn. Der Empfänger kann das Diagramm direkt im Browser öffnen.
Muss ich Mermaid oder Software installieren?
Nein. Ein moderner Browser genügt.
Kann ich mit einer Vorlage oder einem Beispiel starten?
Ja. Vorlagen erleichtern das Erlernen der Syntax und den schnellen Start ohne leere Seite.
Kann ich Mermaid-Code aus ChatGPT oder Claude einfügen?
Ja. Code einfügen, Live-Vorschau prüfen, mögliche Syntaxfehler korrigieren und anschließend exportieren oder teilen.
Warum Mermaid statt Drag-and-drop?
Textdiagramme sind schnell zu ändern, leicht zu kopieren, gut für Git und Code Reviews und einfacher mit Dokumentation synchron zu halten.
Text jetzt in ein klares Diagramm verwandeln
Editor öffnen, Vorlage wählen und das erste Mermaid-Diagramm in wenigen Minuten exportieren.
Mermaid-Diagramm erstellen