How nodes are rendered

Visual conventions that communicate state, type, and structural position at a glance. Color, opacity, and accents encode where each node sits in the graph.

Tree renders nodes with visual conventions that communicate state, type, and structural position at a glance. The conventions are consistent across the product so users can read the graph quickly without inspecting individual nodes.

State by color and opacity

State is encoded by color and opacity.

  • Locked nodes are rendered with reduced opacity, dimmed text, and no fill color. The visual weight is low so the eye skips over them when scanning for available work. The node's existence is visible, but it doesn't compete for attention.
  • Available nodes are rendered with full opacity, regular text weight, and a subtle highlight. The visual emphasis is on availability: these are the nodes the team can pick up now.
  • In-progress nodes are rendered with full opacity, regular text, and a colored accent (typically a border or indicator) showing that the work is claimed. The accent is distinct from the available highlight so the two states are easy to tell apart.
  • Complete nodes are rendered with full opacity, slightly muted text, and a green fill or accent. The green is intentional: it borrows from progression UI in games, where completed nodes are recognizable at a glance.

Edges

Edges are rendered as directional lines with arrowheads pointing from prerequisites to dependents. The line style varies subtly based on the state of the connected nodes: edges leading into locked nodes are slightly dimmer than edges leading into available or complete nodes.

Hover and focus

Hover and focus states add interactive feedback.

  • Hovering a node highlights its connected edges and the nodes at the other end of those edges. The dependency chain becomes visible without clicking.
  • Focusing a node (clicking it) opens its details panel and may shift the layout to center the node and its neighborhood.

Fog of war

Fog of war modifies the rendering globally. Nodes beyond the configured visibility horizon fade toward transparency rather than disappearing entirely. The user sees that more graph exists in that direction without having to read the contents.

LAST UPDATED · 2026-05-11