# FlowDiagram

> An animated walk through one automated run: a trigger fires, each step passes in order along a rail, and the run settles on its outcome, then loops.

```ts
import { FlowDiagram } from "@sdxc/ui/landing";
```

Renders the run as an ordered list on a raised surface inside a MotionLoop.
Without motion, or before the animation starts, every step shows as passed, so the
static picture is the finished run. Two diagrams with the same step count share keyframes.

## Examples

```tsx
<FlowDiagram
	aria-label="Sign-in check"
	trigger={{ icon: <ClockIcon size={14} />, title: "Every 5 minutes" }}
	steps={[{ title: "Sign in", code: 'http.post "/api/sessions"' }]}
	outcome="Run passed"
/>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `"aria-label"` | `string` | Accessible name of the run's list. Required — the library ships no copy. |
| `pauseLabel?` | `string` | Accessible name of the pause toggle. |
| `trigger` | `Trigger` |  |
| `steps` | `readonly Step[]` | The steps, in run order. |
| `outcome` | `RemixNode` | The result badge that appears once the last step passes, such as "Run passed". |
| `footnote?` | `RemixNode` | A note across from the outcome, such as what happens on failure. |

Also accepts everything in `Omit<TagProps<"div">, "children">`.