MermanDraw
Open Editor

Mermaid exampleSankey

Website Traffic Flow as a Mermaid Sankey Diagram

A sankey diagram shows where a quantity comes from and where it goes, with band width proportional to volume. Growth and analytics teams use it for traffic because it answers two questions in one picture: which channels bring the most sessions, and which pages those sessions leave from.

  • sankey diagram example
  • website traffic flow diagram
  • mermaid sankey
  • conversion flow visualization
  • funnel sankey
Website Traffic Flow as a Mermaid Sankey DiagramOrganic search 5500Blog 5100Pricing page 2000Paid ads 2600Landing page 2600Social 900Referral 700Sign-up 2000Exit 7100Purchase 600
Open in editor → 12 linesrenders in GitHub, Notion, Obsidian

Mermaid code

sankey-beta
Organic search,Blog,4200
Organic search,Pricing page,1300
Paid ads,Landing page,2600
Social,Blog,900
Referral,Pricing page,700
Blog,Sign-up,1100
Blog,Exit,4000
Landing page,Sign-up,900
Landing page,Exit,1700
Pricing page,Purchase,600
Pricing page,Exit,1400

Paste this into any tool that renders Mermaid, or into the editor to change the theme and export PNG or SVG. Syntax reference: Sankey guide.

What this diagram shows

The left column holds four acquisition channels. Organic search sends 4,200 sessions to Blog and 1,300 to Pricing page; Paid ads sends 2,600 to a dedicated Landing page. The middle column is the three entry pages, and the right column is outcomes. The two Exit bands dominate, which is normal, while Pricing page is the only path to Purchase. Each row is source,target,value, and Mermaid sums the inflows and outflows per node.

Sankey beats a bar chart when the interesting fact is the path, not the totals. The same numbers in bars would hide that referral traffic converts through the pricing page.

How to adapt it

  • Replace the channel names with the ones from your analytics tool and paste real session counts for one month.
  • Add a fourth column for post-sign-up outcomes, for example Sign-up,Activated,700 and Sign-up,Churned,400.
  • Merge all exits into one Exit node as shown, or split them into Exit (bounce) and Exit (engaged) to separate bounces.
  • Keep every outflow total equal to its node inflow total so the band widths stay honest; the diagram does not check this for you.

FAQ

Why is the first line sankey-beta instead of sankey?

The sankey type is still marked beta in Mermaid 11, and the keyword carries that suffix. The syntax has been stable for several releases, so it is safe to use in docs that pin a recent Mermaid version.

Do node names need quotes?

Only if a name contains a comma. Spaces and hyphens are fine, as in Organic search and Sign-up. For a name with a comma, wrap it in double quotes like a CSV field.

Can I set the colors of the links?

Globally, yes. An init directive such as %%{init: {"sankey": {"linkColor": "source"}}}%% colors each band by its source node, or use target or gradient. Per-link colors are not supported.