Markdown treemap maker

Make a treemap from a nested list of numbers. Group the values in a Mermaid block to show a simple part-of-whole breakdown inline in your document.

Mermaid treemap syntax

A treemap is a tree of boxes. You write each node as a quoted name on its own line, and indent it under its parent. A leaf node ends with a colon and a number. A branch node has children instead of a number, and its box is the total of everything inside it. Here is each piece you can write.

Basic treemap

Start with the word treemap-beta. List each node as a quoted name. Indent a node to make it a child of the one above. Give a leaf its size with a colon and a number.

You write

treemap-beta
"Products"
    "Electronics"
        "Phones": 45
        "Laptops": 30
    "Clothing"
        "Shirts": 20
    "Books": 15

You get

Title

Add a title line under the header to name the map.

You write

treemap-beta
title Traffic by source
"Search": 120
"Direct": 80
"Social": 45

You get

Several groups

Write more than one top-level node to compare whole groups side by side. Each branch box is the sum of its leaves.

You write

treemap-beta
"Income"
    "Salary": 60
    "Interest": 10
"Spending"
    "Rent": 30
    "Food": 20
    "Travel": 15

You get

Cheat sheet

Write this	You get
`treemap-beta`	Start a treemap
`title Text`	Name the treemap
`"Name": 45`	A leaf box with its value
`"Name"` then indented lines	A branch, sized by the total of its children
Deeper indent	Makes the node a child of the one above