Flowchart

Proposed

An agent workflow on a dotted canvas: a trigger card and an if/else condition joined by a measured connector. Cards drag, the connector follows, and the condition chips open real menus.

@varick/ui/components/flowchartAdded 2 Sept 2026

Trigger

If / Else

Ifsubmissionis

andsubmissionis

Usage

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

export function Example() {
  return <Flowchart steps={workflow.nodes} />;
}

API reference

Every component also accepts className and the native props of its root element.

Prop	Type	Default	Description
steps	FlowNode[]	trigger + condition	id, row, x (0 to 1), w, kind, hue, title, caption, or condition: true for the if/else card.

Accessibility

The trigger card is a toggle button with aria-pressed; selecting it lights its connector in accent blue.
Condition chips are buttons with aria-haspopup="listbox"; the menu is a listbox with aria-selected.
Dragging is pointer-only and cosmetic. Nothing depends on where a card sits.

Styles

Proposed CSS in Varick tokens. Nothing in the app renders this yet.

.flow-canvas { position: relative; border: 1px solid var(--hairline); border-radius: 4px; background: var(--fill-soft) radial-gradient(var(--hairline-hover) 1px, transparent 1.25px); background-size: 22px 22px; }
.flow-kind { height: 24px; padding: 0 8px; border-radius: 4px; font-size: 11.5px; font-weight: 500; }
.flow-card { border: 1px solid var(--hairline); border-radius: 8px; background: #FFFFFF; box-shadow: 0 1px 2px rgba(17,17,17,0.04), 0 4px 12px rgba(17,17,17,0.04); }
.flow-card[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.flow-edge { stroke: var(--hairline-hover); stroke-width: 1.25; fill: none; }
.flow-edge.lit { stroke: var(--accent); }