Lưu đồ

Markdown hỗ trợ tạo nhiều loại biểu đồ và lưu đồ bằng cú pháp Mermaid, giúp tài liệu có khả năng biểu đạt trực quan.

Giới thiệu Mermaid

Mermaid là công cụ tạo biểu đồ dựa trên văn bản, hỗ trợ nhiều loại biểu đồ:

• Lưu đồ (Flowchart)
• Sơ đồ tuần tự (Sequence Diagram)
• Biểu đồ Gantt (Gantt Chart)
• Sơ đồ lớp (Class Diagram)
• Sơ đồ trạng thái (State Diagram)
• Biểu đồ tròn (Pie Chart)
• Hành trình người dùng (User Journey)
• Sơ đồ Git (Git Graph)

Cú pháp cơ bản

Lưu đồ (Flowchart)

```mermaid
flowchart TD
    A[Bắt đầu] --> B{Đã đăng nhập?}
    B -->|Có| C[Hiển thị trang chủ]
    B -->|Không| D[Hiển thị trang đăng nhập]
    C --> E[Kết thúc]
    D --> F[Người dùng đăng nhập]
    F --> G{Đăng nhập thành công?}
    G -->|Có| C
    G -->|Không| H[Hiển thị thông báo lỗi]
    H --> D

**Kết quả hiển thị**:

```mermaid
flowchart TD
    A[Bắt đầu] --> B{Đã đăng nhập?}
    B -->|Có| C[Hiển thị trang chủ]
    B -->|Không| D[Hiển thị trang đăng nhập]
    C --> E[Kết thúc]
    D --> F[Người dùng đăng nhập]
    F --> G{Đăng nhập thành công?}
    G -->|Có| C
    G -->|Không| H[Hiển thị thông báo lỗi]
    H --> D

Sơ đồ tuần tự (Sequence Diagram)

```mermaid
sequenceDiagram
    participant Người dùng
    participant Frontend
    participant Backend
    participant CSDL
    
    Người dùng->>Frontend: Yêu cầu đăng nhập
    Frontend->>Backend: Xác thực thông tin người dùng
    Backend->>CSDL: Truy vấn dữ liệu người dùng
    CSDL-->>Backend: Trả về thông tin người dùng
    Backend-->>Frontend: Kết quả xác thực
    Frontend-->>Người dùng: Phản hồi đăng nhập

**Kết quả hiển thị**:

```mermaid
sequenceDiagram
    participant Người dùng
    participant Frontend
    participant Backend
    participant CSDL
    
    Người dùng->>Frontend: Yêu cầu đăng nhập
    Frontend->>Backend: Xác thực thông tin người dùng
    Backend->>CSDL: Truy vấn dữ liệu người dùng
    CSDL-->>Backend: Trả về thông tin người dùng
    Backend-->>Frontend: Kết quả xác thực
    Frontend-->>Người dùng: Phản hồi đăng nhập

Giải thích lưu đồ chi tiết

Loại nút

```mermaid
flowchart LR
    A[Nút hình vuông]
    B(Nút bo góc)
    C((Nút tròn))
    D{Nút hình thoi}
    E[[Thủ tục con]]
    F[(Cơ sở dữ liệu)]
    G>Nút nhãn]

**Kết quả hiển thị**:

```mermaid
flowchart LR
    A[Nút hình vuông]
    B(Nút bo góc)
    C((Nút tròn))
    D{Nút hình thoi}
    E[[Thủ tục con]]
    F[(Cơ sở dữ liệu)]
    G>Nút nhãn]

Loại đường nối

```mermaid
flowchart TD
    A --> B
    C --- D
    E -.-> F
    G ==> H
    I --o J
    K --x L

**Kết quả hiển thị**:

```mermaid
flowchart TD
    A --> B
    C --- D
    E -.-> F
    G ==> H
    I --o J
    K --x L

Điều khiển hướng

<!-- Từ trên xuống dưới -->
```mermaid
flowchart TD
    A --> B

flowchart BT
    A --> B

flowchart LR
    A --> B

flowchart RL
    A --> B

### Ví dụ lưu đồ phức tạp

```markdown
```mermaid
flowchart TD
    Start([Bắt đầu dự án]) --> Analysis[Phân tích yêu cầu]
    Analysis --> Design[Thiết kế hệ thống]
    Design --> Dev{Giai đoạn phát triển}
    
    Dev --> Frontend[Phát triển frontend]
    Dev --> Backend[Phát triển backend]
    Dev --> Database[Thiết kế cơ sở dữ liệu]
    
    Frontend --> FrontTest[Kiểm thử frontend]
    Backend --> BackTest[Kiểm thử backend]
    Database --> DataTest[Kiểm thử dữ liệu]
    
    FrontTest --> Integration[Kiểm thử tích hợp]
    BackTest --> Integration
    DataTest --> Integration
    
    Integration --> Deploy{Chuẩn bị triển khai}
    Deploy -->|Thông qua| Production[Môi trường sản xuất]
    Deploy -->|Thất bại| Bug[Sửa lỗi]
    Bug --> Integration
    
    Production --> Monitor[Giám sát vận hành]
    Monitor --> End([Hoàn thành dự án])
    
    style Start fill:#e1f5fe
    style End fill:#e8f5e8
    style Bug fill:#ffebee

**Kết quả hiển thị**:

```mermaid
flowchart TD
    Start([Bắt đầu dự án]) --> Analysis[Phân tích yêu cầu]
    Analysis --> Design[Thiết kế hệ thống]
    Design --> Dev{Giai đoạn phát triển}
    
    Dev --> Frontend[Phát triển frontend]
    Dev --> Backend[Phát triển backend]
    Dev --> Database[Thiết kế cơ sở dữ liệu]
    
    Frontend --> FrontTest[Kiểm thử frontend]
    Backend --> BackTest[Kiểm thử backend]
    Database --> DataTest[Kiểm thử dữ liệu]
    
    FrontTest --> Integration[Kiểm thử tích hợp]
    BackTest --> Integration
    DataTest --> Integration
    
    Integration --> Deploy{Chuẩn bị triển khai}
    Deploy -->|Thông qua| Production[Môi trường sản xuất]
    Deploy -->|Thất bại| Bug[Sửa lỗi]
    Bug --> Integration
    
    Production --> Monitor[Giám sát vận hành]
    Monitor --> End([Hoàn thành dự án])
    
    style Start fill:#e1f5fe
    style End fill:#e8f5e8
    style Bug fill:#ffebee

Giải thích sơ đồ tuần tự

Cú pháp cơ bản

```mermaid
sequenceDiagram
    Alice->>Bob: Chào Bob, bạn khỏe không?
    Bob-->>Alice: Mình khỏe, cảm ơn!
    Alice-)Bob: Tạm biệt!

**Kết quả hiển thị**:

```mermaid
sequenceDiagram
    Alice->>Bob: Chào Bob, bạn khỏe không?
    Bob-->>Alice: Mình khỏe, cảm ơn!
    Alice-)Bob: Tạm biệt!

Khối kích hoạt và vòng đời (lifeline)

```mermaid
sequenceDiagram
    participant A as Khách hàng
    participant B as Máy chủ
    
    A->>+B: Yêu cầu dữ liệu
    Note right of B: Xử lý yêu cầu
    B-->>-A: Trả về dữ liệu
    
    A->>+B: Yêu cầu khác
    B->>+B: Xử lý nội bộ
    B-->>-B: Hoàn tất xử lý
    B-->>-A: Trả về kết quả

**Kết quả hiển thị**:

```mermaid
sequenceDiagram
    participant A as Khách hàng
    participant B as Máy chủ
    
    A->>+B: Yêu cầu dữ liệu
    Note right of B: Xử lý yêu cầu
    B-->>-A: Trả về dữ liệu
    
    A->>+B: Yêu cầu khác
    B->>+B: Xử lý nội bộ
    B-->>-B: Hoàn tất xử lý
    B-->>-A: Trả về kết quả

Vòng lặp và điều kiện

```mermaid
sequenceDiagram
    participant U as Người dùng
    participant S as Hệ thống
    
    U->>S: Yêu cầu đăng nhập
    
    alt Tồn tại tên người dùng
        S->>S: Xác thực mật khẩu
        alt Mật khẩu đúng
            S-->>U: Đăng nhập thành công
        else Mật khẩu sai
            S-->>U: Mật khẩu sai
        end
    else Không tồn tại tên người dùng
        S-->>U: Người dùng không tồn tại
    end
    
    opt Ghi nhớ mật khẩu
        S->>S: Lưu trạng thái đăng nhập
    end

**Kết quả hiển thị**:

```mermaid
sequenceDiagram
    participant U as Người dùng
    participant S as Hệ thống
    
    U->>S: Yêu cầu đăng nhập
    
    alt Tồn tại tên người dùng
        S->>S: Xác thực mật khẩu
        alt Mật khẩu đúng
            S-->>U: Đăng nhập thành công
        else Mật khẩu sai
            S-->>U: Mật khẩu sai
        end
    else Không tồn tại tên người dùng
        S-->>U: Người dùng không tồn tại
    end
    
    opt Ghi nhớ mật khẩu
        S->>S: Lưu trạng thái đăng nhập
    end

Sơ đồ lớp (Class Diagram)

```mermaid
classDiagram
    class Animal {
        +String name
        +int age
        +eat()
        +sleep()
    }
    
    class Dog {
        +String breed
        +bark()
        +wagTail()
    }
    
    class Cat {
        +String color
        +meow()
        +purr()
    }
    
    Animal <|-- Dog
    Animal <|-- Cat
    
    class Owner {
        +String name
        +feedPet()
    }
    
    Owner --> Animal : owns

**Kết quả hiển thị**:

```mermaid
classDiagram
    class Animal {
        +String name
        +int age
        +eat()
        +sleep()
    }
    
    class Dog {
        +String breed
        +bark()
        +wagTail()
    }
    
    class Cat {
        +String color
        +meow()
        +purr()
    }
    
    Animal <|-- Dog
    Animal <|-- Cat
    
    class Owner {
        +String name
        +feedPet()
    }
    
    Owner --> Animal : owns

Sơ đồ trạng thái (State Diagram)

```mermaid
stateDiagram-v2
    [*] --> Nhàn rỗi
    Nhàn rỗi --> Chạy : Bắt đầu
    Chạy --> Tạm dừng : Tạm dừng
    Chạy --> Hoàn thành : Kết thúc
    Tạm dừng --> Chạy : Tiếp tục
    Tạm dừng --> Dừng : Dừng
    Dừng --> Nhàn rỗi : Đặt lại
    Hoàn thành --> Nhàn rỗi : Đặt lại
    Hoàn thành --> [*]
    
    state Chạy {
        [*] --> Khởi tạo
        Khởi tạo --> Đang xử lý
        Đang xử lý --> Xác minh
        Xác minh --> [*]
    }

**Kết quả hiển thị**:

```mermaid
stateDiagram-v2
    [*] --> Nhàn rỗi
    Nhàn rỗi --> Chạy : Bắt đầu
    Chạy --> Tạm dừng : Tạm dừng
    Chạy --> Hoàn thành : Kết thúc
    Tạm dừng --> Chạy : Tiếp tục
    Tạm dừng --> Dừng : Dừng
    Dừng --> Nhàn rỗi : Đặt lại
    Hoàn thành --> Nhàn rỗi : Đặt lại
    Hoàn thành --> [*]
    
    state Chạy {
        [*] --> Khởi tạo
        Khởi tạo --> Đang xử lý
        Đang xử lý --> Xác minh
        Xác minh --> [*]
    }

Biểu đồ Gantt (Gantt Chart)

```mermaid
gantt
    title Dòng thời gian phát triển dự án
    dateFormat  YYYY-MM-DD
    section Phân tích yêu cầu
    Thu thập yêu cầu   :done,    des1, 2024-01-01,2024-01-05
    Phân tích yêu cầu  :done,    des2, after des1, 5d
    Rà soát yêu cầu    :done,    des3, after des2, 2d
    
    section Giai đoạn thiết kế
    Thiết kế hệ thống  :active,  design1, 2024-01-12, 7d
    Thiết kế UI        :         design2, after design1, 5d
    Thiết kế CSDL      :         design3, after design1, 3d
    
    section Giai đoạn phát triển
    Phát triển frontend:         dev1, after design2, 10d
    Phát triển backend :         dev2, after design3, 12d
    Kiểm thử           :         test1, after dev1, 5d

**Kết quả hiển thị**:

```mermaid
gantt
    title Dòng thời gian phát triển dự án
    dateFormat  YYYY-MM-DD
    section Phân tích yêu cầu
    Thu thập yêu cầu          :done,    des1, 2024-01-01,2024-01-05
    Phân tích yêu cầu         :done,    des2, after des1, 5d
    Rà soát yêu cầu           :done,    des3, after des2, 2d
    
    section Giai đoạn thiết kế
    Thiết kế hệ thống         :active,  design1, 2024-01-12, 7d
    Thiết kế UI               :         design2, after design1, 5d
    Thiết kế CSDL             :         design3, after design1, 3d
    
    section Giai đoạn phát triển
    Phát triển frontend       :         dev1, after design2, 10d
    Phát triển backend        :         dev2, after design3, 12d
    Kiểm thử                  :         test1, after dev1, 5d

Biểu đồ tròn (Pie Chart)

```mermaid
pie title Nguồn truy cập trang web
    "Công cụ tìm kiếm" : 45
    "Mạng xã hội" : 25
    "Truy cập trực tiếp" : 20
    "Email marketing" : 7
    "Khác" : 3

**Kết quả hiển thị**:

```mermaid
pie title Nguồn truy cập trang web
    "Công cụ tìm kiếm" : 45
    "Mạng xã hội" : 25
    "Truy cập trực tiếp" : 20
    "Email marketing" : 7
    "Khác" : 3

Hành trình người dùng (User Journey)

```mermaid
journey
    title Hành trình mua sắm của người dùng
    section Khám phá
      Truy cập trang chủ: 3: Người dùng
      Duyệt sản phẩm: 4: Người dùng
      Tìm kiếm sản phẩm: 4: Người dùng
    section Cân nhắc
      Xem chi tiết: 4: Người dùng
      So sánh giá: 3: Người dùng
      Đọc đánh giá: 5: Người dùng
    section Mua hàng
      Thêm vào giỏ: 4: Người dùng
      Thanh toán: 3: Người dùng
      Trả tiền: 2: Người dùng
    section Sử dụng
      Nhận hàng: 5: Người dùng
      Sử dụng sản phẩm: 4: Người dùng
      Viết đánh giá: 4: Người dùng

**Kết quả hiển thị**:

```mermaid
journey
    title Hành trình mua sắm của người dùng
    section Khám phá
      Truy cập trang chủ: 3: Người dùng
      Duyệt sản phẩm: 4: Người dùng
      Tìm kiếm sản phẩm: 4: Người dùng
    section Cân nhắc
      Xem chi tiết: 4: Người dùng
      So sánh giá: 3: Người dùng
      Đọc đánh giá: 5: Người dùng
    section Mua hàng
      Thêm vào giỏ: 4: Người dùng
      Thanh toán: 3: Người dùng
      Trả tiền: 2: Người dùng
    section Sử dụng
      Nhận hàng: 5: Người dùng
      Sử dụng sản phẩm: 4: Người dùng
      Viết đánh giá: 4: Người dùng

Sơ đồ Git (Git Graph)

```mermaid
gitgraph
    commit id: "Commit khởi tạo"
    commit id: "Thêm mô-đun người dùng"
    branch feature/auth
    commit id: "Thêm chức năng đăng nhập"
    commit id: "Thêm chức năng đăng ký"
    checkout main
    commit id: "Sửa lỗi trang chủ"
    merge feature/auth
    commit id: "Phiên bản v1.0"
    branch hotfix
    commit id: "Sửa gấp"
    checkout main
    merge hotfix
    commit id: "Phiên bản v1.0.1"

**Kết quả hiển thị**:

```mermaid
gitgraph
    commit id: "Commit khởi tạo"
    commit id: "Thêm mô-đun người dùng"
    branch feature/auth
    commit id: "Thêm chức năng đăng nhập"
    commit id: "Thêm chức năng đăng ký"
    checkout main
    commit id: "Sửa lỗi trang chủ"
    merge feature/auth
    commit id: "Phiên bản v1.0"
    branch hotfix
    commit id: "Sửa gấp"
    checkout main
    merge hotfix
    commit id: "Phiên bản v1.0.1"

Tình huống áp dụng thực tế

Sơ đồ kiến trúc hệ thống

```mermaid
flowchart TB
    subgraph "Tầng người dùng"
        Web[Trình duyệt Web]
        Mobile[Ứng dụng di động]
        API[Khách hàng API]
    end
    
    subgraph "Tầng cổng"
        Gateway[Cổng API]
        Auth[Dịch vụ xác thực]
    end
    
    subgraph "Tầng dịch vụ"
        UserService[Dịch vụ người dùng]
        OrderService[Dịch vụ đơn hàng]
        PaymentService[Dịch vụ thanh toán]
        NotificationService[Dịch vụ thông báo]
    end
    
    subgraph "Tầng dữ liệu"
        UserDB[(CSDL người dùng)]
        OrderDB[(CSDL đơn hàng)]
        Cache[(Bộ nhớ đệm Redis)]
        Queue[Hàng đợi thông điệp]
    end
    
    Web --> Gateway
    Mobile --> Gateway
    API --> Gateway
    
    Gateway --> Auth
    Gateway --> UserService
    Gateway --> OrderService
    Gateway --> PaymentService
    
    UserService --> UserDB
    OrderService --> OrderDB
    PaymentService --> Queue
    NotificationService --> Queue
    
    UserService --> Cache
    OrderService --> Cache
    
    style Gateway fill:#e1f5fe
    style Auth fill:#fff3e0
    style Cache fill:#f3e5f5

### Quy trình gọi API

```markdown
```mermaid
sequenceDiagram
    participant C as Khách hàng
    participant G as Cổng API
    participant A as Dịch vụ xác thực
    participant U as Dịch vụ người dùng
    participant D as Cơ sở dữ liệu
    participant R as Redis
    
    C->>G: Yêu cầu thông tin người dùng
    G->>A: Xác thực Token
    A->>R: Kiểm tra bộ nhớ đệm Token
    R-->>A: Token hợp lệ
    A-->>G: Xác thực thành công
    
    G->>U: Lấy thông tin người dùng
    U->>R: Kiểm tra bộ nhớ đệm người dùng
    alt Có trong bộ nhớ đệm
        R-->>U: Trả về dữ liệu người dùng
    else Không có trong bộ nhớ đệm
        U->>D: Truy vấn CSDL
        D-->>U: Trả về thông tin người dùng
        U->>R: Cập nhật bộ nhớ đệm
    end
    
    U-->>G: Trả về thông tin người dùng
    G-->>C: Phản hồi dữ liệu người dùng

### Lưu đồ nghiệp vụ

```markdown
```mermaid
flowchart TD
    Start([Người dùng đặt hàng]) --> Check{Kiểm tra tồn kho}
    Check -->|Còn hàng| Reserve[Dự trữ hàng]
    Check -->|Hết hàng| OutOfStock[Không đủ hàng]
    OutOfStock --> Notify[Thông báo người dùng]
    Notify --> End1([Kết thúc])
    
    Reserve --> Payment[Xử lý thanh toán]
    Payment -->|Thành công| ConfirmOrder[Xác nhận đơn hàng]
    Payment -->|Thất bại| ReleaseStock[Giải phóng tồn kho]
    ReleaseStock --> PaymentFailed[Thanh toán thất bại]
    PaymentFailed --> End2([Kết thúc])
    
    ConfirmOrder --> UpdateInventory[Cập nhật tồn kho]
    UpdateInventory --> SendNotification[Gửi thông báo]
    SendNotification --> Logistics[Sắp xếp vận chuyển]
    Logistics --> End3([Hoàn tất đơn hàng])
    
    style Start fill:#e8f5e8
    style End1 fill:#ffebee
    style End2 fill:#ffebee
    style End3 fill:#e8f5e8
    style OutOfStock fill:#ffebee
    style PaymentFailed fill:#ffebee

## Kiểu dáng và chủ đề

### Kiểu nút

```markdown
```mermaid
flowchart LR
    A[Kiểu mặc định] --> B[Kiểu 1]
    A --> C[Kiểu 2]
    A --> D[Kiểu 3]
    
    style B fill:#f9f,stroke:#333,stroke-width:4px
    style C fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
    style D fill:#f96,stroke:#333,stroke-width:4px,color:#fff

### Kiểu theo lớp (class)

```markdown
```mermaid
flowchart LR
    A[Nút A]:::classA --> B[Nút B]:::classB
    A --> C[Nút C]:::classC
    
    classDef classA fill:#e1f5fe,stroke:#01579b,stroke-width:2px
    classDef classB fill:#f3e5f5,stroke:#4a148c,stroke-width:2px
    classDef classC fill:#e8f5e8,stroke:#1b5e20,stroke-width:2px

## Cấu hình và tương thích

### Cấu hình VitePress

```javascript
// .vitepress/config.js
export default {
  markdown: {
    mermaid: true
  }
}

Hỗ trợ trên GitHub

GitHub hỗ trợ Mermaid nguyên bản, có thể dùng trực tiếp trong tệp Markdown:

```mermaid
graph LR
    A --> B

### Hỗ trợ trên nền tảng khác

| Nền tảng | Trạng thái hỗ trợ | Yêu cầu cấu hình |
|----------|-------------------|------------------|
| **GitHub** | ✅ Hỗ trợ nguyên bản | Không cần cấu hình |
| **GitLab** | ✅ Hỗ trợ nguyên bản | Không cần cấu hình |
| **VitePress** | ✅ Hỗ trợ qua plugin | Cần cấu hình |
| **Jekyll** | ✅ Hỗ trợ qua plugin | Cài đặt plugin |
| **Hugo** | ✅ Hỗ trợ qua theme | Phụ thuộc theme |

## Thực hành tốt nhất

### Gợi ý thiết kế

```markdown
✅ Khuyến nghị:

1. **Giữ đơn giản**:
   - Tránh biểu đồ quá phức tạp
   - Dùng nhãn và đường nối rõ ràng

2. **Bố cục hợp lý**:
   - Chọn hướng biểu đồ phù hợp
   - Giữ luồng logic rõ ràng

3. **Thống nhất kiểu dáng**:
   - Dùng chủ đề màu sắc nhất quán
   - Duy trì phong cách biểu đồ đồng nhất

4. **Thêm chú thích**:
   - Thêm tiêu đề cho biểu đồ phức tạp
   - Cung cấp mô tả cần thiết

❌ Tránh:

1. Biểu đồ quá phức tạp, khó hiểu
2. Quá nhiều đường nối chồng chéo
3. Nhãn mơ hồ, không rõ ràng
4. Thiếu chú giải (legend) cần thiết

Cân nhắc hiệu năng

- **Tối ưu biểu đồ lớn**:
  - Cân nhắc tách nhỏ biểu đồ phức tạp
  - Dùng sơ đồ con để tổ chức cấu trúc

- **Hiệu năng tải**:
  - Tránh nhúng quá nhiều biểu đồ trong một trang
  - Cân nhắc áp dụng lazy-load

- **Tương thích di động**:
  - Đảm bảo biểu đồ dễ đọc trên màn hình nhỏ
  - Cân nhắc thiết kế cuộn ngang

Cú pháp liên quan

• Nhúng HTML - Tăng cường HTML
• Công thức toán - Biểu thức LaTeX
• Thực hành tốt nhất - Gợi ý soạn tài liệu

Công cụ và tài nguyên

Trình soạn thảo trực tuyến

• Mermaid Live Editor: Trình soạn trực tuyến chính thức
• Draw.io: Công cụ vẽ sơ đồ đa dụng
• Lucidchart: Nền tảng vẽ sơ đồ chuyên nghiệp
• Excalidraw: Công cụ sơ đồ phong cách vẽ tay

Công cụ phát triển

• Mermaid CLI: Công cụ dòng lệnh
• VS Code Mermaid: Tiện ích VS Code
• Atom Mermaid: Tiện ích cho Atom
• IntelliJ Mermaid: Tiện ích JetBrains IDE

Tài nguyên tham khảo

• Tài liệu chính thức Mermaid: Tham khảo cú pháp đầy đủ
• Thư viện ví dụ Mermaid: Nhiều ví dụ biểu đồ
• GitHub Mermaid: Sử dụng trên GitHub
• Awesome Mermaid: Tổng hợp tài nguyên liên quan

Bằng cách nắm vững cú pháp lưu đồ, bạn có thể tạo các biểu đồ trực quan chuyên nghiệp, nâng cao khả năng trình bày và mức độ dễ hiểu của tài liệu.