Diagramas de Venn mostram relações lógicas entre conjuntos ou grupos de dados diferentes usando círculos sobrepostos. Essa abordagem baseada em texto permite ilustrar rapidamente conceitos que residem na interseção de múltiplas categorias, sem precisar manipular ferramentas manuais de design gráfico.
Estrutura Básica de Sintaxe
Todo diagrama de Venn começa com o venn-beta declaração, seguida pela definição de grupos individuais usando o set palavra-chave. Em seguida, você define como esses grupos se sobrepõem usando o union palavra-chave.
venn-beta
set GrupoA ["Rótulo A"]
set GrupoB ["Rótulo B"]
union GrupoA, GrupoB ["Rótulo da Interseção"]
Referência de Sintaxe
A tabela abaixo detalha os elementos principais usados para construir um diagrama de Venn no Mermaid.js.
| Componente | Descrição | Exemplo de Sintaxe |
|---|---|---|
| Declaração | Inicializa o renderizador do diagrama de Venn (atualmente em beta). | venn-beta |
| Set | Define uma categoria de dados independente ou um círculo. Sempre forneça um identificador e uma etiqueta de exibição. | set A ["Equipe de Marketing"] |
| Union | Define uma área de sobreposição entre dois ou mais conjuntos. Separe os identificadores com uma vírgula. | union A,B ["Metas Compartilhadas"] |
| Modificador de Tamanho | Um opcional :N sufixo que escala o tamanho do círculo ou da interseção de forma relativa. |
set A ["Grupo Grande"]:15 |
| Nó de Texto | Um bloco recuado usado para listar pontos específicos diretamente dentro de um conjunto ou área de interseção. | text ItemId ["Marcador Específico"] |
Plano Real: Análise de Oportunidade de Produto
Este plano demonstra um framework clássico de estratégia de desenvolvimento de produto que mapeia os pontos de dor do usuário, os objetivos do negócio e a viabilidade técnica para identificar com precisão o lançamento ideal de um recurso.
venn-beta
set NecessidadeDoUsuario ["Pontos de Dor do Usuário"]
set MetaDeNegócios ["Valores de Negócios"]
set ViabilidadeTécnica ["Capacidade Técnica"]
union NecessidadeDoUsuario, MetaDeNegócios ["Vitórias Estratégicas"]
union NecessidadeDoUsuario, ViabilidadeTécnica ["Recursos Não Monetizados"]
union MetaDeNegócios, ViabilidadeTécnica ["Automação Interna"]
union NecessidadeDoUsuario, MetaDeNegócios, ViabilidadeTécnica ["O Ponto Ideal do Produto"]
Dica de Sintaxe: Quando usar três ou mais categorias, o Mermaid mapeia automaticamente as interseções aninhadas para você. Basta declarar a última interseção de três viasunion com todos os três identificadores separados por vírgulas, e o motor colocará a etiqueta perfeitamente na sobreposição central.
Conceito Avançado: Marcadores e Dimensionamento
Para documentação mais técnica, você pode inserir marcadores de texto específicos diretamente em seus círculos e ajustar a escala dos círculos para representar proporções reais (como tamanhos de banco de dados ou número de equipes).
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 ["Especificações OpenAPI"]
text FB2 ["Next.js SSR"]
style Front fill:#E8F4FD, stroke:#0072B1
style Back fill:#FDF0E8, stroke:#E06000
Armadilhas Comuns de Sintaxe
Diagramas de Venn são novos no núcleo da sintaxe do Mermaid. Mantenha estas três regras de design estrutural em mente para garantir que seus gráficos sejam exibidos suavemente:
- Priorize a Ordem: Você deve declarar completamente suas linhas individuais
setantes de referenciá-las em qualquerunionbloco. Referenciar um identificador que não tenha sido criado explicitamente quebrará a compilação. - Observe as vírgulas da união: Ao construir uma
uniãode múltiplos conjuntos, certifique-se de que há vírgulas separando seus identificadores, mas nenhuma vírgula após a última antes da etiqueta entre colchetes.união A, B, C ["Rótulo"]está correto. - Estabilidade da Versão Beta: Como este estilo de layout usa a
venn-betabandeira, regras avançadas de estilização personalizada de elementos podem mudar entre versões. Mantenha-se com códigos de cores hexadecimais básicos parapreenchimentoetraçovariáveis para máxima compatibilidade cruzada.