Categories

← View All Tools

Sankey Diagram Generator

Generate Sankey diagrams to visualize flow distributions and energy transfers between different nodes

Data for the Sankey diagram in JSON format with nodes and links arrays

Title that will be displayed above the chart

Colors for nodes (comma-separated hex colors)

Colors for flow links (comma-separated hex colors)

Width of the chart in pixels

Height of the chart in pixels

Width of each node in pixels

Vertical spacing between nodes in pixels

Background color for the chart container

Display flow values on the diagram

Display node names on the diagram

Animate the diagram when it loads

Key Facts

Category
Data Visualization
Input Types
textarea, text, number, color, checkbox
Output Type
html
Sample Coverage
4
API Ready
Yes

Overview

The Sankey Diagram Generator allows you to create professional flow-based visualizations by mapping nodes and links, making it easy to track energy transfers, resource distributions, or complex network flows.

When to Use

  • •When you need to visualize the distribution of resources or energy across different stages.
  • •When analyzing complex system flows where the volume of movement between nodes is critical.
  • •When you want to present data-driven insights through clear, animated, and interactive flow diagrams.

How It Works

  • •Input your data in JSON format, defining your nodes and the links that connect them with specific values.
  • •Customize the visual appearance by adjusting node colors, link colors, and chart dimensions.
  • •Toggle display options like labels, values, and animations to refine the presentation.
  • •Generate the diagram to visualize your data as a clean, professional HTML output.

Use Cases

Visualizing energy consumption across different sectors of a facility.
Mapping customer journey paths to identify drop-off points in a sales funnel.
Tracking budget allocation from funding sources to specific departmental projects.

Examples

1. Energy Consumption Analysis

Sustainability Analyst
Background
An analyst needs to report how electricity is distributed from the main grid to various building systems.
Problem
Traditional bar charts fail to show the relationship between the source and the final consumption points.
How to Use
Input the energy source nodes and consumption nodes into the JSON data field, then enable 'Show Values' to display the kilowatt-hours.
Example Config
{"nodes": [{"id": "grid", "name": "Main Grid", "value": 500}, {"id": "hvac", "name": "HVAC", "value": 300}, {"id": "lighting", "name": "Lighting", "value": 200}], "links": [{"source": "grid", "target": "hvac", "value": 300}, {"source": "grid", "target": "lighting", "value": 200}]}
Outcome
A clear flow diagram showing the total energy input and its proportional split between HVAC and lighting systems.

Try with Samples

json
PDF Samples
Generated PDF samples from tools dated 2026-02-01 to 2026-02-10
preferred input family json
json
Grafana Advanced Application Samples
Comprehensive Grafana samples covering advanced dashboard design, alerting configurations, data source integrations, and plugin development
preferred input family json
json
ELK Stack Log Analysis Samples
Comprehensive ELK Stack (Elasticsearch, Logstash, Kibana) samples for log aggregation, processing, and visualization in distributed systems
preferred input family json
json
D3.js Data Visualization Samples
Comprehensive D3.js data visualization examples including charts, maps, animations, and interactive visualizations
preferred input family json
json

Related Hubs

Json Convert Tools
Explore 100 json tools for convert workflows and compare closely related utilities quickly.
Json Tools
Explore 43 json tools for utility workflows and compare closely related utilities quickly.
Json Generate Tools
Explore 33 json tools for generate workflows and compare closely related utilities quickly.
Json Format Tools
Explore 6 json tools for format workflows and compare closely related utilities quickly.

FAQ

What data format does the generator require?

The tool requires a JSON object containing two arrays: 'nodes' (with id, name, and value) and 'links' (with source, target, and value).

Can I customize the colors of the diagram?

Yes, you can provide comma-separated hex color codes for both nodes and links to match your brand or data categories.

What is the purpose of the 'Node Padding' setting?

Node padding controls the vertical spacing between nodes, allowing you to adjust the density and readability of the diagram.

Is the diagram interactive?

The generated diagram supports optional animations on load and can display labels and flow values directly on the links.

What are the limits for the chart dimensions?

The chart width can be set between 600 and 1200 pixels, and the height can be set between 400 and 800 pixels.

API Documentation

Request Endpoint

POST /en/api/tools/sankey-diagram-generator

Request Parameters

Parameter Name Type Required Description
chartData textarea Yes Data for the Sankey diagram in JSON format with nodes and links arrays
chartTitle text No Title that will be displayed above the chart
nodeColors text No Colors for nodes (comma-separated hex colors)
linkColors text No Colors for flow links (comma-separated hex colors)
chartWidth number No Width of the chart in pixels
chartHeight number No Height of the chart in pixels
nodeWidth number No Width of each node in pixels
nodePadding number No Vertical spacing between nodes in pixels
backgroundColor color No Background color for the chart container
showValues checkbox No Display flow values on the diagram
showLabels checkbox No Display node names on the diagram
animated checkbox No Animate the diagram when it loads

Response Format

{
  "result": "
Processed HTML content
",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
HTML: HTML

AI MCP Documentation

Add this tool to your MCP server configuration: 

{
  "mcpServers": {
    "elysiatools-sankey-diagram-generator": {
      "name": "sankey-diagram-generator",
      "description": "Generate Sankey diagrams to visualize flow distributions and energy transfers between different nodes",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=sankey-diagram-generator",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

You can chain multiple tools, e.g.: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, max 20 tools.

If you encounter any issues, please contact us at [email protected]