# Flowchart
> Lay out an agent workflow as a sequence of steps joined by connectors.
Source: https://ai.honestui.com/docs/components/flowchart
```tsx
import { Flowchart, FlowStep } from "@/components/ai/flowchart"
export function FlowchartDemo() {
return (
)
}
```
## Overview [#overview]
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.
## Anatomy [#anatomy]
`flowchart` has no registry dependencies.
## Behavior [#behavior]
### Order [#order]
Steps are stacked in the order you render them, with a connector above every step but the first.
### Step content [#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.
## Accessibility [#accessibility]
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.
## Installation [#installation]
Copy and paste this file into your project.
### components/ai/flowchart.tsx
```tsx
import * as React from "react"
import { cn } from "@/lib/utils"
export type FlowchartProps = React.ComponentProps<"ol"> & {
/** Names the workflow for screen readers. */
label: string
}
/**
* A workflow as a top-to-bottom sequence of steps joined by connectors. The
* steps are an ordered list, so the order is available without the lines.
*/
function Flowchart({ label, className, ...props }: FlowchartProps) {
return (
)
}
export type FlowStepProps = Omit, "title"> & {
/** The step's role in the flow, such as "Trigger" or "If / Else". */
kind: string
title?: React.ReactNode
/** One line under the title. */
caption?: React.ReactNode
}
/** One step. Put controls for the step, such as a condition's fields, in its children. */
function FlowStep({ kind, title, caption, className, children, ...props }: FlowStepProps) {
return (
{kind}
{(title || caption) && (
{title && (
{title}
)}
{caption && (
{caption}
)}
)}
{children}
)
}
export { Flowchart, FlowStep }
```
Update the import paths to match your project setup.
## Usage [#usage]
```tsx
import { Flowchart, FlowStep } from "@/components/ai/flowchart"
{workflow.steps.map((step) => (
))}
```
## Examples [#examples]
### A step with controls [#a-step-with-controls]
The condition step holds a Select. Its value is yours to store.
```tsx
"use client"
import * as React from "react"
import { Flowchart, FlowStep } from "@/components/ai/flowchart"
import {
Select,
SelectItem,
SelectPopup,
SelectTrigger,
SelectValue,
} from "@/components/ui/select"
const fields = [
{ value: "amount", label: "Amount" },
{ value: "region", label: "Region" },
{ value: "age", label: "Days overdue" },
]
export function FlowchartControlsExample() {
const [field, setField] = React.useState("amount")
return (
)
}
```
## API reference [#api-reference]
### Flowchart [#flowchart]
Accepts native ol props beyond those listed. Its children are the steps.
| Prop | Type | Default | Description |
| ------- | ------ | -------- | ------------------- |
| `label` | string | Required | Names the workflow. |
### FlowStep [#flowstep]
Accepts native li props beyond those listed.
| Prop | Type | Default | Description |
| --------- | --------- | -------- | ---------------------------- |
| `kind` | string | Required | The step's role in the flow. |
| `title` | ReactNode | None | What the step does. |
| `caption` | ReactNode | None | One line under the title. |