Mermaid.js — Sơ đồ từ văn bản

Mermaid.js là gì?

Mermaid.js là thư viện tạo sơ đồ (diagram) từ văn bản đơn giản. Thay vì dùng phần mềm đồ họa, bạn mô tả sơ đồ bằng cú pháp text — Mermaid tự vẽ thành hình ảnh trong trình duyệt.

CDN:

<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>

Cú pháp cơ bản:

<div class="mermaid">
graph TD;
    A[Bắt đầu] --> B{Điều kiện};
    B -- Có --> C[Thực hiện];
    B -- Không --> D[Kết thúc];
</div>
<script>mermaid.initialize({ startOnLoad: true });</script>

Flowchart & Sequence Diagram

Kết quả

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Mermaid.js Demo</title>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<style>
  body { font-family:sans-serif; padding:1rem; background:#f8f9fa; }
  h4   { color:#444; font-size:.9rem; margin:0 0 .5rem; }
  .box { background:white; border-radius:8px; padding:1rem; margin-bottom:1rem; box-shadow:0 1px 6px rgba(0,0,0,.1); }
  .mermaid { display:flex; justify-content:center; }
</style>
</head>
<body>

<div class="box">
  <h4>📊 Flowchart — Quy trình đăng nhập</h4>
  <div class="mermaid">
graph TD
    A([Bắt đầu]) --> B[Nhập email và mật khẩu]
    B --> C{Email hợp lệ?}
    C -- Không --> E[Hiển thị lỗi email]
    E --> B
    C -- Có --> D{Mật khẩu đúng?}
    D -- Không --> F[Hiển thị lỗi mật khẩu]
    F --> B
    D -- Có --> G[Chuyển đến Dashboard]
    G --> H([Kết thúc])
  </div>
</div>

<div class="box">
  <h4>🔄 Sequence Diagram — Gọi API</h4>
  <div class="mermaid">
sequenceDiagram
    participant U as Người dùng
    participant FE as Frontend
    participant BE as Backend API
    participant DB as Database

    U->>FE: Click "Tải dữ liệu"
    FE->>BE: GET /api/posts
    BE->>DB: SELECT * FROM posts
    DB-->>BE: Rows[...]
    BE-->>FE: JSON response
    FE-->>U: Hiển thị danh sách
  </div>
</div>

<script>mermaid.initialize({ startOnLoad: true, theme: 'default' });</script>
</body>
</html>

ER Diagram & Pie Chart