# Sankey Diagram Generator Generate Sankey diagrams to visualize flow distributions and energy transfers between different nodes > Canonical page: https://elysiatools.com/en/tools/sankey-diagram-generator - **Category:** Data Visualization - **Keywords:** sankey, flow, diagram, chart, visualization, energy, distribution, network ## 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. ## Inputs - **Chart Data** (textarea): Data for the Sankey diagram in JSON format with nodes and links arrays - **Chart Title** (text): Title that will be displayed above the chart - **Node Colors** (text): Colors for nodes (comma-separated hex colors) - **Link Colors** (text): Colors for flow links (comma-separated hex colors) - **Chart Width** (number): Width of the chart in pixels - **Chart Height** (number): Height of the chart in pixels - **Node Width** (number): Width of each node in pixels - **Node Padding** (number): Vertical spacing between nodes in pixels - **Background Color** (color): Background color for the chart container - **Show Values** (checkbox): Display flow values on the diagram - **Show Labels** (checkbox): Display node names on the diagram - **Animated** (checkbox): Animate the diagram when it loads ## 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. ## Frequently asked questions ### 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. ## Related tools - [Bar Chart Generator](https://elysiatools.com/en/tools/bar-chart-generator): Generate customizable bar charts from data with various styling options - [Bubble Chart Generator](https://elysiatools.com/en/tools/bubble-chart-generator): Generate customizable bubble charts from data with three dimensions (x, y, size) - [Donut Chart Generator](https://elysiatools.com/en/tools/donut-chart-generator): Generate customizable donut charts (ring charts) from data with various styling options, perfect for showing proportions with a central space - [Funnel Chart Generator](https://elysiatools.com/en/tools/funnel-chart-generator): Generate customizable funnel charts from data, perfect for showing conversion rates, sales pipelines, and process flows - [Gauge Chart Generator](https://elysiatools.com/en/tools/gauge-chart-generator): Generate customizable gauge charts (speedometer charts) from data, perfect for displaying KPIs, metrics, and performance indicators - [Heatmap Generator](https://elysiatools.com/en/tools/heatmap-generator): Generate customizable heatmaps from data, perfect for visualizing data density, correlations, and patterns - [Pictograph Generator](https://elysiatools.com/en/tools/pictograph-generator): Create pictographs using icons/symbols to represent quantities with customizable icons, colors, and layouts - [Pie Chart Generator](https://elysiatools.com/en/tools/pie-chart-generator): Generate customizable pie charts from data with various styling options ## Samples - [Grafana Advanced Application Samples](https://elysiatools.com/en/samples/grafana-samples): Comprehensive Grafana samples covering advanced dashboard design, alerting configurations, data source integrations, and plugin development - [D3.js Data Visualization Samples](https://elysiatools.com/en/samples/d3js-data-visualization): Comprehensive D3.js data visualization examples including charts, maps, animations, and interactive visualizations - [QR Code Samples](https://elysiatools.com/en/samples/qrcode-samples): Sample QR code images for testing QR code reading and generation tools - [ELK Stack Log Analysis Samples](https://elysiatools.com/en/samples/elk-stack-samples): Comprehensive ELK Stack (Elasticsearch, Logstash, Kibana) samples for log aggregation, processing, and visualization in distributed systems ## Related content - [Chart and Diagram Generators](https://elysiatools.com/en/hubs/chart-diagram-generators): Choose a chart or diagram that makes comparisons, distributions, hierarchies, relationships, and schedules understandable.