Mermaid-Spickzettel
Vollständige Kurzreferenz für die gesamte Mermaid.js-Diagrammsyntax. Setzen Sie ein Lesezeichen für schnellen Zugriff auf jeden Diagrammtyp.
Flussdiagramm-Syntax
Visualisieren Sie Prozesse, Arbeitsabläufe und Algorithmen mit Knoten und gerichteten Pfeilen. Perfekt für Geschäftsprozesse und Entscheidungsbäume.
graph TD
A[Start] --> B[End]graph TD
A{Decision} -->|Yes| B[OK]
A -->|No| C[Cancel]graph LR
subgraph Group
A --> B
endgraph TD
A[Rectangle] --> B(Rounded)
B --> C{Diamond}
C --> D((Circle))
C --> E([Stadium])Sequenzdiagramm-Syntax
Dokumentieren Sie Interaktionen zwischen verschiedenen Akteuren oder Systemen im Zeitverlauf. Ideal für API-Dokumentation und Systemdesign.
sequenceDiagram
Alice->>Bob: Hello
Bob-->>Alice: HisequenceDiagram
loop Every minute
Alice->>Bob: Ping
endsequenceDiagram
alt Success
A->>B: 200 OK
else Error
A->>B: 500 Error
endsequenceDiagram
Alice->>+Bob: Request
Bob-->>-Alice: ResponseKlassendiagramm-Syntax
Modellieren Sie objektorientierte Systeme mit Klassen, Attributen und Beziehungen. Unverzichtbar für die Planung von Softwarearchitekturen.
classDiagram
class Animal {
+String name
+makeSound()
}classDiagram
Animal <|-- Dog
Animal <|-- Cat
Animal : +String nameclassDiagram
Customer "1" --> "*" OrderZustandsdiagramm-Syntax
Stellen Sie Zustandsübergänge in Systemen oder Anwendungen dar. Hervorragend geeignet für die Modellierung von Lebenszyklen und Arbeitsabläufen.
stateDiagram-v2
[*] --> Active
Active --> [*]stateDiagram-v2
Idle --> Running: start
Running --> Idle: stopstateDiagram-v2
state Active {
[*] --> Working
Working --> Paused
}Gantt-Diagramm-Syntax
Planen und verfolgen Sie Projektzeitpläne mit Aufgaben und Abhängigkeiten. Perfekt für Projektmanagement und Terminplanung.
gantt
title Project
dateFormat YYYY-MM-DD
section Phase 1
Task A :a1, 2024-01-01, 30d
Task B :after a1, 20dgantt
Task Done :done, d1, 2024-01-01, 10d
Task Active :active, 2024-01-11, 10d
Task Crit :crit, 2024-01-21, 10dER-Diagramm-Syntax
Entwerfen Sie Datenbankschemata mit Entitäten und Beziehungen. Ideal für Datenbankmodellierung und Dokumentation.
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE_ITEM : containserDiagram
CUSTOMER {
int id PK
string name
string email
}Journey-Map-Syntax
Bilden Sie Benutzererfahrungen und Interaktionen über verschiedene Berührungspunkte ab. Hervorragend für UX-Design und Customer-Journey-Mapping.
journey
title User Flow
section Login
Visit site: 5: User
Enter credentials: 3: User
Dashboard: 4: Userjourney
title New User Onboarding
section Sign up
Open homepage: 5: Visitor
Create account: 3: Visitor
Verify email: 2: Visitor
section First diagram
Choose template: 4: User
Edit code: 5: User
Export PNG: 5: Userjourney
title Checkout Flow
section Browse
Search product: 4: Customer
View details: 5: Customer
section Purchase
Add to cart: 5: Customer
Pay: 3: Customer, Stripe
Confirm order: 5: Customer, StripeGit-Graph-Syntax
Visualisieren Sie Git-Branching-Strategien und Commit-Historien. Hilfreich zur Erklärung von Versionskontroll-Workflows.
gitGraph
commit
branch develop
commit
checkout main
merge developgitGraph
commit
branch feature
commit
commit
checkout main
merge feature
commitMindmap-Syntax
Organisieren Sie Ideen, brainstormen Sie Konzepte und erstellen Sie hierarchische visuelle Strukturen. Perfekt für Planung und Wissensabbildung.
mindmap
root((Central))
Topic A
Detail 1
Detail 2
Topic B
Detail 3mindmap
root((Launch Plan))
Engineering
Backend API
Frontend UI
Testing
Marketing
Landing page
Social media
Operations
Support docs
Pricingmindmap
root((Mermaid))
::icon(fa fa-book)
Origins
Long history
Popularisation
[Square]
(Rounded)
((Circle))
{{Hexagon}}Kreisdiagramm-Syntax
Zeigen Sie proportionale Datenverteilungen mit kreisförmigen Diagrammen an. Ideal für Prozentangaben und Marktanteile.
pie title Budget
"Engineering" : 45
"Marketing" : 25
"Operations" : 30pie showData title Browser Share 2026
"Chrome" : 64.2
"Safari" : 18.5
"Edge" : 5.3
"Firefox" : 3.1
"Other" : 8.9pie title How I Spend My Day
"Sleep" : 8
"Work" : 9
"Meals" : 2
"Exercise" : 1
"Free time" : 4Zeitleisten-Syntax
Visualisieren Sie chronologische Ereignisse und Meilensteine entlang einer Zeitachse. Ideal für Projekthistorien und Roadmaps.
timeline
title History
2020 : Event A
2021 : Event B
: Event C
2022 : Event Dtimeline
title Product Roadmap
section 2024
Q1 : Beta launch
Q2 : Public release
section 2025
Q1 : Mobile apps
Q2 : Enterprise plan
Q3 : API v2
section 2026
Q1 : AI assistant
Q2 : Marketplacetimeline
title Mermaid Study Plan
Week 1 : Read syntax docs
: Try flowcharts
Week 2 : Sequence diagrams
: Class diagrams
Week 3 : Gantt and timeline
Week 4 : Build a real projectKanban-Syntax
Organisieren Sie Aufgaben in Spalten, die Workflow-Phasen darstellen. Perfekt für agiles Projektmanagement und Aufgabenverfolgung.
kanban
Todo
Task 1
Task 2
In Progress
Task 3
Done
Task 4kanban
Backlog
[Auth flow]@{ assigned: 'alice', priority: 'High' }
[Onboarding tour]@{ assigned: 'bob', priority: 'Low' }
In Progress
[Payments]@{ assigned: 'carol', priority: 'High' }
Review
[Settings page]@{ assigned: 'dan', priority: 'Medium' }
Done
[Landing redesign]@{ assigned: 'erin', priority: 'High' }kanban
Reported
Login 500 error
Slow PDF export
Triaged
Mobile menu glitch
Fixing
Dark mode contrast
Verified
Empty state typoQuadrantendiagramm-Syntax
Plotten Sie Elemente auf einem Zwei-Achsen-Raster zum Vergleichen und Priorisieren. Ideal für Feature-Priorisierung und strategische Analyse.
quadrantChart
title Priority Matrix
x-axis Low Effort --> High Effort
y-axis Low Impact --> High Impact
quadrant-1 Plan
quadrant-2 Do First
quadrant-3 Delegate
quadrant-4 Eliminate
Item A: [0.3, 0.8]
Item B: [0.7, 0.2]quadrantChart
title Reach and Engagement
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
quadrant-1 Stars
quadrant-2 Hidden Gems
quadrant-3 Filler
quadrant-4 Volume Plays
Campaign A: [0.7, 0.8]
Campaign B: [0.3, 0.7]
Campaign C: [0.2, 0.2]
Campaign D: [0.8, 0.3]quadrantChart
title Tech Choices
x-axis Hard --> Easy
y-axis Slow --> Fast
quadrant-1 Adopt
quadrant-2 Trial
quadrant-3 Hold
quadrant-4 Assess
Vue: [0.8, 0.7] radius: 12, color: #41b883
React: [0.7, 0.7] radius: 12, color: #61dafb
Svelte: [0.6, 0.85] radius: 10, color: #ff3e00Sankey-Diagramm-Syntax
Visualisieren Sie Flussmengen zwischen Knoten mit proportionalen Pfeilen. Perfekt für Energieflüsse, Budgetverteilung und Conversion-Funnels.
sankey-beta
Source,Target,Value
A,X,5
A,Y,3
B,X,2
B,Y,8sankey-beta
Visitors,Signups,1200
Visitors,Bounce,3800
Signups,Trial,800
Signups,Free Plan,400
Trial,Paid,250
Trial,Churn,550sankey-beta
Solar,Grid,40
Wind,Grid,30
Coal,Grid,80
Grid,Residential,50
Grid,Industrial,80
Grid,Losses,20XY-Diagramm-Syntax
Erstellen Sie Balkendiagramme und Liniendiagramme mit anpassbaren Achsen. Ideal für Datenvisualisierung und Trendanalyse.
xychart-beta
title "Sales"
x-axis [Jan, Feb, Mar, Apr]
y-axis "Revenue" 0 --> 100
bar [30, 50, 70, 90]
line [30, 50, 70, 90]xychart-beta
title "Quarterly Revenue (USD k)"
x-axis ["Q1", "Q2", "Q3", "Q4"]
y-axis "Revenue" 0 --> 250
bar [120, 145, 180, 220]xychart-beta
title "Active Users"
x-axis [Jan, Feb, Mar, Apr, May, Jun]
y-axis "Users (k)" 0 --> 50
line [10, 14, 18, 25, 33, 42]
line [8, 11, 15, 20, 24, 28]xychart-beta horizontal
title "Programming Language Popularity"
x-axis "Share (%)" 0 --> 30
y-axis [JavaScript, Python, Java, C#, Go]
bar [25, 22, 14, 8, 5]Blockdiagramm-Syntax
Erstellen Sie strukturierte Layouts mit Blöcken in Spalten und Zeilen. Ideal für Systemarchitektur und Komponentenübersichten.
block-beta
columns 3
a["A"]:3
b["B"] c["C"] d["D"]block-beta
columns 4
a["Input"] b("Process") c{{"Decision"}} d[("Storage")]
a --> b
b --> c
c --> dblock-beta
columns 3
Web["Web App"]:3
space:3
API["REST API"] Auth["Auth Service"] DB[("Postgres")]
Web --> API
API --> Auth
API --> DBArchitekturdiagramm-Syntax
Entwerfen Sie Cloud- und Systemarchitekturen mit Service-Icons und Verbindungen. Perfekt für Infrastrukturdokumentation.
architecture-beta
group api(cloud)[API]
service web(internet)[Web] in api
service db(database)[DB]
web:R --> L:dbarchitecture-beta
group public(cloud)[Public Network]
group private(cloud)[Private VPC]
service cdn(internet)[CDN] in public
service lb(server)[Load Balancer] in public
service web(server)[Web Tier] in private
service api(server)[API Tier] in private
service db(database)[Postgres] in private
service cache(disk)[Redis] in private
cdn:R --> L:lb
lb:R --> L:web
web:R --> L:api
api:R --> L:db
api:B --> T:cachearchitecture-beta
service gw(internet)[API Gateway]
service queue(server)[Event Bus]
service orders(server)[Orders]
service billing(server)[Billing]
service notify(server)[Notifications]
service db(database)[Shared DB]
gw:R --> L:orders
orders:R --> L:queue
queue:T --> B:billing
queue:B --> T:notify
orders:B --> T:dbPaketdiagramm-Syntax
Visualisieren Sie Netzwerkprotokoll-Paketstrukturen mit Bit-Level-Feldlayouts. Unverzichtbar für Netzwerkprotokolldokumentation.
packet-beta
0-15: "Source Port"
16-31: "Dest Port"
32-63: "Sequence Number"packet-beta
title TCP Header
0-15: "Source Port"
16-31: "Destination Port"
32-63: "Sequence Number"
64-95: "Acknowledgment Number"
96-99: "Data Offset"
100-105: "Reserved"
106-111: "Flags"
112-127: "Window"
128-143: "Checksum"
144-159: "Urgent Pointer"packet-beta
title IPv4 Header
0-3: "Version"
4-7: "IHL"
8-15: "Type of Service"
16-31: "Total Length"
32-47: "Identification"
48-50: "Flags"
51-63: "Fragment Offset"
64-71: "TTL"
72-79: "Protocol"
80-95: "Header Checksum"
96-127: "Source IP Address"
128-159: "Destination IP Address"