Mermaid Preview
Mermaid Preview — chạy trên trình duyệt. Không lưu dữ liệu.
Xem trước Mermaid
Nhập giá trị, rồi nhấn Tính.
Kết quả render
Render cú pháp Mermaid như flowchart, sequenceDiagram trong trình duyệt. Dữ liệu không gửi lên máy chủ.
Cách sử dụng
- Dán cú pháp như flowchart hoặc sequenceDiagram vào Nguồn Mermaid. Cũng có ví dụ placeholder.
- Nhấn Xem trước. Lần đầu thư viện mermaid tải từ CDN.
- Xem sơ đồ SVG ở Kết quả render bên dưới.
- Cú pháp sai thì hiện thông báo lỗi. Sửa nguồn rồi xem trước lại.
- Đặt lại về nguồn mẫu hoặc xóa ô.
Khái niệm chính
Xem trước Mermaid dùng khi vẽ lưu đồ và sơ đồ tuần tự trước khi commit vào kho. Tải động jsDelivr mermaid 10 và render SVG trong trình duyệt. Nguồn không gửi máy chủ. Cú pháp gần giống GitHub Markdown nhưng một số mở rộng có thể khác theo phiên bản.
Loại mermaid 10 hỗ trợ như sơ đồ lớp, Gantt, ER nói chung thử được. Đồ thị rất lớn có thể làm trình duyệt nặng. Liên kết ảnh ngoài hay chèn HTML có thể bị hạn chế vì bảo mật. Dùng số dòng trong thông báo lỗi để sửa mũi tên và ID nút.
Ví dụ
Xem trước mẫu flowchart TD A bắt đầu tới điều kiện B, Yes hoàn tất, No thử lại thì vẽ hộp và hình thoi. Viết người tham gia và mũi tên dạng sequenceDiagram thì hiện tin nhắn theo thời gian. Khoảng trong id nút gây lỗi cú pháp, hãy tách id tiếng Anh và nhãn ngoặc. Sơ đồ tuần tự ngắn hơn nếu gom khai báo người tham gia ở trên. Đưa vào tài liệu thì chỉ sao nguồn đã render thành công để giảm lệch phiên bản. Thử cùng nhập nhiều lần thì đặt lại rồi dán mới. Máy dùng chung thì xóa ô khi xong. Đóng thẻ trình duyệt cũng xóa giá trị vừa dán; không cần gửi xóa lên máy chủ. Tên nút và tiêu đề ô trùng công cụ phía trên, cứ làm theo bài. Kết quả trống thì kiểm ô bắt buộc và thông báo lỗi có bị ẩn. Bài này là hướng dẫn dùng, không có nghĩa dữ liệu được lưu kho ngoài. Trên điện thoại, nút sao chép có thể hỏi quyền clipboard — hãy cho phép rồi nhấn lại.
Liên quan: Xem trước Markdown · Xem trước công thức LaTeX
Câu hỏi thường gặp
Xem trước Mermaid phiên bản nào?
Tải động jsDelivr mermaid 10.
Nguồn có lưu máy chủ không?
Không. Chỉ render trong trình duyệt.
Vì sao hình khác GitHub?
Phiên bản mermaid GitHub và 10 có thể khác. Đơn giản hóa cú pháp rồi vẽ lại.
Lưu PNG được không?
Màn này là kết quả render SVG. Không có nút tải PNG.
Lỗi cú pháp xem ở đâu?
Hiện trong thông báo hướng dẫn dưới kết quả render.
Sơ đồ tuần tự cũng được?
Được. Ví dụ flowchart và sequenceDiagram được mô tả trong gợi ý.
Cập nhật lần cuối: 2026-09-04