Flowchart

A React component in Beamline's AI & agents category.

A workflow as steps on a dotted canvas: a trigger, conditions that branch into paths side by side, actions and waits, read top to bottom; during a run each step shows its status, and the whole flow is one keyboard stop walked with the arrows.

Use it for

Showing or reviewing an automation an agent will run: trigger, conditions, actions.
Following a workflow run step by step, including where it stopped.

Not for

A linear list of steps with live status (plan, or task-rows for background jobs).
Free-form diagrams or graph editing (a canvas library).
Progress through a form (stepper).

Anatomy

frame and dotted canvas (scrolls inside its own frame)
step node: kind tile and word (Trigger, If / else, Action, Wait), meta, status glyph and word, title, description
conditions well: If / and rows, field, operator, value (menu when editable)
connector with arrow
branch fork: a pill per path (Yes / No) and its steps side by side
empty state

Variants

kind: trigger, condition, action, wait

States

definition (no status)
selected step (accent ring)
run: done, running, not run, skipped, failed (outlined, says why)
empty

Keyboard

The flow is one Tab stop (roving tabindex; the selected step first)
↓ next step (into the first path after a condition), ↑ previous (out of a path to its condition)
← → the same place in the neighbouring path (mirrored in RTL)
Home / End first and last step
Enter or Space selects the step and calls onStepActivate
Condition values are buttons that open a menu

Motion

Hover lifts a node's shadow at once and settles over --motion-out; no other motion.

Props

Prop	Type	Default	Description
`steps` (required)	`FlowStep[]`	—	{ id, kind, title, description?, icon?, meta?, conditions?, branches?: { id, label, steps }[], status? }
`selected / defaultSelected / onSelectedChange`	`string \| null`	—
`onStepActivate`	`(step) => void`	—
`onConditionChange`	`(stepId, conditionId, value) => void`	—	With a condition's options, its value opens a menu.
`label / emptyLabel / height`	`string / ReactNode / number \| string`	—
`style / ref`	`CSSProperties / native Ref`	—
`classNames`	`FlowchartClassNames`	—

Built from

dropdown-menu
button
spinner
empty-state

Dependencies

lucide-react, radix-ui

Import

import { Flowchart } from "@/components/flowchart/flowchart";

Get it

Flowchart is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent