Trình soạn sơ đồ Mermaid

Gõ Mermaid ở một bên và sơ đồ được vẽ dần ở bên kia. Chỗ sai được đánh dấu ngay trên dòng của nó, còn phiên bản đúng gần nhất vẫn ở trên màn hình. Mọi thứ đều chạy trong thẻ trình duyệt này.

Cách hoạt động

Mermaid là cách viết một sơ đồ bằng văn bản. Vài dòng như “A --> B” trở thành lưu đồ, sơ đồ tuần tự, sơ đồ lớp hay sơ đồ cơ sở dữ liệu, biểu đồ Gantt hay sơ đồ tư duy. GitHub, GitLab, Notion và phần lớn công cụ tài liệu vẽ nó ngay tại chỗ, vì thế sơ đồ trong README và tài liệu rất hay là Mermaid. Thứ chúng không cho bạn là một chỗ tốt để viết nó.

Trình soạn này vẽ sơ đồ ngay khi bạn gõ. Khi một dòng sai, dòng đó được gạch chân và thông báo cho biết Mermaid đang chờ gì, trong khi phiên bản đúng gần nhất vẫn ở trên màn hình, mờ đi, để hình không biến mất mỗi lần bạn đang gõ dở một mũi tên. Sơ đồ lớn có thể kéo đi và thu phóng.

Khi đã ưng ý, hãy lưu thành SVG, hoặc PNG theo kích thước hợp với nơi nó sẽ đến: một tài liệu, một trang chiếu hay một trang in. Bạn cũng có thể chép thẳng vào bộ nhớ tạm. Bản nháp được giữ trong trình duyệt này giữa các lần ghé, và liên kết chia sẻ mang sơ đồ ngay bên trong liên kết, nên không có gì về nó được lưu trên máy chủ.

Cách sử dụng

  1. 1 Gõ hoặc dán Mermaid, mở một tệp .mmd hay Markdown, hoặc bắt đầu từ một ví dụ.
  2. 2 Theo dõi bản xem trước. Nếu một dòng bị gạch chân, hãy sửa nó; thông báo cho biết Mermaid đang chờ gì.
  3. 3 Chọn giao diện, rồi kéo hoặc thu phóng bản xem trước để kiểm tra chi tiết.
  4. 4 Tải SVG hoặc PNG, chép ảnh, hoặc chép liên kết để chia sẻ sơ đồ.

Điều nên biết

  • Mở một tệp Markdown sẽ mở khối ```mermaid đầu tiên của nó, nên sơ đồ của một README có thể được sửa riêng.
  • Chọn một ví dụ sẽ thay nội dung trong trình soạn, và Ctrl+Z đưa sơ đồ của bạn trở lại.
  • SVG giữ sắc nét ở mọi kích thước và là lựa chọn cho web. PNG là định dạng mà trang chiếu, ứng dụng trò chuyện và trình soạn thảo văn bản nhận ổn định nhất.
  • Chủ đề được đặt bên trong sơ đồ bằng một dòng %%{init}%% sẽ được ưu tiên hơn thiết lập Giao diện.
  • Không có gì được tải lên. Sơ đồ được vẽ trong thẻ này, và liên kết chia sẻ giữ nó trong phần địa chỉ mà trình duyệt không bao giờ gửi tới máy chủ.

Trình duyệt hỗ trợ

  • Chrome 94 trở lên
  • Firefox 93 trở lên · đầy đủ tốc độ từ 113
  • Safari 16.4 trở lên
  • Edge 94 trở lên

Đây là các phiên bản cũ nhất có đủ những gì công cụ dùng. Chúng được tính ra từ chính công cụ, nên thay đổi theo công cụ.

Số phiên bản được kiểm tra ngày 2026-09-04.

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

Sơ đồ của tôi có bị tải lên đâu không?

Không. Mermaid chạy trong thẻ trình duyệt này, và bản nháp chỉ được lưu trong trình duyệt này. Bạn có thể kiểm chứng trong công cụ dành cho nhà phát triển của trình duyệt, ở thẻ Network: gõ phím không gửi đi gì cả.

Liên kết chia sẻ hoạt động thế nào khi không có máy chủ?

Sơ đồ được nén và ghi vào phần của liên kết nằm sau dấu #. Trình duyệt không bao giờ gửi phần đó tới trang web, nên liên kết mở được sơ đồ trên thiết bị của bất kỳ ai trong khi chính trang web không bao giờ nhận được nó. Sơ đồ dài thì liên kết cũng dài.

Nó hỗ trợ những loại sơ đồ nào?

Mọi thứ Mermaid 12 vẽ được: lưu đồ, sơ đồ tuần tự, sơ đồ lớp, sơ đồ trạng thái và sơ đồ thực thể liên kết, biểu đồ Gantt, biểu đồ tròn, sơ đồ tư duy, dòng thời gian, hành trình người dùng, đồ thị Git, biểu đồ góc phần tư, biểu đồ Sankey và XY, cùng các sơ đồ mới hơn là block, packet, architecture, kanban, radar và treemap.

Vì sao một dòng bị gạch chân?

Đó là chỗ Mermaid không còn hiểu sơ đồ nữa. Thông báo bên cạnh là của chính Mermaid, nêu ra thứ nó chờ đợi sẽ thấy. Thường thì lỗi thật nằm ngay trước đó, chẳng hạn một dấu ngoặc hay dấu nháy chưa được đóng.

Tôi sẽ nhận được PNG kích thước bao nhiêu?

Tùy vào mục đích. Cho tài liệu, gấp đôi kích thước sơ đồ được vẽ, vẫn sắc nét trên màn hình mật độ cao. Cho trang chiếu, lớn nhất vừa một màn hình 4K. Cho bản in, lớn nhất vừa khổ A4 ở 300 dpi. Nút bấm hiện chính xác kích thước điểm ảnh trước khi bạn tải về.

Tôi có sửa được sơ đồ trong README của mình không?

Được. Mở tệp Markdown và khối Mermaid đầu tiên trong đó sẽ mở ra trong trình soạn. Khi xong, hãy chép văn bản trở lại vào tệp.

Mở một sơ đồ người khác gửi cho tôi có an toàn không?

Sơ đồ được vẽ ở chế độ strict của Mermaid. Mọi thứ có thể chạy mã đều bị gỡ bỏ, và một dòng bên trong sơ đồ không thể tắt chế độ đó.

Công cụ liên quan

Tệp của bạn được xử lý trên thiết bị và không được tải lên. Bạn có thể kiểm chứng trong công cụ dành cho nhà phát triển của trình duyệt, ở thẻ Network.