Sơ Đồ Mermaid

Tạo lưu đồ, sơ đồ tuần tự, sơ đồ trạng thái và nhiều loại khác bằng cú pháp văn bản Mermaid.

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.

​

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.

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.

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.

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.

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.

​

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.

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.

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.

​

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

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ợ.

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ó.

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.

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 để tìm hiểu toàn bộ cú pháp cho từng loại sơ đồ.