Flowchart

Flowchart shows a workflow from top to bottom: a trigger, a condition, an action. Each step is a card with a kind, a title, and a caption, and any controls you put inside it.

It is a layout, not an editor. The steps are in the order you render them and cannot be dragged. The Beautiful UI original let cards be dragged around a canvas, which has no keyboard equivalent and stores nothing, so it is left out.

flowchart has no registry dependencies.

Order

Steps are stacked in the order you render them, with a connector above every step but the first.

Step content

title and caption are optional. A step's children are placed in its card under them, for a condition's fields or a summary of what an action will do.

The flow is an ordered list named by label, so the sequence is available without the connectors, which are decoration. Each step's kind is text.

Flowchart has no keyboard interaction of its own. Controls you place in a step keep theirs.

import { Flowchart, FlowStep } from "@/components/ai/flowchart"

<Flowchart label="Invoice follow-up workflow">
  {workflow.steps.map((step) => (
    <FlowStep key={step.id} kind={step.kind} title={step.title} caption={step.summary} />
  ))}
</Flowchart>

A step with controls

The condition step holds a Select. Its value is yours to store.

Flowchart

Accepts native ol props beyond those listed. Its children are the steps.

FlowStep

Accepts native li props beyond those listed.