Prozess Typ
Grafischer Ausdruck
Denken Typ
Strukturierter Ausdruck
Notizen Typ
Effizienter Ausdruck
Baumdiagramm
Klammerdiagramm
Standardmodus
Mermaid ist ein Werkzeug, das Diagramme aus einer Text-Syntax erzeugt. Mit einfachem Mermaid-Code lassen sich Flussdiagramme, Sequenzdiagramme, Klassendiagramme, Zustandsdiagramme, ER-Diagramme, Gantt-Diagramme, Mindmaps, Architekturdiagramme und viele weitere Diagrammtypen erstellen.
Anders als herkömmliche Zeichenwerkzeuge mit Drag & Drop beschreibt Mermaid Knoten, Beziehungen, zeitliche Abfolgen und Datenstrukturen eines Diagramms vor allem per Code. Nach einer Codeänderung wird das Diagramm automatisch neu erzeugt, weshalb Mermaid sich besonders für technische Dokumentation, Produktdesign, Projektmanagement, Softwareentwicklung und Wissensorganisation eignet.
Dieser Artikel erläutert die grundlegende Mermaid-Syntax und fasst die vom Mermaid-Editor unterstützten Diagrammtypen, Deklarationssyntax, Codebeispiele und Anwendungsfälle zusammen. Wenn Sie Mermaid-Code direkt online schreiben und in der Vorschau ansehen möchten, können Sie den Mermaid Online-Editor von ProcessOn kostenlos testen.
Mermaid ist ein Werkzeug, das Diagramme mit einer Text-Syntax erzeugt. Der folgende Code erzeugt ein einfaches Mermaid-Flussdiagramm:
flowchart TD
A[Start] --> B[Enter information]
B --> C{ Completed?}
C -->|Yes| D[End]
C -->|No| B
Das gerenderte Ergebnis sieht so aus:
Dabei: flowchart TD deklariert ein Flussdiagramm mit Anordnung von oben nach unten.
Die Funktionsweise von Mermaid lässt sich wie folgt zusammenfassen:
Mermaid-Code schreiben → Code parsen → Rendern des Diagramms → Code ändern → Das Diagramm wird in Echtzeit aktualisiert
Deshalb gehört es zu den Schlüsselpunkten beim Erlernen von Mermaid, die jeweilige Deklarationssyntax der Diagrammtypen zu kennen.
Verschiedene Diagrammtypen verwenden unterschiedliche Mermaid-Deklarationssyntax; die derzeit gängigen Mermaid-Diagramme sind:
| Diagrammtyp | Mermaid-Deklarationssyntax | Typische Verwendung |
| Flussdiagramm | flowchart | Geschäftsprozesse, Algorithmen, Workflows |
| Sequenzdiagramm | sequenceDiagram | Systeminteraktion, API-Aufrufe |
| Klassendiagramm | classDiagram | Softwarestruktur, objektorientierte Modellierung |
| Zustandsdiagramm | stateDiagram-v2 | Zustandsübergänge, Zustandsautomaten |
| ER-Diagramm | erDiagram | Entitätsbeziehungen in Datenbanken |
| Gantt-Diagramm | gantt | Projektplanung, Aufgabenfortschritt |
| User-Journey-Diagramm | journey | Nutzererlebnis, Customer Journey |
| Mindmap | mindmap | Wissensorganisation, Brainstorming |
| Zeitachse | timeline | Zeitleiste, historische Ereignisse |
| Kreisdiagramm | pie | Anteile, Strukturanalyse |
| Quadrantendiagramm | quadrantChart | Kategorisierung, Priorisierung, Positionierungsanalyse |
| Git-Diagramm | gitGraph | Git-Branches, Commits, Merges |
| Sankey-Diagramm | sankey-beta | Daten-, Ressourcen- und Massenflüsse |
| XY-Diagramm | xychart-beta | Datentrends, Zahlenvergleich |
| Radar-Diagramm | radar | Vergleich mehrdimensionaler Kennzahlen |
| C4-Diagramm | C4Context usw. | Softwarearchitektur-Modellierung |
| Architekturdiagramm | architecture-beta | System-, Service- und Ressourcenarchitektur |
| Kanban-Diagramm | kanban | Aufgaben- und Statusverwaltung |
| Blockdiagramm | block-beta | Modul-, Struktur- und Systembeziehungen |
| Paketdiagramm | packet-beta | Struktur von Netzwerkpaketen |
| Anforderungsdiagramm | requirementDiagram | Anforderungsanalyse und Anforderungsbeziehungen |
Bei verschiedenen Mermaid-Editoren kann die Unterstützung von Syntax und Funktionen je nach Version abweichen; maßgeblich ist die Syntax, die der jeweilige Editor unterstützt.
Grundlegende Syntax
Mermaid verwendet die Deklaration flowchart, um ein Flussdiagramm zu erstellen. Die einfachste Schreibweise:
flowchart TD
A[Start] --> B[Arrange]
B --> C[End]
Rendering-Ergebnis
Dabei gilt:
Mermaid-Flussdiagramme können außerdem LR (von links nach rechts), RL (von rechts nach links), BT (von unten nach oben) und weitere Richtungen verwenden.
Zum Beispiel:
flowchart LR
A[Start] --> B[Arrange] --> C[End]
Steht für ein Flussdiagramm mit Anordnung von links nach rechts.
Häufige Syntax
| Syntax | Diagramm | Bedeutung |
| (text) | Abgerundetes Rechteck | Kennzeichnet Anfang, Ende oder eine allgemeine Aktion eines Prozesses |
| [text] | Rechteck | Kennzeichnet einen konkreten Schritt, eine Aufgabe oder einen Verarbeitungsschritt |
| {text} | Raute | Kennzeichnet eine Entscheidung oder bedingte Verzweigung |
| ((text)) | Kreis | Kennzeichnet einen Verbindungspunkt oder ein Ereignis |
| [[text]] | Doppeltes Rechteck | Kennzeichnet den Aufruf eines Unterprozesses oder Untermoduls |
| [(text)] | Zylinder | Kennzeichnet einen Datenbankknoten |
| >text] | Asymmetrische Form | Kennzeichnet Ein-/Ausgabe |
| [/text/] | Parallelogramm | Kennzeichnet Eingabe- oder Ausgabedaten |
| --> | Pfeil | Kennzeichnet die Ablaufrichtung eines Prozesses |
| --- | Verbindungslinie ohne Pfeil | Kennzeichnet eine Assoziationsbeziehung |
| -.-> | Pfeil mit gestrichelter Linie | Kennzeichnet optionale Abläufe oder Referenzbeziehungen |
| ==> | Dicker Pfeil | Kennzeichnet einen wichtigen Ablauf oder eine starke Beziehung |
Die ausführliche Syntax zum Erzeugen eines Flussdiagramms mit Mermaid finden Sie auf folgender Seite: https://www.processon.io/de/mermaid/flowchart
Flussdiagramme eignen sich für Geschäftsprozesse, Workflows, Algorithmusabläufe, Systemabläufe und Entscheidungsprozesse. Testen Sie kostenlos den Mermaid Online-Editor für Flussdiagramme.
Grundlegende Syntax
Mermaid verwendet die Deklaration sequenceDiagram, um ein Sequenzdiagramm zu erstellen. Das einfachste Beispiel:
sequenceDiagram
Alice->>John: Hello John
John-->>Alice: Hello Alice
Gerendertes Ergebnis
Dabei gilt:
Häufige Syntax
| Syntax | Diagramm | Bedeutung |
| sequenceDiagram | Sequenzdiagramm | erstellt ein Sequenzdiagramm |
| A->B: message | Durchgezogene Linie | kennzeichnet einen synchronen Nachrichtenaufruf oder eine normale Interaktion |
| A-->B: message | Gestrichelte Linie | kennzeichnet eine Rücknachricht oder eine schwache Interaktionsbeziehung |
| A->>B: message | Pfeil mit durchgezogener Linie | kennzeichnet einen asynchronen Nachrichtenaufruf |
| A-->>B: message | Pfeil mit gestrichelter Linie | kennzeichnet eine asynchrone Antwort- oder Rücknachricht |
| participant A | Teilnehmer | definiert die Objekte, Rollen oder Systeme einer Interaktion |
| actor A | Akteur | kennzeichnet aktive Teilnehmer wie Benutzer oder externe Systeme |
| activate A | Aktivierungsbox | kennzeichnet den Beginn der Verarbeitung einer Anfrage durch ein Objekt |
| deactivate A | Ende der Aktivierung | kennzeichnet den Abschluss der aktuellen Verarbeitung durch ein Objekt |
| loop text | Schleifenbox | kennzeichnet einen sich wiederholenden Interaktionsablauf |
| alt text | Bedingte Verzweigung | kennzeichnet Interaktionspfade unter verschiedenen Bedingungen |
| opt text | Optionaler Ablauf | kennzeichnet eine Interaktion, die möglicherweise ausgeführt wird |
| par text | Parallele Box | kennzeichnet mehrere gleichzeitig ausgeführte Operationen |
Die ausführliche Syntax zum Erzeugen eines Sequenzdiagramms mit Mermaid finden Sie auf folgender Seite: https://www.processon.io/de/mermaid/sequence-diagram
Sequenzdiagramme eignen sich zur Beschreibung zeitlich geordneter Interaktionen zwischen Benutzer und System, zwischen Systemen sowie zwischen Diensten. Testen Sie kostenlos den Mermaid Online-Editor für Sequenzdiagramme.
Grundlegende Syntax
Mermaid verwendet die Deklaration classDiagram, um ein Klassendiagramm zu erstellen.
classDiagram
Animal <|-- Duck
Animal <|-- Fish
class Animal {
+String name
+eat()
}
class Duck {
+swim()
}
Gerendertes Ergebnis
Dabei gilt:
| Syntax | Diagramm | Bedeutung |
| classDiagram | Klassendiagramm | erstellt ein Klassendiagramm |
| class ClassName | Klasse | definiert ein Klassenobjekt |
| ClassName : attribute | Attribut | kennzeichnet eine Mitgliedsvariable einer Klasse |
| ClassName : method() | Methode | definiert eine Klassenmethode |
| <|-- | Hohles Dreieck+ Durchgezogene Linie | kennzeichnet eine Vererbungsbeziehung |
| <|.. | Hohles Dreieck+ Gestrichelte Linie | kennzeichnet eine Implementierungsbeziehung |
| *-- | Gefüllte Raute+ Durchgezogene Linie | kennzeichnet eine Kompositionsbeziehung |
| o-- | Hohle Raute+ Durchgezogene Linie | kennzeichnet eine Aggregationsbeziehung |
| --> | Pfeil mit durchgezogener Linie | Kennzeichnet eine Assoziationsbeziehung |
| ..> | Pfeil mit gestrichelter Linie | kennzeichnet eine Abhängigkeitsbeziehung |
| -- | Durchgezogene Linie | kennzeichnet eine normale Verbindungsbeziehung |
| +attribute | Pluszeichen | kennzeichnet öffentliche Attribute oder Methoden |
| -attribute | Minuszeichen | kennzeichnet private Attribute oder Methoden |
Die Symbole +, - und # vor Klassenmitgliedern können unterschiedliche Sichtbarkeiten ausdrücken.
Die ausführliche Syntax zum Erzeugen eines Klassendiagramms mit Mermaid finden Sie auf folgender Seite: https://www.processon.io/de/mermaid/class-diagram
Klassendiagramme eignen sich für Softwaredesign, objektorientierte Modellierung und Programmstrukturanalyse. Testen Sie kostenlos den Mermaid Online-Editor für Klassendiagramme.
Grundlegende Syntax
Mermaid verwendet die Deklaration stateDiagram-v2, um ein Zustandsdiagramm zu erstellen.
stateDiagram-v2
state "Pending Payment" as Pending
[*] --> Pending
Pending --> Paid
Paid --> Shipped
Shipped --> Completed
Completed--> [*]
Gerendertes Ergebnis
Dabei gilt:
Häufige Syntax
| Syntax | Diagramm | Bedeutung |
| stateDiagram-v2 | Zustandsdiagramm | erstellt ein Zustandsdiagramm |
| state StateName | Abgerundetes Rechteck | definiert einen einfachen Zustandsknoten |
| state StateName : text | Abgerundetes Rechteck mit Text | hängt einen Beschreibungstext an einen Zustand an |
| [*] | Gefüllter kleiner Punkt oder doppelter Ring | kennzeichnet Beginn oder Ende eines Zustands |
| [*] --> StateName | Startpfeil | kennzeichnet den Eintritt in den ersten Zustand |
| StateName --> [*] | Endpfeil | kennzeichnet das Ende des Zustandsablaufs |
| A --> B | Pfeil mit durchgezogener Linie | kennzeichnet einen Zustandsübergang |
| A --> B: event | Pfeil mit durchgezogener Linie und Beschriftung | Zustandsübergang mit auslösendem Ereignis |
| state StateName { ... } | Verschachteltes abgerundetes Rechteck | definiert einen zusammengesetzten Zustand |
| state Node <<choice>> | Raute | Verzweigungs- und Auswahlknoten |
| state Fork <<fork>> | Dicke horizontale Trennlinie | kennzeichnet den Beginn eines parallelen Ablaufs |
| state Join <<join>> | Dicke horizontale Trennlinie | kennzeichnet das Ende und die Zusammenführung eines parallelen Ablaufs |
Die ausführliche Syntax zum Erzeugen eines Zustandsdiagramms mit Mermaid finden Sie auf folgender Seite: https://www.processon.io/de/mermaid/state-diagram
Zustandsdiagramme eignen sich für Bestellstatus, Workflow-Status, Benutzerstatus, Systemstatus und Zustandsautomaten. Testen Sie kostenlos den Mermaid Online-Editor für Zustandsdiagramme.
Grundlegende Syntax
Mermaid verwendet die Deklaration erDiagram, um ein Entitätsbeziehungsdiagramm, also ein ER-Diagramm, zu erstellen.
erDiagram
USER ||--o{ ORDER : places
ORDER ||--|{ PRODUCT : contains
Gerendertes Ergebnis
Dabei gilt:
Häufige Syntax
| Syntax | Diagramm | Bedeutung |
| erDiagram | ER-Diagramm | erstellt ein ER-Diagramm |
| ENTITY { } | Rechteck | definiert eine Entität |
| type field | Attributmarkierung | definiert ein Entitätsattribut |
| type field PK | Primärschlüssel | definiert den Primärschlüssel einer Entität |
| type field FK | Fremdschlüssel | definiert den Fremdschlüssel einer Entität |
| type field UK | Eindeutiger Schlüssel | definiert ein Feld mit Eindeutigkeitsbedingung |
| || | Eins | genau eins |
| o| | Null oder eins | Null oder eins |
| |{ | Eins oder mehr | Mindestens eins |
| o{ | Null, eins oder mehr | Null oder mehr |
Die ausführliche Syntax zum Erzeugen eines ER-Diagramms mit Mermaid finden Sie auf folgender Seite: https://www.processon.io/de/mermaid/er-diagram
ER-Diagramme können Entitäten, Attribute und die Beziehungen zwischen Entitäten darstellen und werden häufig im Datenbankdesign verwendet. Testen Sie kostenlos den Mermaid Online-Editor für ER-Diagramme.
Grundlegende Syntax
Mermaid verwendet die Deklaration mindmap, um eine Mindmap zu erstellen.
mindmap
root((Mermaid))
Flowchart
Sequence diagram
Class diagram
Gantt chart
Mind map
Gerendertes Ergebnis
Dabei gilt:
Häufige Syntax
| Syntax | Diagramm | Bedeutung |
| mindmap | Mindmap | erstellt eine Mindmap |
| root[text] | Rechteck | Rechteckiges Wurzelthema |
| root(text) | Abgerundetes Rechteck | Abgerundetes rechteckiges Wurzelthema |
| root((text)) | Kreis | Rundes Wurzelthema |
| root{{text}} | Sechseck | Sechseckiges Wurzelthema |
| root)text( | Blasendiagramm | Blasen-Wurzelthema |
| [text] | Rechteck | Rechteckiger Knoten |
| (text) | Abgerundetes Rechteck | Abgerundeter rechteckiger Knoten |
| ((text)) | Kreis | Runder Knoten |
| {{text}} | Sechseck | Sechseckiger Knoten |
| )text( | Blasendiagramm | Blasen-Knoten |
Die ausführliche Syntax zum Erzeugen einer Mindmap mit Mermaid finden Sie auf folgender Seite: https://www.processon.io/de/mermaid/mindmap
Mindmaps stellen Hierarchien vor allem über Einrückungen dar und eignen sich daher hervorragend für Wissensorganisation, Brainstorming, Kursnotizen und Informationsarchitektur. Testen Sie kostenlos den Mermaid Online-Editor für Mindmaps.
Grundlegende Syntax
Mermaid verwendet die Deklaration gantt, um ein Gantt-Diagramm zu erstellen.
gantt
title Project Plan
dateFormat YYYY-MM-DD
section Design
Requirements Analysis:a1, 2026-01-01, 3d
UI Design:after a1, 2d
section Development
Front-end Development:2026-01-06, 4d
Back-end Development:2026-01-07, 4d
Gerendertes Ergebnis
Dabei:
Häufige Syntax
| Syntax | Diagramm | Bedeutung |
| gantt | Gantt-Diagramm | erstellt ein Gantt-Diagramm |
| title text | Titel | legt den Titel des Gantt-Diagramms fest |
| dateFormat text | Kennung der Datumskonfiguration | definiert das Datumsformat der Zeitachse |
| section text | Titelleiste des Gruppenbalkens | unterteilt Aufgabengruppen |
| TaskName : id, startDate, endDate | Horizontaler Aufgabenbalken | definiert die zugehörigen Attribute einer Aufgabe |
| startDate | Horizontaler Aufgabenbalken | definiert die Startzeit |
| endDate | Horizontaler Aufgabenbalken | definiert die Endzeit |
| duration | Horizontaler Aufgabenbalken | definiert die Dauer einer Aufgabe |
| id | Benutzerdefiniert | definiert die Nummer einer Aufgabe |
| after id | Horizontaler Aufgabenbalken | definiert eine Aufgabe, die nach der Vorgängeraufgabe beginnt |
| 16d, 2w | Horizontaler Aufgabenbalken | kennzeichnet Tage oder Wochen |
| milestone, date | Gefüllte Raute | setzt einen Meilensteinknoten |
Die ausführliche Syntax zum Erzeugen eines Gantt-Diagramms mit Mermaid finden Sie auf folgender Seite: https://www.processon.io/de/mermaid/gantt
Mermaid-Gantt-Diagramme eignen sich für Projektplanung, Aufgabenplanung, Entwicklungsfortschritt und Projektmanagement. Testen Sie kostenlos den Mermaid Online-Editor für Gantt-Diagramme.
Grundlegende Syntax
Mermaid verwendet die Deklaration journey, um ein User-Journey-Diagramm zu erstellen.
journey
title User purchases a product
section Browse
Search for products: 5: User
View details: 4: User
section Place order
Add to cart: 5: User
Complete payment: 3: User
Gerendertes Ergebnis
Dabei:
Häufige Syntax
| Syntax | Diagramm | Bedeutung |
| journey | User-Journey-Diagramm | erstellt ein User-Journey-Diagramm |
| title text | Titel | Titel des User-Journey-Diagramms |
| section text | Abschnittsblock | unterteilt Gruppen von Prozessphasen |
| TaskName:num:Actor | Prozessknoten + Skala der Zufriedenheit | definiert Interaktionsaufgaben, Zufriedenheitswerte und beteiligte Akteure innerhalb einer Phase |
| num (1~5) | Zufriedenheitsbewertung | 1 ist am niedrigsten, 5 am besten |
| Me, Cat | Akteur | definiert mehrere an dieser Aufgabe beteiligte Akteure |
Die ausführliche Syntax zum Erzeugen eines User-Journey-Diagramms mit Mermaid finden Sie auf folgender Seite: https://www.processon.io/de/mermaid/user-journey-diagram
User-Journey-Diagramme eignen sich zur Analyse der verschiedenen Schritte und Erfahrungen, die Kunden vom ersten Produktkontakt bis zum Erreichen ihres Ziels durchlaufen. Testen Sie kostenlos den Mermaid Online-Editor für User-Journey-Diagramme.
Grundlegende Syntax
Mermaid verwendet die Deklaration timeline, um eine Zeitachse zu erstellen.
timeline
title Mermaid Development History
2019 : Project Development
2020 : Feature Expansion
2021 : More Diagram Types
Gerendertes Ergebnis
Dabei gilt:
Häufige Syntax
| Syntax | Diagramm | Bedeutung |
| timeline | Zeitachse | erstellt eine Zeitachse |
| title text | Titel | legt den Titel der Zeitachse fest |
| section text | Abschnittsblock | unterteilt Gruppen von Zeitphasen |
| date : Event1 | Ereignis | definiert das Ereignis zu einem Zeitpunkt |
| : Event2 | Mehrere Ereignisse | weitere Ereignisse zum selben Zeitpunkt |
| Leerzeichen | Zeilenumbruch | bricht überlange Ereignisbeschreibungen um |
Die ausführliche Syntax zum Erzeugen einer Zeitachse mit Mermaid finden Sie auf folgender Seite: https://www.processon.io/de/mermaid/timeline
Zeitachsen eignen sich zur Darstellung historischer Ereignisse, von Projektentwicklungen, Produktiterationen und zeitlichen Abfolgen. Testen Sie kostenlos den Mermaid Online-Editor für Zeitachsen.
Grundlegende Syntax
Mermaid verwendet die Deklaration quadrantChart, um ein Quadrantendiagramm zu erstellen.
quadrantChart
title Product Positioning
x-axis Low Price--> High Price
y-axis Low Quality--> High Quality
quadrant-1 High-end
quadrant-2 Quality-focused
quadrant-3 Basic
quadrant-4 Value-for-money
Product A: [0.8, 0.7]
Product B: [0.3, 0.8]
Gerendertes Ergebnis
Dabei gilt:
Die ausführliche Syntax zum Erzeugen eines Quadrantendiagramms mit Mermaid finden Sie auf folgender Seite: https://www.processon.io/de/mermaid/quadrant-chart
Quadrantendiagramme eignen sich für Produktpositionierung, Prioritätsanalyse, Wettbewerbsanalyse und zweidimensionale Kategorisierung. Testen Sie kostenlos den Mermaid Online-Editor für Quadrantendiagramme.
Grundlegende Syntax
Das Mermaid-Kanban-Diagramm dient dazu, Arbeitsaufgaben nach ihrem Status zu organisieren, zum Beispiel Offen, In Bearbeitung und Erledigt. Eine typische Struktur lässt sich so darstellen:
kanban
Todo
Task A
Task B
Doing
Task C
Done
Task D
Gerendertes Ergebnis
Dabei gilt;
Die ausführliche Syntax zum Erzeugen eines Kanban-Diagramms mit Mermaid finden Sie auf folgender Seite: https://www.processon.io/de/mermaid/kanban
Kanban-Diagramme eignen sich für Projektmanagement, Aufgabenverfolgung, Entwicklungsprozesse und Workflow-Management. Testen Sie kostenlos den Mermaid Online-Editor für Kanban-Diagramme.
Grundlegende Syntax
Anforderungsdiagramme können die Beziehungen zwischen Anforderungen, Funktionen und Systemelementen darstellen, Mermaid verwendet die Deklaration requirementDiagram, um ein Anforderungsdiagramm zu erstellen.
requirementDiagram
requirement userRequirement {
id: 1
text: Customers can purchase products
risk: low
verifymethod: test
}
Gerendertes Ergebnis
Dabei gilt:
Häufige Syntax
| Syntax | Diagramm | Bedeutung |
| requirementDiagram | Anforderungsdiagramm | erstellt ein Anforderungsdiagramm |
| Requirement name { } | Anforderung | definiert eine Basis-Anforderung |
| functionalRequirement name { } | Funktion | definiert eine funktionale Anforderung |
| interfaceRequirement name { } | Schnittstelle | definiert eine Schnittstellenanforderung |
| performanceRequirement name { } | Leistung | definiert eine Leistungsanforderung |
| physicalRequirement name { } | Physisch | definiert eine physische Anforderung |
| element name {type: name docRef: name} | Element | definiert Entitätselemente wie System, Komponente oder Test |
| X - satisfies -> Y | Pfeil mit gestrichelter Linie | Die Entität erfüllt die entsprechende Anforderung |
| X - contains -> Y | Durchgezogene Linie mit rundem Kreuz-Endpunkt am Startpunkt | Eine Anforderung enthält eine andere Anforderung |
| X - derives -> Y | Pfeil mit gestrichelter Linie | Eine Anforderung wird von einer anderen Anforderung abgeleitet |
| X - copies -> Y | Pfeil mit gestrichelter Linie | Eine Anforderung kopiert eine andere Anforderung |
| X - traces -> Y | Pfeil mit gestrichelter Linie | Anforderungen sind bidirektional nachverfolgbar verknüpft |
Die ausführliche Syntax zum Erzeugen eines Anforderungsdiagramms mit Mermaid finden Sie auf folgender Seite: https://www.processon.io/de/mermaid/requirement-diagram
Anforderungsdiagramme eignen sich für Produktanforderungsanalyse, Systems Engineering und Anforderungsverfolgung. Testen Sie kostenlos den Mermaid Online-Editor für Anforderungsdiagramme.
Grundlegende Syntax
Mermaid verwendet die Deklaration pie, um ein Kreisdiagramm zu erstellen.
pie showData
title Population Share by Continent
"Asia" : 59.5
"Africa" : 18.0
"Europe" : 9.0
"North America" : 7.5
"South America" : 5.5
"Oceania" : 0.5
Gerendertes Ergebnis
Dabei gilt:
Die ausführliche Syntax zum Erzeugen eines Kreisdiagramms mit Mermaid finden Sie auf folgender Seite: https://www.processon.io/de/mermaid/pie-chart
Kreisdiagramme eignen sich zur Darstellung von Anteilen und Zusammensetzungen. Testen Sie kostenlos den Mermaid Online-Editor für Kreisdiagramme.
Grundlegende Syntax
Sankey-Diagramme dienen vor allem der Darstellung von Mengen-, Ressourcen-, Kapital- oder Datenflüssen zwischen verschiedenen Knoten, Mermaid verwendet die Deklaration sankey-beta, um ein Sankey-Diagramm zu erstellen.
sankey-beta
A,B,50
A,C,30
B,D,20
C,D,30
Gerendertes Ergebnis
Dabei gilt:
Die ausführliche Syntax zum Erzeugen eines Sankey-Diagramms mit Mermaid finden Sie auf folgender Seite: https://www.processon.io/de/mermaid/sankey-diagram
Ein Sankey-Diagramm ist eine Visualisierung, die den Fluss von einer Gruppe von Werten zu einer anderen zeigt. Testen Sie kostenlos den Mermaid Online-Editor für Sankey-Diagramme.
Grundlegende Syntax
Mermaid verwendet die Deklaration xychart-beta, um ein XY-Diagramm zu erstellen.
xychart-beta
title "Monthly Sales Data"
x-axis "Month"["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
y-axis " Sales (million)" 0 --> 100
line [20, 30, 40, 35, 50, 60]
bar [30, 50, 35, 20, 45, 40]
Gerendertes Ergebnis
Dabei gilt:
Häufige Syntax
| Syntax | Diagramm | Bedeutung |
| xychart-beta | XY-Koordinatendiagramm | erstellt ein XY-Koordinatendiagramm |
| xychart-beta horizontal | Horizontales XY-Koordinatendiagramm | erstellt ein horizontales XY-Koordinatendiagramm |
| title "name" | Titel | definiert den Titel des XY-Diagramms |
| x-axis "axisTitle" [a,b,c] | X-Achse | definiert Kategorien und Titel der horizontalen Achse |
| y-axis "axisTitle" min --> max | Y-Achse | definiert Bereich und Titel der vertikalen Achse |
| y-axis "axisTitle" | Y-Achse nur mit Titel | legt nur den Namen der vertikalen Achse fest, der Wertebereich wird automatisch angepasst |
| bar [num1, num2, num3] | Balkendiagramm | definiert die Datenreihe des Balkendiagramms |
| line [num1, num2, num3] | Liniendiagramm | definiert die Datenreihe des Liniendiagramms |
Die ausführliche Syntax zum Erzeugen eines XY-Diagramms mit Mermaid finden Sie auf folgender Seite: https://www.processon.io/de/mermaid/xy-chart
XY-Diagramme eignen sich zur Darstellung von Datenverläufen, Zahlenvergleichen und einfachen Datenvisualisierungen. Testen Sie kostenlos den Mermaid Online-Editor für XY-Diagramme.
Grundlegende Syntax
Radar-Diagramme eignen sich zum Vergleich mehrerer Objekte über mehrere Dimensionen, etwa Kompetenzbewertungen, Produktkennzahlen und Variantenvergleiche. Mermaid verwendet die Deklaration radar-beta zum Erstellen eines Radar-Diagramms.
radar-beta
title "Competency Assessment Radar Chart"
axis a["Communication Skills"], b["Logical Thinking"], c["Team Collaboration"], d["Technical Skills"]
curve A["Chenlaoda"] {80, 90, 70, 85}
curve B["Wangxiaoer"] {60, 70, 90, 80}
Gerendertes Ergebnis
Dabei gilt:
Häufige Syntax
| Syntax | Diagramm | Bedeutung |
| radar-beta | Radar-Diagramm | erstellt ein Radar-Diagramm |
| title "name" | Titel | definiert den Titel des Radar-Diagramms direkt nach radar-beta |
| title "name" | Titel | definiert den Titel des Radar-Diagramms vor radar-beta, wobei ober- und unterhalb jeweils 3 Bindestriche einzufügen sind |
| axis id ["axisTitle"] | Dimensionsachse | definiert Dimensionen und Namen des Radar-Diagramms |
| curve id ["name"]{[values]} | Datenkurve | definiert den Namen der Datenreihe und die Werte je Dimension |
| max value | Maximalwert | legt den Maximalwert des Wertebereichs im Radar-Diagramm fest |
| min value | Minimalwert | legt den Minimalwert des Wertebereichs im Radar-Diagramm fest |
Die ausführliche Syntax zum Erzeugen eines Radar-Diagramms mit Mermaid finden Sie auf folgender Seite: https://www.processon.io/de/mermaid/radar-chart
Radar-Diagramme sind besonders nützlich für Entwickler, Data Scientists und Ingenieure, die Daten klar und prägnant in kreisförmiger Form darstellen müssen. Testen Sie kostenlos den Mermaid Online-Editor für Radar-Diagramme.
Grundlegende Syntax
Mermaid verwendet die Deklaration gitGraph, um ein Git-Diagramm zu erstellen.
gitGraph
commit
branch develop
checkout develop
commit
checkout main
merge develop
Gerendertes Ergebnis
Dabei gilt:
Die ausführliche Syntax zum Erzeugen eines Git-Diagramms mit Mermaid finden Sie auf folgender Seite: https://www.processon.io/de/mermaid/git-graph
Git-Diagramme eignen sich zur Darstellung von Versionskontrollvorgängen wie Git-Commits, Branch-Erstellung, Branch-Wechsel und Merges. Testen Sie kostenlos den Mermaid Online-Editor für Git-Diagramme.
Grundlegende Syntax
Das Mermaid-C4-Diagramm dient der Softwarearchitektur-Modellierung und kann Softwaresysteme, Container, Komponenten und ihre Beziehungen auf verschiedenen Ebenen beschreiben.
C4Context
title C4 Diagram of the Business System
Person(user, " User", " System user")
System(system, " Business System", " Core business system")
Rel(user, system, "Uses")
Gerendertes Ergebnis
Dabei gilt:
Häufige Syntax
| Syntax | Diagramm | Bedeutung |
| C4Context | Systemkontextdiagramm | erstellt ein C4-Systemkontextdiagramm |
| C4Container | Containerdiagramm | erstellt ein C4-Containerdiagramm |
| C4Component | Komponentendiagramm | erstellt ein C4-Komponentendiagramm |
| C4Dynamic | Dynamisches Interaktionsdiagramm | erstellt ein C4-Diagramm der dynamischen Interaktion |
| C4Deployment | Deploymentdiagramm | erstellt ein C4-Deploymentdiagramm |
| title | Titel | legt den Titel des C4-Diagramms fest |
| Person(alias, "label", "description") | Person | kennzeichnet einen Benutzer oder eine Rolle, die das System nutzt |
| Person_Ext(alias, "label", "description") | Externe Person | kennzeichnet Personen oder organisatorische Rollen außerhalb des Systems, die an der Interaktion teilnehmen |
| System(alias, "label", "description") | Systemknoten | kennzeichnet das zu analysierende Softwaresystem |
| System_Ext(alias, "label", "description") | Externer Systemknoten | kennzeichnet Drittanbieterdienste oder externe Softwaresysteme, von denen das System abhängig ist |
| System_Boundary(alias, "label") | Systemgrenze | kennzeichnet die Grenze des Systemumfangs |
| Container(alias, "label", "technology") | Container | kennzeichnet eine eigenständig lauffähige Softwareeinheit innerhalb des Systems |
| Container_Boundary(alias, "label") | Containergrenze | kennzeichnet den Umfang eines Containers oder Dienstes |
Die ausführliche Syntax zum Erzeugen eines C4-Diagramms mit Mermaid finden Sie auf folgender Seite: https://www.processon.io/de/mermaid/c4-diagram
C4-Diagramme eignen sich für Softwarearchitektur-Design, Systemanalyse und technische Dokumentation. Testen Sie kostenlos den Mermaid Online-Editor für C4-Diagramme.
Grundlegende Syntax
Mermaid verwendet die Deklaration architecture-beta, um ein Architekturdiagramm zu erstellen.
architecture-beta
group api(cloud)[API server]
service server(server)[server] in api
service database(database)[databasa] in api
server:R --> L:database
Gerendertes Ergebnis
Dabei gilt:
Die ausführliche Syntax zum Erzeugen eines Architekturdiagramms mit Mermaid finden Sie auf folgender Seite: https://www.processon.io/de/mermaid/architecture-diagram
Architekturdiagramme eignen sich zur Darstellung von Servern, Datenbanken, Cloud-Diensten, Anwendungsdiensten und den Beziehungen zwischen verschiedenen Systemkomponenten. Testen Sie kostenlos den Mermaid Online-Editor für Architekturdiagramme.
Grundlegende Syntax
Blockdiagramme beschreiben die Systemstruktur vor allem über Module und Verbindungsbeziehungen, Mermaid verwendet die Deklaration block-beta, um ein Blockdiagramm zu erstellen.
block-beta
A space B
A["User"] --> B["Application"]
B space C
B --> C["Database"]
Gerendertes Ergebnis
Dabei gilt:
Die ausführliche Syntax zum Erzeugen eines Blockdiagramms mit Mermaid finden Sie auf folgender Seite: https://www.processon.io/de/mermaid/block-diagram
Blockdiagramme eignen sich für Systemmodule, Funktionsstrukturen, technische Architekturen und Komponentenbeziehungen. Testen Sie kostenlos den Mermaid Online-Editor für Blockdiagramme.
Grundlegende Syntax
Paketdiagramme dienen vor allem der Darstellung von Feldern und Längen in Netzwerkpaketen oder Protokolldatenstrukturen, Mermaid verwendet die Deklaration packet-beta, um ein Paketdiagramm zu erstellen.
packet-beta
0-7: "Version"
8-15: "Type"
16-31: "Length"
Gerendertes Ergebnis
Dabei gilt:
Paketdiagramme eignen sich für Netzwerkprotokolle, Paketstrukturen und technische Spezifikationsdokumente. Testen Sie kostenlos den Mermaid Online-Editor für Paketdiagramme.
Die Mermaid-Syntax nicht zu kennen heißt nicht, dass Sie Mermaid nicht verwenden können, um Diagramme zu erstellen; Sie haben mehrere Möglichkeiten:
Kostenlos Mermaid-Vorlagen verwenden
Wählen Sie zunächst eine Vorlage aus, die Ihren Anforderungen nahekommt, und passen Sie dann die Knoten, Texte und Beziehungen darin an. Diese Vorgehensweise eignet sich für Benutzer, die Mermaid zum ersten Mal nutzen.
Mermaid-Code mit KI generieren
Beschreiben Sie das gewünschte Diagramm einfach in natürlicher Sprache, zum Beispiel:
Erstelle einen Prozess zur Bearbeitung von E-Commerce-Bestellungen, einschließlich Bestellung durch den Kunden, Zahlung, Bestandsprüfung, Versand und Abschluss der Bestellung.
Die KI kann anhand der Beschreibung Mermaid-Code generieren, der anschließend nach dem tatsächlichen Bedarf angepasst wird.
Code mit KI prüfen und reparieren
Wenn im Mermaid-Code ein Syntaxfehler auftritt, kann die KI helfen, das Problem zu lokalisieren und den Code zu korrigieren.
Code per Bilderkennung generieren
Bei bereits vorhandenen Flussdiagrammen, Architekturdiagrammen oder anderen strukturierten Diagrammen können Sie versuchen, den Mermaid-Code per Bilderkennung zu erzeugen und anschließend weiterzubearbeiten.
Ein Mermaid Online-Editor muss in der Regel drei Kernprobleme lösen: Code schreiben, Diagramm in der Vorschau anzeigen und Ergebnis exportieren. Darüber hinaus können Vorlagen und KI die Einstiegshürde für Mermaid senken.
So können Sie zum Beispiel mit dem Mermaid Online-Editor von ProcessOn direkt im Browser:
Für Nutzer, die häufig Mermaid-Diagramme erstellen müssen, kann der Mermaid Online-Editor von ProcessOn das Schreiben von Mermaid-Code, das Generieren, die nachträgliche Bearbeitung sowie den Export und das Teilen in einer einzigen Arbeitsumgebung bündeln.
Von Mermaid-Flussdiagrammen, Sequenzdiagrammen und Klassendiagrammen über Gantt-Diagramme, Mindmaps, Quadrantendiagramme, Sankey-Diagramme und Git-Diagramme bis hin zu C4- und Architekturdiagrammen lässt sich alles mit der Mermaid-Syntax erstellen und bearbeiten.
Probieren Sie den Mermaid Online-Editor, schreiben Sie Mermaid-Code online und erzeugen Sie Diagramme.
Ist die Mermaid-Syntax schwer zu lernen?
Die grundlegende Mermaid-Syntax ist relativ einfach; für die meisten Diagramme genügt es, Diagrammdeklaration, Knoten, Verbindungslinien und Text zu beherrschen. sequenceDiagram deklariert beispielsweise ein Sequenzdiagramm, flowchart ein Flussdiagramm. Die Syntaxregeln der einzelnen Diagrammtypen unterscheiden sich jedoch, und bei komplexen Diagrammen müssen zusätzlich die entsprechenden Parameter und Konfigurationen erlernt werden.
Warum wird kein Diagramm erzeugt, wenn der Mermaid-Code fehlerhaft ist?
Mermaid reagiert empfindlich auf die syntaktische Struktur. Häufige Ursachen sind eine falsche Diagrammdeklaration, unvollständige Knoten- oder Verbindungssyntax, fehlerhafte Einrückungen oder Sonderzeichen sowie die Verwendung von Syntax, die die aktuelle Mermaid-Version nicht unterstützt.
Worin unterscheidet sich Mermaid von herkömmlicher Zeichensoftware?
Mermaid beschreibt Diagramme vor allem über Textcode, während herkömmliche Zeichensoftware Diagramme meist durch Ziehen von Formen, Verbindungslinien und Anpassen von Stilen erstellt.
Lassen sich Mermaid-Diagramme speichern und wiederverwenden?
Ja. Der Kerninhalt eines Mermaid-Diagramms ist Textcode, daher können Sie den Code in Markdown, in Codedateien oder in anderen Mermaid-fähigen Dokumenten speichern und bei Bedarf erneut rendern.
Das ist auch ein wichtiger Unterschied zwischen Mermaid und reinen Bilddiagrammen: Bilder speichern nur das Endergebnis, während Mermaid-Code zugleich die Strukturinformationen des Diagramms speichert.
Wie hängen Mermaid und Markdown zusammen?
Mermaid wird häufig zusammen mit Markdown verwendet, doch beide sind nicht dieselbe Syntax.
Markdown dient vor allem zum Schreiben strukturierter Texte, während Mermaid Diagramme per Code erzeugt. In Markdown-Editoren, die Mermaid unterstützen, lässt sich Mermaid-Code in ein Markdown-Dokument einbetten, sodass Diagramm und Textbeschreibung im selben Dokument stehen.
Nach dem Tutorial zu versuchen
Kostenlos zu verwenden ProcessOn
