Mermaid Treemap Diagrams

Treemaps visualize hierarchical data as nested rectangles, with size proportional to value. Perfect for showing proportions, file sizes, and hierarchical structures.

Use Case

Use treemaps when you need to:

• Show hierarchical proportions
• Visualize file/directory sizes
• Display category breakdowns
• Show nested data structures
• Compare relative sizes

Code

1```mermaid
2treemap-beta
3"Project Structure"
4    "Frontend": 40
5    "Backend": 35
6    "Database": 25
7```

Result:

treemap-beta
"Project Structure"
    "Frontend": 40
    "Backend": 35
    "Database": 25

Examples

Example 1: Project Structure

 1```mermaid
 2treemap-beta
 3"Codebase Structure"
 4    "Frontend"
 5        "Components": 20
 6        "Pages": 15
 7        "Utils": 10
 8    "Backend"
 9        "API": 15
10        "Services": 12
11        "Models": 8
12    "Tests"
13        "Unit": 12
14        "Integration": 8
15```

Result:

treemap-beta
"Codebase Structure"
    "Frontend"
        "Components": 20
        "Pages": 15
        "Utils": 10
    "Backend"
        "API": 15
        "Services": 12
        "Models": 8
    "Tests"
        "Unit": 12
        "Integration": 8

Example 2: Budget Allocation

 1```mermaid
 2treemap-beta
 3"Total Budget"
 4    "Development"
 5        "Backend": 25
 6        "Frontend": 20
 7        "DevOps": 5
 8    "Marketing"
 9        "Advertising": 15
10        "Content": 10
11        "Events": 5
12    "Operations"
13        "Infrastructure": 12
14        "Support": 8
15```

Result:

treemap-beta
"Total Budget"
    "Development"
        "Backend": 25
        "Frontend": 20
        "DevOps": 5
    "Marketing"
        "Advertising": 15
        "Content": 10
        "Events": 5
    "Operations"
        "Infrastructure": 12
        "Support": 8

Notes

• Keyword is treemap-beta (Mermaid 11.8.0+)
• Every label is double-quoted; leaves are "Label": value
• Indentation creates hierarchy; parents carry no value (their size is the sum of children)
• Can nest multiple levels

Gotchas/Warnings

• ⚠️ Indentation: Must be consistent for hierarchy
• ⚠️ Values: Only on leaves, positive numbers
• ⚠️ Nesting: Can nest multiple levels deep
• ⚠️ Proportions: Rectangle sizes proportional to values

Related Snippets

• Architecture Diagrams (C4 Model)
  Create system architecture diagrams using C4 model with Mermaid
• Chart.js Bar Chart
  Create bar charts for data visualization
• Graphviz DOT Diagrams
  Create complex graph layouts with Graphviz DOT language
• KaTeX Math Examples and Tips
  Comprehensive guide to KaTeX math notation with examples and tips
• Mermaid Arbitrary Graphs
  Create arbitrary graphs and networks with Mermaid
• Mermaid Block Diagrams
  Create block diagrams for system architecture with Mermaid
• Mermaid Charts (Pie, Bar, Line)
  Create pie charts, bar charts, and line charts with Mermaid
• Mermaid Class Diagrams (UML)
  Create UML class diagrams with Mermaid
• Mermaid Entity Relationship Diagrams
  Create Entity Relationship Diagrams (ERD) with Mermaid
• Mermaid Flowchart
  Create flowcharts and decision trees with Mermaid
• Mermaid Gantt Chart
  Create Gantt charts for project timelines and scheduling
• Mermaid Git Diagrams
  Create Git branch and commit diagrams with Mermaid
• Mermaid Kanban Boards
  Create Kanban boards for project management with Mermaid
• Mermaid Mindmaps
  Create mindmaps for brainstorming and organizing ideas with Mermaid
• Mermaid Packet Diagrams
  Create packet diagrams for network protocols with Mermaid
• Mermaid Quadrant Charts
  Create quadrant charts for prioritization with Mermaid
• Mermaid Radar Charts
  Create radar charts for multi-dimensional comparisons with Mermaid
• Mermaid Requirement Diagrams
  Create requirement diagrams for system requirements with Mermaid
• Mermaid Sankey Diagrams
  Create Sankey diagrams for flow visualization with Mermaid
• Mermaid Sequence Diagram
  Create sequence diagrams for interactions and API flows
• Mermaid State Diagrams
  Create state diagrams and state machines with Mermaid
• Mermaid Timeline Diagrams
  Create timeline diagrams for chronological events with Mermaid
• Mermaid User Journey Diagrams
  Create user journey maps with Mermaid
• Mermaid ZenUML Diagrams
  Create ZenUML sequence diagrams with Mermaid
• P5.js Interactive Visualizations
  Create interactive visualizations and animations with P5.js