Live-Vorschau
Ändere den Code und sieh direkt, wie sich das Diagramm verändert. So kannst du Syntaxfehler erkennen und das Layout anpassen.
Diagramme online erstellen
Erstelle Mermaid-Diagramme online: Code einfügen und die Vorschau direkt sehen. Mit Vorlagen für Flussdiagramme, Sequenzdiagramme und ER-Diagramme. Als PNG, SVG oder PDF speichern, ohne Installation.
Kostenlos und ohne Installation
Mermaid-Diagramme online erstellen
Füge deinen Code ein oder wähle eine Vorlage. Die Vorschau zeigt dir sofort, wie dein Diagramm aussieht. Erstelle Flussdiagramme, Sequenzdiagramme oder Datenbankmodelle und speichere sie als PNG, SVG oder PDF.
- 100 % kostenlos
- 33 Diagrammtypen
- Verarbeitung im Browser
- 4 Exportformate
Alles für deine Mermaid-Diagramme
Schreibe den Code, prüfe die Vorschau und nutze das fertige Diagramm in deiner Dokumentation oder Präsentation.
Vorlagen und Beispiele
Starte mit einem Flussdiagramm, Sequenzdiagramm, ER-Diagramm oder Gantt-Diagramm und passe es an.
33 Diagrammtypen
Neben Flussdiagrammen und Mindmaps kannst du auch C4- und Sankey-Diagramme sowie Kanban-Boards erstellen.
Bilder, PDF und Code herunterladen
Speichere das Diagramm als PNG, SVG oder PDF. Mit einer MMD-Datei kannst du den Code später weiterbearbeiten.
Per Link teilen
Schicke einen Link an dein Team, damit alle dasselbe Diagramm im Browser öffnen können.
Direkt im Browser bearbeiten
Zum Bearbeiten und Exportieren musst du den Diagrammcode nicht auf einen Server hochladen.
Oberfläche in 11 Sprachen
Nutze den Editor auf Deutsch oder wähle eine andere verfügbare Sprache.
Diagramme mit Git verwalten
Diagramme bestehen aus Text. Du kannst sie kopieren, Änderungen vergleichen und zusammen mit deinem Projekt versionieren.
In drei Schritten zum Diagramm
- 01
Code einfügen oder Vorlage wählen
Nutze deinen Mermaid-Code oder öffne ein Beispiel und passe den Inhalt an.
- 02
Vorschau prüfen
Ändere die Beschriftungen und Verbindungen und prüfe das Ergebnis in der Vorschau.
- 03
Speichern oder teilen
Lade ein Bild, eine PDF- oder MMD-Datei herunter oder erstelle einen Link zum Teilen.
33 Diagrammtypen zur Auswahl
Wähle den passenden Diagrammtyp für einen Prozess, die Kommunikation zwischen Diensten, ein Datenbankmodell oder einen Projektplan.
- 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 deine Projekte, Dokumente und den Unterricht
Softwareentwickler
Zeige API-Aufrufe, das Zusammenspiel von Diensten, Datenmodelle und die Architektur deines Systems.
Produkt- und Projektteams
Stelle Abläufe, User Journeys, Roadmaps und Projektpläne übersichtlich dar.
Technical Writer
Ergänze READMEs, Anleitungen und interne Dokumente mit Diagrammen, die du später leicht aktualisieren kannst.
Studierende und Lehrende
Erkläre Zusammenhänge mit einer Skizze, vergleiche Ideen oder sammle deine Notizen in einer Mindmap.
Welches Format passt zu deinem Diagramm?
PNG eignet sich für Präsentationen, SVG zum Vergrößern ohne Qualitätsverlust und PDF zum Drucken. Mit MMD speicherst du den Code zum Weiterbearbeiten.
- 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.
Der Code wird in deinem Browser verarbeitet
Beim Bearbeiten und Exportieren wird der Mermaid-Code im Browser verarbeitet und nicht an den Server gesendet. Freigabelinks enthalten das Diagramm. Teile sie nur mit Personen, denen du den Inhalt zeigen möchtest.
Häufig gestellte Fragen
Ist der Mermaid-Editor kostenlos?
Ja. Du kannst den Editor, Vorlagen, Beispiele, die Live-Vorschau und den Export in PNG, SVG, PDF und MMD kostenlos nutzen. Auch das Teilen per Link ist kostenlos.
Was ist Mermaid?
Mit Mermaid erstellst du Diagramme aus Text. Beschreibe die Elemente und ihre Verbindungen als Code und erhalte ein Flussdiagramm, Sequenzdiagramm oder ein anderes Diagramm.
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.
Wie kann ich mein Diagramm speichern?
Wähle im Exportmenü PNG, SVG oder PDF für das fertige Diagramm. Mit MMD speicherst du den Code, um ihn später weiterzubearbeiten.
Wird mein Mermaid-Code auf einen Server hochgeladen?
Beim normalen Bearbeiten und Exportieren wird der Code im Browser verarbeitet. Freigabelinks enthalten die Diagrammdaten.
Wie teile ich mein Diagramm?
Erstelle im Editor einen Link und schicke ihn an dein Team. Wer den Link hat, kann das Diagramm im Browser öffnen.
Muss ich etwas installieren?
Nein. Öffne die Website in einem aktuellen Browser und leg los.
Kann ich mit einer Vorlage starten?
Ja. Öffne eine Vorlage oder ein Beispiel und passe den Code an dein Projekt an.
Kann ich Mermaid-Code von ChatGPT oder Claude nutzen?
Ja. Füge den Code ein und prüfe die Vorschau. Korrigiere bei Bedarf Syntaxfehler, bevor du das Diagramm exportierst.
Warum Diagramme als Code schreiben?
Text lässt sich schnell ändern, kopieren und mit Git versionieren. So bleiben Diagramme und Projektdokumentation zusammen.
Probiere ein Beispiel aus
Öffne den Editor, wähle eine Vorlage oder füge deinen Mermaid-Code ein.
Diagramm erstellen