caliper uidocs
DemoSign inGet Pro

Data flow diagram

Pro

An animated diagram of data moving between services.

Installs components/ui/data-flow-diagram.tsxDepends on @radix-ui/react-slot, lucide-reactMotion none in component source
pnpm dlx shadcn@latest add @caliper/data-flow-diagram
SourcesIngestProcessStoreUse
  • Web app to Event queue, active
  • Mobile apps to Event queue, active
  • Devices to Event queue, active
  • Event queue to Clean and enrich, active
  • Event queue to Aggregate, active
  • Clean and enrich to Data lake, active
  • Clean and enrich to Warehouse, active
  • Aggregate to Warehouse, active
  • Warehouse to Dashboards, active

Choose a node to see what it does.

When to use #

Use it for

  • Explaining an architecture to customers or teammates.
  • Showing which hop is slow.

Skip it when

  • The diagram must be edited by the user.

Installation #

terminal
pnpm dlx shadcn@latest add @caliper/data-flow-diagram

Adds its 4 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx
import { DataFlowDiagram } from "@/components/ui/data-flow-diagram"

The worked example comes with Pro

The 62-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #

DataFlowDiagram

component
PropTypeDefaultDescription
label *string—
stages *readonly DataStage[]—
links *readonly (readonly [string, string, (1 | 2 | 3 | undefined)?])[]—Pairs of node ids, with how busy the link is.
describe((id: string) => ReactNode)—Text for the selected node.
classNamestring—

Accessibility #

It exposes status semantics, with aria-pressed and aria-hidden kept in step with state. Changes that matter are announced through a live region.

No custom key handling; Tab and the native activation keys do the work.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.