# Mermaid Baumdiagramm-Spickzettel

Verschachtelte Rechtecke, deren Fläche der Wert ist.

## Abschnitte und Blätter

Eine Zeile mit Doppelpunkt ist ein Blatt, und die Zahl ist seine Größe. Eine Zeile ohne ist ein Abschnitt, und die Zeilen darunter gehören ihm.

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

![Ein Baumdiagramm aus zwei Rechtecken, „Category A“ und „Category B“, das erste in „Item A1“ und „Item A2“ geteilt, das zweite mit „Item B1“.](/diagrams/treemap/basic.svg)

## Ein Abschnitt in einem Abschnitt

Die Einrückung ist die Hierarchie, und sie kann so tief gehen, wie du willst.

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

![Ein Baumdiagramm aus einem großen Rechteck, „Products“, geteilt in „Electronics“ und „Clothing“, wobei „Electronics“ noch einmal in „Phones“ und „Computers“ geteilt ist.](/diagrams/treemap/nested.svg)

## Der Wert ist die Fläche

Ein Blatt mit größerer Zahl bekommt ein größeres Rechteck. Die drei Zahlen hier sind drei verschiedene Flächen.

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

![Ein Baumdiagramm aus drei Rechtecken, „Servers“, „Design“ und „Ops“, von denen „Servers“ den meisten Platz einnimmt.](/diagrams/treemap/proportions.svg)

## In Mernyx zeichnen

Öffne eine .mmd-Datei, verschiebe einen Knoten auf dem Canvas, und der Quellcode kommt mit. Nativ auf macOS, ohne Browser dazwischen.