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
  }
});

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

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

3.2 KiB Raw Blame History