A process, drawn as numbered steps, saying who did each one.
Two lanes at most, and only the two that matter: who acted. A third lane is an org chart wearing a process diagram's clothes, which is why laneLabels renames the two rather than adding to them.
The steps are an ordered list, so the order survives with the stylesheet switched off and a screen reader announces it as a sequence rather than a picture.
import { Diagram } from '@redrob-labs/ui';| Prop | Type | Notes |
|---|---|---|
steps |
DiagramStep[] |
|
title |
React.ReactNode |
Names the diagram and becomes its accessible label. |
lanes |
boolean |
Split the steps into a person lane and a machine lane. |
laneLabels |
string[] |
Rename the two lanes. Two entries; a third is ignored because there is no third lane. |
orientation |
'flow' | 'stack' |
stack reads down the page instead of across it. For narrow columns. |
source |
React.ReactNode |
Where the steps came from. Printed under the diagram. |
className |
string |