Pipeline diagramPro

An agent pipeline (input, tools, model, output) with small square packets running along hairlines while each step lights in turn, the way a request moves through the system.

Markdown

On this page

ProAn agent pipeline from input through tools and the model to output, with packets running along the lines and each step lighting in turn.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/pipeline-diagram

Usage

tsx

import { PipelineDiagram } from "@/components/ui/chatcn/pro/pipeline-diagram"

<PipelineDiagram title="Every answer takes the same path." steps={steps} label="One request, end to end" />

Each step is { id, label, description?, icon?, items?, meta? }; items show as mono tags (tool names, a model id) and meta as a quiet figure such as 640 ms. The diagram loops while on screen: a step lights for stepMs, packets travel to the next for travelMs, and so on to the end. With orientation="auto" it is a row from 768 px of section width and a column below; packets run in the reading direction.

Every section is full width with a 16 px gutter on phones and 32 px from 768 px, content capped at 1200 px. Layout follows the section's own width through a container query, not the viewport, so a section in a narrow column lays out like a phone.

Examples

Column, paused and right to left

A voice pipeline in a column reporting the lit step, a paused diagram, and packets running right to left on an Arabic page.

ProA voice pipeline in a column reporting the lit step, and a paused diagram.

Props

Prop	Type	Notes
`title`	`ReactNode`	Optional section headline, an `h2`
`description`	`ReactNode`	The paragraph beside the headline
`steps`	`PipelineStep[]`	Required
`stepMs`, `travelMs`	`number`	Default 1100 and 750
`packets`	`number`	Packets per hop. Default 3
`paused`, `defaultPaused`, `onPausedChange`		Controlled or uncontrolled pause
`onStepChange`	`(id: string \| null) => void`	The lit step, or null between runs
`orientation`	`"auto" \| "horizontal" \| "vertical"`	Default `auto`
`label`	`string`	Accessible name, shown on the frame. Default "Pipeline"

Keyboard

Key	Action
`Tab`	Reaches the pause button
`Enter` / `Space`	Pauses or plays the packets

Accessibility

Screen readers get one description list named by label: each step's name and figure, its description and its items, in order, with the lit step marked aria-current=step.
The drawing (cards, lines, packets) is aria-hidden.
Under forced-colors: active the cards keep a system color border.

Motion

Packets are 6 px rounded squares that move by transform on a symmetric ease, fading in and out at the ends; the line fills behind them by clip-path.
The loop only runs on screen in a visible tab, and the pause button stops it for good.
Under reduced motion the diagram is static: every step shown, nothing moving.