In the realm of DevOps and cloud architecture, understanding the flow of resources is as critical as understanding the flow of data. While standard bar charts can tell you how much you spent, they rarely explain how that money was allocated across a complex hierarchy. Enter the Sankey Diagram, a powerful visualization tool that maps the distribution and flow of quantities—in this case, financial resources—across different stages of an infrastructure stack.
This tutorial guides you through the construction of an Infrastructure Cost Flow Analyzer using ECharts. We will deconstruct the provided ECharts configuration to understand how to model hierarchical financial data, visualize proportional distribution, and implement interactive features for technical analysis.
1. The Architecture of a Sankey Diagram
Before writing a single line of code, it is essential to understand the underlying data model. A Sankey diagram is unique because it requires a specific separation of data points into two distinct collections: Nodes and Links.
- Nodes (The Entities): These represent the entities in your system, such as “Total Budget,” “AWS Cloud,” or “EC2 Compute.” In the diagram, these appear as vertical bars (or nodes) on the left and right sides. Their width (or height, depending on orientation) is proportional to the value associated with them.
- Links (The Flows): These represent the relationships and the quantity moving between nodes. For example, a link connects “Total Budget” to “AWS Cloud” with a value of 8,000. The thickness of the flow line is directly proportional to this value.
The Concept of Flow Conservation
One of the most rigorous rules in Sankey modeling is flow conservation. In a financial context, this means that the total value entering a node must equal the total value leaving that node. If you allocate $10,000 to a “Cloud” node, and you split it into “Compute” and “Storage,” the sum of the outgoing links must equal $10,000. ECharts calculates the node widths automatically based on the sum of the incoming and outgoing links.
2. Step-by-Step Implementation with ECharts
We will now walk through the JavaScript configuration object provided in the context. This configuration uses the ECharts library to render the diagram dynamically within a web browser.
Step 1: Defining the Title and Tooltips
First, we establish the context of the visualization. The title provides the high-level summary, while the tooltip configuration ensures interactivity. When a user hovers over a specific link, they see the exact data point.
option = {
title: { text: 'Infrastructure Cost Flow Analyzer' },
tooltip: {
trigger: 'item',
triggerOn: 'mousemove' // Updates dynamically as the mouse moves
},Step 2: Configuring the Nodes
The data array within the series defines the nodes. In this scenario, we have a hierarchical structure:
- Source: Total Budget
- Intermediate: AWS Cloud, SaaS Tooling
- Destinations: EC2 Compute, RDS Storage, Monitoring
series: [{
type: 'sankey',
data: [
{ name: 'Total Budget' },
{ name: 'AWS Cloud' },
{ name: 'SaaS Tooling' },
{ name: 'EC2 Compute' },
{ name: 'RDS Storage' },
{ name: 'Monitoring' }
],Step 3: Mapping the Financial Flows (Links)
This is the core logic. We define the links array to connect the names defined in the data section. Notice how the source “Total Budget” splits into two distinct paths.
links: [
// The Main Budget Allocation
{ source: 'Total Budget', target: 'AWS Cloud', value: 8000 },
{ source: 'Total Budget', target: 'SaaS Tooling', value: 2000 },
// AWS Cloud Allocation
{ source: 'AWS Cloud', target: 'EC2 Compute', value: 5500 },
{ source: 'AWS Cloud', target: 'RDS Storage', value: 2500 },
// SaaS Allocation
{ source: 'SaaS Tooling', target: 'Monitoring', value: 2000 }
],Step 4: Styling the Flow
To make the diagram readable, we apply styles to the links. The code snippet provided uses lineStyle: { color: 'source' }. This is a crucial design choice. It ensures that a flow line takes the color of its starting node. This creates a visual continuity, allowing the eye to track the “Total Budget” (e.g., green) flowing into “AWS Cloud” (e.g., pink) and then splitting into sub-components.
lineStyle: {
color: 'source', // Keeps the flow color consistent with the source node
curveness: 0.5 // Adds a slight curve for aesthetic flow
}
}]};3. Analyzing the Data Logic
Let’s break down the financial logic represented in this diagram to see how it informs infrastructure planning:
- Total Budget Distribution: The largest chunk of the budget (80%) is directed towards AWS Cloud, indicating a heavy reliance on infrastructure-as-a-service (IaaS) and platform-as-a-service (PaaS) rather than third-party software.
- Compute vs. Storage: Within the AWS Cloud allocation, EC2 Compute consumes the majority (5,500) compared to RDS Storage (2,500). This suggests an application that is likely compute-intensive (e.g., running heavy background jobs or processing data) rather than a data-heavy application.
- Tooling Efficiency: The “SaaS Tooling” budget is fully allocated to “Monitoring.” This implies a strategic decision to centralize observability costs rather than scattering them across various disparate tools.
4. Best Practices for Financial Modeling
When building these diagrams for stakeholder presentations, clarity is king. Always ensure your node names are consistent (e.g., don’t switch between “AWS Cloud” and “Amazon Web Services” in the same model). Additionally, always use the value property to represent the currency or unit of measure, ensuring the visual width of the bars accurately reflects the financial reality.
Conclusion
The Infrastructure Cost Flow Analyzer is more than just a chart; it is a storytelling device. By using ECharts to render a Sankey diagram, you transform raw spreadsheet data into an intuitive visual narrative. This allows architects and finance teams to instantly identify where the majority of resources are consumed and spot potential inefficiencies in the infrastructure hierarchy.
vpadmin- October 26, 2026
