Treemap Diagrams

Treemap diagrams display hierarchical data as nested rectangles, where the size and arrangement of each rectangle represents its position in the hierarchy. They are excellent for visualizing organizational structures, file systems, or any nested categorical data.

Basic Example

treemap
    Root
        Branch A
            Leaf 1
            Leaf 2
        Branch B
            Leaf 3
            Leaf 4

What You Get

Mermaid Studio provides full support for treemap diagrams:

• Syntax highlighting for nodes at different hierarchy levels
• Code completion for treemap syntax
• Rename refactoring to update node names consistently
• Find usages to locate node references
• Code folding to collapse branches
• Formatting to maintain proper indentation
• Inspections for structural issues
• Navigation bar for quick hierarchy browsing

Quick Syntax Reference

treemap
    Company
        Engineering
            Frontend Team
            Backend Team
            DevOps
        Product
            Design
            Research
        Sales
            North America
            Europe

Key elements:

• Hierarchy is defined by indentation
• Each line represents a node in the tree
• Child nodes are indented under their parent
• No special syntax required for connections - the structure is implicit

For complete syntax details, see the Mermaid Treemap documentation.