Ein Treemap-Diagramm zeigt hierarchische Daten als Satz verschachtelter Rechtecke an. Jeder Ast des Baums wird durch ein Rechteck dargestellt, das dann mit kleineren Rechtecken gefüllt wird, die Unteräste darstellen. Die Größe jedes Rechtecks ist perfekt proportional zu seinem numerischen Wert, wodurch es eine hervorragende Wahl für die Umwandlung von Text in Diagramme ist, um Teile eines Ganzen innerhalb komplexer Kategorienstufen zu vergleichen.
Grundlegende Syntaxstruktur
Jedes Treemap beginnt mit dertreemap-beta Deklaration. Anschließend deklarieren Sie strukturelle Elternknoten mit Anführungszeichen umgebenen Namen und ordnen einzelne Kindblattknoten zu, indem Sie sie unterhalb mit standardmäßigen Einrückungsräumen gruppieren und einen Doppelpunkt sowie ihren numerischen Gewichtungswert hinzufügen.
treemap-beta
"Hauptkategorie Name"
"Unterkategorie A": 45
"Unterkategorie B": 30
"Unterkategorie C": 25
Syntax-Referenz
Die folgende Tabelle erläutert die wichtigsten Formatierungsanforderungen, die zur Erstellung einer Treemap-Anordnung in Mermaid.js verwendet werden.
| Komponente | Beschreibung | Syntaxregel |
|---|---|---|
| Deklaration | Initialisiert die Layout-Struktur-Engine für verschachtelte rechteckige Datensätze. | treemap-beta |
| Elternknoten | Definiert eine Gruppierungs-Grenze oder einen Elternkategorie. Der Text muss immer in doppelte Anführungszeichen gesetzt werden. | "Cloud-Infrastruktur" |
| Blattknoten | Ein verschachtelter Datenelement, das einen bestimmten Wertgewichtungsträger trägt. | Eingerückt unter einem Elternknoten mit einem nachgestellten Doppelpunkt und einer positiven Zahl. |
| Hierarchiedaten | Bestimmt, welche Elemente innerhalb bestimmter Gruppen liegen, indem Texttiefe verwendet wird. | Wird vollständig über standardmäßige Einrückungsebenen (Leerzeichen oder Tabs) gesteuert. |
Erweiterte Datenformatierung (Anweisungen)
Standardmäßig zeigt Mermaid rohe numerische Zählungen an. Sie können jedoch einen Frontmatter-Konfigurationsblock mit Hilfe vonvalueFormat Eigenschaft zum Formatieren von Zahlen als Währung, Dezimalzahlen oder Prozentwerte.
Häufige Formatmuster
| Formatzeichenfolge | Ergebnistyp | Beispiel-Ausgabe |
|---|---|---|
'$0,0' |
Dollarzeichen mit standardmäßiger Tausender-Trennung. | $400,000 |
'.1f' |
Zeigt die Zahl mit genau einer Dezimalstelle an. | 45.2 |
'.1%' |
Konvertiert den Rohgewichtswert in eine Prozentanzeige. | 35.4% |
Finanzdaten-Blueprint
Dieser Blueprint zeigt, wie ein operativer Unternehmenshaushalt mit benutzerdefinierten Finanzzeichenfolgenparametern formatiert wird:
---
config:
treemap:
valueFormat: '$0,0'
---
treemap-beta
"Unternehmenshaushalt"
"Engineering Operations"
"Kerninfrastruktur": 500000
"Entwicklerwerkzeuge": 150000
"Wachstums-Marketing"
"Bezahlte Werbekampagnen": 350000
"Veranstaltungssponsoring": 80000
Benutzerdefinierte Knoten-Stilisierung (Klassen)
Um kritische Knoten, Ausreißer oder hochriskante Bereiche in Ihrer Dokumentation hervorzuheben, können Sie benutzerdefinierte CSS-Stile innerhalb des Codeblocks mithilfe von classDef Regeln definieren und anwenden.
treemap-beta
"System-Ressourcennutzung"
"Webdienste"
"API-Gateway": 45
"Authentifizierungsdienst": 95:::kritisch
"Datenbank-Speicher"
"Primärer DB-Cache": 60
"Replikations-Synchronisationsknoten": 25
classDef kritisch fill:#ffcccc,stroke:#ff0000,stroke-width:2px;
Syntax-Tipp: Um eine Klassendefinition auf einen Blattknoten mit numerischem Wert anzuwenden, fügen Sie den Klassennamen mit drei Doppelpunkten (:::className) unmittelbar nach dem Beschriftungsnamen, aber *vor* dem Doppelpunktwerttrenner.
Häufige Syntax-Fehler und Einschränkungen
Da das Baumdiagrammschema die strukturelle Texteinrückung nutzt, können kleinere Formatierungsfehler zu Problemen bei der Layoutdarstellung führen. Beachten Sie diese Parameter:
- Negative Werte sind nicht erlaubt:Baumdiagramme beruhen auf proportionaler Flächenfüllung und sind mathematisch nicht in der Lage, negative Zahlen oder Gewichte von null darzustellen. Stellen Sie sicher, dass alle Datenwerte positive Ganzzahlen oder Dezimalzahlen sind.
- Anführungszeichen-Einschluss: Jede Knotenbeschreibung – unabhängig davon, ob es sich um einen übergeordneten Zweig oder ein winziges Blattelement handelt – muss sauber in doppelte Anführungszeichen gesetzt werden. Das Weglassen der Anführungszeichen führt zu sofortigen Syntax-Fehlern.
- Einheitlichkeit von Leerzeichen: Die verschachtelte Eltern-Kind-Beziehung wird ausschließlich durch die Anzahl der Leerzeichen zu Beginn der Zeile bestimmt. Halten Sie sich an eine einheitliche Regel für Tabulatoren oder Leerzeichen (z. B. zwei Leerzeichen pro Ebene), um zu verhindern, dass Knoten in der falschen Gruppe landen.
- Sichtbarkeit der Beschriftungen: Sehr kleine Werte innerhalb tiefer hierarchischer Strukturen können zu winzigen rechteckigen Kacheln führen, bei denen der Text überläuft oder vollständig unleserlich wird. Berücksichtigen Sie, kleine Elemente zusammen unter einer Kategorie „Sonstige“ zu gruppieren.