Back to Examples

What is Sankey diagram?

Sankey Diagram brings the power of flow visualization to web applications with ReactFlow. This specialized tool creates stunning Sankey diagrams that show the flow of quantities, resources, or data through a system using beautifully animated paths where width represents magnitude.

Sankey diagrams excel at showing how things flow through a process—whether it's energy through a power grid, money through a budget, or traffic through a network. The visual representation makes it immediately clear where resources are concentrated, where losses occur, and how different parts of a system interconnect. This tool makes creating these sophisticated visualizations accessible and beautiful.

The solution includes support for custom node designs, smooth animations that bring data to life, interactive zoom and pan for exploring complex flows, and a powerful API for integrating with live data sources. Perfect for creating analytical dashboards, resource management tools, or any application where understanding flow and distribution is crucial.

Features & Capabilities

This application includes several powerful features that make it easy to create professional sankey diagram applications:

Custom Shapes

Flexible node designs that can represent different types of sources, sinks, and process steps in your flow.

Zoom & Pan

Smooth navigation controls for exploring complex flows with many nodes and connections.

Animation

Beautiful flow animations that show data movement in real-time, making patterns immediately visible.

Data Visualization

Advanced visualization engine that accurately represents quantities through path widths and colors.

Graph API

Comprehensive API for connecting to live data sources and updating flows in real-time.

Technologies Used

React
TypeScript
ReactFlow
D3.js
SVG
Canvas API

Integration

Connect to real-time data sources including databases, APIs, and streaming platforms. Export diagrams as SVG, PNG, or interactive HTML for reports and presentations. Integrates with BI tools and analytics platforms. Supports large datasets with thousands of flows. Compatible with D3.js for advanced customization. Real-time updates without full page refresh.

Use Cases

Sankey diagram is perfect for a wide range of applications and scenarios:

Energy flow visualization and management
Budget allocation and financial flow tracking
Supply chain and logistics visualization
Network traffic analysis
Material flow in manufacturing
User journey and funnel analysis

Key Benefits

  • Understand complex flows at a glance
  • Identify bottlenecks and inefficiencies visually
  • Real-time data integration
  • Professional presentation quality
  • Interactive exploration of data
  • Export-ready for reports and dashboards