Hierarchy & Trees

Decision Tree

An order-approval decision tree: a risk check branches to a country check and an amount check, fanning out to four outcome pills; each pass lights one route edge by edge, fills the outcome in its state colour and reports the order and how long the decision took.

csslight complexitysubtle motionmobile-readyaccessible

Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited

Live demo — the real component, running in a sandbox. One self-contained HTML file, zero dependencies. Open it on the canvas →

Worth keeping? Votes steer what gets built next — sign in to cast one, free to read

When to use it

Rules engines, approval and routing logic, onboarding explainers, anywhere a yes/no path needs to be traced rather than described. Outcome pills carry ok/warn/err states.

When not to

Trees with more than about six nodes over three levels, or branching that is not binary — node positions are authored percentages with no auto-layout.

Working with an AI agent

Every component ships agent-ready metadata. An example instruction for this one:

Edit nodes (x/y percent, q for a question, t label, c state colour) and edges (a parent, b child, l the Yes/No label), then the runs array — each entry is one traced route: e the two edge indexes, o the outcome, r the verdict, plus the order/amount/latency for the result line. Change the step beat with setInterval(advance,900). Re-theme to light by setting --pro-bg:#f6f8fa; --pro-surface:#ffffff; --pro-border:rgba(0,0,0,.08); --pro-text:#1f2328; --pro-muted:#59636e (keep --pro-accent), and update the catalog bg field to match. Theme: dark tokens live in :root, the light variant in :root[data-theme="light"]; ?theme=light or a {type:'forever:theme'} postMessage switches at runtime.

Safe to edit

theme tokens (:root --pro-* dark defaults + the :root[data-theme="light"] overrides)
the tree (nodes map: x/y percent, q question flag, t label, c state colour)
the edges (a, b, l label) and the traced routes (runs array: e edge pair, o outcome, r verdict, ord, amt, ms)
state colours (--pro-ok, --pro-warn, --pro-err)
step beat (setInterval(advance,900)) and the hold on the result (step>3)
node width (.dct-node max-width 46%, .dct-out 27%)

Keep intact

:root --pro-* token block (renaming breaks the shared pro theming API)
role=img + aria-label on .dct-stage
IIFE wrapper
vector-effect:non-scaling-stroke on the edges (the SVG is stretched with preserveAspectRatio=none)
prefers-reduced-motion early return to one fully traced path
visibilitychange pause (halt/play on the interval)
theme hook (?theme= pre-paint bootstrap + forever:theme message listener + the two-palette token block)

Known limitations

Light re-theme via the --pro-* block; catalog bg/accent describe the dark default
Binary branching with authored positions — a third child on a node needs its x/y picked by hand
Routes are scripted in the runs array, not evaluated from the order values shown
Four outcome pills is the practical ceiling before labels collide at a 180-240px tile

decision-treebranchingflowchartyes-noruleslogicapprovaldiagram

More Hierarchy & Trees components

Org Tree RevealA three-level engineering org chart of eight people drawn with elbow connectors; the selection walks the org, lighting the whole reporting line from the…
Collapsible TreeAn indented three-level company tree — divisions, teams, then people — with rotating chevrons, guide rails and headcount pills; on a loop one division…
Branch TimelineA three-lane commit graph that draws itself top to bottom: the trunk advances, a feature branch splits off through two commits and merges back, then a…
Radial HierarchySix divisions sit on an inner ring with their teams fanned out on an outer ring, spokes running back to a central hub; the whole diagram turns slowly…
Mind Map BranchesSix curved limbs grow outward from a central topic pill one at a time, each sprouting two node dots before landing on a labelled chip with its open-item…