🤪 TOTAL SANKEY v7.0
A new version () is available
FILTER:
Showing: ✕
Min: 0%
Sources Groups Targets

Total Sankey

A spreadsheet tells you what.
A Sankey shows you how.

The whole tool is one page of HTML. Your whole dataset stays in it. Drop a CSV. See the flow. Ship the chart.

You don’t need a pipeline to draw a picture.

Zero dependencies · Works offline · Free forever · Made in PEI

Why it exists

You have rows. You want a story.

Everyone has a spreadsheet. Almost nobody has the time to turn it into a picture the room can read. This is the shortest path from one to the other.

For the analyst who needs to show a flow without writing a ticket. For the founder who needs a diagram in the deck by Friday.

  1. 01

    A place to drop your data.

    Paste from Excel. Drop a CSV. Import a .sankey. Whatever is fastest wins.

  2. 02

    A diagram that reads itself.

    Gradient flows. Hover to trace. Click any node to isolate its story.

  3. 03

    A way to share without signing up.

    One URL, or paste an iframe. The recipient sees your exact chart. No account required on either side.

  4. 04

    A way to keep it yours.

    localStorage, WebGPU, no server. Nothing uploads. Ever.

Six ideas that make it work

Features are cheap. Flow is the story.

🤖

Private AI

A local WebGPU model reads your chart and answers questions. Nothing uploads. Your tab is the server.

🎯

Click to isolate

Click any node. The rest of the chart fades to 10%. Your story focuses. Click again to clear.

👆

Hover to trace

Follow a value from source to target in one motion. Every connected path lights up, including upstream.

📥

Exports for every audience

PNG for decks. SVG for designers. Excel for the boss. CSV for the auditor. .sankey for next week’s you.

🔗

Share by link

Compress the chart into a URL. Or paste an iframe into any page. No sign-up on the other side.

🕰️

Version history

Save a snapshot. Restore it later. Twenty deep. Safe to experiment.

Privacy, in one paragraph

There is no server.

No account. No telemetry. Your spreadsheet goes from clipboard to canvas and stays there. Export to copy it. Share a URL to send it. That’s the whole contract. The AI assistant runs locally via WebGPU — the model downloads once, then never phones home.

FAQ

Questions without the dancing.

Is this actually free?

Forever. No trial. No paid tier. No “contact sales.” There is no business model behind it that needs your data or your attention later. You use it. It helps. That’s the transaction.

Where does my data actually go?

Nowhere. Your tab is the entire pipeline. Data sits in your browser’s localStorage under total-sankey-* keys. Open DevTools and confirm it yourself.

Does the AI really run locally?

Yes. It uses WebGPU (Chrome / Edge). The model — SmolLM2, TinyLlama, or Qwen — downloads once, caches in the browser, then runs in-tab. After the first load, it works offline.

Can I embed this in my own site?

Two ways. Paste the iframe snippet the Embed dialog gives you, or download the Standalone HTML — a single file with every dependency inlined, works with no internet.

What’s the file size limit?

URL sharing works up to ~6KB of compressed data — usually a few thousand rows. Beyond that, export a .sankey file (JSON, unlimited) and email or Slack it.

Does it work offline?

Yes. After the first visit, the HTML and its dependencies cache. Open the tab on a plane, build a chart.

What happens if I clear my browser data?

Your saved charts go with it. Defend yourself: export .sankey files for anything worth keeping, or keep a Share URL around. Either round-trips the chart perfectly.

How is this different from Tableau / Miro / a D3 sketch?

Tableau needs a login and a server. Miro is a whiteboard, not a grammar. A D3 sketch is ninety lines of JavaScript you haven’t written yet. This is 2.5MB of HTML that starts in two clicks.

AI Assistant

AI Assistant

Run a local LLM in your browser to analyze your Sankey data. Fully private — nothing leaves your machine.

Requires WebGPU (Chrome/Edge). Model is downloaded once and cached.

STEP TITLES

Help — Total Sankey v7.0

Spreadsheets store the numbers. Total Sankey shows where they go. No account. No install. Your data stays in the tab.

  1. Loading Data
  2. Data Grid
  3. Interactive Chart
  4. Aggregate Selection
  5. Filters & Controls
  6. Settings
  7. Theme
  8. Exporting
  9. Sharing
  10. Versions
  11. Embedding
  12. AI Assistant
  13. Keyboard Shortcuts
  14. Data Format
  15. Tips & Tricks

Loading Data

Click Load Data in the header for these options:

  • Import File — Select a .csv, .tsv, or .txt file. Delimiter is auto-detected.
  • Import .sankey File — Restore a previously saved chart with all settings, colors, and titles.
  • Paste Data — Opens a paste dialog. Paste tab-separated rows (e.g. from Excel) and click Import.
  • Sample Data — Load a built-in example dataset to see the tool in action.

You can also drag & drop a CSV/TSV file directly onto the data grid.

The ✕ button appears in the header when data is loaded — click it to clear all data and reset.

Column Mapping

When importing a file with 5 or more columns, a column mapping dialog appears. It auto-guesses which columns are Source, Target, Value, and Filter based on header names. You can adjust the dropdowns before confirming.

Validation Feedback

After import, a notification shows how many rows were imported. If any rows had invalid data (missing source/target or non-numeric values), it reports how many were skipped.

Data Grid

The right panel is a full spreadsheet with four columns:

ColumnRequiredDescription
SourceYesThe origin node (e.g. "North America")
TargetYesThe destination node (e.g. "Engineering")
ValueYesNumeric flow value between source and target
FilterNoOptional category for filtering (e.g. year)
  • Click any cell to edit. Right-click for context menu (insert/delete rows, copy, paste, undo).
  • New rows auto-appear as you type at the bottom.
  • Changes reflect in the chart in real time.
  • Drag the vertical divider to resize chart/grid widths.
  • Data is auto-saved to local storage and restored on return.
  • Search — Use the search bar above the grid to find specific data. Matching cells are highlighted as you type.

Interactive Chart

Hover

  • Node hover — Highlights the full upstream and downstream path. Tooltip shows name and total.
  • Flow hover — Highlights the connection. Tooltip shows source, target, and value.

Click to Isolate

Click a node to isolate it — only connected flows remain visible, and the grid filters to matching rows. A floating indicator at the top-left shows which node is isolated. Click the indicator, click again, or click the background to clear.

Drag to Reorder

Click and drag any node vertically to reposition it within its column. Flows redraw in real time.

Zoom & Pan

  • Scroll wheel / pinch — Zoom in/out (0.5x to 5x)
  • Drag background — Pan the view
  • Double-click — Reset zoom to fit

Flows use color gradients blending from source to target node color for easy path tracing.

Aggregate Selection

Hold Ctrl (Windows/Linux) or Cmd (Mac) and click nodes to enter aggregate mode:

Single Node Detail

Ctrl/Cmd+click one node to see a popup with total value, percentage of grand total, inflows (per source), and outflows (per target).

Multi-Node Summary

Ctrl/Cmd+click additional nodes to see combined totals with a per-node breakdown. Selected nodes get a white border highlight.

Select All

Press Ctrl+A / Cmd+A to select every node and see the grand total.

Clear by clicking ✕, pressing Esc, or clicking the background.

Filters & Controls

Several floating controls appear on the chart canvas when data is loaded:

Filter Bar

If your data has a fourth column (Filter), a floating pill bar appears at the top-left of the chart:

  • 5 or fewer values — Clickable tab buttons. Click one to filter; click "All" to reset.
  • More than 5 — A dropdown select menu.

Flow Threshold

The slider at the top-right lets you hide small flows below a percentage threshold. Drag it to filter out noise and focus on the largest connections.

Node Sort

The Sort button at the top-right toggles between three modes: Default (d3-sankey's built-in ordering), Ascending (smallest to largest), and Descending (largest to smallest).

Settings

Click the gear icon to open the settings panel:

  • Chart Title — Custom title for exports.
  • Hide Step Labels — Toggle the column headers on/off.
  • Show Values on Flows — Display value and percentage on each flow line.
  • Custom Step Titles — Rename column headers (e.g. "Region", "Department").
  • Node Colors — Color picker for each root node. Non-root nodes get unique palette colors automatically.

Dark / Light Theme

Click the moon/sun icon floating at the top-right of the chart canvas to toggle. Chart, grid, and UI adapt. Your choice is reflected in exports.

Exporting

Click Download for five export formats:

FormatDescription
Excel (.xlsx)Two sheets: "Sankey Chart" with embedded PNG and "Data" with color-coded rows + totals.
PNGHigh-resolution (2600x1600px) image, respects theme.
SVGScalable vector graphic — infinite zoom, no quality loss.
CSVPlain text comma-separated file of your source/target/value data.
.sankeyJSON file with data + all settings. Re-import later or share with colleagues.

Sharing

Click Share to generate a shareable URL. The dataset and settings are compressed into the URL — anyone with the link sees your exact chart, no account needed.

Large datasets that exceed the URL limit will prompt you to download a .sankey file instead.

Versions

Click the Versions button in the header to save and restore snapshots of your chart:

  • Save Version — Captures your current data, settings, colors, and titles. Give it a name for easy identification.
  • Restore — Click any saved version to restore that exact chart state.
  • Delete — Click the ✕ next to a version to remove it.
  • Clear All — Remove all saved versions at once.

Up to 20 versions are stored in your browser's local storage. Versions include the full chart state — data, custom colors, titles, filter selection, and settings.

Embedding

Click Embed for two options:

  • iframe — Copy the embed code and paste into any website. The chart is fully interactive but hides controls for a clean look.
  • Standalone HTML — Downloads a self-contained file with all dependencies inlined. Works completely offline.

AI Assistant

Click the robot icon (bottom-right of chart) to open the AI assistant. This runs a small language model entirely in your browser using WebGPU — no data is sent to any server. The button only appears when data is loaded.

Getting Started

  • Requires Chrome or Edge (WebGPU support).
  • Choose a model size. SmolLM2 360M (376 MB) is fastest; larger models give better answers.
  • Click Load Model. The model downloads once and is cached by your browser.

Data Context Setup

On first use, the AI asks a few quick questions about your data (what values represent, units, chart description, time period). This prevents the AI from guessing or assuming units. Answers are saved and can be changed anytime via the ⟳ Setup button in the panel header.

Features

  • Auto-insights — After setup, the AI generates key findings about your data.
  • Ask questions — Type questions like "Which region has the most flow?" or "Compare X and Y".
  • Quick actions — Click preset buttons for common analyses (top flows, patterns, summary).
  • Data-aware — The AI sees your current nodes, flows, totals, and percentages. It updates when you change filters.
The AI runs locally. Your data never leaves your browser. Close the panel anytime with ✕.

Keyboard Shortcuts

ShortcutAction
Ctrl/Cmd + ClickToggle node selection (aggregate mode)
Ctrl/Cmd + ASelect all nodes
EscapeClear selection
Double-clickReset zoom
Scroll wheelZoom in/out
Drag backgroundPan the chart
Drag nodeReorder vertically

Data Format

Basic (3 columns)

Source   Target   Value

North AmericaEngineering150
North AmericaSales200
EuropeEngineering100

With Filter (4 columns)

Add a 4th column to enable filtering:

North AmericaEngineering1502024
North AmericaSales2002025

Multi-Level Flows

When a node appears as both a target and a source, the tool auto-creates multi-column charts:

Region ADept X100
Dept XTeam Alpha60
Dept XTeam Beta40

This produces: Regions → Departments → Teams

Supported delimiters: tab, comma, semicolon (auto-detected).

Tips & Tricks

Drag nodes to reorder and reduce crossing lines.
Click a node to isolate it, then examine the filtered grid data.
Ctrl/Cmd+click nodes to compare totals side by side.
Use Settings to add a title and show flow values before exporting to PNG or Excel.
Share via URL for small datasets. For larger ones, send the .sankey file.
Download the Standalone HTML embed for a chart that works offline.
Paste directly from Excel or Google Sheets — tab-separated format is handled natively.
Use the flow threshold slider to hide small flows and focus on the biggest connections.
Sort nodes ascending or descending to quickly spot the largest or smallest flows.
Save versions before making big changes — you can always restore a previous state.
Use the grid search bar to quickly find specific nodes or values in large datasets.
Embed Chart

Paste this into your website. The chart is interactive with hover, click-to-isolate, zoom & pan.

Download a self-contained HTML file with all dependencies inlined. No external services needed — host it anywhere.

Processing... 0%
Processing grid data
Building Sankey chart
Generating Excel workbook
Preparing download
✅
Excel file ready!
Map Columns
Your file has multiple columns. Select which ones to use:
Paste TSV / Tab-separated Data
Paste rows with 3-4 columns: Source, Target, Value [, Filter] (tab-separated)

Frequently Asked Questions

What is a Sankey diagram?

A Sankey diagram is a flow visualization where the width of each arrow or link is proportional to the quantity it represents. They are commonly used to show energy flows, budget allocations, website traffic paths, and organizational hierarchies. Total Sankey makes it easy to create interactive Sankey diagrams from simple spreadsheet data — just provide Source, Target, and Value columns.

How do I create a Sankey chart from Excel data?

Copy your data from Excel or Google Sheets (with columns for Source, Target, and Value), then click "Load Data" and choose "Paste Data." Total Sankey auto-detects delimiters and column roles. You can also import CSV or TSV files directly via drag-and-drop or the file picker. The chart generates instantly and you can export to Excel, PNG, SVG, or CSV.

Is Total Sankey free?

Yes. Total Sankey is completely free with no account required, no usage limits, and no watermarks. It runs entirely in your browser — there are no servers, subscriptions, or premium tiers. The tool is free forever.

Does my data stay private?

Yes. All data processing happens locally in your browser using JavaScript. No data is ever uploaded to any server. Even the optional AI assistant runs a local language model via WebGPU — your data never leaves your device. This makes Total Sankey suitable for sensitive or confidential datasets.

What export formats are supported?

Total Sankey supports five export formats: high-resolution PNG images, scalable SVG vector graphics, formatted Excel workbooks (.xlsx) with embedded charts and color-coded data, CSV for raw data, and .sankey project files that preserve all settings, colors, and chart state for later editing.