樹狀圖以一組嵌套的矩形顯示層次結構資料。樹的每個分支由一個矩形表示，然後以較小的矩形進行鋪排，代表子分支。每個矩形的大小與其數值完全成比例，使其成為在複雜分類層級中比較整體各部分的優秀文字轉圖示選擇。
基本語法結構
每個樹狀圖都以treemap-beta宣告開始。接著使用引號包覆的名稱宣告結構上的父節點，並透過標準縮排空格將個別的子葉節點分組於其下，再加上冒號與其數值權重來進行對應。
Mermaid
Edit Mermaid in VPasCode
treemap-beta
"主要類別名稱"
"子類別 A": 45
"子類別 B": 30
"子類別 C": 25
語法參考
下表分解了在 Mermaid.js 中建立樹狀圖佈局所使用的主格式要求。
| 元件 | 描述 | 語法規則 |
|---|---|---|
| 宣告 | 初始化嵌套矩形資料集的佈局結構引擎。 | treemap-beta |
| 父節點 | 定義一個群組邊界或父類別。文字必須始終用雙引號包覆。 | "雲端基礎設施" |
| 葉節點 | 一個具有特定值權重的嵌套資料元素。 | 使用尾隨冒號與正數，縮排於父節點之下。 |
| 層次資料 | 使用文字深度來決定哪些元素屬於特定群組。 | 完全透過標準縮排層級（空格或標籤）控制。 |
進階資料格式化（指令）
預設情況下，Mermaid 會顯示原始的數值計數。然而，您可以使用valueFormat 屬性，用於將數字格式化為貨幣、小數或百分比。
常見的格式範式
| 格式字串 | 結果類型 | 範例輸出 |
|---|---|---|
'$0,0' |
使用標準千位分隔符的美元符號。 | $400,000 |
'.1f' |
顯示恰好一位小數的數字。 | 45.2 |
'.1%' |
將原始重量值轉換為百分比顯示。 | 35.4% |
財務資料藍圖
此藍圖示範如何利用自訂財務字串參數來格式化營運企業預算：
Mermaid
Edit Mermaid in VPasCode
---
config:
treemap:
valueFormat: '$0,0'
---
treemap-beta
"企業預算"
"工程營運"
"核心基礎設施": 500000
"開發者工具": 150000
"成長行銷"
"付費廣告活動": 350000
"活動贊助": 80000
自訂節點樣式（類別）
為了強調文件中的關鍵節點、異常值或高風險區域，您可以在程式碼區塊內使用「classDef」規則原生定義並套用 CSS 自訂樣式：classDef規則。
Mermaid
Edit Mermaid in VPasCode
treemap-beta
"系統資源使用情況"
"網路服務"
"API 網關": 45
"驗證服務": 95:::critical
"資料庫儲存"
"主要資料庫快取": 60
"複本同步節點": 25
classDef critical fill:#ffcccc,stroke:#ff0000,stroke-width:2px;
語法提示： 若要將類別定義套用至包含數值的葉節點，請使用三個冒號（:::className) 在標籤名稱之後立即出現，但位於冒號值分隔符號之前。
常見語法陷阱與限制
由於樹狀圖模式利用結構化文字縮排，微小的格式錯誤可能導致佈局渲染問題。請記住以下參數：
- 禁止負值：樹狀圖依賴比例空間填充，數學上無法呈現負數或零權重。請確保所有資料值均為正整數或小數。
- 引號包圍： 每個節點描述——無論是父分支還是微小的葉節點——都必須乾淨地用雙引號包圍。省略引號會立即導致語法錯誤。
- 空白符號一致性： 嵌套的父節點-子節點關係僅由行首的空格數量決定。請遵循一致的製表符或空格長度規則（例如每級兩空格），以防止節點落入錯誤的群組。
- 標籤可見性： 深層級別結構中的極小值可能導致極小的矩形圖塊，使文字溢出或完全無法辨識。建議將小項目合併至「其他」類別下。