Flowchart

Dot-grid canvas of draggable, selectable step cards joined by bezier connectors (Beautiful-UI port).

Preview

Use the controls to explore the component's props.

Trigger

Text node

object

Props

Prop	Type	Default	Description
`steps`	`TStepNode[]`	—	Cards to lay out: { id, row, x (0–1 centre), w, kind?: { label, hue }, name?, hue?, title?, caption?, image?, icon?, condition?, children? }. Content-agnostic: `image` fills the tile, `children` replaces the body. Defaults to the Trigger → If / Else sample.
`edges`	`TEdge[]`	—	Connectors { id, source, target, strokeWidth?, color? }. Defaults to a chain through steps in order.
`height`	`number`	—	Canvas min-height. The canvas fills its parent and floors at the content height it loaded with, so zooming out or removing a card never collapses it.
`zoomable`	`boolean`	`false`	Ctrl / ⌘ + wheel and the +/− buttons scale the canvas (25–200%) about its centre with a 300ms ease. The world behind the frame is twice its size: drag empty canvas to pan, click it to clear the selection.
`onEdgeRemove / onEdgeConnect / onEdgeChange`	`(id) / (edge) / (id, { strokeWidth?, color? }) => void`	—	Enable connector editing: click a connector for a toolbar (widths, colours, disconnect) and drag either end handle towards another card — it snaps to the nearest anchor and previews the card before you release.
`readOnly`	`boolean`	`false`	No drag, no add / remove buttons. Selection still works.
`onDrag`	`(id, { dx, dy }) => void`	—	A card was dragged; offset from its laid-out position.
`onAdd`	`(id, side) => void`	—	"Add child" in the card's context menu (side is "bottom").
`onRemove`	`(id) => void`	—	"Delete" in the context menu or Delete on a selected card. Opens an AlertDialog first when children would be orphaned.
`onRename / onDuplicate`	`(id, name) / (id) => void`	—	Double-click the pill to rename (commits on blur or Enter with a toast); "Duplicate" copies the card to the right. The context menu also offers "Connect to…", which previews the hovered card and fires onEdgeConnect.
`className`	`string`	—	Extra classes on the canvas.

Example

Read-only

Trigger

Text node

Person

import { Flowchart } from "@exegia/corpora-ui"

<Flowchart.Root
  steps={[
    { id: "trigger", row: 0, x: 0.5, w: 300, kind: { label: "Trigger", hue: "#9a5cff" }, hue: "#9a5cff", title: "Iliad corpus loaded" },
    { id: "text", row: 1, x: 0.5, w: 300, kind: { label: "Text node", hue: "#f09a2f" }, hue: "#f09a2f", title: "μῆνιν ἄειδε, θεά", caption: "Iliad 1.1 · 18 characters" },
  ]}
  edges={[{ id: "e1", source: "trigger", target: "text" }]}
  zoomable
  onAdd={(id, side) => …}
  onRemove={(id) => …}
/>

Flowchart

Preview

Props

Example

On this page