# Mermaid Treemap Cheat Sheet

Nested rectangles whose area is the value.

## Sections and leaves

A line with a colon is a leaf, and the number is its size. A line without one is a section, and the lines under it belong to it.

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

![A treemap of two rectangles, Category A and Category B, the first split into Item A1 and Item A2, the second holding Item B1.](/diagrams/treemap/basic.svg)

## A section inside a section

Indentation is the hierarchy, and it can go as deep as you like.

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

![A treemap of one large rectangle, Products, split into Electronics and Clothing, with Electronics split again into Phones and Computers.](/diagrams/treemap/nested.svg)

## The value is the area

A leaf with a bigger number gets a bigger rectangle. The three numbers here are three different areas.

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

![A treemap split into three rectangles, Servers, Design and Ops, with Servers taking most of the space.](/diagrams/treemap/proportions.svg)

## Draw it in Mernyx.

Open a .mmd file, move a node on the canvas, and the source comes with it. Native on macOS, no browser involved.