Treemaps

Use a treemap to compare sizes, costs, or counts by area, with optional nesting. It is the same view as a disk-usage tool.

treemap-beta
title "Repo footprint (MB)"
"src"
    "components": 420
    "utils": 180
    "styles": 90
"node_modules"
    "react": 310
    "webpack": 260
    "misc": 150
"assets"
    "images": 220
    "fonts": 45
"docs": 60

The first keyword is treemap-beta (or the bare treemap alias). An optional title <text> sits on its own line.

Each remaining line is a node. "Label": value is a leaf. The quotes are optional and the value is a number. "Label" alone is a section. It carries no value of its own and sizes itself as the sum of its descendant leaves. Indentation nests a line under the nearest less-indented line. Multiple top-level sections and leaves are allowed: a treemap is a forest, not a single-rooted tree.

Tile area is proportional to value, laid out with a squarified treemap so tiles stay near-square. Each top-level section gets its own color in source order. Descendants keep their root’s color, fading with depth, so a subtree reads as one family. Labels (and leaf values) appear when a tile is big enough and are hidden before they would overflow.

A zero, negative, or non-numeric value turns the line into a valueless section instead of failing. Its own children still count. :::className / classDef styling is accepted (and stripped from labels) but not rendered yet.

Because treemap-beta is real Mermaid syntax, the same fence renders on GitHub and any other Mermaid-aware host.