Xem trước sơ đồ Mermaid

Nhập mã Mermaid để xem trước trực tiếp các sơ đồ như flowchart và sequenceDiagram dưới dạng SVG.

⌘ Chạy trong trình duyệt ◴ Không lưu dữ liệu ⌁ Miễn phí

Tài liệu hóa sơ đồ

Xem mã Mermaid thành sơ đồ SVG ngay lập tức

Xem trước sơ đồ Mermaid giúp render cú pháp Mermaid trong trình duyệt để chuẩn bị sơ đồ cho README, wiki và tài liệu thiết kế.

Nhập cú pháp Mermaid thường dùng trong tài liệu như flowchart, sequenceDiagram, classDiagram và stateDiagram để xem kết quả SVG ở bên phải.

Nếu cú pháp sai, khu vực xem trước hiển thị trạng thái lỗi cùng mã gốc để bạn dễ xác định phần cần sửa.

Sao chép SVG đã render hoặc mã Mermaid gốc để tiếp tục dùng trong README, issue và tài liệu kỹ thuật.

Dùng để kiểm tra nhanh luồng dịch vụ, chuỗi gọi API, chuyển trạng thái hoặc cấu trúc kiến trúc đơn giản trước khi đưa vào tài liệu.

Chọn ví dụ flowchart, sequenceDiagram, classDiagram hoặc stateDiagram phía trên vùng nhập để điền ngay.

Khi Mermaid render thất bại, công cụ hiển thị thông báo lỗi cùng khối mã nguồn để dễ sửa cú pháp.

Sao chép SVG lấy kết quả đã render, còn sao chép mã nguồn lấy mã Mermaid bạn đã nhập.

Mermaid renderer được tải từ CDN bên ngoài, và nội dung nhập chỉ được xử lý trong trình duyệt của bạn.

Mã Mermaid

Xem trước sơ đồ

Sơ đồ Mermaid đã render sẽ hiển thị tại đây.

1 Viết hoặc dán cú pháp Mermaid vào vùng nhập bên trái.
2 Nếu cần ví dụ, chọn flowchart, sequenceDiagram, classDiagram hoặc stateDiagram ở phía trên vùng nhập.
3 Kiểm tra sơ đồ SVG hoặc thông báo lỗi trong phần xem trước bên phải.
4 Khi kết quả đúng, dùng Sao chép SVG hoặc Sao chép mã nguồn để lấy nội dung cần thiết.

Có thể xem trước những sơ đồ Mermaid nào?

Công cụ render các cú pháp Mermaid phổ biến mà Mermaid renderer hỗ trợ, gồm flowchart, sequenceDiagram, classDiagram và stateDiagram, thành SVG.

Nếu có lỗi cú pháp thì sao?

Khi render thất bại, khu vực xem trước hiển thị trạng thái lỗi và mã nguồn gốc dưới dạng khối mã.

Mã sơ đồ có được gửi lên máy chủ không?

Không. Đây là công cụ chỉ chạy phía client, mã Mermaid được xử lý trong trình duyệt.