← All diagram types

Mermaid treemap syntax: nested rectangles and values with examples

Mermaid treemap-beta syntax with rendered examples: indentation-built hierarchy, values that size each cell, nested sections and squarified layout.

A treemap fills a rectangle with nested rectangles whose area is their value: disk usage, spend by category, revenue by product line. Mermaid's treemap-beta derives the nesting from indentation and the sizes from the numbers.

Everything on this page is rendered by makesPDF's own Mermaid renderer, so a ```mermaid block produces exactly this in the PDF.

Sections and leaves

A line with no value is a section — it groups the lines indented under it. A line with : value is a leaf, and its area is proportional to that value:

mermaid
treemap-beta
  "Electronics"
    "Phones": 50
    "Computers": 30
    "Accessories": 20
  "Clothing"
    "Men's": 40
    "Women's": 35
    "Kids": 25
Render this to PDF →How diagram blocks work

Names are normally quoted. Indentation — spaces or tabs — is the only thing that decides the hierarchy, so align the members of a section with each other.

Nested sections

A section inside a section gets a header strip of its own, and the leaves below it fill the remaining space. Any depth works:

mermaid
treemap-beta
  "Home & Garden"
    "Furniture": 45
    "Kitchen"
      "Cookware": 20
      "Appliances": 30
    "Decor": 15
  "Garden"
    "Tools": 25
    "Plants": 10
Render this to PDF →How diagram blocks work

A section's own area is the sum of its leaves — writing a value on a section line as well does not double-count it; the children win.

Values are relative

The numbers are weights, not units: 50 and 25 produce a cell twice the area, whatever the label says. Any positive number works, and a value of zero or less is skipped rather than drawing a cell with no area:

mermaid
treemap-beta
  "Traffic sources"
    "Organic search": 12500
    "Direct": 6200
    "Referral": 2100
  "Paid"
    "Search ads": 4800
    "Social ads": 1900
Render this to PDF →How diagram blocks work

Reading the cells

Every cell shows its name and value when both fit, and a cell too small for the text is drawn bare rather than overflowing — so a crowded treemap stays legible at a glance:

mermaid
treemap-beta
  "Platform"
    "Web": 48
    "iOS": 26
    "Android": 18
    "Desktop": 8
Render this to PDF →How diagram blocks work

Not supported in makesPDF yet: a :::class suffix and classDef styling are stripped rather than applied, so cells use the renderer's own palette. Section names are fit-checked: a branch too narrow for its name draws the header strip without the label, and a very small one draws no strip at all.