Einfacher Zeitstrahl mit Titel
Eine minimale Chronologie mit einem Ereignis pro Zeitraum.
timeline
title Produkthistorie
2024 : Erster Prototyp
2025 : Private Beta
2026 : Öffentlicher StartDiagramm-Syntax-Referenz
Mermaid-Spickzettel & Syntax-Leitfaden
Kopieren Sie funktionierende Diagrammbeispiele, prüfen Sie die Live-Vorschau und passen Sie Beschriftungen und Verbindungen für Ihre Dokumentation an.
Syntax-Muster
```mermaid
flowchart LR
A[Write Markdown] --> B[Add Mermaid code]
B --> C[Preview diagram]
C --> D[Publish docs]
```Umzäunte Codeblöcke mit dem Mermaid-Bezeichner werden automatisch in interaktive Diagramme gerendert.
mermaid flussdiagramm syntax
Mermaid-Flussdiagramm-Syntax
Zeigt, wie ein Prozess von einem Schritt zum nächsten verläuft, einschließlich Entscheidungen und alternativer Pfade.
Kopierbare Syntax
Flussdiagramme
flowchart TD
A[Markdown entwerfen] --> B{Diagramm nötig?}
B -- Ja --> C[Mermaid-Code schreiben]
B -- Nein --> D[Notizen veröffentlichen]
C --> E[Vorschau & Export]
E --> DGerenderte Vorschau
Prozesse, Verzweigungen, Entscheidungen, Workflows
Mermaid-Vorschau wird gerendert
Die Syntax bleibt sichtbar, wenn JavaScript deaktiviert ist.
Beginnen Sie mit flowchart und wählen Sie TD (oben nach unten) oder LR (links nach rechts).
Eckige Klammern für Aktionen, geschweifte Klammern für Entscheidungen.
Beschriften Sie Linien zwischen Bindestrichen, z. B. -- Ja -->.
mermaid sequenzdiagramm syntax
Mermaid-Sequenzdiagramm-Syntax
Sequenzdiagramme stellen Nachrichten in zeitlicher Reihenfolge dar. Ideal für APIs, Authentifizierung und Service-Interaktionen.
Kopierbare Syntax
Sequenz
sequenceDiagram
participant Benutzer
participant App
participant Renderer
Benutzer->>App: Mermaid-Syntax einfügen
App->>Renderer: Diagramm validieren
Renderer-->>App: SVG-Vorschau
App-->>Benutzer: ExportoptionenGerenderte Vorschau
APIs, Request-Response-Abläufe, Microservices
Mermaid-Vorschau wird gerendert
Die Syntax bleibt sichtbar, wenn JavaScript deaktiviert ist.
Deklarieren Sie Teilnehmer zur Steuerung der Reihenfolge.
Verwenden Sie ->> für Anfragen und -->> für Antworten.
Geben Sie Nachrichtenbeschriftungen nach einem Doppelpunkt an.
mermaid zeitstrahl beispiel
Mermaid-Zeitstrahl-Syntax
Ordnet Ereignisse chronologisch an. Geeignet für Versionshistorien, Roadmaps und Meilensteine.
Kopierbare Syntax
Zeitstrahl
timeline
title Geschichte von Markdown
2004 : Markdown erstellt : John Gruber & Aaron Swartz
2011 : CommonMark-Standard gestartet
2014 : GitHub Flavored Markdown (GFM)
2026 : TheMarkdowner Browser-ToolsGerenderte Vorschau
Release-Logs, Roadmaps, Projekthistorie
Mermaid-Vorschau wird gerendert
Die Syntax bleibt sichtbar, wenn JavaScript deaktiviert ist.
Weitere Zeitstrahl-Muster
4 Mermaid-Zeitstrahl-Beispiele zum Kopieren
Mehrere Ereignisse in einem Zeitraum
Setzen Sie weitere Doppelpunkte, um verwandte Meilensteine unter einem Zeitraum zu bündeln.
timeline
title Release-Plan 2026
Q1 : Kundenforschung : Roadmap freigegeben
Q2 : Private Beta : Dokumentation
Q3 : Allgemeine Verfügbarkeit : NutzungsreviewSprint-Roadmap
Gruppieren Sie Lieferzeiträume mit Abschnitten zu einer lesbaren Software-Roadmap.
timeline
title Software-Sprints
section Analyse
Sprint 1 : Umfang definieren : Prototyp
section Umsetzung
Sprint 2 : Editor bauen : Validierung ergänzen
section Release
Sprint 3 : Barrierefreiheits-Review : StartVersionshistorie
Dokumentieren Sie Softwareversionen und wichtige Änderungen in chronologischer Reihenfolge.
timeline
title Versionshistorie
v1.0 : Erstveröffentlichung : Kern-Editor
v1.1 : SVG-Export : Dunkles Design
v2.0 : Zeitstrahl-Builder : Teilbare LinksBeginnen Sie mit dem Schlüsselwort timeline.
Definieren Sie Perioden mit Doppelpunkt gefolgt von Ereignissen.
Trennen Sie mehrere Ereignisse unter derselben Periode mit Doppelpunkten.
mermaid er diagramm syntax
Mermaid-ER-Diagramm-Syntax
Entity-Relationship-Diagramme zeigen Datenbankentitäten und deren Beziehungen zueinander.
Kopierbare Syntax
ER-Diagramme
erDiagram
DOKUMENT ||--o{ DIAGRAMM : enthaelt
DOKUMENT {
string titel
string format
}
DIAGRAMM {
string typ
string quelle
}Gerenderte Vorschau
Datenbankschemata, relationale Modelle, Datenverträge
Mermaid-Vorschau wird gerendert
Die Syntax bleibt sichtbar, wenn JavaScript deaktiviert ist.
Deklarieren Sie erDiagram in der ersten Zeile.
Definieren Sie Beziehungen mit Symbolen wie ||--o{ (1 zu n).
Umschließen Sie Tabelleneigenschaften mit geschweiften Klammern.
mermaid klassendiagramm syntax
Mermaid-Klassendiagramm-Syntax
Klassendiagramme zeigen Objekte, Attribute, Methoden und deren Beziehungen zueinander.
Kopierbare Syntax
Klassen
classDiagram
class Dokument {
+string titel
+string format
+convertToMarkdown()
}
class Diagramm {
+string typ
+render()
}
Dokument "1" --> "0..*" Diagramm : beinhaltetGerenderte Vorschau
Objekte, Eigenschaften, Klassen, Code-Architektur
Mermaid-Vorschau wird gerendert
Die Syntax bleibt sichtbar, wenn JavaScript deaktiviert ist.
Beginnen Sie mit classDiagram oben.
Verwenden Sie + für öffentliche und - für private Elemente.
Definieren Sie Assoziationen mit Pfeilen wie -->.
mermaid zustandsdiagramm syntax
Mermaid-Zustandsdiagramm-Syntax
Zeigt gültige Systemzustände und die auslösenden Übergangsereignisse.
Kopierbare Syntax
Zustände
stateDiagram-v2
[*] --> Entwurf
Entwurf --> Vorschau: rendern
Vorschau --> Fehler: syntaxproblem
Vorschau --> Veroeffentlicht: exportieren
Fehler --> Entwurf: code korrigierenGerenderte Vorschau
Lebenszyklen, Betriebsmodi, Transitionen
Mermaid-Vorschau wird gerendert
Die Syntax bleibt sichtbar, wenn JavaScript deaktiviert ist.
Nutzen Sie stateDiagram-v2 für moderne Zustandsdarstellung.
Kennzeichnen Sie Start und Ende mit [*].
Fügen Sie Ereignisbeschriftungen nach einem Doppelpunkt hinzu.
mermaid gantt chart syntax
Mermaid-Gantt-Chart-Syntax
Stellt Aufgaben auf einer Zeitleiste mit Startdaten, Dauern, Meilensteinen und Abhängigkeiten dar.
Kopierbare Syntax
Gantt
gantt
title Dokumentations-Release
dateFormat YYYY-MM-DD
section Entwurf
Leitfaden schreiben :a1, 2026-06-12, 2d
Beispiele pruefen :after a1, 1d
section Veroeffentlichen
Screenshots fuegen :1d
Seite starten :1dGerenderte Vorschau
Projektzeitpläne, Meilensteine, Sprintplanung
Mermaid-Vorschau wird gerendert
Die Syntax bleibt sichtbar, wenn JavaScript deaktiviert ist.
Deklarieren Sie dateFormat passend zum Datumsformat.
Gliedern Sie Aufgaben in Abschnitte mit section.
Verketten Sie Aufgaben mit after aufgaben-id.
mermaid kreisdiagramm syntax
Mermaid-Kreisdiagramm-Syntax
Zeigt die prozentuale Aufteilung einzelner Kategorien an einer Gesamtheit.
Kopierbare Syntax
Kreisdiagramme
pie showData
title Diagrammtypen in Dokumentationen
"Flussdiagramme" : 40
"Sequenzdiagramme" : 25
"ER-Diagramme" : 20
"Andere" : 15Gerenderte Vorschau
Verteilungen, Marktanteile, Umfrageergebnisse
Mermaid-Vorschau wird gerendert
Die Syntax bleibt sichtbar, wenn JavaScript deaktiviert ist.
Verwenden Sie pie showData, um Rohwerte neben Beschriftungen anzuzeigen.
Namen mit Leerzeichen in doppelte Anführungszeichen setzen.
Halten Sie die Segmentanzahl übersichtlich.
mermaid mindmap syntax
Mermaid-Mindmap-Syntax
Organisiert ein zentrales Thema und seine Verzweigungen über hierarchische Einrückungen.
Kopierbare Syntax
Mindmaps
mindmap
root((Mermaid))
Markdown
README-Dateien
Doku-Websites
Diagramme
Flussdiagramme
Sequenz
ERDGerenderte Vorschau
Gliederungen, Brainstorming, Strukturhierarchien
Mermaid-Vorschau wird gerendert
Die Syntax bleibt sichtbar, wenn JavaScript deaktiviert ist.
Nutzen Sie Einrückungen für Unterzweige.
Deklarieren Sie root((Knoten)) als visuellen Kern.
Halten Sie Knotentexte prägnant.
Fehlerbehebung
Häufige Mermaid-Syntaxfehler
Die meisten Mermaid-Fehler entstehen durch einen fehlenden Diagrammtyp, ein falsches Pfeilsymbol oder eine Bezeichnung, die doppelte Anführungszeichen braucht. Wenn ein Diagramm nicht kompiliert, reduzieren Sie den Code auf eine einzige Beziehung und fügen Sie die Zeilen schrittweise wieder hinzu.
Fehlender Diagrammtyp
Mermaid-Blöcke brauchen eine erste Zeile mit dem Schlüsselwort (z. B. flowchart, sequenceDiagram oder erDiagram), damit der Parser weiß, welche Struktur er aufbauen soll.
Falsche Pfeil-Schreibweise
Pfeile sind vom Diagrammtyp abhängig. Flussdiagramme nutzen -->, Sequenzdiagramme dagegen ->> und Rückgaben -->>.
Sonderzeichen ohne Anführungszeichen
Satzzeichen innerhalb einer Bezeichnung können als Mermaid-Syntax gelesen werden. Setzen Sie die Bezeichnung in doppelte Anführungszeichen oder trennen Sie die Knoten-ID vom Anzeigetext.
Uneinheitliche Einrückung
Mindmaps und Zeitstrahl-Roadmaps hängen stark von der Einrückung ab. Achten Sie darauf, dass verschachtelte Kindelemente identisch eingerückt sind.
Häufig gestellte Fragen
Wie ist dieser Mermaid-Spickzettel aufgebaut?
Jeder Abschnitt kombiniert funktionierenden Code mit einer Live-Vorschau und praktischen Syntaxhinweisen.
Kann ich Mermaid-Diagramme als Bilder exportieren?
Ja. Fügen Sie den Code in den Mermaid-Editor ein und laden Sie SVG, PNG oder PDF herunter.
Werden Mermaid-Diagramme auf GitHub unterstützt?
Ja. GitHub, GitLab und Obsidian rendern ```mermaid-Codeblöcke nativ.
Syntaxhilfen
Mermaid-Kommentare und Sonderzeichen
Kommentare und maskierte Bezeichnungen funktionieren in allen Diagrammtypen und gehören daher nicht zur Zeitstrahl-Syntax selbst. Nutzen Sie Kommentare für Hinweise an das Team und HTML-Entitäten, wenn eine Bezeichnung Satzzeichen der Syntax enthält.
Einen Mermaid-Kommentar hinzufügen
Zeilen, die mit
%%beginnen, bleiben im Quelltext, werden aber nicht gerendert.Satzzeichen der Syntax maskieren
Nutzen Sie eine HTML-Entität, wenn ein Doppelpunkt zu einer Bezeichnung gehört.