1 viewer
Back to Components
Component · Visualization

Graph

Graph renderer for nodes and edges.

Category
Visualization
Slots
3
States
2
Writer
Shared
cre8.primitive.graph

Preview

Live renderShared SSR + WASM writers
Workflow Pipeline
  • Client Intent
  • Connection Gateway
  • CRE8VM Sandboxed
  • HyperDB Receipt
  • input → router: POST
  • router → vm: dispatch
  • vm → hyperdb: receipt
Workflow Pipeline4 vertices, 3 hyperedges (0 of arity 3 or more)POSTdispatchreceiptClient Intent · intent · degree 1Client IntentintentConnection Gateway · gateway · degree 2Connection GatewaygatewayCRE8VM Sandboxed · vm · degree 2CRE8VM SandboxedvmHyperDB Receipt · db · degree 1HyperDB Receiptdb
<NodeGraph
  edges={[
    { label: "POST", source: "input", target: "router" },
    { label: "dispatch", source: "router", target: "vm" },
    { label: "receipt", source: "vm", target: "hyperdb" }
  ]}
  height={220}
  nodes={[
    { id: "input", kind: "intent", label: "Client Intent", x: 40, y: 90 },
    { id: "router", kind: "gateway", label: "Connection Gateway", x: 220, y: 40 },
    { id: "vm", kind: "vm", label: "CRE8VM Sandboxed", x: 420, y: 40 },
    { id: "hyperdb", kind: "db", label: "HyperDB Receipt", x: 420, y: 140 }
  ]}
  title="Workflow Pipeline"
/>

Anatomy

The named parts of the rendered markup. Recipes style these hooks, and every renderer keeps them stable.

SlotDOM class
root.primitive-graph
node—
edge—
3 rows

States and platforms

The states the contract publishes, the platforms it declares, and the style recipes that dress it.

States
loadingselected
Platforms
webruntime-nodecanvas
Recipes
unstyledruntime-console

Renderers

Shared writer
Graph renders through the one writer the server and the WASM DOM share, so both emit the same markup.

Every tag in the example above renders through a shared writer.

Declared adapters. A status is the manifest's declaration, not a measured parity result.

TargetRendererStatus
webreactexperimental
runtime-nodeview-nodeready
ssrhtml-visualization-placeholderready
terminalterminal-textplanned
canvascanvas-adapterexperimental
5 rows

Accessibility

Semantic structure must stay available without visual styling.

  • Expose meaningful names for interactive controls.
  • Keep keyboard and pointer behavior equivalent where the platform supports it.
  • Publish state with native semantics and data attributes where the adapter supports them.