Dán Mermaid, xem trước tức thì, xuất SVG/PNG, tải tệp lên, kéo để di chuyển và chia sẻ qua URL.
Mẫu nhanh
Mở tệp MermaidThả vào bất kỳ đâu — .mmd · .mermaid · .md · .txt · Cách mở tệp .mmd
●Đang tải Mermaid...Dg 1, Cột 1
Chưa có gì để kết xuất
100%
Mẹo: trong phần xem trước, nhấp và kéo (hoặc chạm và kéo) để di chuyển. Thả tệp vào phần xem trước để tải.
Mermaid là gì?
Mermaid là công cụ vẽ sơ đồ và biểu đồ dựa trên JavaScript, sử dụng các định nghĩa văn bản lấy cảm hứng từ Markdown để tạo và chỉnh sửa sơ đồ một cách động. Đây là một dự án mã nguồn mở cho phép bạn tạo sơ đồ từ các mô tả văn bản đơn giản.
Thay vì dùng công cụ vẽ phức tạp, bạn viết cú pháp giống mã để mô tả sơ đồ, và Mermaid sẽ kết xuất nó thành sơ đồ trực quan. Cách tiếp cận này giúp sơ đồ có thể quản lý phiên bản, dễ cập nhật và rất phù hợp cho tài liệu.
Mermaid tích hợp liền mạch với các nền tảng tài liệu, wiki và tệp Markdown, nên được các nhà phát triển và người viết kỹ thuật ưa chuộng.
Vì sao nên dùng Mermaid?
Kiểm soát phiên bản: sơ đồ là tệp văn bản nên có thể theo dõi trong Git cùng với mã
Cập nhật nhanh: thay đổi vài dòng văn bản thay vì vẽ lại toàn bộ sơ đồ
Tính nhất quán: Mermaid tự động xử lý bố cục và kiểu dáng để đảm bảo sơ đồ nhất quán
Không cần công cụ thiết kế: không cần Visio, Lucidchart hay các công cụ đắt tiền khác
Tài liệu như mã: giữ sơ đồ trong cùng kho với tài liệu của bạn
Đa nền tảng: chạy trên trình duyệt và Node.js, tích hợp với nhiều nền tảng
Miễn phí và mã nguồn mở: không chi phí giấy phép, cộng đồng năng động
Nhiều loại sơ đồ: hỗ trợ lưu đồ, sơ đồ tuần tự, sơ đồ lớp và hơn nữa
Các câu hỏi phổ biến về cách sử dụng Mermaid Viewer và tạo sơ đồ
Trình chỉnh sửa Mermaid này có thực sự miễn phí không?
Có, hoàn toàn miễn phí. Bạn có thể tạo không giới hạn sơ đồ, xuất SVG/PNG, chia sẻ qua URL và dùng mọi tính năng mà không cần đăng ký hay thanh toán. Công cụ được hỗ trợ bởi quảng cáo không gây khó chịu.
Tôi có cần cài đặt gì không?
Không cần cài đặt gì cả. Đây là công cụ web chạy hoàn toàn trong trình duyệt. Chỉ cần mở trang là có thể bắt đầu ngay trên desktop, tablet hoặc điện thoại.
Làm sao để lưu sơ đồ?
Bạn có thể lưu theo nhiều cách: 1) xuất SVG hoặc PNG, 2) chia sẻ qua URL (mã sơ đồ được mã hóa trong URL), 3) sao chép mã Mermaid vào tệp của bạn, 4) tải lên/tải xuống tệp .mmd hoặc .mermaid.
Tôi có thể dùng sơ đồ trong tài liệu không?
Hoàn toàn được. Hãy xuất sơ đồ dưới dạng SVG (co giãn) hoặc PNG để dùng trong tài liệu, thuyết trình hoặc website. Bạn cũng có thể nhúng trực tiếp mã Mermaid vào các nền tảng như GitHub, GitLab hoặc Notion.
SVG và PNG khác nhau thế nào?
SVG là định dạng vector nên giữ chất lượng ở mọi kích thước, rất phù hợp cho web và tài liệu. PNG là ảnh raster, tiện để chia sẻ nhanh nhưng giảm chất lượng khi đổi kích thước.
Vì sao sơ đồ không render?
Hãy kiểm tra lỗi cú pháp trong mã Mermaid. Lỗi thường gặp gồm: thiếu dấu đóng ngoặc kép, thiếu dấu hai chấm/chấm phẩy, sai ID node hoặc dùng cú pháp không được hỗ trợ. Hãy đơn giản hóa sơ đồ để tìm nguyên nhân.
Tôi có thể cộng tác với người khác không?
Không có cộng tác thời gian thực tích hợp sẵn, nhưng bạn có thể chia sẻ sơ đồ qua URL rất dễ. Người khác có thể mở, sửa rồi chia sẻ lại phiên bản của họ. Vì Mermaid là dạng văn bản nên cũng rất hợp với Git.
Có dùng offline được không?
Lần tải đầu tiên cần kết nối internet. Sau khi tải xong, các chức năng chỉnh sửa cơ bản thường vẫn dùng được offline. Tuy nhiên một số tính năng như xuất file có thể cần kết nối.
Làm sao học cú pháp Mermaid?
Hãy bắt đầu với Mermaid Guide đầy đủ của chúng tôi, bao gồm ví dụ cho mọi loại sơ đồ. Dùng Templates để khởi đầu nhanh và tham khảo thêm tài liệu chính thức tại mermaid.js.org.
Tôi có thể tùy chỉnh giao diện không?
Có. Sơ đồ đi theo giao diện của trang: chuyển giữa sáng và tối bằng nút Chủ đề trên thanh trên cùng, sơ đồ sẽ được vẽ lại với theme Mermaid tương ứng. Với tùy biến nâng cao, dùng chỉ thị %%{init:...}%% để cấu hình màu sắc, font và các thuộc tính hiển thị khác.
Hỗ trợ những loại sơ đồ nào?
Trình soạn thảo này hỗ trợ các loại sơ đồ Mermaid chính: Flowchart, Sequence Diagram, Class Diagram, State Diagram, ER Diagram, Gantt Chart, Pie Chart, Git Graph, User Journey và nhiều loại khác.
Dữ liệu sơ đồ của tôi có riêng tư không?
Mã sơ đồ của bạn không được gửi lên máy chủ của chúng tôi. Toàn bộ quá trình render diễn ra trong trình duyệt. Khi chia sẻ qua URL, mã nằm ngay trong URL; chúng tôi không lưu hay theo dõi nội dung sơ đồ của bạn.
Vì sao nên dùng sơ đồ dạng văn bản?
Sơ đồ dạng văn bản có nhiều ưu điểm: quản lý phiên bản (rất hợp với Git), cập nhật nhanh, phong cách nhất quán, dễ tìm kiếm, nhẹ, và có thể tạo tự động bằng mã. Việc review trong pull request cũng dễ hơn.
Có thể nhúng Mermaid vào website không?
Có. Bạn chỉ cần thêm thư viện Mermaid JavaScript vào website và chèn các khối mã Mermaid. Nhiều nền tảng đã hỗ trợ Mermaid sẵn như GitHub, GitLab, Notion và Obsidian.
Kích thước sơ đồ tối đa khuyến nghị là bao nhiêu?
Không có giới hạn cứng, nhưng sơ đồ rất lớn (hơn khoảng 100 node) có thể render chậm tùy thiết bị. Với hệ thống phức tạp, nên chia thành nhiều sơ đồ nhỏ và tập trung hơn.