Building an SVG Sankey Diagram
A Sankey diagram shows flows between nodes using ribbons whose thickness is proportional to the quantity flowing.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Nodes as Rectangles, Flows as Curved Paths
A Sankey diagram renders each node as a rect element positioned in a vertical column, with flows between nodes drawn as path elements using cubic Bezier curves whose stroke width, or filled thickness, encodes the magnitude of the flow being represented.
- Each node renders as a rect element positioned within a vertical column
- Flows render as path elements using cubic Bezier curves between nodes
- Path thickness encodes the magnitude of the quantity flowing through
Computing Node Positions and Link Widths
The layout requires assigning each node to a column based on its depth in the flow, then stacking nodes vertically within each column proportionally to their total throughput, so that incoming and outgoing link widths align cleanly against each node's edges.
- Nodes are assigned to columns based on their depth in the flow sequence
- Within each column, nodes stack vertically by total throughput
- This alignment lets incoming and outgoing links meet node edges cleanly
Frequently Asked Questions
What does the thickness of a Sankey link represent?
Link thickness is proportional to the quantity flowing along that path, letting readers compare the relative magnitude of different flows at a glance.
How are the curved links in a Sankey diagram drawn?
They're typically path elements using cubic Bezier curves, with control points placed horizontally between the source and target nodes to produce a smooth S-shaped ribbon.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG