← All diagram types
MERMAID DIAGRAM GUIDE

Mermaid treemap online editor

Show hierarchical values as nested areas for quick comparison. Create the diagram in Mermaid Studio, preview it instantly, and export it when it is ready to share.

Open the Treemap editor See an example

WHAT IT IS FOR

Make the important relationships clear

Show hierarchical values as nested areas so readers can compare the relative size of categories at a glance.

  • Visualize portfolio composition
  • Show nested budgets or investments
  • Explain hierarchical data
Why use Mermaid Studio?
  • Write the source as versionable Mermaid code.
  • Preview changes immediately in the browser.
  • Export the finished diagram as SVG or PNG.
  • Start from a related template when you need a head start.

MERMAID EXAMPLE

Start with a working example

Copy the structure, replace the labels with your own domain, and continue in the full editor.

treemap-beta
  "Features"
    "Editor": 40
    "Sharing": 25
    "AI": 35

HOW TO START

Create your diagram in four steps

  1. 1Choose the hierarchy and the value represented by area.
  2. 2Keep category names short.
  3. 3Group children under the correct parent.
  4. 4Explain the measure and time period beside the diagram.

WRITING TIPS

Keep the diagram useful

Use area for one meaningful measure.

Keep labels short enough to scan.

FAQ

Frequently asked questions

What does a treemap diagram show?+

A treemap shows hierarchical categories as nested areas, where size represents a meaningful value.

When should I avoid a treemap?+

Avoid one when exact values or many similarly sized categories matter more than the hierarchy and overall composition.

TEMPLATES

Start from a related template

Feature investment treemap

Compare investment across feature areas as nested regions.

Open template

RELATED DIAGRAMS

Explore another Mermaid diagram

Mermaid flowchart

Visualize processes, decisions, and system flows with connected nodes.

Read the guide

Mermaid sequence diagram

Map requests, responses, and asynchronous events between services.

Read the guide

Mermaid class diagram

Design domain objects, properties, methods, inheritance, and relationships.

Read the guide

Mermaid ER diagram

Document database entities, fields, relationships, and cardinality.

Read the guide

Mermaid state diagram

Show how an object or workflow changes state in response to events.

Read the guide

Mermaid mindmap

Organize ideas and subtopics hierarchically around a central theme.

Read the guide

Ready to make a Treemap?

Open the editor with a working example and adapt it to your project.

Start in Mermaid Studio