Mermaid Live Editor Online

Trình soạn thảo Mermaid nằm trong trình soạn thảo Markdown

Mermaid biến vài dòng văn bản thành sơ đồ, nhờ đó sơ đồ dễ so sánh thay đổi, dễ review và để ngay cạnh tài liệu mà nó giải thích. Trình soạn thảo ở trang này là trình soạn thảo Markdown chia đôi có sẵn Mermaid: viết sơ đồ đúng chỗ nó thuộc về trong tài liệu, và bản xem trước vẽ lại ngay sau khi bạn ngừng gõ. Sơ đồ bạn chưa đổi được lấy lại từ bộ nhớ đệm, nên sửa phần văn bản xung quanh vẫn nhanh; bản thân bộ máy chỉ tải khi một tài liệu lần đầu có sơ đồ, nên có thể mất một lúc.

Hãy bắt đầu với khối này trong trình soạn thảo:

```mermaid
flowchart LR
  Idea --> Draft --> Review
  Review -->|changes| Draft
  Review -->|approved| Publish
```

và lưu đồ hiện ra ở bên phải. Đổi LR (trái sang phải) thành TD (trên xuống dưới), thêm một nút hoặc đổi tên một cạnh, và hình sẽ thay đổi theo.

Các loại sơ đồ bạn có thể vẽ

Mọi sơ đồ dưới đây đều hiển thị trong bản xem trước. Hãy đặt từ khóa loại sơ đồ ở dòng đầu tiên bên trong khối mã:

• Flowchart (flowchart TD) — quy trình, điểm quyết định, phác thảo kiến trúc.
• Sequence diagram (sequenceDiagram) — các lời gọi giữa dịch vụ hoặc con người theo thời gian.
• Class diagram (classDiagram) và state diagram (stateDiagram-v2).
• Entity-relationship diagram (erDiagram) — lược đồ cơ sở dữ liệu.
• Gantt chart (gantt), timeline (timeline) và user journey (journey).
• Pie chart (pie), quadrant chart (quadrantChart) và mindmap (mindmap).
• Git graph (gitGraph), requirement diagram (requirementDiagram) và C4 (C4Context).
• Các loại mới hơn như Sankey (sankey-beta), XY chart (xychart-beta), block (block-beta), packet, kanban và architecture (architecture-beta).

Cú pháp của các loại sơ đồ beta có thể thay đổi giữa các bản phát hành Mermaid, nên hãy xem tài liệu chính thức của Mermaid để biết đúng từ khóa; trình soạn thảo này chạy phiên bản được đóng gói cùng trang.

Gỡ lỗi một sơ đồ

Khi Mermaid không phân tích được mã, khối sơ đồ biến thành một ô báo lỗi với thông báo của trình phân tích — số dòng, đoạn văn bản làm nó vấp và điều nó mong đợi. Sửa dòng đó và sơ đồ sẽ thay thế ô lỗi. Hãy dùng bố cục Chia đôi để thấy cả hai cùng lúc; bản xem trước cuộn theo dòng bạn đang sửa. Sơ đồ được vẽ ở chế độ bảo mật nghiêm ngặt của Mermaid, nên các callback khi bấm và script trong định nghĩa sơ đồ bị vô hiệu hóa, còn HTML nội tuyến ở phần khác của tài liệu được làm sạch.

Lưu, chia sẻ và xuất

Tài liệu được tự lưu trong trình duyệt của bạn. Xuất → Tải xuống .md cho bạn file Markdown để commit cạnh mã nguồn. Chia sẻ tạo một liên kết chứa toàn bộ tài liệu, để đồng nghiệp mở ra là thấy sơ đồ đã được vẽ sẵn. Tải xuống .html xuất trang độc lập với các sơ đồ dưới dạng SVG, và In / Lưu thành PDF tạo file PDF trong đó sơ đồ vẫn sắc nét ở mọi mức phóng to. Màu sơ đồ theo giao diện sáng hoặc tối mà bạn chọn.

Khi nào dùng cái này và khi nào dùng công cụ chuyên dụng

Nếu bạn chỉ muốn lặp lại trên một sơ đồ với bảng cấu hình và tải ảnh về, một công cụ chuyên dụng như mermaid.live được làm cho việc đó. Nếu sơ đồ thuộc về một tài liệu — README, ghi chú thiết kế, kế hoạch của agent, tài liệu dự án — thì trình soạn thảo Markdown hiển thị được Mermaid là đường ngắn hơn, vì bạn thấy sơ đồ trong ngữ cảnh và tải được cả file. Mới làm quen với cú pháp xung quanh? Xem bảng cú pháp Markdown, hoặc mở thẳng trình soạn thảo Markdown.