Sơ đồ Venn thể hiện các mối quan hệ logic giữa các tập hợp hoặc nhóm dữ liệu khác nhau bằng cách sử dụng các vòng tròn chồng lấn. Cách tiếp cận dựa trên văn bản này cho phép bạn nhanh chóng minh họa các khái niệm nằm ở giao điểm của nhiều danh mục mà không cần phải thao tác với các công cụ thiết kế đồ họa thủ công.
Cấu trúc cú pháp cơ bản
Mỗi sơ đồ Venn bắt đầu bằng venn-beta khai báo, tiếp theo là định nghĩa các nhóm riêng lẻ bằng từ khóa set từ khóa. Sau đó, bạn định nghĩa cách các nhóm này chồng lấn nhau bằng từ khóa union từ khóa.
venn-beta
set GroupA ["Nhãn A"]
set GroupB ["Nhãn B"]
union GroupA, GroupB ["Nhãn giao nhau"]
Tham chiếu cú pháp
Bảng dưới đây phân tích các thành phần chính được sử dụng để xây dựng sơ đồ Venn trong Mermaid.js.
| Thành phần | Mô tả | Ví dụ cú pháp |
|---|---|---|
| Khai báo | Khởi tạo trình render sơ đồ Venn (hiện đang ở chế độ beta). | venn-beta |
| Set | Xác định một danh mục dữ liệu độc lập hoặc một vòng tròn. Luôn cung cấp một định danh và một nhãn hiển thị. | set A ["Đội Marketing"] |
| Union | Xác định khu vực chồng lấn giữa hai hoặc nhiều tập hợp. Tách các định danh bằng dấu phẩy. | union A,B ["Mục tiêu chung"] |
| Bộ điều chỉnh kích thước | Một tùy chọn :Nphần mở rộng giúp thay đổi kích thước vòng tròn hoặc vùng giao nhau theo tỷ lệ tương đối. |
set A ["Nhóm Lớn"]:15 |
| Nút Văn bản | Một khối thụt lùi được dùng để liệt kê các điểm cụ thể ngay bên trong một tập hợp hoặc khu vực giao nhau. | text ItemId ["Điểm đánh dấu cụ thể"] |
Bản thiết kế thực tế: Phân tích cơ hội sản phẩm
Bản thiết kế này trình bày một khung chiến lược phát triển sản phẩm kinh điển, giúp xác định các điểm đau của người dùng, mục tiêu kinh doanh và khả năng kỹ thuật để xác định chính xác thời điểm phát hành tính năng lý tưởng.
venn-beta
set UserNeed ["Điểm đau của người dùng"]
set BusinessGoal ["Giá trị kinh doanh"]
set TechFeasible ["Khả năng kỹ thuật"]
union UserNeed, BusinessGoal ["Thành công chiến lược"]
union UserNeed, TechFeasible ["Tính năng chưa khai thác doanh thu"]
union BusinessGoal, TechFeasible ["Tự động hóa nội bộ"]
union UserNeed, BusinessGoal, TechFeasible ["Điểm ngọt của sản phẩm"]
Gợi ý cú pháp:Khi sử dụng ba hoặc nhiều hơn các danh mục, Mermaid sẽ tự động tạo bản đồ các vùng giao nhau lồng ghép cho bạn. Chỉ cần khai báo đoạn giao nhau cuối cùng với ba yếu tố được phân cách bằng dấu phẩy, hệ thống sẽ đặt nhãn chính xác ở vị trí giao nhau trung tâm.unionvới cả ba định danh được phân cách bằng dấu phẩy, và hệ thống sẽ đặt nhãn chính xác ở vị trí giao nhau trung tâm.
Khái niệm nâng cao: Điểm đánh dấu và kích thước
Đối với tài liệu kỹ thuật chi tiết hơn, bạn có thể chèn các điểm đánh dấu văn bản cụ thể trực tiếp vào các vòng tròn và điều chỉnh tỷ lệ kích thước vòng tròn để thể hiện các tỷ lệ thực tế (như kích thước cơ sở dữ liệu hoặc quy mô đội nhóm).
venn-beta
set Front ["Frontend"]:10
text F1 ["React"]
text F2 ["CSS"]
set Back ["Backend"]:15
text B1 ["Node.js"]
text B2 ["PostgreSQL"]
union Front, Back ["Full-Stack"]:3
text FB1 ["Mô tả OpenAPI"]
text FB2 ["Next.js SSR"]
style Front fill:#E8F4FD, stroke:#0072B1
style Back fill:#FDF0E8, stroke:#E06000
Những lỗi cú pháp phổ biến
Sơ đồ Venn là một tính năng hoàn toàn mới trong cốt lõi cú pháp Mermaid. Hãy ghi nhớ ba quy tắc thiết kế cấu trúc sau để đảm bảo đồ họa của bạn hiển thị trơn tru:
- Ưu tiên thứ tự:Bạn phải khai báo hoàn toàn các dòng
settrước khi tham chiếu chúng trong bất kỳ khối nàounionblock. Việc tham chiếu một định danh chưa được khai báo rõ ràng sẽ làm lỗi quá trình xây dựng. - Theo dõi dấu phẩy Union: Khi xây dựng một
unioncủa nhiều tập hợp, hãy đảm bảo có dấu phẩy tách biệt các định danh của bạn, nhưng không có dấu phẩy thừa ngay trước nhãn ngoặc vuông.union A, B, C ["Nhãn"]là đúng. - Độ ổn định phiên bản Beta: Vì kiểu bố cục này sử dụng cờ
venn-betanên các quy tắc tùy chỉnh phong cách phần tử nâng cao có thể thay đổi giữa các phiên bản. Hãy sử dụng mã màu hex cơ bản cho các biếnfillvàstrokeđể đạt được khả năng tương thích tối đa.