Un diagrama de árbol muestra datos jerárquicos como un conjunto de rectángulos anidados. Cada rama del árbol se representa mediante un rectángulo, que luego se divide en rectángulos más pequeños que representan subramas. El tamaño de cada rectángulo es perfectamente proporcional a su valor numérico, lo que lo convierte en una excelente opción de texto a diagrama para comparar partes de un todo dentro de niveles de categorías complejas.
Estructura básica de sintaxis
Cada diagrama de árbol comienza con el treemap-beta declaración. A continuación, declaras nodos padres estructurales utilizando nombres entre comillas, y asignas nodos hoja individuales agrupándolos debajo con espacios de sangría estándar y añadiendo dos puntos seguidos de su peso numérico.
treemap-beta
"Nombre de la categoría principal"
"Subcategoría A": 45
"Subcategoría B": 30
"Subcategoría C": 25
Referencia de sintaxis
La tabla a continuación desglosa los requisitos principales de formato utilizados para crear un diseño de diagrama de árbol en Mermaid.js.
| Componente | Descripción | Regla de sintaxis |
|---|---|---|
| Declaración | Inicializa el motor de estructura de diseño para conjuntos de datos rectangulares anidados. | treemap-beta |
| Nodo padre | Define un límite de agrupación o categoría padre. El texto siempre debe ir entre comillas dobles. | "Infraestructura en la nube" |
| Nodo hoja | Un elemento de datos anidado que lleva un peso de valor específico. | Sangrado debajo de un padre utilizando dos puntos al final y un número positivo. |
| Datos jerárquicos | Determina qué elementos pertenecen a grupos específicos utilizando la profundidad del texto. | Controlado completamente mediante niveles estándar de sangría (espacios o tabulaciones). |
Formateo avanzado de datos (directivas)
Por defecto, Mermaid muestra recuentos numéricos sin procesar. Sin embargo, puedes pasar un bloque de configuración de frontmatter utilizando el valueFormat propiedad para formatear números como moneda, decimales o porcentajes.
Patrones de formato comunes
| Cadena de formato | Tipo de resultado | Salida de ejemplo |
|---|---|---|
'$0,0' |
Símbolo de dólar con separador de miles estándar. | $400,000 |
'.1f' |
Muestra el número con exactamente un lugar decimal. | 45.2 |
'.1%' |
Convierte el valor de peso sin procesar en una visualización porcentual. | 35.4% |
Plantilla de datos financieros
Esta plantilla demuestra cómo formatear un presupuesto corporativo operativo utilizando parámetros de cadena financieros personalizados:
---
config:
treemap:
valueFormat: '$0,0'
---
treemap-beta
"Presupuesto Corporativo"
"Operaciones de Ingeniería"
"Infraestructura Principal": 500000
"Herramientas para Desarrolladores": 150000
"Marketing de Crecimiento"
"Campañas de Publicidad Pagada": 350000
"Patrocinios de Eventos": 80000
Estilo personalizado de nodos (clases)
Para resaltar nodos críticos, valores atípicos o áreas de alto riesgo en su documentación, puede definir y aplicar estilos CSS personalizados de forma nativa dentro del bloque de código usandoclassDef reglas.
treemap-beta
"Uso de Recursos del Sistema"
"Servicios Web"
"Pasarela de API": 45
"Servicio de Autenticación": 95:::critical
"Almacenamiento de Base de Datos"
"Caché de DB Principal": 60
"Nodos de Sincronización de Réplica": 25
classDef critical fill:#ffcccc,stroke:#ff0000,stroke-width:2px;
Consejo de sintaxis: Para aplicar una definición de clase a un nodo hoja que contiene un valor numérico, agregue el nombre de la clase usando tres puntos (::::className) inmediatamente después del nombre de la etiqueta, pero *antes* del separador de valor de dos puntos.
Errores comunes de sintaxis y limitaciones
Dado que el esquema de treemap utiliza la sangría de texto estructural, pequeños errores de formato pueden causar problemas de representación de diseño. Tenga en cuenta estos parámetros:
- Valores negativos no permitidos:Los treemaps dependen del llenado proporcional del espacio y matemáticamente no pueden representar números negativos ni pesos cero. Asegúrese de que todos los valores de datos sean enteros positivos o decimales.
- Encerramientos con comillas:Cada descripción de nodo—independientemente de si es una rama principal o un pequeño elemento hoja—debe envolverse limpiamente entre comillas dobles. Omitir los corchetes de comillas provoca errores de sintaxis inmediatos.
- Uniformidad de espacios en blanco:La relación anidada de padre-hijo se determina únicamente por la cantidad de espacios que hay al principio de la línea. Adhírase a una regla consistente de longitud de tabulación o espacios (como dos espacios por nivel) para evitar que los nodos terminen en el grupo incorrecto.
- Visibilidad de las etiquetas:Valores muy pequeños dentro de estructuras jerárquicas profundas pueden dar lugar a pequeños mosaicos rectangulares donde el texto se desborda o se vuelve completamente ilegible. Considere agrupar elementos pequeños juntos bajo una categoría de «Otros».