树状图将分层数据以一组嵌套矩形的形式展示。树的每个分支由一个矩形表示，该矩形再被更小的矩形平铺，以表示子分支。每个矩形的大小与其数值完全成比例，使其成为在复杂类别层级中比较整体各部分的绝佳文本转图表选择。
基本语法结构
每个树状图都以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 自定义样式。
Mermaid
Edit Mermaid in VPasCode
treemap-beta
"系统资源使用情况"
"Web 服务"
"API 网关": 45
"认证服务": 95:::critical
"数据库存储"
"主数据库缓存": 60
"副本同步节点": 25
classDef critical fill:#ffcccc,stroke:#ff0000,stroke-width:2px;
语法提示： 要将类定义应用于包含数值的叶节点，请使用三个冒号（:::className) 紧接在标签名称之后，但位于冒号值分隔符之前。
常见语法陷阱与限制
由于树状图模式利用了结构化文本缩进，微小的格式错误可能导致布局渲染问题。请牢记以下参数：
- 禁止负值：树状图依赖于比例空间填充，从数学上无法渲染负数或零权重。请确保所有数据值均为正整数或小数。
- 引号包裹： 每个节点描述——无论它是父分支还是微小的叶元素——都必须用双引号清晰包裹。省略引号会导致立即出现语法错误。
- 空格一致性： 嵌套的父子关系完全由行首的空格数量决定。请坚持使用一致的制表符或空格长度规则（例如每级两个空格），以防止节点被错误地归入某个组。
- 标签可见性： 深层次结构中的极小数值可能导致极小的矩形区块，使得文本溢出或完全无法阅读。建议将小项目合并到“其他”类别下。