Giới thiệu Mermaid Viewer

Ai vận hành trang này và vì sao nó tồn tại.

Đây là gì

Mermaid Viewer là trình soạn thảo sơ đồ Mermaid miễn phí, chạy ngay trong trình duyệt. Bạn viết hoặc dán văn bản Mermaid ở bên trái, sơ đồ đã kết xuất hiện ra ở bên phải ngay khi bạn gõ.

Việc kết xuất diễn ra trong trình duyệt của bạn. Sơ đồ không được tải lên, không được lưu trữ và không được xử lý trên máy chủ — Mermaid chạy dưới dạng JavaScript trên chính máy bạn, và tệp bạn kéo vào được đọc cục bộ. Chính vì thế nó phù hợp với những sơ đồ bạn sẽ không dán vào một công cụ trên đám mây: kiến trúc nội bộ, hệ thống có tên khách hàng trong nhãn, bất cứ thứ gì thuộc phạm vi NDA.

Một lưu ý tôi muốn nói rõ hơn là giấu đi: nếu bạn bật liên kết chia sẻ, sơ đồ sẽ được mã hoá ngay trong URL, và một URL bạn gửi cho người khác sẽ đi qua mạng. Mọi thứ còn lại vẫn nằm trên máy bạn.

Vì sao nó tồn tại

Tôi cần lập tài liệu kiến trúc phần mềm, và tôi muốn các sơ đồ nằm trong kho mã, ngay cạnh đoạn mã, thay vì trong một công cụ vẽ riêng. Mermaid là định dạng hiển nhiên cho việc đó. Thứ tôi thiếu là một cách tử tế để xem chúng.

Tôi không đi tìm công cụ trước. Tôi nhìn vào vấn đề, thấy nó nhỏ, và ước lượng rằng mình có thể dựng một thứ gọn gàng trong thời gian ngắn. Thế là tôi làm — commit đầu tiên của dự án này là tháng 1 năm 2026.

Tôi làm nó cho chính mình, không vì gì khác. Tôi muốn mở một sơ đồ, thấy nó được kết xuất, phóng to phần mình quan tâm, rồi gửi cho ai đó một liên kết. Người khác tìm thấy nó về sau, và điều đó thay đổi việc tôi dành thời gian cho cái gì, nhưng không thay đổi bản chất của công cụ.

Nó hoạt động thế nào

Mermaid đảm nhiệm việc kết xuất. Trang này là mọi thứ bao quanh: trình soạn thảo trực tiếp với xem trước tức thì, phóng to và kéo cho những sơ đồ quá lớn so với một màn hình, ba giao diện màu, xuất SVG và PNG, liên kết chia sẻ mã hoá trong URL, kéo-thả tệp .mmd và .mermaid, cùng giao diện bằng 18 ngôn ngữ.

Việc sử dụng là miễn phí, và được chi trả bằng quảng cáo không gây phiền.

Liên hệ

Câu hỏi và báo lỗi gửi tới dominik@malsch.solutions. Thông tin đơn vị vận hành nằm ở thông tin pháp lý.

Viết bởi Dominik Malsch · Cập nhật lần cuối:

Quay lại trình xem