Sankey Diagrams

Sankey diagrams visualize flows between nodes where the arrow width represents the quantity or magnitude. They are ideal for showing energy transfers, budget allocations, or user journey flows.

Basic Example

sankey-beta
    Revenue,Operating Costs,400
    Revenue,Profit,200
    Revenue,Taxes,100
    Operating Costs,Salaries,250
    Operating Costs,Infrastructure,150

What You Get

Mermaid Studio provides basic support for Sankey diagrams:

• Find usages to locate where nodes are referenced
• Inspections to validate your diagram structure
• Live preview to see your flows rendered
• Markdown integration for use in documentation

Quick Syntax Reference

Basic Flow Syntax

Each line defines a flow with three comma-separated values:

Source,Target,Value

• Source: The origin node name
• Target: The destination node name
• Value: The numeric flow quantity (determines arrow width)

Multiple Flows

sankey-beta
    Source A,Target 1,100
    Source A,Target 2,50
    Source B,Target 2,75
    Target 1,Final,100
    Target 2,Final,125

Tips

• Larger values create wider arrows
• Nodes are automatically created when referenced
• Flows can chain through intermediate nodes
• Use descriptive node names for clarity

For full syntax details, see the Mermaid Sankey documentation.