Preview Updated 2026-05-10

Sankey diagram

Weighted flow diagram with nodes and links — node height equals flow.

Basic usage

Data is passed via props and rendered as pure SVG, with no third-party charting dependency. Colors are drawn from the --viz-1..8 tokens and are colorblind-friendly.

背景

<script setup lang="ts">
import { CfSankeyDiagram } from '@chufix-design/vue';
const nodes = [
  { id: 'organic', name: 'Organic', layer: 0 },
  { id: 'paid', name: 'Paid', layer: 0 },
  { id: 'referral', name: 'Referral', layer: 0 },
  { id: 'web', name: 'Web', layer: 1 },
  { id: 'mobile', name: 'Mobile', layer: 1 },
  { id: 'success', name: '2xx', layer: 2 },
  { id: 'redirect', name: '3xx', layer: 2 },
  { id: 'error', name: '4xx/5xx', layer: 2 },
];
const links = [
  { source: 'organic', target: 'web', value: 50 },
  { source: 'organic', target: 'mobile', value: 30 },
  { source: 'paid', target: 'web', value: 20 },
  { source: 'paid', target: 'mobile', value: 25 },
  { source: 'referral', target: 'web', value: 10 },
  { source: 'referral', target: 'mobile', value: 5 },
  { source: 'web', target: 'success', value: 60 },
  { source: 'web', target: 'redirect', value: 12 },
  { source: 'web', target: 'error', value: 8 },
  { source: 'mobile', target: 'success', value: 45 },
  { source: 'mobile', target: 'redirect', value: 8 },
  { source: 'mobile', target: 'error', value: 7 },
];
</script>

<template>
  <CfSankeyDiagram :nodes="nodes" :links="links" />
</template>

<CfSankeyDiagram ... />

Three-layer purchase path

Search engine / direct visit → product list / detail → add-to-cart / checkout, in three layers.

背景

<script setup lang="ts">
import { CfSankeyDiagram } from '@chufix-design/vue';
const nodes = [
  { id: 'a', name: '搜索引擎', layer: 0 },
  { id: 'b', name: '直接访问', layer: 0 },
  { id: 'c', name: '产品列表', layer: 1 },
  { id: 'd', name: '产品详情', layer: 1 },
  { id: 'e', name: '加入购物车', layer: 2 },
  { id: 'f', name: '完成支付', layer: 2 },
];
const links = [
  { source: 'a', target: 'c', value: 60 },
  { source: 'a', target: 'd', value: 25 },
  { source: 'b', target: 'c', value: 30 },
  { source: 'b', target: 'd', value: 40 },
  { source: 'c', target: 'e', value: 20 },
  { source: 'd', target: 'e', value: 18 },
  { source: 'e', target: 'f', value: 24 },
];
</script>

<template>
  <CfSankeyDiagram :nodes="nodes" :links="links" :height="220" />
</template>

<CfSankeyDiagram nodes={n} links={l} />

API

Prop	Type	Default	Description
`nodes`	`SankeyNode[]`	`—`	{ id, name, layer?, colorIndex? }[]
`links`	`SankeyLink[]`	`—`	{ source, target, value }[]
`nodeWidth`	`number`	`12`	Node bar width