DecisionTree

The DecisionTree component (ui:decisiontree) renders a strictly hierarchical tree of decision questions with sentiment-coloured outcome leaves. Internal nodes represent questions, branches carry the condition that leads down each path, and leaves represent outcomes colour-coded by sentiment (positive / neutral / negative).

Use it for routing logic explanations, policy documentation, and reasoning traces where you want to show why a decision was made — not just how a process flows. For general flow diagrams prefer Flowchart.

Routing logic

Reasoning trace with confidence

Each node can carry a confidence score between 0 and 1; a small percentage badge appears at the bottom-right of the node. Useful for annotating LLM reasoning traces.

Top-down orientation

Set orientation: top-down to flow from top to bottom instead of the default left-right.

Properties

Property	Type	Default	Description
title	string	—	Optional title rendered above the tree and used in the aria-label.
nodes	DecisionTreeNode[]	(required)	All nodes in the tree. Must contain exactly one root (no parents).
edges	DecisionTreeEdge[]	[]	Parent-to-child edges. Every non-root node must have exactly one.
orientation	'left-right' | 'top-down'	'left-right'	Tree flow direction.

DecisionTreeNode

Property	Type	Default	Description
id	string	(required)	Unique node identifier (referenced by edges).
type	'question' | 'outcome'	'question'	Node role. Outcome nodes are rendered as pills.
label	string	(required)	Display text.
sentiment	'positive' | 'neutral' | 'negative'	—	Used to colour outcome nodes. Ignored on question nodes.
confidence	number (0 – 1)	—	Optional confidence score; rendered as a % badge on the node.

DecisionTreeEdge

Property	Type	Default	Description
from	string	(required)	Parent node id.
to	string	(required)	Child node id.
condition	string	—	Condition label rendered mid-edge on a small rounded pill.

Schema validity

The Zod schema rejects structurally invalid trees at compile time:

• Multiple roots — exactly one node must have no incoming edges.
• Orphans — every node must be reachable from the root.
• Cycles — edges must form a DAG (no back-edges).
• Multi-parent nodes — a node may not be the to of more than one edge.

Invalid trees produce a compile error rather than a rendered SVG.

Accessibility

• The SVG has role="tree" with an aria-label summarising the title, decision count, and outcome count.
• Each node is a <g role="treeitem"> with aria-level computed from tree depth and an aria-label that includes the label and, for outcomes, the sentiment.
• Edge condition labels are mirrored into a hidden <desc> so screen readers can announce “branch: {condition}” when traversing the tree.
• A hidden nested ordered-list fallback mirrors the full tree structure for assistive technology that cannot walk the SVG.