Flowchart

Usage

import { Flowchart } from '@wdzyi/ui';

<Flowchart
  nodes={[
    { id: 'ticket', row: 0, kind: 'Trigger', title: 'New ticket' },
    {
      id: 'check',
      row: 1,
      kind: 'If / else',
      conditions: [
        { join: 'If', subject: 'ticket', field: 'priority', value: 'Urgent', values: ['Urgent', 'High', 'Normal'] },
      ],
    },
    { id: 'page', row: 2, kind: 'Action', title: 'Page the on-call lead' },
    { id: 'queue', row: 2, kind: 'Action', title: 'Add to the queue' },
  ]}
  edges={[
    { from: 'ticket', to: 'check' },
    { from: 'check', to: 'page', label: 'Yes' },
    { from: 'check', to: 'queue', label: 'No' },
  ]}
/>

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

nodesFlowchartNode[]

The steps. Each has an id, a row from the top, a kind for the label above it, and a title, a caption and an icon, or conditions in their place. x sets where it sits across the canvas, from 0 to 1, and width caps it.

edgesFlowchartEdge[]

The wires, each from one step’s id to another’s, with a label such as Yes if it needs one.

selectedstring | null

The chosen step. Leave it out and the canvas keeps track itself.

onSelect(id: string | null) => void

Called with the step that was chosen, or null when it’s let go.

onConditionChange(node, index, condition) => void

Called when a chip in a condition is changed, with the condition as it is now.

labelstring = 'Flowchart'

Names the canvas for screen readers.

Notes

• Each row arrives in turn, and its wires draw themselves down to the next before it lands. The canvas is as tall as its rows, which are measured from what’s really in them.
• A step can be dragged anywhere on the canvas, and its wires follow it every frame. The end of a drag never counts as a press. With a step focused, the arrow keys move it 8px at a time, or 32px with Shift.
• Pressing a step chooses it: a strip of foil draws across its top, and a signal runs along its wires. Escape, or a press on the empty canvas, lets it go.
• A condition’s chips open a list that floats over the page, below them or above if there’s no room, and works from the keyboard.
• With reduced motion, everything appears at once, and a chosen step’s wires light without the signal.