mirror of
https://github.com/K-Dense-AI/claude-scientific-skills.git
synced 2026-03-28 07:33:45 +08:00
docs(references): port style guides, 24 diagram guides, and 9 templates from opencode
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
This commit is contained in:
@@ -0,0 +1,66 @@
|
||||
<!-- Source: https://github.com/borealBytes/opencode | License: Apache-2.0 | Author: Clayton Young / Superior Byte Works, LLC (Boreal Bytes) -->
|
||||
|
||||
# Treemap Diagram
|
||||
|
||||
> **Back to [Style Guide](../mermaid_style_guide.md)** — 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](pie.md)), flow-based hierarchy (use [Sankey](sankey.md))
|
||||
|
||||
> ⚠️ **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:_
|
||||
|
||||
```mermaid
|
||||
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 `classDef` and `:::class` syntax 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:_
|
||||
|
||||
```mermaid
|
||||
treemap-beta
|
||||
"Category A"
|
||||
"Sub A1": 40
|
||||
"Sub A2": 25
|
||||
"Category B"
|
||||
"Sub B1": 20
|
||||
"Sub B2": 15
|
||||
```
|
||||
Reference in New Issue
Block a user