02e19e3df9
All content ported from borealBytes/opencode under Apache-2.0 license with
attribution headers prepended to each file.
- references/markdown_style_guide.md (~733 lines): full markdown formatting,
citation, collapsible sections, emoji, Mermaid integration, and template
selection guide
- references/mermaid_style_guide.md (~458 lines): full Mermaid standards —
emoji set, classDef color palette, accessibility (accTitle/accDescr),
theme neutrality (no %%{init}), and diagram type selection table
- references/diagrams/ (24 files): per-type exemplars, tips, and templates
for all Mermaid diagram types
- templates/ (9 files): PR, issue, kanban, ADR, presentation, how-to,
status report, research paper, project docs
Source: https://github.com/borealBytes/opencode
2.0 KiB
Treemap Diagram
Back to Style Guide — Read the style guide first for emoji, color, and accessibility rules.
Syntax keyword: treemap-beta
Mermaid version: v11.12.0+
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: Treemap diagrams do not support
accTitle/accDescr. Always place a descriptive italic Markdown paragraph directly above the code block.⚠️ GitHub support: Treemap is very new — verify it renders on your target GitHub version before using.
Exemplar Diagram
Treemap showing annual cloud infrastructure costs broken down by service category and specific service, with rectangle sizes proportional to spend:
treemap-beta
"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
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)
- Values determine the size of each rectangle — larger value = larger area
- Keep to 2–3 levels of nesting for clarity
- Use
classDefand:::classsyntax for styling nodes - Always pair with a Markdown text description above for screen readers
Template
Description of the hierarchical data and what the proportions represent:
treemap-beta
"Category A"
"Sub A1": 40
"Sub A2": 25
"Category B"
"Sub B1": 20
"Sub B2": 15