Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Sankey Flow Diagram Features Block for Vue

A Sankey of an event router's flows: three sources, four destinations and curved bands whose width is the events they carry, with nodes you hover, focus or press to follow a stream.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A Sankey features section for Vue with Ark UI. Three sources (browser events, server events, webhooks) sit on one side and four destinations (a warehouse, dashboards, alerts, an audit log) on the other, joined by twelve curved bands in the text colour whose width is the number of events each carries. Every node is a button: hover, focus or press one and the bands that touch it stay strong while the rest fade, and a sentence under the diagram says what it sends or receives. The bands are computed from one list of flows, so editing a number reshapes the diagram. Below md the diagram gives way to a table of the same flows. It's built from Guides and plain SVG, with CSS transitions, and it follows your theme. For data pipelines, event platforms and any feature where the weight of each stream is the story.

FAQ

How do I change the flows?

Edit FLOWS at the top of the file: each is a source, a destination and a number of millions of events. Add a source or destination to SOURCES or DESTINATIONS and use its id in a flow. Node heights, band widths, offsets and curves are all derived from those numbers by small functions, so nothing else needs editing. Every source's flows should add up to its volume, which they do by construction.

How do the nodes work?

Each node is a real button. Hovering or focusing it follows its flows; pressing it pins the highlight, and pressing it again lets go. A sentence under the diagram, announced politely to screen readers, says what the followed node sends or receives, such as "Warehouse receives 8M from Browser events, 6M from Server events and 3M from Webhooks".

How does a screen reader get the diagram?

The SVG is hidden from assistive technology. The nodes are two named lists of buttons with their daily volume, and a table of every flow sits in the page for screen readers: destinations as rows, sources as columns, with totals. It is the same table people see on a phone.

What replaces the diagram on a phone?

The table: four destination rows, three source columns and a total, in small type that fits at 320 pixels. The bands would be too thin to read there, so the facts move into the table instead of shrinking.

Does the diagram mirror in right-to-left languages?

No. The diagram keeps its direction (sources, then flows, then destinations) because it shows a flow from one place to another, so it is dir="ltr". The header and the phone table follow the page's direction.

What moves, and what happens with reduced motion?

The header and the figure fade up once on load, and the bands change tone with a short CSS transition when you follow a node. With reduced motion both are off: the tone changes at once and nothing slides in.

All 170 features blocks