Skill Tracer
Skills › Scientific Agent Skills › markdown-mermaid-writing › treemap.md

treemap.md

75 lines · skills/markdown-mermaid-writing/references/diagrams/treemap.md at 5f2bc03

Open on GitHub
1<!-- Source: https://github.com/SuperiorByteWorks-LLC/agent-project | License: Apache-2.0 | Author: Clayton Young / Superior Byte Works, LLC (Boreal Bytes) -->
2
3# Treemap Diagram
4
5> **Back to [Style Guide](../mermaid_style_guide.md)** — Read the style guide first for emoji, color, and accessibility rules.
6
7**Syntax keyword:** `treemap-beta`
8**Tested Mermaid version:** 12.0.0; check support on older hosts
9**Best for:** Hierarchical data proportions, budget breakdowns, disk usage, portfolio composition
10**When NOT to use:** Simple flat proportions (use [Pie](pie.md)), flow-based hierarchy (use [Sankey](sankey.md))
12> **Accessibility:** Mermaid 12.0.0 emits `accTitle`/`accDescr` for this type. Keep a visible description and verify older destination renderers.
14> ⚠️ **GitHub support:** Treemap remains experimental — verify it renders on the target host before using.
16---

<!-- Source: https://github.com/SuperiorByteWorks-LLC/agent-project | License: Apache-2.0 | Author: Clayton Young / Superior Byte Works, LLC (Boreal Bytes) -->

Treemap Diagram

Back to Style Guide — Read the style guide first for emoji, color, and accessibility rules.

Syntax keyword: treemap-beta Tested Mermaid version: 12.0.0; check support on older hosts Best for: Hierarchical data proportions, budget breakdowns, disk usage, portfolio composition When NOT to use: Simple flat proportions (use Pie), flow-based hierarchy (use Sankey)

Accessibility: Mermaid 12.0.0 emits accTitle/accDescr for this type. Keep a visible description and verify older destination renderers. ⚠️ GitHub support: Treemap remains experimental — verify it renders on the target host before using.
Raw lines 1 to 17
18## Exemplar Diagram
20_Treemap showing annual cloud infrastructure costs broken down by service category and specific service, with rectangle sizes proportional to spend:_
22```mermaid
23treemap-beta
24 accTitle: Treemap Example
25 accDescr: Illustrative treemap diagram; the surrounding text describes its data and relationships.
26"Compute"
27 "EC2 Instances": 45000
28 "Lambda Functions": 12000
29 "ECS Containers": 8000
30"Storage"
31 "S3 Buckets": 18000
32 "RDS Databases": 15000
33 "DynamoDB": 6000
34"Networking"
35 "CloudFront CDN": 9000
36 "API Gateway": 7000
37"Observability"
38 "CloudWatch": 5000
39 "Datadog": 8000
40```
42---

Exemplar Diagram

Treemap showing annual cloud infrastructure costs broken down by service category and specific service, with rectangle sizes proportional to spend:

treemap-beta
    accTitle: Treemap Example
    accDescr: Illustrative treemap diagram; the surrounding text describes its data and relationships.
"Compute"
    "EC2 Instances": 45000
    "Lambda Functions": 12000
    "ECS Containers": 8000
"Storage"
    "S3 Buckets": 18000
    "RDS Databases": 15000
    "DynamoDB": 6000
"Networking"
    "CloudFront CDN": 9000
    "API Gateway": 7000
"Observability"
    "CloudWatch": 5000
    "Datadog": 8000
Raw lines 18 to 43
44## Tips
46- Parent nodes (sections) use quoted text: `"Section Name"`
47- Leaf nodes add a value: `"Leaf Name": 123`
48- Hierarchy is created by **indentation** (spaces or tabs)
49- Use nonnegative values with a common unit and defined denominator. Rectangle area encodes the value; it does not display uncertainty
50- Keep to **2–3 levels** of nesting for clarity
51- Use `classDef` and `:::class` syntax for styling nodes
52- **Always** pair with a Markdown text description above for screen readers
54---

Tips

  • Parent nodes (sections) use quoted text: "Section Name"
  • Leaf nodes add a value: "Leaf Name": 123
  • Hierarchy is created by indentation (spaces or tabs)
  • Use nonnegative values with a common unit and defined denominator. Rectangle area encodes the value; it does not display uncertainty
  • Keep to 2–3 levels of nesting for clarity
  • Use classDef and :::class syntax for styling nodes
  • Always pair with a Markdown text description above for screen readers
Raw lines 44 to 55
56## Template
58_Description of the hierarchical data and what the proportions represent:_
60```mermaid
61treemap-beta
62 accTitle: Treemap Example
63 accDescr: Illustrative treemap diagram; the surrounding text describes its data and relationships.
64"Category A"
65 "Sub A1": 40
66 "Sub A2": 25
67"Category B"
68 "Sub B1": 20
69 "Sub B2": 15
70```

Template

Description of the hierarchical data and what the proportions represent:

treemap-beta
    accTitle: Treemap Example
    accDescr: Illustrative treemap diagram; the surrounding text describes its data and relationships.
"Category A"
    "Sub A1": 40
    "Sub A2": 25
"Category B"
    "Sub B1": 20
    "Sub B2": 15
Raw lines 56 to 72
73## Verified reference
75Syntax examples reviewed against [official Mermaid documentation](https://mermaid.js.org/syntax/treemap.html) and rendered with Mermaid 12.0.0 (2026-10-01). Check the destination version; appearance and accessibility are not guaranteed by a successful parse.

Verified reference

Syntax examples reviewed against official Mermaid documentation and rendered with Mermaid 12.0.0 (2026-10-01). Check the destination version; appearance and accessibility are not guaranteed by a successful parse.

Raw lines 73 to 75