SankeyMATIC News

8 November 2022

Big updates: Better layout, new controls

Adapted from a Mastodon thread.

Friends: I have been spending time in the Land of Somewhat Challenging Geometry Algorithms.

After an extended stay there, I return to you with some visible improvements to share.

3 small example diagrams showing some of the new output capabilities of SankeyMATIC. The first example is a funnel where the initial nodes lose value and converge on a single final node. The second is an image where one node splits into two child flows; the top child node splits into two more child flows; then the top grandchild splits into two more flows. The third is a binary tree showing 8 elements collapsing down to one and then splitting into 8 nodes again on the far end. Each type of image will be referenced below.

Improvement #1: A better layout engine!

SankeyMATIC has new ideas about how to arrange Nodes and Flows.

It now puts more effort into producing more balanced, more symmetrical, less lopsided diagrams.

To the right are a couple of examples showing the difference it can make.

(To make comparisons clear, the same data inputs were used for the Old vs. New versions.)

2 pairs of before & after images demonstrating the improved SankeyMATIC layout algorithm. Each pair shows a lopsided image 'before' and a much more symmetrical one 'after' given the same inputs as the first image. At the bottom is the text: Same input data + better layouts = (tada emoji)
(click to enlarge)

One specific improvement these changes make possible:

Tree diagrams which are symmetrical!

You see tree patterns in lots of places, including sports tournament brackets.

Despite their simple structure, SankeyMATIC was not handling them well before.

It's much better now.

2 pairs of before & after images showing the new algorithm's symmetrical output for simple tree diagrams. The first pair show a single node splitting in half to become 2 children and then 4 grandchildren. The 'after' image has a horizontal dotted line to indicate the axis of symmetry. The second pair of images shows 8 nodes flowing into 4, then 2, then 1, then the reverse (2 then 4 then 8). The 'after' image contains a vertical and horizontal dotted line pointing out the dual axes of symmetry. At the bottom is the text: Symmetry!
(click to enlarge)

When your data has any other internal symmetry, the diagram ought to reflect that when it can.

Now, Flows from Nodes which don't have their full value flowing in/out can attach to the bottom of a Node when that makes sense.

This usually makes such diagrams look better, e.g. in the case of a funnel pattern.

2 pairs of before & after images showing off the new SankeyMATIC layout algorithm. The first pair shows nodes losing value as they proceed through stages; eventually they converge on a single final node. The second pair shows a single node feeding into 2 nodes which gain value from nowhere and eventually converge back to one node; the effect is to produce a diamond-shaped diagram. At the bottom is the text: Better 'unbalanced' diagrams, including funnels.'
(click to enlarge)

Improvement #2: More precise controls

The "Spacing" slider for Nodes has split into two: "Height" & "Spacing".

Before, the slider was controlling both height & spacing, which wasn't flexible.

Splitting them up gives you many more possibilities for how your diagrams look (as seen above).

Comparison of the old and new Node UI control panel for SankeyMATIC. In the old version, there is a Spacing slider highlighted, which spans the range '0' to 'Max'. In the new version, the Spacing slider looks similar (though smaller) and a new Height slider precedes it, with its range labeled as '.' to '|' (a visual cue that the beginning of the range corresponds to the least height and the end to the most).
(click to enlarge)

In summary:
  1. Better-looking layouts!
  2. More precise visual controls!
Try out the changes! In particular, play with the Height & Spacing sliders to see how they interact.

P.S. The code behind these improvements is already posted to The commits from October 2 - November 3, 2022 contain the key changes.

P.P.S. Enormous thanks to everyone who has donated in the past; your interest and generosity help to motivate work on improvements such as these. :)

3 November 2022

New Feature Roundup!

Been busy making lots of changes, but haven't been making lots of announcements.

Fixing that now!

Below are some highlights from the period April through early October, 2022; some of these items may get expanded posts in the future.

(The more recent major layout changes will get their own separate post soon.)

Try out these changes on the Build page!

17 April 2022

New Feature: Control your diagram's Spacing with a slider!

In the past, you could type a number to set the spacing between each Node in a column, but:

Now, you have a 'Spacing' slider which gives you an easy way to try out many different spacing approaches without needing to guess at a specific number.

And as a bonus, the look of your diagram will be preserved even when you change the height or margins.

Here is a short animation showing the feature in action:

Animation showing the SankeyMATIC interface with the new Spacing slider. Sliding the thumb to '0' removes all the space it can, making the flow diagram look more like a simple horizontal bar graph. Sliding the thumb to 'Max' makes the flows as thin as they can be (without making them disappear entirely).

One thing to keep in mind: The more spacing you add, the harder it becomes to accurately compare flow sizes, as you can see above.

Try it out! It’s actually pretty fun to experiment with.

(Honestly, it's one of my favorite features ever.)

More fixes

6 March 2022

New Feature: Better Color Selection Tools

Now, choosing a color theme for your Nodes is much more flexible and fun.

  • There are now four updated themes to choose from (up from 3). For more about these color schemes, visit the d3 color scales page.

  • Each theme's colors are visible at all times.

  • You can now rotate the colors within a theme so that SankeyMATIC will start assigning colors from any point in the list that you choose.

    Click the "<" and ">" buttons for your selected theme to adjust the starting point.

  • Every color in every theme will reveal its color code when you hover over it.

    This is handy if you want to adopt one specific color in your inputs.

    Screenshot showing a mouse hovering over a single color in a theme. A tooltip appears with this text: #e7298a from d3 color scheme Dark2.
  • Try it out!
Screenshot showing the updated SankeyMATIC Nodes interface with the new section 'Default Node Colors' highlighted. This section presents radio buttons which select between 4 themes. Next to each theme's name is a display showing all of that theme's colors. On the left and right sides of the color groups are arrow buttons. These buttons control which color the theme begins with.

Additional changes:

January 2022

New Feature: Straight Flows

SankeyMATIC has long had the ability to adjust the curvature of flows with a slider labeled Curviness.

However, it has not had the ability to remove all bends from the flows, since that actually requires a different drawing approach. (Straight or flat flows are really parallelograms, and no Bezier curve is going to produce that shape.)

That problem is now solved.

Setting the Curviness slider all the way to the left now produces truly straight flows.

Tiny example Sankey diagram showing flows which curve a little bit
Still a little curved...
Tiny example Sankey diagram showing flows which are completely flat
Totally flat!

New Feature: Extra Large image download format: 6x

For people who want higher-resolution output, there is now a 6x PNG image export option.

  • Tip: Depending on your diagram size and on your device, generating 4x or 6x images may make your experience filled with long pauses.

    To avoid this, set the export PNG image's Size to 1x or 2x while you are setting up your diagram so that you can iterate quickly.

    Wait until you are truly ready to export before choosing 6x.

Screenshot showing the SankeyMATIC Export PNG interface with the option '6x - XL' chosen

New SankeyMATIC Logo!

SankeyMATIC logo

The new 'S' logo will be used:

  • on Twitter
  • on GitHub
  • as the little icon for this site in your web browser
  • and so on.

Better filenames for downloaded images

Downloaded PNG image files now have a date/time stamp in the name, like: sankeymatic_20220130_155723_600x400.png.

Added "Made with SankeyMATIC" tag

When people post their SankeyMATIC diagrams to social media, it's very common for others to ask: "What did you use to make that?"

I've added a Made with SankeyMATIC tag to diagrams by default to help answer the question before people ask it.

For anyone who does not want the "Made with SankeyMATIC" tag, there is a simple nearby checkbox, plainly visible, to remove it.

Screenshot showing the 'Made with SankeyMATIC' text in a diagram and the checkbox you can use to remove it

Other minor changes

December 2021

New Feature: Sliders now produce 'live' changes

Appearance controls which use sliders (examples: Curviness, Node Opacity, Flow Opacity, Border Width) now make immediate changes to the diagram as you drag them.

This makes it much easier to observe what each slider is doing and to precisely pick the value you want.

Small screenshot showing the 'Curviness' slider from the SankeyMATIC Build page

Added multiple sample diagrams

Now there are 3 different diagrams you can use as starting points when you first begin.

Note: When you have made any changes to the Inputs field, choosing a new base diagram will alert you that you will lose your changes if you continue.

Thumbnail image of the sample Sankey diagram for a Job Search Thumbnail image of the sample Sankey diagram for a Ranked Election Thumbnail image of the sample Sankey diagram for a Basic Budget

Other minor changes

November 2021

New Feature: Better user experience when a diagram does not add up


  • SankeyMATIC treated any imbalance as an error and produced a prominent warning at the top of the page.
  • The list was not formatted in an easy-to-read fashion.
  • There was a way to turn off the check for balanced nodes, but that checkbox was buried in the Advanced settings panel and difficult to discover.

Now, SankeyMATIC will let you know that there are nodes with differences (not imbalances).

  • The notification is now below the diagram, not above. (It does not need to urgently grab your attention.)
  • The list of differences is now displayed in a more readable table.
  • The checkbox to stop listing differences is just above the list, making it much easier to find and use.
Screenshot of the old SankeyMATIC warning about node values not matching, starting with 'The Flow Cross-Checker found some imbalances'.

Screenshot of the new SankeyMATIC differences list. There is now a checkbox which controls whether you want to see the  differences, and the list is organized in a table to be more easily read.
When 'list the differences' is unchecked:
Screenshot of the new SankeyMATIC display when the box to list differences is unchecked. No list of differences is shown.


(I hope to backfill more of the history here someday, but until then, you can browse the detailed SankeyMATIC version history at GitHub.)