Trình Chỉnh Sửa Sơ Đồ Mermaid Là Gì?
Trình Chỉnh Sửa Sơ Đồ Mermaid là một công cụ tương tác cho phép bạn viết mã sơ đồ bằng cú pháp Mermaid.js và xem kết quả được hiển thị ngay lập tức. Cho dù bạn cần một sơ đồ luồng nhanh, một sơ đồ trình tự chi tiết hay một biểu đồ Gantt dự án, bạn có thể tạo nó ngay trong trình duyệt của mình bằng mã đơn giản dựa trên văn bản.
Mermaid là một ngôn ngữ sơ đồ mã nguồn mở phổ biến giúp chuyển đổi văn bản giống markdown thành các sơ đồ chuyên nghiệp. Trình chỉnh sửa này cung cấp giao diện bảng chia với trình chỉnh sửa mã ở một bên và bản xem trước trực tiếp ở bên kia, để bạn có thể thấy các thay đổi của mình khi bạn gõ.
Các Loại Sơ Đồ Được Hỗ Trợ
Sơ Đồ Luồng
Sơ Đồ Trình Tự
Sơ Đồ Lớp
Sơ Đồ Trạng Thái
Sơ Đồ ER
Biểu Đồ Gantt
Biểu Đồ Tròn
Sơ Đồ Tư Duy
Git Graph
Cách Sử Dụng Trình Chỉnh Sửa Sơ Đồ Mermaid
Bắt Đầu
Tải Sơ Đồ Mẫu
Trình chỉnh sửa tải với một sơ đồ luồng mẫu. Bạn có thể bắt đầu chỉnh sửa nó ngay lập tức hoặc chọn một loại sơ đồ khác từ menu thả xuống Mẫu.
Viết Mã Của Bạn
Viết mã Mermaid của bạn trong bảng bên trái. Bản xem trước sơ đồ cập nhật tự động khi bạn gõ, cung cấp cho bạn phản hồi trực quan ngay lập tức.
Sửa Lỗi
Nếu có lỗi cú pháp, một thông báo lỗi sẽ xuất hiện bên dưới trình chỉnh sửa để giúp bạn xác định và sửa vấn đề một cách nhanh chóng.
Sử Dụng Mẫu
Nhấp vào nút Mẫu trong thanh công cụ để chọn từ 9 mẫu sơ đồ tích hợp. Mỗi mẫu cung cấp một ví dụ hoạt động mà bạn có thể sửa đổi để phù hợp với nhu cầu của mình.
Chỉnh Sửa Mã
Thụt Lề Thông Minh
Phím tắt để định dạng mã hiệu quả
- Nhấn Tab để chèn thụt lề (4 khoảng trắng)
- Nhấn Shift+Tab để xóa thụt lề
Số Dòng & Tự Động Lưu
Trải nghiệm chỉnh sửa nâng cao
- Số dòng giúp theo dõi cấu trúc mã
- Mã của bạn được tự động lưu và khôi phục khi bạn quay lại
Điều Khiển Xem Trước
- Sử dụng các nút phóng to (+/−) hoặc Ctrl + cuộn chuột để phóng to giữa 25% và 300%
- Nhấp vào nút đặt lại để quay lại phóng to 100%
- Kéo tay cầm thay đổi kích thước giữa các bảng để điều chỉnh chia tách trình chỉnh sửa/xem trước
Xuất Sơ Đồ Của Bạn
Xuất SVG
Xuất PNG
Sao Chép SVG
Tính Năng
Xem Trước Trực Tiếp
Xem sơ đồ của bạn được hiển thị theo thời gian thực khi bạn gõ. Bản xem trước cập nhật tự động với một độ trễ ngắn, vì vậy bạn nhận được phản hồi trực quan ngay lập tức mà không làm gián đoạn quy trình làm việc của bạn.
9 Loại Sơ Đồ
Tạo sơ đồ luồng, sơ đồ trình tự, sơ đồ lớp, sơ đồ trạng thái, sơ đồ ER, biểu đồ Gantt, biểu đồ tròn, sơ đồ tư duy và git graph — tất cả từ mã dựa trên văn bản bằng cú pháp Mermaid.js.
Mẫu Tích Hợp
Bắt đầu nhanh chóng với các mẫu sẵn sàng cho mọi loại sơ đồ được hỗ trợ. Mỗi mẫu bao gồm một ví dụ hoạt động minh họa cú pháp và cấu trúc.
Trình Chỉnh Sửa Mã Với Số Dòng
Trình chỉnh sửa có số dòng, thụt lề Tab/Shift+Tab và phản hồi lỗi theo thời gian thực. Lỗi cú pháp được hiển thị rõ ràng bên dưới trình chỉnh sửa để bạn có thể sửa các vấn đề ngay lập tức.
Tùy Chọn Xuất Linh Hoạt
Xuất các sơ đồ hoàn thành của bạn dưới dạng SVG cho đồ họa vectơ có thể mở rộng, hoặc PNG cho hình ảnh độ phân giải cao ở tỷ lệ 2x. Bạn cũng có thể sao chép mã SVG trực tiếp vào bộ nhớ tạm của mình.
Phóng To và Thay Đổi Kích Thước
Phóng to bản xem trước từ 25% đến 300% bằng các nút hoặc Ctrl + cuộn chuột. Kéo tay cầm thay đổi kích thước để điều chỉnh kích thước bảng trình chỉnh sửa và xem trước theo sở thích của bạn.
Tự Động Lưu
Mã của bạn được tự động lưu vào bộ nhớ cục bộ của trình duyệt. Khi bạn quay lại trình chỉnh sửa, công việc của bạn chính xác ở nơi bạn để lại.
Chế Độ Tối
Trình chỉnh sửa hỗ trợ đầy đủ chế độ tối. Khi bạn chuyển đổi chủ đề, chủ đề sơ đồ Mermaid tự động cập nhật để phù hợp, đảm bảo các sơ đồ của bạn luôn trông đúng.
Dữ Liệu Của Bạn Vẫn Riêng Tư
Tất cả quá trình hiển thị diễn ra trong trình duyệt của bạn
- Không tải lên — Mã của bạn không bao giờ rời khỏi thiết bị của bạn
- Không theo dõi — Chúng tôi không thu thập dữ liệu sử dụng
Các Câu Hỏi Thường Gặp
Mermaid.js Là Gì?
Mermaid.js là một thư viện JavaScript mã nguồn mở tạo sơ đồ và biểu đồ từ các định nghĩa dựa trên văn bản. Thay vì vẽ sơ đồ theo cách thủ công, bạn viết mã đơn giản mô tả cấu trúc và Mermaid hiển thị nó dưới dạng sơ đồ trực quan.
Cách tiếp cận này làm cho các sơ đồ có thể kiểm soát phiên bản, dễ cập nhật và hoàn hảo để nhúng vào tài liệu, wiki và tệp markdown.
Tôi Có Thể Tạo Những Loại Sơ Đồ Nào?
Trình chỉnh sửa này hỗ trợ 9 loại sơ đồ:
- Sơ đồ luồng
- Sơ đồ trình tự
- Sơ đồ lớp
- Sơ đồ trạng thái
- Sơ đồ ER (thực thể-mối quan hệ)
- Biểu đồ Gantt
- Biểu đồ tròn
- Sơ đồ tư duy
- Git graph
Làm Cách Nào Để Học Cú Pháp Mermaid?
Cách dễ nhất để bắt đầu là chọn một mẫu từ menu thả xuống. Mỗi mẫu cung cấp một ví dụ hoạt động mà bạn có thể nghiên cứu và sửa đổi.
Tài liệu Mermaid.js cũng cung cấp các tài liệu tham khảo cú pháp toàn diện cho mỗi loại sơ đồ. Bắt đầu với các ví dụ đơn giản và dần dần thêm độ phức tạp khi bạn trở nên quen thuộc với cú pháp.
Sự Khác Biệt Giữa Xuất SVG và PNG Là Gì?
Định Dạng Vectơ
- Mở rộng theo bất kỳ kích thước nào mà không mất chất lượng
- Lý tưởng cho tài liệu và trang web
- Có thể chỉnh sửa trong phần mềm đồ họa vectơ
- Kích thước tệp nhỏ hơn cho các sơ đồ đơn giản
Hình Ảnh Raster
- Xuất ở độ phân giải 2x để hiển thị sắc nét
- Phù hợp cho các bài thuyết trình và chia sẻ
- Hoạt động trên các màn hình DPI cao
- Tương thích phổ quát
Mã Của Tôi Có Được Lưu Không?
Có, mã của bạn được tự động lưu vào bộ nhớ cục bộ của trình duyệt. Khi bạn quay lại trình chỉnh sửa, mã cuối cùng của bạn sẽ được khôi phục.
Tại Sao Sơ Đồ Của Tôi Hiển Thị Lỗi?
Mermaid có các quy tắc cú pháp cụ thể cho mỗi loại sơ đồ. Các vấn đề phổ biến bao gồm:
- Mũi tên bị thiếu (ví dụ:
-->hoặc--->) - Từ khóa hoặc khai báo loại sơ đồ không chính xác
- Dấu ngoặc hoặc dấu ngoặc kép không khớp
- ID nút hoặc ký tự đặc biệt không hợp lệ
- Thụt lề không phù hợp trong các loại sơ đồ nhất định
Kiểm tra thông báo lỗi bên dưới trình chỉnh sửa để biết chi tiết về những gì đã xảy ra. Thông báo thường chỉ ra số dòng và loại lỗi.
Tôi Có Thể Sử Dụng Cái Này Trên Thiết Bị Di Động Không?
Có. Trên các màn hình nhỏ hơn, bố cục chuyển sang sắp xếp dọc với trình chỉnh sửa ở trên cùng và bản xem trước bên dưới. Tất cả các tính năng vẫn có sẵn, bao gồm mẫu, tùy chọn xuất và điều khiển phóng to.
Để có trải nghiệm tốt nhất trên thiết bị di động, chúng tôi khuyên bạn nên sử dụng hướng ngang khi làm việc với các sơ đồ phức tạp.
Chưa có bình luận nào. Hãy là người đầu tiên!