Los diagramas de Venn muestran relaciones lógicas entre diferentes conjuntos o grupos de datos utilizando círculos superpuestos. Este enfoque basado en texto te permite ilustrar rápidamente conceptos que se encuentran en la intersección de múltiples categorías sin tener que lidiar con herramientas de diseño gráfico manual.
Estructura básica de sintaxis
Cada diagrama de Venn comienza con la venn-beta declaración, seguida de la definición de grupos individuales usando la set palabra clave. Luego defines cómo se superponen esos grupos usando la union palabra clave.
venn-beta
set GrupoA ["Etiqueta A"]
set GrupoB ["Etiqueta B"]
union GrupoA, GrupoB ["Etiqueta de intersección"]
Referencia de sintaxis
La tabla a continuación desglosa los elementos principales utilizados para construir un diagrama de Venn en Mermaid.js.
| Componente | Descripción | Ejemplo de sintaxis |
|---|---|---|
| Declaración | Inicializa el renderizador del diagrama de Venn (actualmente en beta). | venn-beta |
| Conjunto | Define una categoría de datos independiente o un círculo. Siempre proporciona un identificador y una etiqueta de visualización. | set A ["Equipo de Marketing"] |
| Unión | Define un área de superposición entre dos o más conjuntos. Separa los identificadores con una coma. | union A,B ["Objetivos compartidos"] |
| Modificador de tamaño | Un opcional :N sufijo que escala el tamaño del círculo o la intersección de forma relativa. |
set A ["Gran Grupo"]:15 |
| Nodo de texto | Un bloque con sangría utilizado para listar puntos específicos directamente dentro de un conjunto o área de intersección. | text ItemId ["Viñeta específica"] |
Plantilla del mundo real: Análisis de oportunidades de producto
Esta plantilla muestra un marco clásico de estrategia de desarrollo de productos que representa los puntos de dolor del usuario, los objetivos del negocio y la viabilidad técnica para identificar con precisión el lanzamiento ideal de una característica.
venn-beta
set UserNeed ["Puntos de dolor del usuario"]
set BusinessGoal ["Valores del negocio"]
set TechFeasible ["Capacidad técnica"]
union UserNeed, BusinessGoal ["Victorias estratégicas"]
union UserNeed, TechFeasible ["Características no monetizadas"]
union BusinessGoal, TechFeasible ["Automatización interna"]
union UserNeed, BusinessGoal, TechFeasible ["El punto óptimo del producto"]
Consejo de sintaxis: Cuando se usan tres o más categorías, Mermaid mapea automáticamente las intersecciones anidadas por ti. Simplemente declara la unión final de tres víasunión con los tres identificadores separados por comas, y el motor colocará la etiqueta perfectamente en la superposición central.
Concepto avanzado: Viñetas y escalado
Para documentación más técnica, puedes insertar viñetas de texto específicas directamente en tus círculos y ajustar la escala de los círculos para representar proporciones reales (como tamaños de bases de datos o número de empleados en un equipo).
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 ["Especificaciones OpenAPI"]
text FB2 ["SSR con Next.js"]
style Front fill:#E8F4FD, stroke:#0072B1
style Back fill:#FDF0E8, stroke:#E06000
Errores comunes de sintaxis
Los diagramas de Venn son nuevos en el núcleo de sintaxis de Mermaid. Ten en cuenta estas tres reglas de diseño estructural para asegurarte de que tus gráficos se muestren sin problemas:
- Prioriza el orden: Debes declarar completamente tus líneas individuales
setantes de referenciarlas en cualquier bloqueuniónbloque. Referenciar un identificador que no se haya creado explícitamente romperá la compilación. - Observa las comas de unión: Al construir una
uniónde múltiples conjuntos, asegúrate de que haya comas que separen tus identificadores, pero sin comas al final justo antes de la etiqueta de corchete.unión A, B, C ["Etiqueta"]es correcto. - Estabilidad de la versión beta: Debido a que este estilo de diseño utiliza la
bandera venn-betabandera, las reglas avanzadas de personalización de elementos pueden cambiar entre versiones. Adhírese a códigos de color hex básicos pararellenoytrazovariables para una compatibilidad cruzada máxima.