Sankey Diagram Lite

What it does

List your flows as From, To and Value, and Sankey Diagram Lite builds the diagram for you. Nodes are created from the names, columns and band thickness are calculated automatically, and the layout is untangled so the bands cross as little as possible.

Hover or tap a node or a band to highlight the flow connected to it and dim everything else, with a tooltip showing the value and share. It is keyboard friendly and works for traffic funnels, budgets, user journeys and supply chains.

Customizable properties

• Links (up to 8): From, To, Value

• Labels: name, name + value, name + %, name + value + %, none

• Link color: gradient, from node, to node or neutral

• Align ends, tooltip, value prefix and suffix

• Node width, gap and radius, link and dim opacity, padding

• Palette, label and background colors, alt text, font

Need more?

The full version, 07 Sankey Flow Diagram, adds unlimited links, vertical direction, full-path highlighting of everything upstream and downstream, and per-node colors: https://www.framer.com/marketplace/components/07-sankey-diagram/

Need help?

Reach out anytime at hello@brandingupstudio.com. We usually reply within 1 business day.

Built with code but fully customizable via property controls, no coding needed. Unlink is not provided so we can keep delivering updates. When an update is available, just click the Update button on the component.

Every paid BrandingUp component in one payment: All-Access Pass, $49 → https://brandingup.lemonsqueezy.com/checkout/buy/3391c106-6fbc-41b8-9cc8-b63365b95665