TryMermaid

Mermaid Sankey Diagram Maker

Write Sankey diagrams in Mermaid code and watch them render as you type. Start from the example below, then export PNG or SVG, share a link or embed the diagram.

Updated · Code editor with live preview

Sankey diagram example

Rendering preview…

sankey-beta

Visitors,Signed up,2400
Visitors,Left,7600
Signed up,Activated,1500
Signed up,Churned,900
Activated,Paid,420
Activated,Stayed free,1080
Open this example in the editor Start a blank diagram

What is a Sankey diagram?

A Sankey diagram shows how a quantity flows from one stage to the next, drawing each flow as a band whose thickness is proportional to its size. It makes where things go, and where they are lost, immediately visible. In Mermaid you write a Sankey diagram as comma-separated rows of source, target and value.

When to use a Sankey diagram

  • Conversion funnels and drop-off analysis
  • Energy or material flow
  • Budget allocation across teams
  • Traffic sources through to revenue

How to make a Sankey diagram in Mermaid

  1. Step 1

    Open the editor

    Open TryMermaid with the example on this page, or start a new diagram with sankey-beta on the first line, followed by a blank line.

  2. Step 2

    Add the flows

    Add one row per flow as source,target,value, such as Signed up,Activated,1500.

  3. Step 3

    Account for drop-off

    Give every loss its own target so the numbers balance, then chain stages by reusing node names.

  4. Step 4

    Export or share

    Check the live preview, then export as PNG or SVG or copy a share link.

Sankey diagram syntax cheat sheet

ElementSyntaxWhat it does
Startsankey-betaBegins a Sankey diagram
FlowVisitors,Signed up,2400Source, target and size
Chained stageSigned up,Activated,1500Reusing a name continues the flow
Name with a comma"Paid, annual",Renewed,120Quote names containing commas

Sankey diagram FAQ

What do the three columns in a Mermaid Sankey diagram mean?

Each row is source,target,value. The value sets how thick the band is, so a row such as Visitors,Signed up,2400 draws a band from Visitors to Signed up sized for 2,400.

How do I show drop-off or loss?

Yes, and that is usually the point. Send the remainder to its own node, such as Visitors,Left,7600, so the diagram accounts for everyone and the drop-off is visible.

Do I have to declare the nodes first?

Nodes are created implicitly from the names you use. Write the same name in two rows and Mermaid treats it as one node, which is how flows chain from stage to stage.

Other Mermaid diagram types