Biểu đồ Mermaid trong Markdown
Hướng dẫn đầy đủ về biểu đồ 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 nhiều loại biểu đồ phức tạp như lưu đồ, biểu đồ tuần tự, biểu đồ ER, biểu đồ lớp, biểu đồ trạng thái, biểu đồ XY, biểu đồ Gantt, sơ đồ tư duy và nhiều loại khác.
Biểu đồ Mermaid được triển khai bởi Merman. Blog tạo SVG tĩnh cho cả giao diện sáng và tối trong quá trình xây dựng Astro, không cần tải trình chạy Mermaid trên trình duyệt.
Ví dụ lưu đồ
Lưu đồ thích hợp để mô tả quy trình hoặc các bước của thuật toán.
Ví dụ biểu đồ tuần tự
Biểu đồ tuần tự thể hiện sự tương tác giữa các đối tượng theo thời gian.
Ví dụ ER Diagram
Biểu đồ ER (Entity Relationship) phù hợp để mô tả cấu trúc cơ sở dữ liệu.
Ví dụ biểu đồ lớp
Biểu đồ lớp thể hiện cấu trúc tĩnh của hệ thống, bao gồm lớp, thuộc tính, phương thức và quan hệ.
Ví dụ biểu đồ trạng thái
Biểu đồ trạng thái mô tả các trạng thái mà một đối tượng trải qua trong vòng đời.
Các loại biểu đồ khác
Mermaid còn hỗ trợ biểu đồ XY, biểu đồ tròn, biểu đồ Gantt, sơ đồ tư duy, dòng thời gian, hành trình người dùng, Git Graph, Kanban và Sankey.
Tổng kết
Mermaid là công cụ mạnh mẽ giúp tạo nhiều loại biểu đồ trực tiếp trong tài liệu Markdown. Chỉ cần khai báo khối mã với ngôn ngữ mermaid và mô tả biểu đồ bằng cú pháp đơn giản. Các biểu đồ có thể được kết xuất thành SVG trong quá trình xây dựng mà không cần JavaScript phía máy khách.
Bạn có thể sử dụng Merman Playground để thử cú pháp trước khi đưa mã biểu đồ vào bài viết.
Ủng hộ & Chia sẻ
Nếu bài viết này giúp ích cho bạn, hãy chia sẻ hoặc ủng hộ nhé!

























