Skip to main content
Renders entities, actions, and resources as interactive nodes in a DAG built on React Flow. Supports auto-fetch from a CID or headless mode with custom data. Includes zoom, pan, and fit-view controls out of the box.

​
What the preview shows

The graph traces the full editorial pipeline for “The Illustrated Article”:
  1. Sarah Kim writes article-draft.md
  2. Illustrated Digest runs it through Flux Schnell to generate header-image.png
  3. Illustrated Digest runs it through Claude Opus 4.6 to produce article-polished.md
  4. The editorial team combines both and publishes illustrated-guide-final.md after review
AI action nodes automatically display a tool badge showing the provider and model (sourced from ext:ai@1.0.0). Toggle Dark mode with the button in the preview to see the graph on a deep-navy canvas.

​
Prerequisites

The stylesheet import in your global CSS is required for the graph to render correctly: 
@import "@provenancekit/ui/styles.css";
This includes the React Flow base styles. Without it the graph canvas will not display properly.

​
Props

PropTypeDefaultDescription
cidstring—Resource CID — auto-fetches graph
depthnumber10Graph traversal depth
nodesGraphNode[]—Headless mode — provide nodes directly
edgesGraphEdge[]—Headless mode — provide edges directly
heightnumber | string500Canvas height
onNodeClick(node: GraphNode) => void—Node click handler
loadingSlotReactNode—Custom loading state
errorSlotReactNode—Custom error state
classNamestring—Additional CSS class on the container

​
Node types

Each node type has a distinct color accent — blue for resources, green for actions, amber for entities:
TypeAccentIconDescription
"resource"BlueDatabaseFile or data artifact with a CID
"action"GreenZapEvent (create, transform, verify) — shows AI tool badge when ext:ai@1.0.0 is present in data
"entity"AmberUser / BotHuman, AI, or organisation

​
Edge types

TypeColorAnimatedMeaning
"produces"BlueYesAction or entity outputs a resource
"consumes"RedNoAction takes a resource as input
"performedBy"AmberNoEntity performed an action
"tool"VioletNoTool used within an action

​
Customising the canvas

Override CSS variables in :root (or .dark) to change the graph appearance: 
:root {
  --pk-graph-bg:             #f1f5f9;  /* canvas background */
  --pk-graph-dot:            #cbd5e1;  /* dot-grid colour */
  --pk-graph-node-bg:        #ffffff;  /* node card background */
  --pk-graph-node-text:      #0f172a;  /* node primary text */
  --pk-graph-node-muted:     #64748b;  /* node secondary text */
  --pk-graph-control-bg:     rgba(255,255,255,0.92);
  --pk-graph-control-border: #e2e8f0;
}

.dark {
  --pk-graph-bg:             #0a0f1e;
  --pk-graph-node-bg:        #1e293b;
  --pk-graph-node-text:      #f8fafc;
  --pk-graph-node-muted:     #94a3b8;
}