syncfusion-blazor-sankey

What this skill does

# Implementing Syncfusion Blazor Sankey Diagram

**NuGet:** `Syncfusion.Blazor.Sankey` + `Syncfusion.Blazor.Themes`  
**Namespace:** `Syncfusion.Blazor.Sankey`

A comprehensive skill for implementing the Syncfusion Blazor Sankey Diagram component. The Sankey diagram is a powerful visualization tool for displaying flows and relationships between categories, showing the magnitude and direction of flows using proportionally-sized links.

## When to Use This Skill

Use this skill when you need to:
- **Visualize flows and relationships** between different categories or stages
- **Display energy or resource flows** in systems (electricity, water, materials)
- **Show data movements** between entities (website traffic, user journeys, data pipelines)
- **Illustrate budget or financial flows** (income/expenses, resource allocation)
- **Map supply chain or logistics** flows (product movement, distribution)
- **Create process flow diagrams** with quantifiable magnitudes
- **Analyze network flows** (data transfer, communication patterns)
- **Display conversion funnels** with drop-off visualization
- Implement the `SfSankey` Blazor component
- Work with flow data structures (nodes and links)
- Customize Sankey diagram appearance and behavior
- Handle interactive events for flow exploration
- Export or print flow diagrams

## Component Overview

### What is a Sankey Diagram?

A Sankey diagram is a flow diagram where the width of arrows or connections is proportional to the flow magnitude. It consists of:

- **Nodes**: Entities, categories, or stages in the flow (e.g., energy sources, process steps)
- **Links**: Connections between nodes showing flow direction and magnitude
- **Flow Width**: Visual representation of quantity/magnitude (wider = larger flow)

### Key Features

- **Data-driven visualization** with nodes and links collections
- **Automatic layout** with configurable orientation (horizontal/vertical)
- **Rich customization** for nodes, links, labels, and legends
- **Interactive events** for clicks, hovers, and rendering customization
- **Tooltips** showing flow details on hover
- **Print and export** functionality (PNG, JPEG, SVG, PDF)
- **Accessibility** compliant with WCAG 2.2 standards
- **Responsive design** with dynamic resizing

## Documentation and Navigation Guide

### Getting Started
📄 **Read:** [references/getting-started.md](references/getting-started.md)  
**When to read:** First-time setup, installation, project configuration  
**Contains:**
- NuGet package installation (Syncfusion.Blazor.Sankey)
- Service registration and namespace imports
- CSS theme and script references
- Basic Sankey diagram implementation
- Complete minimal working example
- Setup troubleshooting

### Data Binding
📄 **Read:** [references/data-binding.md](references/data-binding.md)  
**When to read:** Setting up data structure, binding nodes and links, API integration  
**Contains:**
- Understanding SankeyDataNode and SankeyDataLink models
- Creating nodes and links collections
- Binding data to the Sankey component
- REST API integration patterns
- JSON data structure examples
- Dynamic data updates

### Nodes Configuration
📄 **Read:** [references/nodes.md](references/nodes.md)  
**When to read:** Customizing node appearance, styling, properties  
**Contains:**
- Node fundamentals and structure
- Node ID and label configuration
- Node styling with SankeyNodeSettings
- Color, width, and padding properties
- Node positioning and layout
- Complete node examples

### Links Configuration
📄 **Read:** [references/links.md](references/links.md)  
**When to read:** Configuring flow connections, link styling, magnitude representation  
**Contains:**
- Link fundamentals and flow representation
- SourceId, TargetId, and Value properties
- Link styling with SankeyLinkSettings
- Color, opacity, and stroke properties
- Flow direction and magnitude
- Multiple path flow examples

### Labels Customization
📄 **Read:** [references/labels.md](references/labels.md)  
**When to read:** Customizing node labels, text formatting  
**Contains:**
- Label configuration and positioning
- Font properties (size, weight, family, color)
- Text formatting and truncation
- Label visibility controls
- Custom label examples

### Legends Configuration
📄 **Read:** [references/legends.md](references/legends.md)  
**When to read:** Adding and customizing diagram legends  
**Contains:**
- Legend configuration with SankeyLegendSettings
- Visibility and positioning options
- Legend item customization
- Shape and color mapping
- Interactive legend behavior
- LegendItemRendering event

### Tooltips
📄 **Read:** [references/tooltips.md](references/tooltips.md)  
**When to read:** Adding interactive tooltips, customizing tooltip content  
**Contains:**
- Tooltip configuration and triggers
- Custom tooltip templates
- Node and link tooltip differentiation
- TooltipRendering event
- Formatting tooltip content
- Styling examples

### API Reference
📄 **Read:** [references/api-reference.md](references/api-reference.md)  
**When to read:** Looking up component properties, events, methods, and enums  
**Contains:**
- Complete SfSankey component API documentation
- All properties with types and defaults
- All 16 events with event arguments
- All public methods (Export, Print, Refresh)
- Data model classes (SankeyDataNode, SankeyDataLink, SankeyDataLabel)
- Settings components (Node, Link, Label, Legend, Tooltip)
- Enums and event arguments
- Full component hierarchy
- Complete working examples

### Customization
📄 **Read:** [references/customization.md](references/customization.md)  
**When to read:** Advanced styling, layout options, themes, RTL support  
**Contains:**
- Background styling (color and image)
- Diagram dimensions and sizing
- Layout orientation (horizontal/vertical)
- RTL (Right-to-Left) support
- Theme integration
- Custom CSS classes
- Responsive design patterns

### Events and Interactivity
📄 **Read:** [references/events.md](references/events.md)  
**When to read:** Handling user interactions, customizing rendering, responding to changes  
**Contains:**
- Complete event reference (16 events)
- Rendering events (NodeRendering, LinkRendering, LabelRendering)
- Interaction events (NodeClick, LinkClick)
- Hover events (NodeEnter/Leave, LinkEnter/Leave)
- Lifecycle events (Created, SizeChanged)
- Export events (PrintCompleted, ExportCompleted)
- Event argument structures and examples

### Print and Export
📄 **Read:** [references/print-export.md](references/print-export.md)  
**When to read:** Exporting diagrams to images/PDF, printing functionality  
**Contains:**
- Printing Sankey diagrams
- Export formats (PNG, JPEG, SVG, PDF)
- Export method configuration
- File naming and quality settings
- Print/export events
- Complete working examples

## Quick Start Example

Here's a minimal example showing energy source flow to energy types and end-use sectors:

```razor
@page "/sankey-demo"
@using Syncfusion.Blazor.Sankey

<SfSankey Width="100%" Height="600px" Nodes="@Nodes" Links="@Links">
    <SankeyNodeSettings Width="20" Padding="20"></SankeyNodeSettings>
    <SankeyLinkSettings Opacity="0.4"></SankeyLinkSettings>
</SfSankey>

@code {
    public List<SankeyDataNode> Nodes = new List<SankeyDataNode>();
    public List<SankeyDataLink> Links = new List<SankeyDataLink>();

    protected override void OnInitialized()
    {
        // Define nodes
        Nodes = new List<SankeyDataNode>()
        {
            new SankeyDataNode() { Id = "Solar", Label = new SankeyDataLabel() { Text = "Solar" } },
            new SankeyDataNode() { Id = "Wind", Label = new SankeyDataLabel() { Text = "Wind" } },
            new SankeyDataNode() { Id = "Hydro", Label = new SankeyDataLabel() { Text = "Hydro" } },
            new SankeyDataNode() { Id = "Electricity", Label = new SankeyDataLabel() { Text = "Electricity" } },
            new SankeyDataNode() { Id = "Heat", Label = new SankeyDataLabel() { Text = "Heat" } },