Mermaid Baumdiagramm-Spickzettel

Verschachtelte Rechtecke, deren Fläche der Wert ist.

Jedes Bild auf dieser Seite wurde gezeichnet von

Mernyx, dem nativen Mermaid-Editor für macOS. Nicht von einem Browser mit Mermaid.js — demselben Renderer, den die App für ihre Leinwand nutzt.

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.

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

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

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

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

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