> ## Documentation Index
> Fetch the complete documentation index at: https://craft-support.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Sơ Đồ Mermaid

> Sử dụng Mermaid để tạo lưu đồ, sơ đồ tuần tự, sơ đồ ER và các loại sơ đồ văn bản khác trong Craft.

Craft hỗ trợ sơ đồ Mermaid — một cách tạo hình ảnh trực quan bằng cách viết cú pháp văn bản đơn giản. Chỉ cần nhập vài dòng lệnh, Craft sẽ hiển thị ngay một sơ đồ sắc nét, rõ ràng ngay trong tài liệu của bạn.

Sơ đồ cập nhật theo thời gian thực khi bạn nhập, hoạt động trên tất cả nền tảng và hiển thị trên các trang được chia sẻ hoặc xuất bản.

<img src="https://mintcdn.com/craft-support/ivoQJBaJTefk9e0t/images/write-and-edit/mermaid-diagrams/en/content/flowchart-preview.png?fit=max&auto=format&n=ivoQJBaJTefk9e0t&q=85&s=db14d9fa849df0904c0cc4c051e19905" alt="Lưu đồ Mermaid được hiển thị trong tài liệu Craft" width="1498" height="991" data-path="images/write-and-edit/mermaid-diagrams/en/content/flowchart-preview.png" />

## Chèn Sơ Đồ Mermaid

Thêm sơ đồ Mermaid bằng một trong các cách sau:

* Gõ `/mermaid` và chọn **Mermaid Diagram**
* Chọn **Mermaid Diagram** từ bảng **Insert** trong thanh bên (trong mục Rich Blocks)
* Dán markdown có chứa code fence ` ```mermaid ` — Craft sẽ tự động chuyển đổi

## Chỉnh Sửa

Khi bạn mở một khối Mermaid, giao diện hiển thị ở chế độ chia đôi — sơ đồ đã dựng ở trên, mã lệnh ở bên dưới. Bản xem trước cập nhật theo thời gian thực khi bạn nhập.

<img src="https://mintcdn.com/craft-support/ivoQJBaJTefk9e0t/images/write-and-edit/mermaid-diagrams/en/content/split-view-editing.png?fit=max&auto=format&n=ivoQJBaJTefk9e0t&q=85&s=894c6b5397d22b4673f1aecf7de6e11c" alt="Giao diện chia đôi với bản xem trước sơ đồ ở trên và trình soạn thảo mã bên dưới" width="1498" height="991" data-path="images/write-and-edit/mermaid-diagrams/en/content/split-view-editing.png" />

<Tabs>
  <Tab title="macOS">
    Nhấp vào khối Mermaid để mở ở chế độ chia đôi. Bản xem trước sơ đồ hiển thị ở trên, trình soạn thảo mã ở bên dưới. Nhấp đúp vào bản xem trước để phóng to.
  </Tab>

  <Tab title="iOS / iPad">
    Chạm vào khối để mở trình soạn thảo mã cùng bản xem trước trực tiếp phía trên. Trên iPhone, ẩn bàn phím để xem sơ đồ. Nhấp đúp vào bản xem trước để phóng to.
  </Tab>

  <Tab title="Web / Windows">
    Nhấp vào khối để chỉnh sửa. Dùng menu chế độ xem trong menu ngữ cảnh của khối để chuyển đổi giữa Edit, Preview và Split View.
  </Tab>
</Tabs>

<Tip>
  Bạn không cần thuộc lòng cú pháp Mermaid — Trợ lý AI của Craft có thể tạo sơ đồ cho bạn. Chỉ cần mô tả điều bạn muốn và nó sẽ viết mã thay bạn.
</Tip>

## Các Loại Sơ Đồ Được Hỗ Trợ

### Lưu Đồ

Mô phỏng quy trình, quyết định và luồng công việc. Dùng `graph TD` cho bố cục từ trên xuống hoặc `graph LR` cho bố cục từ trái sang phải.

```
graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Do This]
    B -->|No| D[Do That]
    C --> E[Done]
    D --> E
```

### Sơ Đồ Tuần Tự

Hiển thị tương tác giữa người dùng hoặc hệ thống theo thời gian.

<img src="https://mintcdn.com/craft-support/ivoQJBaJTefk9e0t/images/write-and-edit/mermaid-diagrams/en/content/sequence-diagram.png?fit=max&auto=format&n=ivoQJBaJTefk9e0t&q=85&s=f75ca4347237c5fe789fb65a48060ca2" alt="Sơ đồ tuần tự mô phỏng luồng giao đồ ăn" width="1473" height="927" data-path="images/write-and-edit/mermaid-diagrams/en/content/sequence-diagram.png" />

```
sequenceDiagram
    User->>App: Place order
    App->>Payment: Charge card
    Payment-->>App: Confirmed
    App-->>User: Order placed
```

### Sơ Đồ Trạng Thái

Trực quan hóa cách một thứ chuyển đổi giữa các trạng thái — lý tưởng để theo dõi đơn hàng, luồng công việc hoặc các quy trình.

<img src="https://mintcdn.com/craft-support/ivoQJBaJTefk9e0t/images/write-and-edit/mermaid-diagrams/en/content/state-diagram.png?fit=max&auto=format&n=ivoQJBaJTefk9e0t&q=85&s=6700ddefd98c2df1c74175826f6d65e4" alt="Sơ đồ trạng thái mô phỏng vòng đời của một đơn hàng" width="1473" height="927" data-path="images/write-and-edit/mermaid-diagrams/en/content/state-diagram.png" />

```
stateDiagram-v2
    [*] --> Draft
    Draft --> Review
    Review --> Published
    Review --> Draft : Needs changes
    Published --> [*]
```

### Sơ Đồ Lớp

Hiển thị cấu trúc của một hệ thống — những gì tồn tại, thuộc tính của chúng và cách chúng liên quan đến nhau.

```
classDiagram
    class Document {
        +String title
        +Date created
        +publish()
    }
    class Folder {
        +String name
        +getDocuments()
    }
    Folder "1" --> "*" Document : contains
```

### Sơ Đồ ER

Mô hình hóa các mối quan hệ dữ liệu — rất phù hợp để thiết kế cơ sở dữ liệu và lập kế hoạch.

```
erDiagram
    AUTHOR ||--o{ POST : writes
    POST ||--o{ COMMENT : has
```

### Biểu Đồ

Tạo biểu đồ thanh, biểu đồ đường hoặc kết hợp cả hai.

```
xychart-beta
    title "Monthly Revenue ($K)"
    x-axis [Jan, Feb, Mar, Apr, May, Jun]
    y-axis "Revenue" 0 --> 120
    bar [45, 62, 78, 55, 89, 105]
```

## Thay Đổi Giao Diện

Sơ đồ Mermaid thích ứng theo giao diện trình soạn thảo mã của bạn. Để thay đổi giao diện, nhấp vào **biểu tượng cọ vẽ** trong thanh công cụ và chọn một giao diện — các tùy chọn bao gồm Tokyo Night, Dracula, Nord, GitHub và nhiều hơn nữa.

Sơ đồ cập nhật ngay lập tức. Sơ đồ cũng tương thích với chế độ sáng hoặc tối của tài liệu.

<img src="https://mintcdn.com/craft-support/ivoQJBaJTefk9e0t/images/write-and-edit/mermaid-diagrams/en/content/theme-light.png?fit=max&auto=format&n=ivoQJBaJTefk9e0t&q=85&s=1d50b09075c75df863b7a97c39a86a9b" alt="Sơ đồ Mermaid ở giao diện sáng" width="1473" height="927" data-path="images/write-and-edit/mermaid-diagrams/en/content/theme-light.png" />

<img src="https://mintcdn.com/craft-support/ivoQJBaJTefk9e0t/images/write-and-edit/mermaid-diagrams/en/content/theme-dark.png?fit=max&auto=format&n=ivoQJBaJTefk9e0t&q=85&s=fb81678ca8d061283a3e7afc87e4a69b" alt="Sơ đồ Mermaid ở giao diện tối" width="1473" height="927" data-path="images/write-and-edit/mermaid-diagrams/en/content/theme-dark.png" />

## Chia Sẻ và Xuất Bản

Sơ đồ Mermaid hiển thị trên các trang được chia sẻ và xuất bản — bất kỳ ai xem đường dẫn đều thấy sơ đồ đã dựng, không phải mã lệnh. Không cần thiết lập thêm gì.

## Nhập và Xuất

* **Nhập Markdown**: Dán hoặc nhập markdown có chứa code fence ` ```mermaid ` và Craft sẽ tự động tạo các khối Mermaid.
* **Xuất Markdown**: Các khối Mermaid được xuất dưới dạng code fence ` ```mermaid ` chuẩn, tương thích với các công cụ khác.

## Mẹo Sử Dụng

<AccordionGroup>
  <Accordion title="Phải làm gì khi sơ đồ hiển thị thông báo 'Invalid Mermaid diagram'?">
    Thông thường đây là do lỗi cú pháp trong mã của bạn. Hãy kiểm tra lỗi đánh máy hoặc thiếu mũi tên. Nếu bạn sao chép cú pháp từ một công cụ khác, lưu ý rằng Craft hỗ trợ lưu đồ, sơ đồ tuần tự, sơ đồ trạng thái, sơ đồ lớp, sơ đồ ER và biểu đồ XY — các loại khác như biểu đồ tròn, biểu đồ Gantt hay bản đồ tư duy hiện chưa được hỗ trợ.
  </Accordion>

  <Accordion title="Trợ lý AI có thể giúp viết sơ đồ Mermaid không?">
    Có. Hãy mô tả sơ đồ bạn muốn và Trợ lý AI của Craft sẽ tạo mã Mermaid cho bạn. Bạn cũng có thể yêu cầu nó chỉnh sửa hoặc mở rộng một sơ đồ hiện có.
  </Accordion>

  <Accordion title="Tôi có thể phóng to sơ đồ lớn không?">
    Trên Mac và iPad, nhấp đúp vào bản xem trước sơ đồ để phóng to. Trên web, sử dụng chế độ toàn màn hình cho các sơ đồ lớn hơn.
  </Accordion>
</AccordionGroup>

<Info title="Tìm hiểu cú pháp Mermaid">
  Mermaid là một tiêu chuẩn mở được sử dụng rộng rãi trên nhiều công cụ. Truy cập [mermaid.js.org](https://mermaid.js.org/intro/) để tìm hiểu toàn bộ cú pháp cho từng loại sơ đồ.
</Info>