Trình Soạn Thảo Sơ Đồ Mermaid miễn phí
Viết lưu đồ, sơ đồ trình tự, biểu đồ Gantt và nhiều hơn nữa bằng cú pháp Mermaid với xem trước trực tiếp. Xuất dưới dạng SVG hoặc PNG. Chạy hoàn toàn trên trình duyệt.
Kéo hoặc cuộn để di chuyển. Chụm hoặc Ctrl + cuộn để thu phóng. Kéo cạnh dưới để làm khung xem trước cao hơn.
💡 Viết sơ đồ bằng cú pháp Mermaid — lưu đồ, sơ đồ tuần tự, biểu đồ Gantt, sơ đồ lớp và nhiều loại khác — rồi xuất ra SVG hoặc PNG. Mọi thứ chạy trong trình duyệt: nội dung sơ đồ của bạn không bao giờ được tải lên, và bộ dựng hình Mermaid được phục vụ từ chính trang này chứ không phải từ CDN bên thứ ba.
Công dụng phổ biến
- Tạo Sơ đồ LuồngTạo sơ đồ luồng từ văn bản và xuất nó dưới dạng hình ảnh.
- Vẽ Sơ đồ ChuỗiSơ đồ cách các hệ thống hoặc người tương tác theo thời gian.
- Thêm Sơ đồ vào READMETạo sơ đồ mà GitHub hiển thị gốc trong README của bạn.
- Xây dựng Biểu đồ GanttĐặt ra lịch trình dự án dưới dạng biểu đồ Gantt từ văn bản.
- Tạo Sơ đồ LớpSơ đồ các lớp và mối quan hệ của chúng để thiết kế phần mềm.
Cách hoạt động
Mermaid cho phép bạn viết sơ đồ dưới dạng văn bản và có chúng được hiển thị tự động — tuyệt vời để giữ các sơ đồ trong kiểm soát phiên bản. Đây là trình chỉnh sửa trực tiếp hiển thị khi bạn nhập.
- 1Công cụ Mermaid tảiThư viện Mermaid được tải từ LibraTool khi bạn dùng công cụ lần đầu, sau đó trình duyệt lưu vào bộ nhớ đệm.
- 2Bạn viết mã sơ đồBiểu đồ luồng, sơ đồ trình tự, biểu đồ Gantt, sơ đồ lớp, biểu đồ bánh và nhiều hơn nữa — sử dụng cú pháp văn bản của Mermaid.
- 3Nó kết xuất trực tiếpMã của bạn được phân tích và kết xuất thành SVG trong trình duyệt của bạn khi bạn nhập, với chủ đề sáng và tối.
- 4Xuất SVG hoặc PNGTải xuống sơ đồ dưới dạng SVG có thể mở rộng hoặc PNG 2× để thả vào tài liệu, slide hoặc README.
Mã sơ đồ của bạn — có thể mô tả các hệ thống nội bộ — được kết xuất hoàn toàn trong trình duyệt của bạn và không bao giờ được tải lên.
Công cụ liên quan
Trình Soạn Thảo Markdown
Viết và xem trước Markdown theo thời gian thực. Hỗ trợ tiêu đề, in đậm, in nghiêng, khối mã, bảng và danh sách.
Trình Tạo Lưới CSS
Thiết kế trực quan một lưới CSS — các track, đơn vị và khoảng cách — và sao chép CSS và HTML được tạo.
Tạo Cây ASCII
Chuyển danh sách thụt lề thành cây thư mục gọn (├── └──) cho README và tài liệu. Đầu ra Unicode hoặc ASCII thuần. Chạy hoàn toàn trên trình duyệt.