Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
flow-diagram
User flow and sequence visualization — progressively enhances an ol into a connected node graph with actions, decisions, and branching paths.
Overview
A web component that progressively enhances an <ol> of steps into a connected node graph with typed shapes. Without JavaScript, the ordered list renders normally. With JavaScript, each step becomes a node with connectors, and decisions branch into parallel paths.
Basic usage
<flow-diagram title="Login Flow"> <ol> <li data-type="start">User visits login page</li> <li data-type="action">Enter credentials</li> <li data-type="decision">Valid credentials? <ol> <li data-branch="Yes"> <ol> <li data-type="action">Create session</li> <li data-type="end">Redirect to dashboard</li> </ol> </li> <li data-branch="No"> <ol> <li data-type="action">Show error</li> <li data-type="end">Return to login</li> </ol> </li> </ol> </li> </ol></flow-diagram>Node Types
| Type | Shape | Color | Use Case |
|---|---|---|---|
start | Pill | Green | Entry point of the flow |
action | Rounded rect | Blue | User or system action (default) |
decision | Rect | Amber | Yes/no branch point |
process | Rect | Purple | Background or automated process |
wait | Dashed rect | Gray | Delay, timeout, or pause |
end | Pill | Red | Terminal state |
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
title | string | — | Diagram heading |
src | string (URL) | — | JSON data URL |
data-direction | string | "vertical" | vertical or horizontal |
compact | boolean | — | Reduced spacing and node sizes |
Step Attributes
Each <li> in the ordered list carries these data attributes:
| Attribute | On | Description |
|---|---|---|
data-type | <li> | Node type: start, action, decision, process, wait, end |
data-annotation | <li> | Note text displayed below the node |
data-branch | <li> | Branch label on decision children (e.g., "Yes", "No") |
Decision Branching
To create branches from a decision node, nest an <ol> inside the decision <li>. Each branch is a <li data-branch="..."> containing its own <ol> of steps. Branches can contain further decisions for nested branching.
Nested decisions
<li data-type="decision">Valid credentials? <ol> <li data-branch="Yes"> <ol> <li data-type="action">Create session</li> <li data-type="end">Dashboard</li> </ol> </li> <li data-branch="No"> <ol> <li data-type="decision">3+ failed attempts? <ol> <li data-branch="Yes"> <ol><li data-type="end">Lock account</li></ol> </li> <li data-branch="No"> <ol><li data-type="end">Show error</li></ol> </li> </ol> </li> </ol> </li> </ol></li>Events
| Event | Detail | When |
|---|---|---|
flow-diagram:ready | { nodeCount } | After setup |
flow-diagram:select | { type, text } | Node clicked |
Accessibility
- The original
<ol>stays in the DOM (hidden) for screen reader access - Each node has
role="img"and descriptivearia-label - Nodes are focusable via
tabindex="0" - Connectors are
aria-hidden="true" - An
aria-live="polite"region announces node selection
Related
<user-journey>— Journey maps showing emotional arc across phases<site-map-wc>— IA tree showing page hierarchy<gantt-chart>— Timeline view of tasks- UX Planning Pack