Диаграммы Венна показывают логические отношения между различными наборами или группами данных с использованием перекрывающихся кругов. Этот текстовый подход позволяет быстро иллюстрировать концепции, находящиеся на пересечении нескольких категорий, не прибегая к ручным инструментам графического дизайна.
Базовая структура синтаксиса
Каждая диаграмма Венна начинается с venn-beta объявления, за которым следует определение отдельных групп с помощью ключевого слова set ключевого слова. Затем вы определяете, как эти группы пересекаются, используя ключевое слово union ключевое слово.
venn-beta
set GroupA ["Метка A"]
set GroupB ["Метка B"]
union GroupA, GroupB ["Метка пересечения"]
Справочник по синтаксису
В таблице ниже приведены основные элементы, используемые для построения диаграммы Венна в Mermaid.js.
| Компонент | Описание | Пример синтаксиса |
|---|---|---|
| Объявление | Инициализирует рендерер диаграммы Венна (в настоящее время в бета-версии). | venn-beta |
| Множество | Определяет автономную категорию данных или круг. Всегда указывайте идентификатор и метку отображения. | set A ["Маркетинговая команда"] |
| Объединение | Определяет область пересечения между двумя или более множествами. Разделяйте идентификаторы запятыми. | union A,B ["Общие цели"] |
| Модификатор размера | Необязательный :N суффикс, который относительно масштабирует размер круга или пересечения. |
set A ["Большая группа"]:15 |
| Узел текста | Отступленный блок, используемый для перечисления конкретных пунктов непосредственно внутри множества или области пересечения. | text ItemId ["Конкретный маркер"] |
Реальный проект: анализ возможностей продукта
Этот шаблон демонстрирует классическую стратегическую модель разработки продукта, отображающую болевые точки пользователей, бизнес-цели и техническую реализуемость, чтобы точно определить идеальный выпуск функции.
venn-beta
set UserNeed ["Болевые точки пользователей"]
set BusinessGoal ["Бизнес-ценности"]
set TechFeasible ["Техническая реализуемость"]
union UserNeed, BusinessGoal ["Стратегические победы"]
union UserNeed, TechFeasible ["Немонетизированные функции"]
union BusinessGoal, TechFeasible ["Внутренняя автоматизация"]
union UserNeed, BusinessGoal, TechFeasible ["Оптимальная точка продукта"]
Совет по синтаксису: При использовании трех или более категорий Mermaid автоматически отображает вложенные пересечения. Просто объявите окончательное пересечение трех направленийunion с тремя идентификаторами, разделенными запятыми, и движок поместит метку идеально в центре пересечения.
Расширенное понятие: маркеры и масштабирование
Для более подробной технической документации вы можете вставлять конкретные текстовые маркеры непосредственно в свои круги и настраивать масштабирование кругов, чтобы отразить реальные пропорции (например, размеры баз данных или численность команд).
venn-beta
set Front ["Фронтенд"]:10
text F1 ["React"]
text F2 ["CSS"]
set Back ["Бэкенд"]:15
text B1 ["Node.js"]
text B2 ["PostgreSQL"]
union Front, Back ["Full-Stack"]:3
text FB1 ["Спецификации OpenAPI"]
text FB2 ["Next.js SSR"]
style Front fill:#E8F4FD, stroke:#0072B1
style Back fill:#FDF0E8, stroke:#E06000
Распространенные ошибки синтаксиса
Диаграммы Венна — новая функция в ядре синтаксиса Mermaid. Помните об этих трех правилах структурного проектирования, чтобы убедиться, что ваши графики отображаются плавно:
- Приоритет порядка: Вы должны полностью объявить свои отдельные
setстроки до того, как ссылаться на них в любомunionблоке. Ссылка на идентификатор, который не был явно создан, приведет к сбою сборки. - Следите за запятыми в объединении: При построении
объединениянескольких множеств убедитесь, что запятые разделяют ваши идентификаторы, но не должно быть запятой сразу перед меткой скобки.объединение A, B, C ["Метка"]является правильным. - Стабильность версии бета: Поскольку этот стиль макета использует флаг
venn-betaфлаг, правила настройки стиля элементов могут изменяться между версиями. Используйте базовые шестнадцатеричные коды цветов длязаливкииобводкипеременных для максимальной совместимости.