# Mermaid ツリーマップのチートシート

入れ子の長方形で、面積がそのまま値になるもの。

## セクションとリーフ

コロンのある行がリーフで、数字がその大きさです。コロンのない行がセクションで、その下の行はそのセクションのものです。

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

![2 つの長方形のツリーマップ。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
```

![1 つの大きな長方形のツリーマップ。Products が Electronics と Clothing に分かれ、Electronics がさらに Phones と Computers に分かれます。](/diagrams/treemap/nested.svg)

## 値が面積になる

数字の大きいリーフは大きな長方形になります。ここにある 3 つの数字は 3 つとも違う面積です。

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

![3 つの長方形（Servers、Design、Ops）に分かれるツリーマップ。Servers が一番広い面積を取っています。](/diagrams/treemap/proportions.svg)

## Mernyx で描いてみる

.mmd ファイルを開いて、キャンバスでノードを動かしてみてください。ソースコードもついてきます。macOS ネイティブで、ブラウザは介在しません。