ProcessDiagram
StableA flow chart of steps and arrows, with a written version for people who cannot see it.
Also known as flow diagram, flowchart, process flow
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
How a request is handled
How a request reaches a result
A request is planned. Risky steps wait for a person to approve them before the report.
Focus or select a node to read its detail.
- Pill is start
- Rounded box is step
- Hexagon is decision
- Double outline is end
- Dashed box with ! is needs a person
Text alternative
- Start: Ask. The person sends a request. Leads to Plan steps.
- Step: Plan steps. The assistant lists what it will do. Leads to Is it risky?.
- Decision: Is it risky?. Anything that changes your files needs a person. Leads to Approve.
- Needs a person: Approve. The person says yes before anything changes. Leads to Report.
- End: Report. The assistant sums up what happened.
<ProcessDiagram
label="How a request is handled. Full description follows."
caption="How a request reaches a result"
description="A request is planned. Risky steps wait for a person to approve them before the report."
nodes={[
{ id: "ask", label: "Ask", kind: "start", detail: "The person sends a request." },
{ id: "plan", label: "Plan steps", detail: "The assistant lists what it will do." },
{ id: "risk", label: "Is it risky?", kind: "decision", detail: "Anything that changes your files needs a person." },
{ id: "approve", label: "Approve", kind: "attention", detail: "The person says yes before anything changes." },
{ id: "done", label: "Report", kind: "end", detail: "The assistant sums up what happened." },
]}
/>Tab to a step to read its detail. Open View source for the text version.
When to use it
Draws a short process as steps and arrows, where shape and label carry the meaning. It always comes with a written version, so people who cannot see the drawing get the same information.
Made of: Figure · Steps · Arrows · Step detail line · Shape key · Written version · View source button
Use it for
- Explaining how a request moves from start to result.
- A process with a decision or a step that needs a person.
- A diagram whose text source people may want to copy.
Not for
- Events with times: use Timeline.
- Live progress of an agent's steps: use StepTimeline.
- A chart or picture that is not a flow of steps: use DiagramFigure.
Do and avoid
Refund steps
Focus or select a node to read its detail.
- Pill is start
- Hexagon is decision
- Double outline is end
Text alternative
- Start: Ask for refund. Leads to Item returned?.
- Decision: Item returned?. Leads to Money sent back.
- End: Money sent back.
AskCheckPay
Do
- Write the description first and draw the diagram second.
- Keep labels to a few words.
- Give each step a short sentence of detail.
- Keep the source viewable and copyable.
Avoid
- Do not show meaning with color alone.
- Do not draw arrows between distant steps. Neighboring steps only.
- Do not use more than about eight steps.
- Do not leave out the written version.
On a phone
- When the row of steps is wider than the container, the diagram switches to a single vertical column.
- Tap a step to read its detail below the diagram. Steps are 56px tall and 132px wide.
- The text alternative and the view-source button stay under the diagram, and the button has a 44px tap area on a touch screen.
Seen in products
- W3C says a short name should say what the image is and where the full description is, and that the full description should be on the page for everyone.
- One blog says Claude can draw flow charts from text.
- Our research table says the written version of a flow chart is a numbered list.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| nodesrequired | ProcessNode[] | none | Each node has id, label, optional kind (start, step, decision, end, attention) and optional detail. |
| edges | ProcessEdge[] | in order | Arrows with from, to and an optional label. Draw them between neighbouring nodes. |
| labelrequired | string | none | Short alt. Names the diagram and says the description follows. |
| captionrequired | string | none | Visible caption. |
| description | ReactNode | none | Long description, visible to everyone. |
| source | string | generated | Replaces the generated Mermaid-style definition. |
"Show code under the preview gives the code for the example on the stage."
States
States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.
- node kinds
- Set kind on a node to draw it as a start pill, step box, decision hexagon, end box or dashed attention box.
- selected node
- Focusing or clicking a node outlines it and shows its detail in the line below the diagram.
- narrow
- When the container is too narrow for one row, the nodes stack top to bottom.
- focus
- Each node can be reached with the keyboard.
Tokens
Change one of these and every part that uses it follows.
--surface--border-strong--lime--attention--attention-soft--fg-subtle
Built in
- Each step can be reached with Tab, and screen readers hear its number, kind and name, such as "2. Step: Plan steps".
- Focusing or clicking a step shows its detail in a line below, and screen readers announce it.
- A numbered written version lists every step and where it leads, and a key explains each shape in words.
- Arrows are hidden from screen readers, because the written version says where each step leads.
- The selected step gets a darker outline, not only a color change.
What you need to do
- Write a label that names the diagram and says a full description follows.
- Write a description in plain sentences that says what the diagram shows.
- Give each step a one-sentence detail, because it is read out when the step is focused.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide