TapCub is live — analytics, insights and live chat, free on one platform

Chart maker · Sankey Sankey diagram generator

Paste one row per flow — source, target, value — and get a Sankey diagram with nodes placed in columns and bands sized by volume. Duplicate rows are added together; a loop is reported with the exact path so you can break it.

  • Paste from Excel, Sheets or CSV
  • SVG, PNG and embed code
  • Runs locally
Chart maker

Paste data, pick a chart

First column = categories (or the x-axis); every other column = one series. A first row with names is used as the header. For a Sankey diagram, paste source, target, value rows instead.

Tabs (copied from a spreadsheet), commas or semicolons. 1,200, 12%, $5.40 and −30 are all read as numbers.

Runs entirely in your browser. Nothing you type here is uploaded or stored by TapCub.
From channel to paymentGoogle → Landing page 500, Newsletter → Landing page 200, Google → Pricing 150, Landing page → Sign-up 300, Landing page → Left 400, Pricing → Sign-up 90, Pricing → Left 60, Sign-up → Paid 120From channel to paymentGoogle → Landing page: 500Newsletter → Landing page: 200Google → Pricing: 150Landing page → Sign-up: 300Landing page → Left: 400Pricing → Sign-up: 90Pricing → Left: 60Sign-up → Paid: 120Google: 650Google650Landing page: 700Landing page700Newsletter: 200Newsletter200Pricing: 150Pricing150Sign-up: 390Sign-up390Left: 460Left460Paid: 120Paid120
Inline SVG embed code

Paste it straight into an HTML page, a CMS block that accepts HTML, or a Markdown file that allows HTML. It scales to its container and has a title for screen readers.

chart.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 680 366" width="680" height="366" font-family="Inter,&quot;PingFang SC&quot;,&quot;Microsoft YaHei&quot;,&quot;Noto Sans SC&quot;,system-ui,sans-serif" role="img" aria-label="From channel to payment" style="display:block;max-width:100%;height:auto;margin:0 auto"><title>From channel to payment</title><desc>Google → Landing page 500, Newsletter → Landing page 200, Google → Pricing 150, Landing page → Sign-up 300, Landing page → Left 400, Pricing → Sign-up 90, Pricing → Left 60, Sign-up → Paid 120</desc><rect width="680" height="366" fill="#ffffff"/><text x="16" y="28" font-size="16" font-weight="700" fill="#0b0f19">From channel to payment</text><path d="M28 100.8C128 100.8 128 112.8 228 112.8V282.2C128 282.2 128 270.2 28 270.2Z" fill="#2050f0" fill-opacity=".32"><title>Google → Landing page: 500</title></path><path d="M28 282.2C128 282.2 128 282.2 228 282.2V350C128 350 128 350 28 350Z" fill="#1baf7a" fill-opacity=".32"><title>Newsletter → Landing page: 200</title></path><path d="M28 50C128 50 128 50 228 50V100.8C128 100.8 128 100.8 28 100.8Z" fill="#2050f0" fill-opacity=".32"><title>Google → Pricing: 150</title></path><path d="M240 112.8C340 112.8 340 164.4 440 164.4V266.1C340 266.1 340 214.5 240 214.5Z" fill="#eb6834" fill-opacity=".32"><title>Landing page → Sign-up: 300</title></path><path d="M240 214.5C446 214.5 446 168.7 652 168.7V304.3C446 304.3 446 350 240 350Z" fill="#eb6834" fill-opacity=".32"><title>Landing page → Left: 400</title></path><path d="M240 50C340 50 340 133.9 440 133.9V164.4C340 164.4 340 80.5 240 80.5Z" fill="#eda100" fill-opacity=".32"><title>Pricing → Sign-up: 90</title></path><path d="M240 80.5C446 80.5 446 148.4 652 148.4V168.7C446 168.7 446 100.8 240 100.8Z" fill="#eda100" fill-opacity=".32"><title>Pricing → Left: 60</title></path><path d="M452 133.9C552 133.9 552 95.7 652 95.7V136.4C552 136.4 552 174.6 452 174.6Z" fill="#e87ba4" fill-opacity=".32"><title>Sign-up → Paid: 120</title></path><rect x="16" y="50" width="12" height="220.2" rx="2" fill="#2050f0"><title>Google: 650</title></rect><text x="34" y="158.1" text-anchor="start" font-size="12" font-weight="600" fill="#0b0f19">Google</text><text x="34" y="172.1" text-anchor="start" font-size="11" fill="#4b5563">650</text><rect x="228" y="112.8" width="12" height="237.2" rx="2" fill="#eb6834"><title>Landing page: 700</title></rect><text x="246" y="229.4" text-anchor="start" font-size="12" font-weight="600" fill="#0b0f19">Landing page</text><text x="246" y="243.4" text-anchor="start" font-size="11" fill="#4b5563">700</text><rect x="16" y="282.2" width="12" height="67.8" rx="2" fill="#1baf7a"><title>Newsletter: 200</title></rect><text x="34" y="314.1" text-anchor="start" font-size="12" font-weight="600" fill="#0b0f19">Newsletter</text><text x="34" y="328.1" text-anchor="start" font-size="11" fill="#4b5563">200</text><rect x="228" y="50" width="12" height="50.8" rx="2" fill="#eda100"><title>Pricing: 150</title></rect><text x="246" y="73.4" text-anchor="start" font-size="12" font-weight="600" fill="#0b0f19">Pricing</text><text x="246" y="87.4" text-anchor="start" font-size="11" fill="#4b5563">150</text><rect x="440" y="133.9" width="12" height="132.1" rx="2" fill="#e87ba4"><title>Sign-up: 390</title></rect><text x="458" y="198" text-anchor="start" font-size="12" font-weight="600" fill="#0b0f19">Sign-up</text><text x="458" y="212" text-anchor="start" font-size="11" fill="#4b5563">390</text><rect x="652" y="148.4" width="12" height="155.9" rx="2" fill="#008300"><title>Left: 460</title></rect><text x="646" y="224.3" text-anchor="end" font-size="12" font-weight="600" fill="#0b0f19">Left</text><text x="646" y="238.3" text-anchor="end" font-size="11" fill="#4b5563">460</text><rect x="652" y="95.7" width="12" height="40.7" rx="2" fill="#6250d6"><title>Paid: 120</title></rect><text x="646" y="114.1" text-anchor="end" font-size="12" font-weight="600" fill="#0b0f19">Paid</text><text x="646" y="128.1" text-anchor="end" font-size="11" fill="#4b5563">120</text></svg>

Version v1.0Updated Update history

Is a Sankey right?

What data suits a Sankey diagram

A Sankey diagram shows how a quantity splits and merges between stages. The width of every band is its value, so the total is conserved from left to right.

Flows between stages

Traffic from channels to landing pages to outcomes; budget from sources to uses; users from plan to plan. Each row is one flow.

One direction, no loops

A → B → A cannot be drawn left to right. Rename the repeat (“Pricing (2nd visit)”) or stop the path at the first return. The tool names the loop it finds.

A few dozen nodes at most

Up to 60 nodes are accepted, but readability drops well before. Merge small sources into “Other”.

Not for exact comparisons

Band widths are hard to compare precisely. Hover a band for its value, or pair the diagram with a table.

Layout: each node’s column is its longest distance from a source; nodes with no outgoing flow sit in the last column. A node’s height is the larger of what flows in and what flows out.

How to use it

From spreadsheet to slide in four steps

The chart redraws as you type.

  1. 1

    Copy the cells

    Select the table in Excel, Google Sheets or Numbers — including the header row — and copy. Or paste CSV text.

  2. 2

    Paste and pick a type

    The first column becomes the categories; each other column becomes a series. Pick the chart type; the checks under the chart tell you if the data does not fit it.

  3. 3

    Tidy it up

    Add a title, choose a palette, sort bars largest first, switch bars to horizontal for long names, stack or group several columns.

  4. 4

    Export

    Download a PNG for slides and chat, an SVG for print and design tools, or copy the inline SVG to embed it in a web page.

How it reads your data

The parsing rules

The tool guesses as little as possible and tells you when it had to.

  • Separator: tabs if the text has any (that is what a spreadsheet copy gives you), otherwise whichever of comma, semicolon or vertical bar gives the most consistent columns. Quoted CSV cells are supported.
  • Header: the first row is a header if any cell after the first column is not a number.
  • Numbers: thousands separators, currency symbols, a trailing %, a leading minus or accounting brackets, full-width digits and 万 / 亿 / k suffixes are understood. Anything else is left empty and listed.
  • Limits: 200 rows and 8 number columns. Pie charts keep the 7 largest slices and group the rest as “Other”.
Funnel calculator for step-by-step conversion
What each chart expects
ChartColumnsExample row
Bar / linelabel, value, [value…]Jan, 1240, 860
Pielabel, value (positive)Email, 860
Funnelstep, count (in order)Added to cart, 1248
Sankeysource, target, valueGoogle, Pricing, 150
Worked example

One table, three honest charts

The default data is five months of sign-ups from three channels. The same numbers answer different questions depending on the chart.

Sign-ups by channel, January to May
QuestionChartWhat it shows
Which channel brings the most?Bar, groupedOrganic leads every month; paid is second.
Is the total growing?Bar, stackedTotal rises from 2,410 in January to 3,220 in May.
Which channel is growing fastest?LineReferral grows 48% (310 → 460), organic 41%, paid 17%.
What share was referral in May?Pie (May only)460 of 3,220 = 14.3%.

Percent change = (May − January) ÷ January. Paste just the May column into a pie to check the share yourself.

Common mistakes

Charts that mislead without lying

Every number can be right and the chart still gives the wrong impression.

Bars that don’t start at zero

A bar’s length is its value. Cut the axis at 900 and 950 looks twice as big as 925. This tool always starts bars at zero; lines may zoom in.

Pies with a total slice

A “Total” row pasted with the parts makes every slice half its real size. The tool warns when a row equals the sum of the others.

Two y-axes

With two scales, where the lines cross is decided by whoever set the axes. Use two charts, or index both series to 100.

Colour as the only label

About one man in twelve has some colour-vision deficiency. Every chart here also names its series in a legend or label.

In TapCub

Charts that stay up to date

A pasted chart is a snapshot. In TapCub the same charts are built from live events and refresh by themselves.

Dashboards

Pin charts from any report and share them with your team, or by read-only link.

Learn more

Funnels and paths

Step conversion, time between steps, and the real paths before and after any event.

Learn more

Ask in plain language

Type a question and get a chart with a one-line conclusion.

Learn more
Explore product analytics
FAQ

Chart maker questions

Still have a question?

Chat with the team behind TapCub — we usually reply within a few hours on business days.

Chat with usHelp center
What data format does a Sankey diagram need?

Three columns: source, target, value, one flow per row. A header row is optional. Repeated source–target pairs are added together.

Why does the tool reject my data as a loop?

Some flow goes back to an earlier node, for example Pricing → Landing page → Pricing. Sankey diagrams flow one way, so give the second visit its own name.

Is a Sankey diagram the same as path analysis?

Path analysis is where Sankey-style charts are often used: it shows the sequences of pages or events people actually followed. TapCub’s paths report builds that from live events.

Why are some nodes taller than their flows?

A node’s height is the larger of its inflow and outflow. If 390 arrive at Sign-up and 120 continue to Paid, the remaining 270 simply have no row — add one (e.g. “Sign-up → Didn’t pay”) to show them.

Changelog

Update history

New features, fixes and data refreshes for this tool, newest first.

  1. · v1.0

    LaunchedFirst release.

Missing something or found an error? Tell us — requests that come up often go into the next update. All tool updates

Next step

Stop rebuilding the same chart every week

Connect your site or app once and the traffic, funnel and retention charts build themselves from live data.

Start freeProduct analytics
Funnel calculatorStep conversion and drop-off with the biggest leak highlighted. Cohort analysisTurn sign-up and activity data into a retention triangle. Attribution modelsSee how credit moves between channels under six models.

See your data clearly. Find your growth.

Every click, backed by data. Install one line of code and see your first numbers in a minute.

Start free See a live demo

No credit card · Free plans for analytics and chat · Cookieless analytics