Diagramy Vennera pokazują relacje logiczne między różnymi zestawami lub grupami danych za pomocą nakładających się okręgów. Ten podejście oparte na tekście pozwala szybko przedstawić koncepcje znajdujące się na przecięciu wielu kategorii, nie używając ręcznych narzędzi do projektowania graficznego.
Podstawowa struktura składni
Każdy diagram Vennera zaczyna się od venn-beta deklaracji, po której następuje definiowanie poszczególnych grup za pomocą słowa kluczowego set słowo kluczowe. Następnie definiujesz sposób, w jaki te grupy się nakładają, używając słowa kluczowego union słowo kluczowe.
venn-beta
set GroupA ["Etykieta A"]
set GroupB ["Etykieta B"]
union GroupA, GroupB ["Etykieta przecięcia"]
Odwołanie składniowe
Poniższa tabela rozkłada podstawowe elementy używane do tworzenia diagramu Vennera w Mermaid.js.
| Składnik | Opis | Przykład składni |
|---|---|---|
| Deklaracja | Inicjuje renderowanie diagramu Vennera (obecnie w wersji beta). | venn-beta |
| Zestaw | Definiuje samodzielny kategorie danych lub okrąg. Zawsze podaj identyfikator i etykietę do wyświetlenia. | set A ["Zespół marketingowy"] |
| Połączenie | Definiuje obszar nakładania się między dwoma lub więcej zestawami. Oddziel identyfikatory przecinkiem. | union A,B ["Wspólne cele"] |
| Modyfikator rozmiaru | Opcjonalny :N sufiks, który skaluje rozmiar okręgu lub obszaru przecięcia względnie. |
set A ["Duża grupa"]:15 |
| Węzeł tekstowy | Zakładka wcięta używana do wypisania konkretnych punktów bezpośrednio wewnątrz zbioru lub obszaru przecięcia. | text ItemId ["Specyficzny punkt"] |
Prawdziwy szablon: Analiza możliwości produktu
Ten szablon przedstawia klasyczny ramowy model strategii rozwoju produktu, który wskazuje punkty bólu użytkownika, cele biznesowe i możliwość techniczną, aby precyzyjnie określić optymalny moment wprowadzenia funkcji.
venn-beta
set UserNeed ["Punkty bólu użytkownika"]
set BusinessGoal ["Wartości biznesowe"]
set TechFeasible ["Możliwości techniczne"]
union UserNeed, BusinessGoal ["Strategiczne sukcesy"]
union UserNeed, TechFeasible ["Niemonetyzowane funkcje"]
union BusinessGoal, TechFeasible ["Automatyzacja wewnętrzna"]
union UserNeed, BusinessGoal, TechFeasible ["Idealny punkt produktu"]
Porada składniowa: Gdy używasz trzech lub więcej kategorii, Mermaid automatycznie mapuje zagnieżdżone przecięcia dla Ciebie. Po prostu zadeklaruj ostateczne przecięcie trzykierunkoweunion z wszystkimi trzema identyfikatorami oddzielonymi przecinkami, a silnik umieści etykietę idealnie w środkowym obszarze przecięcia.
Zaawansowane pojęcie: Punkty wyboru i skalowanie
W celu bardziej szczegółowej dokumentacji możesz wstawić konkretne punkty tekstowe bezpośrednio do okręgów i dostosować skalowanie okręgów, aby odzwierciedlać rzeczywiste proporcje (np. rozmiary baz danych lub liczba osób w zespole).
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 ["Specyfikacje OpenAPI"]
text FB2 ["Next.js SSR"]
style Front fill:#E8F4FD, stroke:#0072B1
style Back fill:#FDF0E8, stroke:#E06000
Typowe błędy składniowe
Diagramy Venna są całkowicie nowe w jądrze składni Mermaid. Pamiętaj o tych trzech zasadach projektowania strukturalnego, aby upewnić się, że Twoje grafiki wyświetlają się płynnie:
- Uwaga na kolejność: Musisz całkowicie zadeklarować swoje indywidualne
setlinie przed odwołaniem się do nich w jakimkolwiekunionbloku. Odwoływanie się do identyfikatora, który nie został jawnie utworzony, spowoduje awarię kompilacji. - Zwróć uwagę na przecinki w połączeniu: Podczas tworzenia
połączeniawielu zestawów, upewnij się, że przecinki oddzielają identyfikatory, ale nie ma przecinka bezpośrednio przed etykietą nawiasu.połączenie A, B, C ["Etykieta"]jest poprawne. - Stabilność wersji beta: Ponieważ ten styl układu używa flagi
venn-betaflaga, zaawansowane zasady niestandardowego stylizowania mogą się zmieniać między wersjami. Używaj podstawowych kodów szesnastkowych kolorów dlawypełnieniaiobrysuzmiennych, aby osiągnąć maksymalną kompatybilność między wersjami.