Treemaps

Best for “where did it all go” — sizes, costs, or counts compared by area, with optional nesting. The classic disk-usage visualization.

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, and multiple top-level sections/leaves are fine — 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 drop out before they’d 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.