How to use Sankey Open Studio
Free and open source. Everything runs in your browser and your data never leaves your computer.
Your data, in three columns
A sankey diagram is a list of flows. Each flow has three parts: where the money or quantity comes From, where it goes To, and the Amount.
| From | To | Amount |
|---|
| Retail Sales | Revenue | 4200 |
| Wholesale | Revenue | 1800 |
| Revenue | Payroll | 1900 |
| Revenue | Net Profit | 1200 |
Set up these three columns in Excel or Google Sheets, copy them, then click Paste from spreadsheet in the Data panel and paste. A header row is fine, and dollar signs or commas in amounts get cleaned up automatically. You can also type flows straight into the table with + Add flow.
A node's total is calculated for you as the larger of what flows in and what flows out. If a middle node like Revenue looks unbalanced, check that the amounts on each side add up.
Editing nodes
Click any node (the solid bar) on the diagram to open its settings. There you can change its display label, give it a color, replace the second line (normally the amount) with your own text, and add an optional third line, like a note or a year over year change.
Long labels wrap on their own, and you can also control exactly where a label breaks. Type a | in the display label wherever you want a new line, so Special Funds | (user fees) renders as two lines split at the bar.
Drag any node to nudge it around the canvas. Your adjustments are remembered, even after you add more data. Reset node positions in the Layout panel puts everything back to automatic.
Coloring the diagram
- Presets. The Colors panel has 20 ready made palettes. Click one to color every node at once.
- One node. Click the node and pick a swatch or a custom color.
- One flow. Click any line to give that flow its own color. The Automatic button hands it back to the Flow color rule.
- Flow color rule. By default lines are neutral gray. In the Colors panel you can make every line match its source node or its target node instead.
Title and labels
The diagram title is the name at the top of the page. The Title panel lets you resize it, recolor it, or hide it. The Labels panel controls the font size, whether labels sit outside or inside the diagram, decimal places, and the prefix and suffix on amounts, so 4930.4 can display as $4,930.4M.
The small "created with" line at the bottom of the image can be turned off in the Labels panel.
Saving and backups
Every change saves automatically in your browser, and My diagrams holds as many diagrams as you like. Saving is per browser on this computer, so for anything important, or to move a diagram to another machine, use Download → JSON backup. The Restore from JSON button brings a backup file back in as a new diagram, with every color, position, and setting intact.
Clearing your browser's site data deletes saved diagrams. A JSON backup is your safety net.
Downloading your diagram
SVG is best for print and slides, it stays sharp at any size. PNG is a high resolution image ready for email and social posts. JSON backup is the diagram's data for restoring later.
Limits and quirks worth knowing
- No limit on diagrams, but storage has a ceiling. You can create as many diagrams as you like. They share your browser's local storage allowance, typically about 5 MB, which comfortably holds hundreds of typical diagrams. If storage ever fills up, the app tells you and asks you to back up and delete old diagrams.
- Diagrams live in one browser on one computer. They won't appear on your phone or another machine on their own. Move them with Download → JSON backup and Restore from JSON.
- Renaming a node in the data table gives it a fresh start. Colors, dragged positions, and custom text are attached to the node's name in the From and To columns, so a renamed node loses them. To change what a node displays without losing anything, click the node and change its display label instead.
- Amounts must be positive numbers. Rows with zero, negative, or missing amounts stay in the table but are left out of the drawing. For losses, model them as an inflow, such as "Funded by Savings (Net Loss)".
- Loops can't be drawn. A circular chain like A to B and back to A has no left to right direction, so the app breaks the loop to keep the diagram drawable.
- There is no undo button. Changes save immediately. Clear all and diagram deletion ask for confirmation first, and a JSON backup is the reliable safety net before big edits.
- Everything happens on your computer. The app works offline once loaded. The only thing the hosted site tracks is anonymous usage counts via Google Analytics; your diagram content is never sent anywhere. Details in the privacy policy.
Quick answers
- My diagram looks tangled. Try a larger canvas size, more node spacing, or drag the busiest nodes apart. The Smart layout option in the Layout panel can also spread each column's nodes evenly from top to bottom instead of hugging the flows.
- I have 50+ tiny flows and it's unreadable. Turn on Combine small end nodes in the Layout panel. Everything under your chosen share of the total merges into one "Other" node in the drawing while your data table keeps every row. For full control, do the grouping in your spreadsheet instead, keep the top 10 to 15 rows and sum the rest into one "All Others" row.
- A label is cut off. Long names wrap automatically, but a bigger canvas gives them more room.
- Can two nodes have the same name? Same name means same node. Use distinct names like "Fees (state)" and "Fees (federal)" to keep them separate.
- Does anyone see my data? No. There is no server and no account. Everything stays on your computer.