MermanDraw
Open Editor

Mermaid guide

Mermaid Sankey Diagram: Flows, Weights, and Funnel Visualisation

A Sankey diagram shows flow between nodes where the width of each link is proportional to its value. Mermaid takes a list of source,target,value lines, builds the graph, and positions the nodes so the bands do not cross more than necessary.

It is the natural picture for a conversion funnel, a traffic-source breakdown, or an energy or budget flow. Anything that can be written as "X sends N units to Y" fits.

  • funnel analysis
  • energy or material flow
  • budget allocation
  • traffic source breakdowns

Example

Mermaid Sankey exampleTraffic Sources 1000Visitors 2000Organic Search 400Direct 300Social Media 200Referral 100Opened Editor 650Read Cheatsheet 200Bounce 150Shared Link 180Exported PNG 290
sankey-beta
    Traffic Sources,Visitors,1000
    Organic Search,Visitors,400
    Direct,Visitors,300
    Social Media,Visitors,200
    Referral,Visitors,100
    Visitors,Opened Editor,650
    Visitors,Read Cheatsheet,200
    Visitors,Bounce,150
    Opened Editor,Shared Link,180
    Opened Editor,Exported PNG,290
Open in editor → Cheatsheet →

Syntax

Flows

sankey-beta
    Visitors,Signed up,320
    Visitors,Bounced,680
    Signed up,Activated,210
    Signed up,Churned,110
    Activated,Paid,60
    Activated,Free,150
Flows — Mermaid sankeyVisitors 1000Signed up 320Bounced 680Activated 210Churned 110Paid 60Free 150

Three comma-separated columns per line, no header. Node names repeat across lines to form stages. Quote a name that contains a comma: "Acme, Inc.",Revenue,100.

Try this snippet →

Common mistakes

These are the parse errors that come up most, including in code written by ChatGPT and Claude. Paste any failing diagram into the editor and it marks the offending line.

  • Spaces after commas (A, B, 10).

    Fix: Mermaid trims them in recent versions, but older renderers (including some GitHub deployments) do not. Write A,B,10.

  • A cycle (A,B,5 and B,A,3).

    Fix: Sankey layouts require a directed acyclic graph. Model the return flow as a separate node (A,B,5 and B,A-return,3).

  • Inconsistent node spelling (Sign up vs Signup).

    Fix: Each distinct string is a separate node. Copy names exactly.

Real-world examples

Complete, copy-ready sankeys for common situations. Each one opens in the editor with a click.

Browse all examples →

FAQ

Can I control node order or colours?

Order is computed by the layout. Colours come from the theme; MermanDraw's Dark and Neon themes give high-contrast bands for presentations.

Does the diagram need values to sum up at each node?

No. Mermaid draws each link independently, so inflow and outflow can differ. That is useful for showing loss between stages.