What Is a Sankey Diagram? A Guide for SaaS Developers

Author's Note

As the founder of a data visualization company, I've seen countless teams struggle to understand complex user behavior. We often get stuck looking at aggregate numbers that hide the real story. Sankey diagrams have always fascinated me as a powerful way to untangle that complexity and literally see the paths users take through an application.

Disclosure: This article is published by Dashrendr. Where Dashrendr is relevant to the discussion—particularly in preparing data for visualization—I say so directly, including its current limitations.

What Is a Sankey Diagram?

A Sankey diagram is a type of flow diagram that visualizes the movement of a quantity from a starting point to an endpoint through multiple stages or processes. Its most defining characteristic is that the width of the arrows or streams (called links) is directly proportional to the flow quantity they represent. In short, a wider stream means a larger amount.

This makes the sankey chart definition simple: it's a visualization of flows. It helps you see not just where things start and end, but also the scale of the journeys in between. Unlike a simple flowchart, the proportional widths give you an immediate sense of the most significant contributions to a flow.

The core components of a Sankey diagram are:

• Nodes: These are the rectangular blocks that represent different stages, categories, or states in the process (e.g., 'Signed Up', 'Created Project', 'Invited Teammate').
• Links: These are the connections or streams that flow between nodes, visually representing the quantity moving from one node to the next.

The concept dates back to 1898, when Irish Captain Matthew Sankey used it to illustrate the energy efficiency of a steam engine. But one of its most famous historical examples is Charles Minard's 1869 map of Napoleon's disastrous Russian campaign, which brilliantly combines a Sankey-like flow map with temperature and time data. According to Edward Tufte, a pioneer in data visualization, Minard's graphic may be the best statistical graphic ever drawn. Today, they are an essential tool for user flow visualization in modern software applications.

How to Read and Interpret a Sankey Diagram

At first glance, a Sankey diagram can look like a complex web of colorful rivers. But once you understand its structure, it becomes an intuitive tool for analysis. Answering the common question, "How do you interpret a Sankey diagram?" is straightforward if you follow the flow.

Step 1: Identify the Start and End Points

Look at the far left for the sources and the far right for the destinations. The total width of all links originating from the start nodes represents the total initial quantity. The diagram shows how this initial quantity is distributed and transformed as it moves toward the final nodes.

Step 2: Follow a Specific Path

Pick a single source node and trace its link as it moves across the diagram. Observe how the stream splits, merges with other streams, and changes in width. This path represents a specific journey or segment. For example, you could follow the path of users who signed up via Google to see which features they engage with first.

Step 3: Pay Attention to Link Width

The width is the most critical element. A thick link indicates a large flow, while a thin link represents a small one. This allows you to quickly identify the most significant pathways and potential bottlenecks or drop-offs. If a link from 'Free Trial' to 'Subscribed' is very thin, that's a clear indicator of a conversion problem.

Step 4: Analyze the Intermediate Nodes

The nodes in the middle of the diagram show the intermediate stages of the process. The total flow into a node must equal the total flow out of it. Analyzing these nodes can reveal how different segments behave at crucial steps. For instance, you might see that users from 'Campaign A' are more likely to pass through the 'Upload Data' node than users from 'Campaign B'.

Why Use Sankey Diagrams in a SaaS Context?

While Sankey diagrams are used in many fields, they are exceptionally powerful for SaaS businesses trying to understand user behavior. Aggregate metrics like Daily Active Users are useful, but they don't tell you *what* those users are doing. A study by Forrester Research found that companies that prioritize data-driven decisions are 58% more likely to beat their revenue goals. Sankey diagrams turn that data into actionable stories.

Visualizing User Onboarding Funnels

A classic use case is mapping the user onboarding journey. You can visualize the flow from 'Signed Up' to 'Verified Email', 'Created First Project', and 'Invited Teammate'. A Sankey diagram will immediately show you where users drop off. If a huge stream flows into 'Verified Email' but only a trickle makes it to 'Created First Project', you've found a critical friction point in your activation sequence.

Mapping Feature Adoption Paths

Which features lead to long-term retention? A Sankey diagram can map the paths users take after their first week. You might discover that users who engage with your 'Scheduled Snapshots' feature are far more likely to flow into the 'Retained after 90 days' node. This insight is gold, telling you which features to highlight for new users.

Analyzing Revenue and Churn Pathways

Sankey diagrams are not just for user behavior. You can use them to visualize financial flows. For instance, you could map MRR (Monthly Recurring Revenue) from different sources ('New Customers', 'Upgrades', 'Expansion') to different subscription plans. On the flip side, you can visualize churn pathways, showing the sequence of events or inactivity that precedes a user canceling their subscription. A PWC study notes that 32% of customers will walk away from a brand they love after just one bad experience, making it vital to spot these negative pathways early.

Sankey Diagram vs. Other Flow Charts (like Funnel Charts)

SaaS teams often use funnel charts to track conversions. So, how is a Sankey diagram different?

A funnel chart is ideal for visualizing a single, linear path with successive drop-offs. It's perfect for a simple sales or conversion funnel where the only option at each stage is to continue or drop out. The key limitation is that it can't show users moving between different states or returning to previous ones.

A Sankey diagram excels where a funnel chart falls short. It can visualize many-to-many relationships and complex, branching paths. If a user can go from 'Dashboard' to 'Feature A', 'Feature B', or 'Settings', a Sankey diagram can show the proportional flow to each of those options. It reveals the non-linear, messy reality of user behavior that a simple funnel hides.

The key architectural takeaway is this: Use a funnel chart for linear, single-path processes. Use a Sankey diagram when you need to understand flow between multiple states, including branching paths, merging flows, and many-to-many relationships.

Building the Data Structure for a Sankey Diagram

Creating a Sankey diagram requires your data to be in a specific format. You need a list of flows, where each flow has three components: a source, a target, and a value. For example: ['Signed Up', 'Verified Email', 1000].

This is where an embedded analytics platform like Dashrendr becomes essential. While Dashrendr doesn't offer a native Sankey chart component in its drag-and-drop builder *today*, it excels at the foundational step: getting your data ready. Our platform is built on two ingestion paths: direct database connectors and a REST API for pushing pre-aggregated data.

You can connect Dashrendr directly to your production database (like PostgreSQL or MySQL) or data warehouse (BigQuery). From there, you can write a simple SQL query to transform your event data into the [Source, Target, Value] format required. This is one of the many embedded analytics use cases that go beyond simple KPIs.

Alternatively, your backend can process event logs, aggregate them into the Sankey format, and push that data to Dashrendr via our REST API. This approach is perfect for complex scenarios and minimizes load on your primary database. Once the data is prepared, you can feed it into a JavaScript charting library to render the final visualization inside your SaaS.

Tools and Libraries for Creating Sankey Diagrams

Once you have your data structured correctly, several tools can help you visualize it. The choice depends on your technical needs and desired level of customization.

• Google Charts: The Google Charts library provides a robust and highly customizable Sankey diagram implementation. It's a great choice for web developers looking to embed interactive charts in their applications.
• D3.js: For maximum flexibility and customization, D3.js is the industry standard. It's a low-level library that gives you complete control over every visual element, but it has a steeper learning curve. Many other libraries, including Google Charts, are built on top of D3.
• Plotly: Plotly offers high-level APIs in languages like Python and JavaScript, making it easier to generate complex visualizations like Sankey diagrams with less code.
• SankeyMATIC: For a no-code solution, SankeyMATIC is a free online tool that lets you paste your data and generate a diagram instantly. It's perfect for quick explorations or one-off reports but not for embedding within a product.

Best Practices for Designing Effective Sankey Diagrams

A poorly designed Sankey can be more confusing than helpful. As with all dashboard design, clarity is paramount. According to a report from Tableau, 90% of the information transmitted to the brain is visual. Make sure your visuals are telling the right story.

• Keep it Simple: Avoid adding too many nodes or stages. If the diagram becomes a tangled mess, it loses its explanatory power. Group minor flows into an 'Other' category if necessary.
• Use Color Strategically: Color can be used to group related flows or highlight a specific path. However, avoid using too many bright, competing colors, which can overwhelm the user. Use a consistent color for each major category throughout its journey.
• Order Nodes Logically: Arrange the nodes to minimize crossing links as much as possible. A clean, left-to-right flow is easiest to follow. Most libraries handle this automatically, but you can sometimes influence it by how you order your data.
• Provide Clear Labels and Context: Label your nodes and consider adding annotations for key insights. A title and a brief description explaining what the chart shows are essential.

Conclusion: Seeing the Flow in Your SaaS

The sankey diagram is more than just a complex chart; it's a powerful lens for understanding the dynamic, interconnected systems that drive your SaaS business. By visualizing the proportional flow of users, revenue, or events, you can move beyond static, aggregate metrics and uncover the hidden stories in your data.

Whether you're diagnosing a leaky onboarding funnel, identifying the pathways of your most valuable users, or simply trying to build a more data-informed product, the Sankey diagram is an invaluable tool for any developer or product team.

Ready to get the data you need for powerful visualizations like this? Dashrendr is a visual-first embedded analytics platform for SaaS teams, with native connectors for PostgreSQL, BigQuery, MySQL, and more. Our plans start at just $6/month, and you can explore all our features with a 14-day free trial, no credit card required. Get started today and see the flow in your data.