Bảng tóm tắt Mermaid
Tài liệu tham khảo nhanh đầy đủ cho tất cả cú pháp sơ đồ Mermaid.js. Đánh dấu trang này để truy cập nhanh mọi loại sơ đồ.
Cú pháp lưu đồ
Trực quan hóa quy trình, luồng công việc và thuật toán với các nút và mũi tên định hướng. Hoàn hảo cho quy trình kinh doanh và cây quyết định.
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])Cú pháp sơ đồ trình tự
Ghi lại các tương tác giữa các tác nhân hoặc hệ thống khác nhau theo thời gian. Lý tưởng cho tài liệu API và thiết kế hệ thống.
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: ResponseCú pháp sơ đồ lớp
Mô hình hóa hệ thống hướng đối tượng với các lớp, thuộc tính và mối quan hệ. Thiết yếu cho việc lập kế hoạch kiến trúc phần mềm.
classDiagram
class Animal {
+String name
+makeSound()
}classDiagram
Animal <|-- Dog
Animal <|-- Cat
Animal : +String nameclassDiagram
Customer "1" --> "*" OrderCú pháp sơ đồ trạng thái
Biểu diễn các chuyển đổi trạng thái trong hệ thống hoặc ứng dụng. Tuyệt vời cho việc mô hình hóa trạng thái vòng đời và luồng công việc.
stateDiagram-v2
[*] --> Active
Active --> [*]stateDiagram-v2
Idle --> Running: start
Running --> Idle: stopstateDiagram-v2
state Active {
[*] --> Working
Working --> Paused
}Cú pháp biểu đồ Gantt
Lập kế hoạch và theo dõi tiến độ dự án với các nhiệm vụ và phụ thuộc. Hoàn hảo cho quản lý dự án và lập lịch.
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, 10dCú pháp sơ đồ ER
Thiết kế lược đồ cơ sở dữ liệu với các thực thể và mối quan hệ. Lý tưởng cho việc mô hình hóa và tài liệu cơ sở dữ liệu.
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE_ITEM : containserDiagram
CUSTOMER {
int id PK
string name
string email
}Cú pháp bản đồ hành trình
Lập bản đồ trải nghiệm và tương tác của người dùng qua các điểm tiếp xúc. Xuất sắc cho thiết kế UX và lập bản đồ hành trình khách hàng.
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, StripeCú pháp đồ thị Git
Trực quan hóa chiến lược phân nhánh Git và lịch sử commit. Hữu ích cho việc giải thích luồng công việc quản lý phiên bản.
gitGraph
commit
branch develop
commit
checkout main
merge developgitGraph
commit
branch feature
commit
commit
checkout main
merge feature
commitCú pháp sơ đồ tư duy
Tổ chức ý tưởng, động não và tạo cấu trúc phân cấp trực quan. Hoàn hảo cho lập kế hoạch và lập bản đồ kiến thức.
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}}Cú pháp biểu đồ tròn
Hiển thị phân bổ dữ liệu theo tỷ lệ với biểu đồ hình tròn. Lý tưởng để thể hiện phần trăm và phân tích thị phần.
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" : 4Cú pháp dòng thời gian
Trực quan hóa các sự kiện và mốc quan trọng theo thứ tự thời gian. Tuyệt vời cho lịch sử dự án và lộ trình phát triển.
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 projectCú pháp Kanban
Tổ chức nhiệm vụ thành các cột đại diện cho các giai đoạn luồng công việc. Hoàn hảo cho quản lý dự án agile và theo dõi nhiệm vụ.
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 typoCú pháp biểu đồ phần tư
Vẽ các mục trên lưới hai trục để so sánh và ưu tiên. Lý tưởng cho ưu tiên tính năng và phân tích chiến lược.
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: #ff3e00Cú pháp sơ đồ Sankey
Trực quan hóa lượng luồng giữa các nút với mũi tên tỷ lệ. Hoàn hảo cho luồng năng lượng, phân bổ ngân sách và phễu chuyển đổi.
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,20Cú pháp biểu đồ XY
Tạo biểu đồ cột và biểu đồ đường với các trục tùy chỉnh. Lý tưởng cho trực quan hóa dữ liệu và phân tích xu hướng.
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]Cú pháp sơ đồ khối
Xây dựng bố cục có cấu trúc với các khối sắp xếp theo cột và hàng. Tuyệt vời cho kiến trúc hệ thống và tổng quan thành phần.
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 --> DBCú pháp sơ đồ kiến trúc
Thiết kế kiến trúc đám mây và hệ thống với biểu tượng dịch vụ và kết nối. Hoàn hảo cho tài liệu cơ sở hạ tầng.
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:dbCú pháp sơ đồ gói tin
Trực quan hóa cấu trúc gói tin giao thức mạng với bố cục trường cấp bit. Thiết yếu cho tài liệu giao thức mạng.
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"