Hướng dẫn đầy đủ về sơ đồ Mermaid trong Markdown#
Bài viết này trình bày cách sử dụng Mermaid trong tài liệu Markdown để tạo các loại sơ đồ phức tạp, bao gồm lưu đồ, sơ đồ tuần tự, biểu đồ Gantt, sơ đồ lớp và sơ đồ trạng thái.
Ví dụ lưu đồ#
Lưu đồ rất phù hợp để biểu diễn các bước trong quy trình hoặc thuật toán.
graph TD
A[Bắt đầu] --> B{Kiểm tra điều kiện}
B -->|Có| C[Bước xử lý 1]
B -->|Không| D[Bước xử lý 2]
C --> E[Quy trình con]
D --> E
subgraph E [Chi tiết quy trình con]
E1[Bước con 1] --> E2[Bước con 2]
E2 --> E3[Bước con 3]
end
E --> F{Quyết định khác}
F -->|Lựa chọn 1| G[Kết quả 1]
F -->|Lựa chọn 2| H[Kết quả 2]
F -->|Lựa chọn 3| I[Kết quả 3]
G --> J[Kết thúc]
H --> J
I --> J
Ví dụ sơ đồ tuần tự#
Sơ đồ tuần tự thể hiện sự tương tác giữa các đối tượng theo thời gian.
sequenceDiagram
participant User as Người dùng
participant WebApp as Ứng dụng Web
participant Server as Máy chủ
participant Database as Cơ sở dữ liệu
User->>WebApp: Gửi yêu cầu đăng nhập
WebApp->>Server: Gửi yêu cầu xác thực
Server->>Database: Truy vấn thông tin đăng nhập
Database-->>Server: Trả về dữ liệu người dùng
Server-->>WebApp: Trả về kết quả xác thực
alt Xác thực thành công
WebApp->>User: Hiển thị trang chào mừng
WebApp->>Server: Yêu cầu dữ liệu người dùng
Server->>Database: Lấy tùy chọn người dùng
Database-->>Server: Trả về cài đặt tùy chọn
Server-->>WebApp: Trả về dữ liệu người dùng
WebApp->>User: Tải giao diện cá nhân hóa
else Xác thực thất bại
WebApp->>User: Hiển thị thông báo lỗi
WebApp->>User: Yêu cầu nhập lại
end
Ví dụ biểu đồ Gantt#
Biểu đồ Gantt rất phù hợp để hiển thị tiến độ và mốc thời gian của dự án.
gantt
title Mốc thời gian dự án phát triển website
dateFormat YYYY-MM-DD
axisFormat %m/%d
section Giai đoạn thiết kế
Phân tích yêu cầu :a1, 2023-10-01, 7d
Thiết kế UI :a2, after a1, 10d
Tạo prototype :a3, after a2, 5d
section Giai đoạn phát triển
Phát triển Frontend :b1, 2023-10-20, 15d
Phát triển Backend :b2, after a2, 18d
Thiết kế cơ sở dữ liệu :b3, after a1, 12d
section Giai đoạn kiểm thử
Kiểm thử đơn vị :c1, after b1, 8d
Kiểm thử tích hợp :c2, after b2, 10d
Kiểm thử chấp nhận :c3, after c2, 7d
section Triển khai
Triển khai môi trường production :d1, after c3, 3d
Phát hành :milestone, after d1, 0d
Ví dụ sơ đồ lớp#
Sơ đồ lớp thể hiện cấu trúc tĩnh của hệ thống, bao gồm các lớp, thuộc tính, phương thức và mối quan hệ giữa chúng.
classDiagram
class User {
+String username
+String password
+String email
+Boolean active
+login()
+logout()
+updateProfile()
}
class Article {
+String title
+String content
+Date publishDate
+Boolean published
+publish()
+edit()
+delete()
}
class Comment {
+String content
+Date commentDate
+addComment()
+deleteComment()
}
class Category {
+String name
+String description
+addArticle()
+removeArticle()
}
User "1" -- "*" Article : viết
User "1" -- "*" Comment : đăng
Article "1" -- "*" Comment : có
Article "1" -- "*" Category : thuộc về
Ví dụ sơ đồ trạng thái#
Sơ đồ trạng thái thể hiện chuỗi trạng thái mà một đối tượng trải qua trong vòng đời của nó.
stateDiagram-v2
[*] --> Bản_nháp
Bản_nháp --> Đang_duyệt : Gửi duyệt
Đang_duyệt --> Bản_nháp : Từ chối
Đang_duyệt --> Đã_duyệt : Phê duyệt
Đã_duyệt --> Đã_xuất_bản : Xuất bản
Đã_xuất_bản --> Đã_lưu_trữ : Lưu trữ
Đã_xuất_bản --> Bản_nháp : Thu hồi
state Đã_xuất_bản {
[*] --> Hoạt_động
Hoạt_động --> Ẩn : Ẩn tạm thời
Ẩn --> Hoạt_động : Khôi phục
Hoạt_động --> [*]
Ẩn --> [*]
}
Đã_lưu_trữ --> [*]
Ví dụ biểu đồ tròn#
Biểu đồ tròn rất phù hợp để hiển thị dữ liệu tỷ lệ và phần trăm.
pie title Phân tích nguồn lưu lượng truy cập website
"Công cụ tìm kiếm" : 45.6
"Truy cập trực tiếp" : 30.1
"Mạng xã hội" : 15.3
"Liên kết giới thiệu" : 6.4
"Nguồn khác" : 2.6
Tổng kết#
Mermaid là công cụ mạnh mẽ để tạo nhiều loại sơ đồ khác nhau trong tài liệu Markdown. Bài viết này đã trình bày cách sử dụng lưu đồ, sơ đồ tuần tự, biểu đồ Gantt, sơ đồ lớp, sơ đồ trạng thái và biểu đồ tròn. Các sơ đồ này giúp bạn trình bày các khái niệm phức tạp, quy trình và cấu trúc dữ liệu một cách rõ ràng hơn.
Để sử dụng Mermaid, chỉ cần chỉ định ngôn ngữ mermaid trong khối code và mô tả sơ đồ bằng cú pháp văn bản ngắn gọn. Mermaid sẽ tự động chuyển đổi các mô tả đó thành sơ đồ trực quan đẹp mắt.
Hãy thử sử dụng sơ đồ Mermaid trong bài viết blog kỹ thuật hoặc tài liệu dự án tiếp theo của bạn - chúng sẽ làm cho nội dung của bạn trở nên chuyên nghiệp hơn và dễ hiểu hơn!
