Mermaid Live Editor — Vẽ sơ đồ từ văn bản và xuất ảnh

Trình soạn thảo Mermaid

Vẽ lưu đồ, sơ đồ tuần tự, biểu đồ Gantt và hơn nữa từ vài dòng văn bản. Viết mã Mermaid bên trái, xem sơ đồ cập nhật bên phải rồi xuất SVG hoặc PNG cho tài liệu, slide hay Markdown. GitHub, GitLab, Notion và nhiều ứng dụng ghi chú cũng render trực tiếp mã Mermaid.

Chạy trong trình duyệt — không có dữ liệu nào bạn nhập bị tải lên

Đang tải Mermaid…

Cách sử dụng

Chọn sơ đồ trong Chèn mẫu hoặc dán mã Mermaid đã có.
Sửa code bên trái. Bản xem trước render lại khi bạn ngừng gõ và lỗi cú pháp hiện bên dưới.
Chọn chủ đề, rồi tải SVG hoặc PNG hoặc sao chép code SVG.

Giải thích tùy chọn

Loại sơ đồ: Mẫu có lưu đồ, tuần tự, lớp, trạng thái, ER, Gantt, biểu đồ tròn và sơ đồ tư duy. Các loại khác như timeline, biểu đồ quadrant và Git graph có thể viết trực tiếp.
Chủ đề: Gồm chủ đề mặc định, trung tính, tối và rừng. Trung tính gần đen trắng và dễ in.
Xuất: SVG là vector nên phóng to không mất chất lượng. PNG xuất ở kích thước gấp đôi với màu nền, phù hợp ứng dụng chat và slide.

Tóm tắt lưu đồ

flowchart LR
    A[Hình chữ nhật] --> B(Bo góc)
    B --> C{Quyết định}
    C -->|Có| D[(Cơ sở dữ liệu)]
    C -.->|Không| E((Hình tròn))

TD từ trên xuống, LR từ trái sang phải
--> mũi tên liền, -.-> nét chấm, ==> nét dày, -->|chữ| có nhãn

Câu hỏi thường gặp

Có thể dán mã Mermaid vào GitHub không?

Có. Đặt mã trong khối code ```mermaid trong tệp Markdown, issue hoặc bình luận để GitHub render sơ đồ. GitLab, Notion, Obsidian và Typora cũng hỗ trợ.

Code có được tải lên không?

Không. Mermaid render trong trình duyệt; code và sơ đồ không rời khỏi thiết bị.

Vì sao Markdown trong node không hoạt động?

Để xuất PNG, nhãn node được vẽ thành văn bản SVG nên không hỗ trợ thẻ HTML hoặc một số định dạng rich text.

Quyền riêng tư

Công cụ này chạy hoàn toàn trong trình duyệt của bạn. Tệp và văn bản được xử lý ngay trên thiết bị và không bao giờ được tải lên máy chủ của chúng tôi.