Interactive dependency graph visualization for capability registries.

Graph Explorer

The effector Graph Explorer visualizes capability registries as interactive D3 force-directed graphs. See how capabilities connect through their types, explore the type spectrum, and analyze composition patterns.

Views

Explorer

D3 force-directed graph showing capabilities as nodes and type connections as edges. Click nodes to inspect, drag to rearrange, search to filter.

Spectrum

Interactive polar chart of all 40 types. Click any type to see which capabilities use it as input, output, or context.

Dashboard

Statistics overview: type coverage, composition density, trust distribution, permission breakdown across the registry.

Pipeline

YAML-based pipeline editor. Define multi-step workflows and see them rendered as directed graphs.

Diff

Compare two registry states over time. See what capabilities were added, removed, or modified.

Run Locally

cd effector-graph
node src/cli.js serve ./path/to/registry
# → http://localhost:3000

CLI

# Generate SVG graph
node src/cli.js render ./registry -f svg -o graph.svg

# Generate JSON graph data
node src/cli.js render ./registry -f json -o graph.json

# Generate interactive HTML
node src/cli.js render ./registry -f html -o graph.html

# Start web server with all views
node src/cli.js serve ./registry

Web Components

Embed graphs in any web page:

<script src="effector-graph-components.js"></script>
<effector-graph src="graph.json"></effector-graph>
<effector-spectrum src="graph.json"></effector-spectrum>

Source

Repository: effectorHQ/effector-graph
Architecture: D3.js loaded from CDN, Node.js CLI + web server, zero npm dependencies
Tests: 12 passing