ComponentsExamples

graph

diagram

Inline authored SVG diagrams — Root (svg shell + arrow markers), Node (interactive card with selection + focus semantics), Edge (authored path with state styling: idle, flow, slow, broken, blocked).

full width
Demo topologyIngest, Enrich, and Sink in sequence. Ingest is selected. The first link is flowing. The sink is accepting writes.IngestselectedEnrichtap meSinktap me

Ingest — Receives events from collectors

Tap a node — the card and its inbound edges answer. Then break the first link and lock the sink: the ✕ cut and ⊘ refusal are Edge states, not bespoke path groups.

Installation

Usage

Diagram: Root · Edge · Node

Use when

  • Hand-placed diagrams where the positions ARE the content — pipelines, topologies, decision trees
  • Diagrams that respond to state: edges that break, block, slow, or flow as the system they describe does
  • Not for auto-layout graphs (NodeDiagram) or data-derived geometry (the viz family)

The presets — Pipeline and BranchTree as data-driven compositions

full width
Execution pipelinePlan selected — 12 ms.01Plan12 ms02Run84 ms03Report21 msDecisionship selected.Ship itmomentum compoundsHarden ittrust compoundsWhat matters most?

The presets — Pipeline and BranchTree as data-driven compositions: one stages array, one branches array, selection wired through.