Um diagrama Treemap exibe dados hierárquicos como um conjunto de retângulos aninhados. Cada ramo da árvore é representado por um retângulo, que depois é pavimentado com retângulos menores que representam sub-ramos. O tamanho de cada retângulo é perfeitamente proporcional ao seu valor numérico, tornando-o uma escolha excelente para conversão de texto em diagrama ao comparar partes de um todo em níveis complexos de categorias.
Estrutura Básica de Sintaxe
Todo diagrama Treemap começa com o treemap-beta declaração. Em seguida, você declara nós pais estruturais usando nomes entre aspas e mapeia nós folha individuais agrupando-os abaixo com espaçamento padrão de indentação e adicionando dois pontos seguidos pelo seu peso numérico.
treemap-beta
"Nome da Categoria Principal"
"Sub-Categoria A": 45
"Sub-Categoria B": 30
"Sub-Categoria C": 25
Referência de Sintaxe
A tabela abaixo detalha os requisitos principais de formatação usados para criar um layout Treemap no Mermaid.js.
| Componente | Descrição | Regra de Sintaxe |
|---|---|---|
| Declaração | Inicializa o motor de estrutura de layout para conjuntos de dados retangulares aninhados. | treemap-beta |
| Nó Pai | Define um limite de agrupamento ou categoria pai. O texto deve sempre estar entre aspas duplas. | "Infraestrutura em Nuvem" |
| Nó Folha | Um elemento de dados aninhado que carrega um peso de valor específico. | Indentado abaixo de um pai usando dois pontos finais e um número positivo. |
| Dados de Hierarquia | Determina quais elementos pertencem a grupos específicos usando a profundidade do texto. | Controlado inteiramente por níveis padrão de indentação (espaços ou tabs). |
Formatação Avançada de Dados (Diretivas)
Por padrão, o Mermaid exibe contagens numéricas brutas. No entanto, você pode passar um bloco de configuração de frontmatter usando o valueFormat propriedade para formatar números como moeda, decimais ou porcentagens.
Padrões Comuns de Formatação
| String de Formato | Tipo de Resultado | Saída de Exemplo |
|---|---|---|
'$0,0' |
Símbolo de dólar com separador padrão de milhares. | $400,000 |
'.1f' |
Exibe número com exatamente uma casa decimal. | 45.2 |
'.1%' |
Converte o valor bruto de peso em exibição em porcentagem. | 35.4% |
Modelo de Dados Financeiros
Este modelo demonstra como formatar um orçamento corporativo operacional utilizando parâmetros de string financeiros personalizados:
---
config:
treemap:
valueFormat: '$0,0'
---
treemap-beta
"Orçamento Corporativo"
"Operações de Engenharia"
"Infraestrutura Principal": 500000
"Ferramentas para Desenvolvedores": 150000
"Marketing de Crescimento"
"Campanhas de Anúncios Pagos": 350000
"Patrocínios de Eventos": 80000
Estilo Personalizado de Nós (Classes)
Para destacar nós críticos, valores atípicos ou áreas de alto risco em sua documentação, você pode definir e aplicar estilos CSS personalizados nativamente dentro do bloco de código usandoclassDef regras.
treemap-beta
"Uso de Recursos do Sistema"
"Serviços Web"
"API Gateway": 45
"Serviço de Autenticação": 95:::critical
"Armazenamento de Banco de Dados"
"Cache Principal do Banco de Dados": 60
"Nós de Sincronização de Réplica": 25
classDef critical fill:#ffcccc,stroke:#ff0000,stroke-width:2px;
Dica de Sintaxe: Para aplicar uma definição de classe a um nó folha que contém um valor numérico, acrescente o nome da classe usando três pontos (::::className) imediatamente após o nome da etiqueta, mas *antes* do separador de valor do dois-pontos.
Armadilhas Comuns de Sintaxe e Limitações
Como o esquema de treemap utiliza indentação textual estrutural, pequenos erros de formatação podem causar problemas na renderização do layout. Tenha esses parâmetros em mente:
- Valores Negativos Proibidos:Os treemaps dependem da preenchimento proporcional de espaço e são matematicamente incapazes de renderizar números negativos ou pesos iguais a zero. Certifique-se de que todos os valores de dados sejam inteiros positivos ou decimais.
- Delimitadores de Aspas:Cada descrição de nó — independentemente de ser uma ramificação pai ou um pequeno elemento folha — deve ser envolvida limpa e corretamente com aspas duplas. A omisão dos colchetes de aspas causa erros de sintaxe imediatos.
- Uniformidade de Espaços em Branco:A relação aninhada entre pai e filho é determinada exclusivamente pela quantidade de espaços que aparecem antes da linha. Mantenha uma regra consistente de tabulação ou comprimento de espaço (como dois espaços por nível) para evitar que os nós acabem em grupos incorretos.
- Visibilidade das Etiquetas:Valores muito pequenos dentro de estruturas hierárquicas profundas podem resultar em pequenos retângulos onde o texto transborda ou torna-se completamente ilegível. Considere agrupar itens pequenos juntos sob uma categoria denominada “Outros”.