Nhà phát triển / Sơ đồ
Mermaid Live Editor
Viết mã Mermaid và xem biểu đồ ngay khi bạn nhập: biểu đồ luồng, biểu đồ tuần tự, biểu đồ lớp, biểu đồ Gantt và biểu đồ tròn, có thể tải xuống dưới dạng SVG và PNG.
Mermaid Live Editor: Trình chỉnh sửa này vẽ biểu đồ bằng Mermaid, thư viện mã nguồn mở được GitHub, GitLab và nhiều công cụ tài liệu sử dụng để tạo biểu đồ bằng văn bản. Công cụ chạy ở chế độ nghiêm ngặt, vì vậy mã của người khác không thể chạy tập lệnh hoặc thêm trình xử lý sự kiện nhấp. Tệp SVG tải xuống vẫn sắc nét ở mọi kích thước; tệp PNG tải xuống được vẽ với kích thước gấp đôi trên màn hình và có nền trắng. Chạy 100% cục bộ trong trình duyệt của bạn, không có tệp nào được tải lên máy chủ.
- Danh mục
- Công cụ lập trình viên
- Lượt chạy
- Trong trình duyệt của bạn
- Chi phí
- Miễn phí · không cần đăng ký
- Trạng thái khả dụng
- Sẵn sàng sử dụng
Chạy hoàn toàn trong trình duyệt của bạn
Sơ đồ được vẽ trong trình duyệt của bạn bằng Mermaid ở chế độ nghiêm ngặt, nên mã sơ đồ không thể chạy tập lệnh. Hãy dán cùng mã đó vào GitHub, GitLab hoặc Markdown của Notion trong khối mã mermaid để hiển thị tại đó.
Sơ đồ dưới dạng văn bản
Một sơ đồ được vẽ trong chương trình đồ họa sẽ lỗi thời vì mỗi lần thay đổi đều phải mở lại tệp. Sơ đồ Mermaid chỉ là vài dòng văn bản nằm cạnh mã hoặc tài liệu mà nó mô tả, được thay đổi trong cùng một commit và hiển thị trong phần xem xét dưới dạng diff dễ đọc.
Mỗi sơ đồ bắt đầu bằng loại của nó: flowchart với hướng như TD (từ trên xuống) hoặc LR (từ trái sang phải), sequenceDiagram, classDiagram, gantt hoặc pie. Các nút được viết một lần cùng nhãn của chúng, A[Start], rồi được gọi lại bằng tên, A --> B.
Xuất tệp
SVG giữ cho đường nét và văn bản sắc nét ở mọi kích thước, nên phù hợp hơn với tài liệu và trang trình chiếu; PNG phù hợp với ứng dụng trò chuyện và những nơi không chấp nhận SVG. Để chỉnh sửa SVG đã xuất bằng tay, hãy mở tệp đó trong trình chỉnh sửa SVG.
Cách sử dụng
- Bắt đầu từ một ví dụ hoặc dán mã Mermaid của bạn.
- Chỉnh sửa mã; biểu đồ sẽ được vẽ lại khi bạn nhập hoặc hiển thị lỗi.
- Tải biểu đồ xuống dưới dạng SVG hoặc PNG, hoặc sao chép mã.
Quyền riêng tư và giới hạn
Biểu đồ được vẽ trong trình duyệt của bạn và mã của bạn chỉ được lưu trong trình duyệt này, vì vậy mã vẫn còn ở đó vào lần sau.
Công cụ liên quan
Câu hỏi thường gặp
Mermaid là gì?
Đó là cách viết biểu đồ dưới dạng văn bản. Một dòng như A --> B sẽ vẽ hai hộp được nối bằng mũi tên, nhờ đó biểu đồ có thể nằm trong các tệp Markdown và bản đánh giá mã, đồng thời thay đổi theo thao tác chỉnh sửa văn bản thay vì dùng công cụ vẽ.
Làm cách nào để hiển thị biểu đồ trên GitHub?
Đặt mã vào một khối mã có hàng rào được đánh dấu là mermaid trong tệp Markdown, issue hoặc pull request: ba dấu backtick, tiếp theo là từ mermaid, mã, rồi ba dấu backtick. GitHub, GitLab và Notion sẽ hiển thị biểu đồ trực tiếp tại đó.
Tại sao biểu đồ của tôi lại hiển thị lỗi?
Thông báo cho biết dòng mà Mermaid không thể đọc. Các nguyên nhân thường gặp là thiếu loại biểu đồ ở dòng đầu tiên, chẳng hạn flowchart TD, dấu ngoặc hoặc dấu ngoặc kép chưa được đóng, và văn bản chứa ký tự đặc biệt cần được đặt trong dấu ngoặc kép.
Những loại biểu đồ nào được hỗ trợ?
Mọi loại có trong phiên bản Mermaid mà trình chỉnh sửa tải, bao gồm biểu đồ luồng, biểu đồ tuần tự, biểu đồ lớp, biểu đồ trạng thái, biểu đồ thực thể–quan hệ, biểu đồ Gantt, biểu đồ tròn, sơ đồ tư duy, dòng thời gian và biểu đồ git. Các ví dụ bao quát năm loại phổ biến nhất.
Công cụ miễn phí · trong trình duyệt của bạn lượt chạy · không cần tài khoản