Mermaid-Editor

Eingabe

Ausgabe

Warte auf Eingabe

Zeilen: 6Zeichen: 108

Warte auf EingabeZoom: 100%

Was ist der Mermaid-Diagrammeditor?

Mermaid ist ein JavaScript-basiertes Diagrammerstellungstool, das eine Markdown-ähnliche Textsyntax verwendet, um verschiedene Diagramme zu generieren. Ohne manuelles Ziehen von Formen genügt das Schreiben einfacher Textbeschreibungen, um automatisch Flussdiagramme, Sequenzdiagramme, Klassendiagramme und mehr zu erstellen. Dieses Tool bietet eine Online-Mermaid-Bearbeitungsumgebung mit Echtzeitvorschau, Ziehen und Zoomen sowie Exportfunktionen und hilft Entwicklern, Diagramme schnell zu erstellen und zu teilen. Mermaid eignet sich besonders für Diagramme, die nah am Text oder Code gepflegt werden sollen, etwa Flows, Sequenzen, Gantt-Pläne und Architekturübersichten. Der Vorteil liegt in Versionierbarkeit und schneller Änderung, nicht in pixelgenauer Illustration. Bei komplexen Diagrammen sollten Lesbarkeit, Knotenlänge, Theme und Exportformat geprüft werden, weil ein gültiger Mermaid-Code trotzdem unübersichtlich wirken kann.

Anleitung

Verwendung

Gib Mermaid-Syntax in den linken Editor ein
Das rechte Feld rendert das Diagramm in Echtzeit
Verwende die Maus zum Ziehen und das Scrollrad zum Zoomen
Klicke auf die Export-Schaltflächen, um als PNG oder SVG zu speichern

Diagramm-Prüfungen

Rendere nach jeder bedeutsamen Änderung; Mermaid-Fehler entstehen häufig durch Einrückungen, nicht maskierte Satzzeichen oder nicht unterstützte Syntax für den gewählten Diagrammtyp.
Überprüfe vor dem Export, ob Beschriftungen, Pfeile und Zeilenumbrüche in der Zielgröße lesbar bleiben.

Anwendungsfälle

Diagramme aus Mermaid-Code entwerfenMermaid-Syntax links eingeben und rechts ein entprelltes Live-Rendering über die Mermaid-Bibliothek sehen. Integrierte Beispiele decken Flussdiagramme, Sequenzdiagramme, Klassendiagramme, Zustandsdiagramme, ER-Diagramme, Gantt-Diagramme, Kreisdiagramme, Mindmaps und Customer-Journey-Diagramme ab. Derselbe Quellcode kann in eine README, ein Wiki oder ein GitHub-Issue eingefügt werden – die jeweilige Plattform rendert das Diagramm eigenständig.

Große Diagramme mit Verschieben, Zoomen und Vollbild prüfenDer Vorschaubereich unterstützt Mausziehen, Scrollrad-Zoom von 10 % bis 500 %, Doppelklick-Zurücksetzen und einen Vollbildmodus, dessen Zustand in localStorage gespeichert wird. So lassen sich komplexe Architektur- oder Prozessdiagramme besser inspizieren als mit einer statischen Vorschau. Vor einem Screenshot in einen detaillierten Bereich zoomen ist oft der einzige Weg, Pfeilbeschriftungen in dichten Flussdiagrammen lesbar zu halten.

Diagramme für Dokumentation exportierenWenn das Diagramm erfolgreich gerendert wurde, kann es als SVG für editierbare Vektorverwendung oder als weißhintergrundiges PNG über Canvas exportiert werden. Syntaxfehler werden im Vorschaubereich angezeigt, sodass das Diagramm vor dem Einfügen in README, Folien oder Ticket korrigiert werden kann. PNG eignet sich für Präsentationen und reine Bildkanäle, SVG hält Links und Styling editierbar für Design-Übergaben.

Diagramme für Stakeholder-Screenshots thematisieren und ausrichtenVor dem Screenshot Theme (Standard, Dark, Forest, Neutral) und TD/LR/BT/RL-Graphrichtung wechseln, damit dasselbe Diagramm in Light-Mode-Dokumenten wie in Dark-Mode-Dashboards gut lesbar ist. Die aktiven themeVariables stehen ebenfalls zur Verfügung, um fontFamily, primaryColor und Kantenfarbe für markenspezifische Exporte zu überschreiben. Doppelklick setzt den Zoom nach Theme-Wechsel zurück, damit die neue Farbpalette sauber erfasst wird.

Zwischen Flussdiagramm-, Sequenz-, ER- und Gantt-Syntax v10 wechselnDie richtige Diagrammfamilie für die jeweilige Frage wählen: flowchart (graph TD) für Verzweigungsentscheidungen, sequenceDiagram für zeitgeordnete Aufrufe, erDiagram für Entity-Relationship-Modellierung und gantt für Projektzeitpläne. Mermaid-Syntax v10 (und spätere v11) hat mehrere Standardwerte geändert – classDef wird jetzt oben deklariert, subgraph-IDs sind Pflicht, und Gantt nutzt ISO-Datumsformate – sodass bestehende Snippets aus älteren Versionen vor dem Rendering eine kleine Anpassung benötigen können.

Technisches Prinzip

Mermaid ist eine Open-Source-Diagrammrendering-Bibliothek, die 2014 von Knut Sveidqvist ins Leben gerufen wurde. Die Kernidee besteht darin, eine menschenlesbare DSL (Domain Specific Language) über einen Parser in eine SVG-Grafik zu verwandeln. Die gesamte Pipeline hat drei Schritte: Ein Lexer/Parser (erzeugt von jison) wandelt den Quelltext in eine interne Datenstruktur um; ein diagrammtyp-spezifischer Layout-Algorithmus berechnet die Koordinaten der Knoten und Kanten; schließlich rendert d3 das Layout als SVG-Elemente. Verschiedene Diagramme verwenden verschiedene Layout-Engines: Flussdiagramme nutzen standardmäßig dagre (ein Layered-Directed-Graph-Layout) und unterstützen ab v10 auch ELK (leistungsfähiger, aber schwerer); Sequenzdiagramme verwenden ein eigenes Timing-Layout, das Teilnehmer horizontal platziert und Nachrichten vertikal stapelt; Gantt-Diagramme ordnen Aufgaben manuell auf einer Zeitachse mit Abhängigkeiten an; Klassen- und Zustandsdiagramme setzen ebenfalls auf dagre. Der Layout-Algorithmus bestimmt die Lesbarkeit – dagre folgt dem Sugiyama-Framework, um Ränge zuzuweisen, Kantenkreuzungen zu minimieren und den Abstand zu straffen, was für Flussdiagramme normaler Größe gut funktioniert. Im Vergleich zu Graphviz ist Mermaids Syntax näher an der natürlichen Sprache (z. B. A → B) und rendert nativ im Browser mit Live-Vorschau. Graphviz' DOT-Sprache ist niedriger angesiedelt, und seine Layout-Engines (fdp, neato, ...) sind ausgereifter, erfordern aber eine lokale Installation, und der Standardstil wirkt veraltet. Mermaid unterstützt derzeit mehr als 15 Diagrammtypen – flowchart, sequenceDiagram, classDiagram, stateDiagram, erDiagram, gantt, pie, journey, gitGraph, mindmap, timeline, quadrantChart, sankey, xychart, block usw. – und deckt damit die überwiegende Mehrheit der Software-Engineering-Zeichenbedürfnisse ab.

Parsing: Ein von jison erzeugter Parser wandelt den DSL-Text in einen internen AST um; jeder Diagrammtyp hat eigene Grammatikdatei.
Layout-Algorithmus: Flussdiagramme nutzen dagre für Layered-Directed-Graph-Layout und können auf ELK umschalten; Sequenz- und Gantt-Diagramme verwenden eigene dedizierte Layout-Logik.
Rendering-Engine: SVG wird mit d3 gezeichnet; Knoten verwenden g/rect/path/text-Elemente, Pfeile sind über Marker definiert.
Diagrammtypen: Unterstützt flowchart, sequence, class, state, ER, gantt, pie, journey, gitGraph, mindmap und ein Dutzend weitere.
Vergleich mit Graphviz: Mermaid hat eine benutzerfreundlichere Syntax und native Web-Unterstützung; Graphviz bietet feineres Layout, geeignet für große und komplexe Graphen.
Theming: Wechsel zwischen Standard, Dark, Forest, Neutral und weiteren integrierten Themes über themeVariables-Konfiguration oder die init-Direktive.

Beispiele

Flussdiagramm

flowchart TD
    A[Start] --> B{Angemeldet?}
    B -- Ja --> C[Startseite]
    B -- Nein --> D[Anmeldeseite]
    D --> E[Zugangsdaten eingeben]
    E --> C
    C --> F[Ende]

Sequenzdiagramm

sequenceDiagram
    participant Browser
    participant Server
    participant Database
    Browser->>Server: GET /api/user
    Server->>Database: SELECT * FROM users
    Database-->>Server: Benutzerdaten
    Server-->>Browser: JSON-Antwort

Gantt-Diagramm

gantt
    title Projektplan
    dateFormat YYYY-MM-DD
    section Design
    Anforderungen :a1, 2026-06-01, 7d
    UI-Design     :a2, after a1, 10d
    section Entwicklung
    Frontend  :b1, after a2, 20d
    Backend   :b2, after a2, 18d
    section Testen
    Integration :c1, after b1, 7d

FAQ

Welche Diagrammtypen unterstützt Mermaid?

Mermaid deckt Flowcharts, Sequenzdiagramme, Klassendiagramme, Zustandsdiagramme, Entity-Relationship-Diagramme, Gantt-Diagramme, Tortendiagramme, User-Journey-Maps, Git-Graphen, Mindmaps und Quadrantendiagramme ab. Die erste Zeile deines Codes deklariert den Typ (z.B. 'flowchart TD' oder 'sequenceDiagram').

Warum zeigt mein Diagramm einen Syntaxfehler?

Die häufigsten Ursachen sind fehlende Semikolons oder Pfeil-Operatoren, nicht passende Klammern in Knotenbeschriftungen (Text mit Sonderzeichen in Anführungszeichen setzen: A["Hello (world)"]), falsche Pfeilsyntax für den Diagrammtyp (--> für Flowchart, ->> für Sequenz) und Einrückungsprobleme in Subgraphen. Das Fehler-Panel zeigt meist auf die Zeile, an der das Parsen abgebrochen ist.

Wie exportiere ich das Diagramm als Bild?

Nutze die Export-Schaltflächen, um als SVG (Vektor, skalierbar, empfohlen für Folien und Dokumente) oder PNG (Raster, geeignet für Chat und E-Mail) zu speichern. Kopiere das SVG-Markup, wenn du es direkt in HTML einbetten oder in Figma oder Illustrator weiterbearbeiten möchtest.

Kann ich Farben und Stile anpassen?

Ja. Verwende 'classDef', um einen CSS-ähnlichen Stil zu definieren, und wende ihn mit 'class A,B,C myStyle' an. Inline-Überschreibungen wie 'style A fill:#f9f,stroke:#333' funktionieren für einmalige Änderungen. Für globales Theming setze %%{init: {'theme':'forest'}}%% in die erste Zeile - eingebaute Themes sind default, forest, dark, neutral und base.

Gibt es Längen- oder Komplexitätsgrenzen?

Mermaid rendert problemlos hunderte Knoten, aber die Layoutzeit wächst danach nicht-linear. Wenn ein Diagramm langsam oder unleserlich ist, teile es in mehrere verlinkte Diagramme auf oder verwende Subgraphen, um verwandte Knoten zu gruppieren; das Auto-Layout wählt schlechtere Positionen, wenn sich zu viele Kanten kreuzen.

Wie füge ich Hyperlinks oder Klick-Handler zu Knoten hinzu?

Verwende 'click NodeId "https://example.com"', um einen Knoten zu einem Link zu machen, oder 'click NodeId callback "tooltip"', um einen mit mermaid.parseError registrierten JavaScript-Callback auszulösen. Links funktionieren im exportierten SVG, solange die einbettende Seite sie nicht entfernt.

Wo sonst kann ich denselben Mermaid-Code rendern?

GitHub Markdown, GitLab, Notion, Obsidian, Typora, VS Code (mit Erweiterungen) und die meisten modernen Dokumentationstools rendern Mermaid-Codeblöcke nativ. Füge denselben Code dort ein und er wird mit dem jeweiligen Theme der Plattform gerendert.