Mermaid Hızlı Başvuru Kılavuzu
Tüm Mermaid.js diyagram sözdizimi için eksiksiz hızlı başvuru. Her diyagram türüne hızlı erişim için bu sayfayı yer imlerine ekleyin.
Akış Şeması Sözdizimi
Düğümler ve yönlü oklarla süreçleri, iş akışlarını ve algoritmaları görselleştirin. İş süreçleri ve karar ağaçları için mükemmel.
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])Sıralama Diyagramı Sözdizimi
Farklı aktörler veya sistemler arasındaki etkileşimleri zaman içinde belgeleyin. API dokümantasyonu ve sistem tasarımı için ideal.
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: ResponseSınıf Diyagramı Sözdizimi
Sınıflar, öznitelikler ve ilişkilerle nesne yönelimli sistemleri modelleyin. Yazılım mimarisi planlaması için vazgeçilmez.
classDiagram
class Animal {
+String name
+makeSound()
}classDiagram
Animal <|-- Dog
Animal <|-- Cat
Animal : +String nameclassDiagram
Customer "1" --> "*" OrderDurum Diyagramı Sözdizimi
Sistemlerde veya uygulamalarda durum geçişlerini temsil edin. Yaşam döngüsü durumlarını ve iş akışlarını modellemek için harika.
stateDiagram-v2
[*] --> Active
Active --> [*]stateDiagram-v2
Idle --> Running: start
Running --> Idle: stopstateDiagram-v2
state Active {
[*] --> Working
Working --> Paused
}Gantt Grafiği Sözdizimi
Görevler ve bağımlılıklarla proje zaman çizelgelerini planlayın ve takip edin. Proje yönetimi ve zamanlama için mükemmel.
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 Diyagramı Sözdizimi
Varlıklar ve ilişkilerle veritabanı şemalarını tasarlayın. Veritabanı modelleme ve dokümantasyonu için ideal.
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE_ITEM : containserDiagram
CUSTOMER {
int id PK
string name
string email
}Yolculuk Haritası Sözdizimi
Temas noktaları boyunca kullanıcı deneyimlerini ve etkileşimlerini haritalayın. UX tasarımı ve müşteri yolculuğu haritalama için mükemmel.
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 Grafiği Sözdizimi
Git dallanma stratejilerini ve commit geçmişlerini görselleştirin. Sürüm kontrol iş akışlarını açıklamak için faydalı.
gitGraph
commit
branch develop
commit
checkout main
merge developgitGraph
commit
branch feature
commit
commit
checkout main
merge feature
commitZihin Haritası Sözdizimi
Fikirleri organize edin, beyin fırtınası yapın ve hiyerarşik görsel yapılar oluşturun. Planlama ve bilgi haritalama için mükemmel.
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}}Pasta Grafiği Sözdizimi
Oransal veri dağılımlarını dairesel grafiklerle görüntüleyin. Yüzdeleri ve pazar payı dağılımlarını göstermek için ideal.
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" : 4Zaman Çizelgesi Sözdizimi
Kronolojik olayları ve kilometre taşlarını bir zaman ekseni boyunca görselleştirin. Proje geçmişleri ve yol haritaları için harika.
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 Sözdizimi
Görevleri iş akışı aşamalarını temsil eden sütunlar halinde düzenleyin. Çevik proje yönetimi ve görev takibi için mükemmel.
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 typoKadran Grafiği Sözdizimi
Öğeleri iki eksenli bir ızgarada karşılaştırın ve önceliklendirin. Özellik önceliklendirme ve stratejik analiz için ideal.
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 Diyagramı Sözdizimi
Düğümler arasındaki akış miktarlarını orantılı oklarla görselleştirin. Enerji akışları, bütçe tahsisi ve dönüşüm hunileri için mükemmel.
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 Grafiği Sözdizimi
Özelleştirilebilir eksenlerle çubuk grafikleri ve çizgi grafikleri oluşturun. Veri görselleştirme ve trend analizi için ideal.
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]Blok Diyagramı Sözdizimi
Sütunlar ve satırlar halinde düzenlenmiş bloklarla yapılandırılmış düzenler oluşturun. Sistem mimarisi ve bileşen genel görünümleri için harika.
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 --> DBMimari Diyagram Sözdizimi
Hizmet simgeleri ve bağlantılarla bulut ve sistem mimarisi tasarlayın. Altyapı dokümantasyonu için mükemmel.
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:dbPaket Diyagramı Sözdizimi
Ağ protokolü paket yapılarını bit düzeyinde alan düzenleriyle görselleştirin. Ağ protokolü dokümantasyonu için vazgeçilmez.
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"