Treemap Diagrams

A treemap diagram displays hierarchical data as a set of nested rectangles.

Treemap diagrams are useful for visualizing hierarchical structures where the size of each rectangle can represent a quantitative value.

Syntax

The syntax for creating a treemap is straightforward. It uses indentation to define the hierarchy and allows you to specify values for the leaf nodes.

treemap
    Root
        Branch 1
            Leaf 1.1: 10
            Leaf 1.2: 15
        Branch 2
            Leaf 2.1: 20
            Leaf 2.2: 25

In the example above:

Root is the top-level node
Branch 1 and Branch 2 are children of Root
The leaf nodes (Leaf 1.1, etc.) have values specified after a colon

Examples

Basic Treemap

treemap
    Root
        Branch 1
            Leaf 1.1: 10
            Leaf 1.2: 15
        Branch 2
            Leaf 2.1: 20
            Leaf 2.2: 25
            Leaf 2.3: 30

Technology Stack Treemap

treemap
    Technology Stack
        Frontend
            React: 35
            CSS: 15
            HTML: 10
        Backend
            Node.js: 25
            Express: 10
            MongoDB: 15
        DevOps
            Docker: 10
            Kubernetes: 15
            CI/CD: 5

Project Resource Allocation

treemap
    Project Resources
        Development
            Frontend: 20
            Backend: 25
            Database: 15
        Testing
            Unit Tests: 10
            Integration Tests: 15
            E2E Tests: 10
        Deployment
            Staging: 5
            Production: 10

Configuration

You can configure the appearance of treemap diagrams in your Mermaid configuration:

mermaid.initialize({
  treemap: {
    useMaxWidth: true,
    padding: 10,
    showValues: true,
    nodeWidth: 100,
    nodeHeight: 40,
    borderWidth: 1,
    valueFontSize: 12,
    labelFontSize: 14,
    valueFormat: ','
  }
});

Key configuration options:

Parameter	Description	Default
useMaxWidth	Use available width to scale the diagram	true
padding	Padding between nodes	10
showValues	Show values in leaf nodes	true
nodeWidth	Default width of nodes	100
nodeHeight	Default height of nodes	40
borderWidth	Width of node borders	1
valueFontSize	Font size for values	12
labelFontSize	Font size for node labels	14
valueFormat	Format string for values (D3 format)	','

Value Formatting

You can customize how values are displayed in the treemap using the valueFormat configuration option. This option primarily uses D3's format specifiers to control how numbers are displayed, with some additional special cases for common formats.

Common format patterns:

, - Thousands separator (default)
$ - Add dollar sign
.1f - Show one decimal place
.1% - Show as percentage with one decimal place
$0,0 - Dollar sign with thousands separator
$.2f - Dollar sign with 2 decimal places
$,.2f - Dollar sign with thousands separator and 2 decimal places

The treemap diagram supports both standard D3 format specifiers and some common currency formats that combine the dollar sign with other formatting options.

Example with currency formatting:

%%{init: {'treemap': {'valueFormat': '$0,0'}}}%%
treemap
    Budget
        Development
            Frontend: 250000
            Backend: 350000
        Marketing
            Digital: 150000
            Print: 50000

Example with percentage formatting:

%%{init: {'treemap': {'valueFormat': '.1%'}}}%%
treemap
    Market Share
        Company A: 0.35
        Company B: 0.25
        Company C: 0.15
        Others: 0.25

Notes and Limitations

The treemap diagram is designed for hierarchical visualization only
Deep hierarchies may result in very small rectangles that are difficult to read
For best results, limit your hierarchy to 3-4 levels
Values should be provided only for leaf nodes

Styling

You can style the different elements of the treemap using CSS. The key classes are:

.treemapNode - All nodes
.treemapSection - Non-leaf nodes
.treemapLeaf - Leaf nodes
.treemapLabel - Node labels
.treemapValue - Node values
.treemapTitle - Diagram title

4.6 KiB Raw Blame History