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

sankey.md

77 lines · skills/markdown-mermaid-writing/references/diagrams/sankey.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# Sankey 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:** `sankey-beta`
8**Best for:** Flow magnitude visualization, resource distribution, budget allocation, traffic routing
9**When NOT to use:** Simple proportions (use [Pie](pie.md)), process steps (use [Flowchart](flowchart.md))
11> ⚠️ **Accessibility:** Sankey diagrams do **not** support `accTitle`/`accDescr`. Always place a descriptive _italic_ Markdown paragraph directly above the code block.
13---

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

Sankey Diagram

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

Syntax keyword: sankey-beta Best for: Flow magnitude visualization, resource distribution, budget allocation, traffic routing When NOT to use: Simple proportions (use Pie), process steps (use Flowchart)

⚠️ Accessibility: Sankey diagrams do not support accTitle/accDescr. Always place a descriptive italic Markdown paragraph directly above the code block.
Raw lines 1 to 14
15## Exemplar Diagram
17_Sankey diagram showing how a $100K monthly cloud budget flows from the total allocation through service categories (compute, storage, networking, observability) to specific AWS services, with band widths proportional to cost:_
19```mermaid
20sankey-beta
22Cloud Budget,Compute,45000
23Cloud Budget,Storage,25000
24Cloud Budget,Networking,15000
25Cloud Budget,Observability,10000
26Cloud Budget,Security,5000
28Compute,EC2 Instances,30000
29Compute,Lambda Functions,10000
30Compute,ECS Containers,5000
32Storage,S3 Buckets,15000
33Storage,RDS Databases,10000
35Networking,CloudFront CDN,8000
36Networking,API Gateway,7000
38Observability,CloudWatch,6000
39Observability,Datadog,4000
40```
42---

Exemplar Diagram

Sankey diagram showing how a $100K monthly cloud budget flows from the total allocation through service categories (compute, storage, networking, observability) to specific AWS services, with band widths proportional to cost:

sankey-beta

Cloud Budget,Compute,45000
Cloud Budget,Storage,25000
Cloud Budget,Networking,15000
Cloud Budget,Observability,10000
Cloud Budget,Security,5000

Compute,EC2 Instances,30000
Compute,Lambda Functions,10000
Compute,ECS Containers,5000

Storage,S3 Buckets,15000
Storage,RDS Databases,10000

Networking,CloudFront CDN,8000
Networking,API Gateway,7000

Observability,CloudWatch,6000
Observability,Datadog,4000
Raw lines 15 to 43
44## Tips
46- Format: `Source,Target,Value` — one flow per line. Quote labels containing commas and double embedded quotes, following CSV syntax; avoid cyclic flows
47- Use finite nonnegative values with a common unit. Validate incoming/outgoing totals for conserved intermediate nodes, and label losses or accumulation explicitly
48- Values determine the width of each flow band
49- Keep to **3 levels** maximum (source → category → destination)
50- Blank lines between groups improve source readability
51- Good for answering "where does the 💰 go?" questions
52- No emoji in node names (parser limitation) — use descriptive text
53- **Always** pair with a Markdown text description above for screen readers
55---

Tips

  • Format: Source,Target,Value — one flow per line. Quote labels containing commas and double embedded quotes, following CSV syntax; avoid cyclic flows
  • Use finite nonnegative values with a common unit. Validate incoming/outgoing totals for conserved intermediate nodes, and label losses or accumulation explicitly
  • Values determine the width of each flow band
  • Keep to 3 levels maximum (source → category → destination)
  • Blank lines between groups improve source readability
  • Good for answering "where does the 💰 go?" questions
  • No emoji in node names (parser limitation) — use descriptive text
  • Always pair with a Markdown text description above for screen readers
Raw lines 44 to 56
57## Template
59_Description of what flows from where to where and what the magnitudes represent:_
61```mermaid
62sankey-beta
64Source,Category A,500
65Source,Category B,300
66Source,Category C,200
68Category A,Destination 1,300
69Category A,Destination 2,200
71Category B,Destination 3,300
72```

Template

Description of what flows from where to where and what the magnitudes represent:

sankey-beta

Source,Category A,500
Source,Category B,300
Source,Category C,200

Category A,Destination 1,300
Category A,Destination 2,200

Category B,Destination 3,300
Raw lines 57 to 74
75## Verified reference
77Syntax examples reviewed against [official Mermaid documentation](https://mermaid.js.org/syntax/sankey.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 75 to 77