Sankey Flow

Draw where a quantity comes from and where it goes: traffic sources → landing pages → conversions, budget allocation, energy or money flows. Nodes are placed into columns automatically from the link topology, node heights and link widths are proportional to value, and each link is a gradient from its source color to its target color with a slow, flowing dash animation. Hover any link and its whole upstream and downstream path stays lit while everything else fades to 15%, so you can see at a glance where a source ends up. The layout algorithm is a self-written, simplified one with no d3 dependency.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<SankeyFlow/>

    </div>
  );
}

Installation

Usage

import {
  SankeyFlow,
  type SankeyLink,
  type SankeyNode,
} from "@/components/ui/sankey-flow";

const nodes: SankeyNode[] = [
  { id: "search", label: "搜尋" },
  { id: "social", label: "社群" },
  { id: "home", label: "首頁" },
  { id: "campaign", label: "活動頁" },
  { id: "purchase", label: "完成購買", color: "#22c55e" },
  { id: "leave", label: "未購買", color: "#f43f5e" },
];

const links: SankeyLink[] = [
  { source: "search", target: "home", value: 420 },
  { source: "search", target: "campaign", value: 180 },
  { source: "social", target: "campaign", value: 260 },
  { source: "home", target: "purchase", value: 120 },
  { source: "home", target: "leave", value: 300 },
  { source: "campaign", target: "purchase", value: 210 },
  { source: "campaign", target: "leave", value: 230 },
];

<SankeyFlow
  nodes={nodes}
  links={links}
  valueFormatter={(v) => `${v.toLocaleString()} 人`}
  onLinkClick={(link) => console.log(link.source, "→", link.target)}
/>;

Node labels above: 搜尋 (Search), 社群 (Social), 首頁 (Home page), 活動頁 (Campaign page), 完成購買 (Purchased), 未購買 (Did not purchase); 人 means "people".

Props

SankeyNode

SankeyLink

The SankeyNode, SankeyLink, and SankeyFlowProps types are also exported by name.

How it works

• A simplified, self-written layout — not d3-sankey: node columns come from the link topology (the longest path from the source side); nodes in a column are stacked top to bottom by descending total value and centered vertically. A node's height is the larger of its total inflow and total outflow, and the whole chart shares one scale so values are comparable across columns. There is no iterative relaxation like d3-sankey, so complex graphs can show more crossings
• Link endpoints: the links on a node are ordered by the vertical position of the node on the other side, then slice the node's height by value to reduce crossings; each path is a cubic Bézier S-curve with both control points at the horizontal midpoint, so links leave and enter nodes horizontally
• Cycle guard: a Sankey diagram must be a directed acyclic graph. The component checks links one by one in order; a link that would close a cycle (or loops onto itself, points at a missing node, or has a value of 0 or less) is skipped and reported with console.warn
• Hover tracing: hovering a link recursively collects its whole upstream and downstream path, which stays highlighted while everything else drops to 15%; hovering a node lights only its incoming and outgoing links. The tooltip shows "source → target" and the value
• Label placement: labels sit to the right of nodes in the left half of the columns and to the left in the right half, so text in the outermost columns is never clipped

Accessibility

• The SVG is role="img" with an aria-label stating the number of nodes and flows; an sr-only list also spells out every flow as "source 流向 (flows to) target: value", so screen readers get the full data
• Every node is reachable with Tab; focusing a node highlights its flows just like hover, and each node carries an aria-label (name and total value) and a focus-visible outline; Enter or Space triggers onNodeClick (Enter during IME composition is ignored)
• The tooltip is a purely visual aid (aria-hidden); the same information is provided by the sr-only list
• When the user has "reduce motion" enabled at the system level, the node fade-in and link draw-in entrances are disabled and the flowing dash loop is not shown — the chart renders directly in its final, static state