Flowchart

A small automation canvas with a Trigger step and an If/Else condition step on a dotted grid, joined by a curved connector.

When to use

• Show the shape of an agent workflow (when a session moves to review, check its purpose and checks) inside a reply or an onboarding screen.
• Use it as a lightweight, draggable illustration of trigger → condition logic.
• Not for a real workflow editor with arbitrary nodes and edges. Not for ordered progress — use Stepper or Timeline.

Usage

import Flowchart from "@/components/iris/flowchart/flowchart";

// Renders the built-in identity-review example (Trigger → If/Else) and fills its parent's width.
h("div", { style: { width: 480 } }, h(Flowchart));

Props

Prop	Type	Default	Description
steps	{ id: string; row: number; x: number; w: number; kind?: { label: string; hue: string }; hue?: string; title?: string; caption?: string; condition?: boolean }[]	trigger + condition	Nodes. row stacks nodes vertically, x is the horizontal centre as a 0–1 fraction, w is the max width in px, and kind is the pill above the card. condition: true renders the If/Else chip rows instead of title/caption.
variant	string	—	Accepted for gallery parity. It has no effect.

Notes

• Much of the demo is fixed. The only connector is hard-coded from node trigger to node cond, so keep those ids. The If/Else body (property and value chips with their menus) is fixed demo content, and the step icon is always the same glyph.
• Nodes can be dragged anywhere within the canvas, and the connector follows. Clicking a step selects it and highlights its connector in --accent.
• The condition chips open dropdown menus. Clicking outside closes them.
• The canvas fills its parent's width and sizes its height from the measured nodes. Give the parent an explicit width (the gallery uses 480px).
• The Trigger and If/Else hues are fixed purple and amber, mixed into --surface/--page with color-mix, so they adapt to both themes. Also reads --page, --line-strong, --field and --hover-2.