Einen API-Aufruf, einen Login-Ablauf oder einen Zahlungsvorgang modellieren: participant Browser, dann Browser->>Server: POST /login und Server-->>Browser: 200 OK. Durchgezogene und gestrichelte Pfeile, Aktivierungen, Notizen, alt/else-, opt- und loop-Blöcke sowie autonumber werden unterstützt, Teilnehmer ordnen sich selbst an.
Anleitung
- Einen Diagrammtyp wählen, um ein Beispiel zu laden, oder Mermaid-Code eintippen. Die Vorschau aktualisiert sich kurz nach dem Tippen.
- Fehler zeigen Zeile und Parser-Meldung; ein Tipp auf den Fehler markiert die Zeile. Das letzte gültige Diagramm bleibt ausgegraut sichtbar.
- Mit den Tasten oder Strg + Mausrad zoomen. Die Farben folgen hellem oder dunklem Modus.
- SVG kopieren oder herunterladen oder PNG in doppelter Größe speichern. Für Exporte ohne Hintergrund „Transparent“ einschalten.
- Teilen-Link kopieren: Der Code steckt komprimiert nach dem # im Link.
- Mermaid zeichnet die Diagramme in deinem Browser; dein Text wird nie hochgeladen. Der Editor merkt sich dein letztes Diagramm.
- .mmd- oder Markdown-Dateien lassen sich öffnen; der erste ```mermaid-Block wird verwendet.
- Mermaid läuft im strengen Sicherheitsmodus, Klick-Handler und HTML in Beschriftungen sind deaktiviert.
Warum Diagramme als Code
Mermaid beschreibt ein Diagramm in wenigen lesbaren Zeilen statt mit von Hand geschobenen Kästen. flowchart LR, dann A[Start] --> B{OK?} und B -->|ja| C[Ausliefern] zeichnen schon eine Entscheidung. Weil es Text ist, liegt das Diagramm neben dem Code in Git, wird im Pull Request geprüft und mit einer Zeile geändert; das Layout wird automatisch berechnet.
GitHub, GitLab, Notion, Obsidian und viele Doku-Werkzeuge rendern ```mermaid-Blöcke direkt, ein hier geschriebenes Diagramm passt also unverändert in eine README. Nutze diesen Editor, um die Syntax mit sofortiger Rückmeldung richtig hinzubekommen, und exportiere SVG oder PNG für Stellen, die nur Bilder annehmen.
Welcher Diagrammtyp passt
Flussdiagramme zeigen Abläufe und Entscheidungen, Sequenzdiagramme Nachrichten zwischen Diensten oder Personen über die Zeit, Klassendiagramme Typen und ihre Beziehungen, Zustandsdiagramme Übergänge zwischen Zuständen, ER-Diagramme Datenbanktabellen mit Krähenfuß-Kardinalitäten; Gantt-Diagramme planen Aufgaben mit Terminen und Abhängigkeiten, Kreisdiagramme zeigen Anteile, Mindmaps verzweigen von einer Idee, Zeitstrahlen ordnen Ereignisse nach Zeitraum.
Tipps
Kurze Knoten-IDs verwenden und den lesbaren Text in Klammern setzen: A[Kunde bestellt]. Beschriftungen mit Sonderzeichen in Anführungszeichen setzen. In Flussdiagrammen mit subgraph gruppieren, in Sequenzdiagrammen mit alt- oder loop-Blöcken. Wird es eng, die Richtung von TD auf LR ändern oder das Diagramm aufteilen.
Häufige Fragen
Was ist Mermaid?
Mermaid ist eine Open-Source-JavaScript-Bibliothek, die Diagramme aus einer Markdown-ähnlichen Textsyntax zeichnet. GitHub, GitLab und viele Wikis und Notiz-Apps unterstützen sie direkt.
Kann ich das Diagramm in einer GitHub-README nutzen?
Ja. Den Code in einen Block mit ```mermaid am Anfang kopieren, GitHub zeichnet ihn. Unterstützt eine Plattform kein Mermaid, SVG oder PNG exportieren und das Bild einfügen.
Warum zeigt mein Diagramm einen Syntaxfehler?
Die Meldung nennt die Zeile und was der Parser erwartet hat. Häufig fehlt ein Pfeil, eine Klammer oder ein Anführungszeichen ist offen, oder ein reserviertes Wort wie end dient als ID; dann End schreiben oder in Anführungszeichen setzen.
Wie exportiere ich ein hochauflösendes Bild?
PNG herunterladen für ein Bild in doppelter Bildschirmgröße, scharf auf hochauflösenden Displays und in Folien. Für Druck oder Weiterbearbeitung SVG laden, das verlustfrei skaliert. Transparent einschalten für keinen Hintergrund.
Kann ich ein Diagramm teilen, ohne es hochzuladen?
Ja. Teilen-Link kopieren: Der Mermaid-Code steckt komprimiert im Teil der URL hinter dem #, den Browser nicht an Server senden. Beim Öffnen des Links erscheint das Diagramm wieder.
Funktionieren Klick-Handler und HTML-Beschriftungen?
Nein. Mermaid läuft hier im strengen Sicherheitsmodus, Klick-Callbacks, Links und rohes HTML in Beschriftungen sind deaktiviert. Alles andere wird normal gezeichnet.