Un diagramme Treemap affiche des données hiérarchiques sous la forme d’un ensemble de rectangles imbriqués. Chaque branche de l’arbre est représentée par un rectangle, qui est ensuite pavé de rectangles plus petits représentant des sous-branches. La taille de chaque rectangle est parfaitement proportionnelle à sa valeur numérique, ce qui en fait un excellent choix pour la conversion texte-diagramme afin de comparer des parties d’un tout au sein de niveaux de catégories complexes.
Structure de syntaxe de base
Chaque diagramme Treemap commence par la déclaration treemap-beta déclaration. Ensuite, vous déclarez les nœuds parents structurels en utilisant des noms entre guillemets, et vous mappez les nœuds feuilles enfants individuels en les regroupant sous des espaces d’indentation standard et en ajoutant deux points suivis de leur poids numérique.
treemap-beta
"Nom de la catégorie principale"
"Sous-catégorie A": 45
"Sous-catégorie B": 30
"Sous-catégorie C": 25
Référence de syntaxe
Le tableau ci-dessous détaille les exigences principales de formatage utilisées pour créer une mise en page Treemap dans Mermaid.js.
| Composant | Description | Règle de syntaxe |
|---|---|---|
| Déclaration | Initialise le moteur de structure de mise en page pour les jeux de données rectangulaires imbriqués. | treemap-beta |
| Nœud parent | Définit une limite de regroupement ou une catégorie parente. Le texte doit toujours être encadré par des guillemets doubles. | "Infrastructure cloud" |
| Nœud feuille | Un élément de données imbriqué qui porte un poids de valeur spécifique. | Indenté sous un parent en utilisant deux points à la fin et un nombre positif. |
| Données hiérarchiques | Détermine quels éléments appartiennent à des groupes spécifiques en utilisant la profondeur du texte. | Contrôlé entièrement via les niveaux d’indentation standard (espaces ou tabulations). |
Formatage avancé des données (directives)
Par défaut, Mermaid affiche des comptages numériques bruts. Toutefois, vous pouvez passer un bloc de configuration frontmatter en utilisant le valueFormat propriété pour formater les nombres en devises, décimales ou pourcentages.
Modèles de format courants
| Chaîne de format | Type de résultat | Sortie d’exemple |
|---|---|---|
'$0,0' |
Signe dollar avec séparateur de milliers standard. | $400,000 |
'.1f' |
Affiche le nombre avec exactement une décimale. | 45.2 |
'.1%' |
Convertit la valeur brute de poids en affichage en pourcentage. | 35.4% |
Maquette de données financières
Cette maquette montre comment formater un budget opérationnel d’entreprise en utilisant des paramètres de chaîne financière personnalisés :
---
config:
treemap:
valueFormat: '$0,0'
---
treemap-beta
"Budget d'entreprise"
"Opérations Ingénierie"
"Infrastructure principale": 500000
"Outils de développement": 150000
"Marketing Croissance"
"Campagnes publicitaires payantes": 350000
"Parrainages d'événements": 80000
Stylisation personnalisée des nœuds (classes)
Pour mettre en évidence les nœuds critiques, les valeurs aberrantes ou les zones à haut risque dans votre documentation, vous pouvez définir et appliquer des styles CSS personnalisés directement dans le bloc de code à l’aide declassDef règles.
treemap-beta
"Utilisation des ressources système"
"Services Web"
"Passerelle API": 45
"Service d'authentification": 95:::critical
"Stockage de base de données"
"Cache principal de la base de données": 60
"Nœuds de synchronisation de réplique": 25
classDef critical fill:#ffcccc,stroke:#ff0000,stroke-width:2px;
Astuce de syntaxe : Pour appliquer une définition de classe à un nœud feuille contenant une valeur numérique, ajoutez le nom de la classe en utilisant trois deux-points (:::className) immédiatement après le nom de l’étiquette, mais *avant* le séparateur de valeur deux-points.
Péchés courants de syntaxe et limitations
Parce que le schéma de treemap utilise l’indentation du texte structurel, de petites erreurs de formatage peuvent entraîner des problèmes d’affichage du layout. Gardez ces paramètres à l’esprit :
- Valeurs négatives interdites :Les treemaps reposent sur un remplissage proportionnel de l’espace et sont mathématiquement incapables de représenter des nombres négatifs ou des poids nuls. Assurez-vous que toutes les valeurs de données sont des entiers positifs ou des décimaux.
- Encadrements par guillemets : Chaque description de nœud — qu’il s’agisse d’une branche parente ou d’un tout petit élément feuille — doit être entourée proprement de guillemets doubles. Omettre les crochets de guillemets provoque des erreurs de syntaxe immédiates.
- Uniformité des espaces blancs : La relation imbriquée parent-enfant est déterminée uniquement par le nombre d’espaces situés au début de la ligne. Respectez une règle cohérente pour les tabulations ou les espaces (par exemple, deux espaces par niveau) afin d’éviter que les nœuds ne se retrouvent dans le mauvais groupe.
- Visibilité des étiquettes : Les très petites valeurs au sein de structures hiérarchiques profondes peuvent entraîner de minuscules tuiles rectangulaires où le texte déborde ou devient complètement illisible. Pensez à regrouper les petits éléments sous une catégorie « Autres ».