# Mermaid 矩形树图速查表

层层嵌套的矩形，面积就是数值。

## 分区与叶子

带冒号的一行是叶子，数字是它的大小。不带冒号的一行是分区，它下面的行归它所有。

```mermaid
treemap-beta
  "Category A"
    "Item A1": 10
    "Item A2": 20
  "Category B"
    "Item B1": 15
```

![一张矩形树图，两个矩形 Category A 和 Category B，第一个分成 Item A1 和 Item A2，第二个装着 Item B1。](/diagrams/treemap/basic.svg)

## 分区里的分区

缩进就是层级，想套多深都可以。

```mermaid
treemap-beta
  "Products"
    "Electronics"
      "Phones": 50
      "Computers": 30
    "Clothing"
      "Men's": 40
```

![一张矩形树图，一个大矩形 Products，分成 Electronics 和 Clothing，Electronics 又分成 Phones 和 Computers。](/diagrams/treemap/nested.svg)

## 数值就是面积

数字越大的叶子拿到的矩形越大。这里三个数字就是三块不同的面积。

```mermaid
treemap-beta
  "Budget"
    "Servers": 70
    "Design": 20
    "Ops": 10
```

![一张矩形树图分成三个矩形 Servers、Design 和 Ops，Servers 占的空间最大。](/diagrams/treemap/proportions.svg)

## 在 Mernyx 里画出来

打开一个 .mmd 文件，在画布上挪一个节点，源码跟着走。macOS 原生，不经过浏览器。