Graph Explorer
The Graph Explorer renders your entire knowledge base as an interactive force-directed graph. Navigate to /kb/graph from the dashboard to use it.
Node Types and Colors
Each page type has a distinct color:
| Type | Color | Use |
|---|---|---|
| Entity | Blue | People, orgs, products, agents |
| Concept | Purple | Ideas, patterns, architectures |
| Comparison | Orange | Side-by-side evaluations |
| Source | Green | Reference docs, external content |
Nodes are sized by their connection count — highly connected pages appear larger.
Interactions
| Action | Result |
|---|---|
| Click node | Opens a slide-over panel with page preview and "Open page" link |
| Hover node | Highlights the node and all directly connected nodes; dims everything else |
| Drag node | Repositions the node in the graph layout |
| Scroll | Zoom in/out |
| Click + drag background | Pan the viewport |
Controls
- Search box: Type to highlight matching nodes and dim non-matches
- Depth slider: Controls how many hops from the root to include (1-4)
- Limit slider: Maximum number of nodes to display (50-1000)
- Type filters: Toggle visibility of each page type
Performance
The graph uses canvas rendering (Sigma.js) with the ForceAtlas2 layout algorithm. It handles 1000+ nodes without jank. For very large knowledge bases, use the limit slider to control how many nodes are displayed at once.
API
The graph data comes from the wiki graph endpoint:
GET /api/v1/wiki/graph?depth=2&limit=500
Response:
{
"nodes": [
{"id": "abc", "label": "CEO Agent", "type": "entity", "connections": 14, "slug": "agents/ceo"}
],
"edges": [
{"source": "abc", "target": "def", "type": "LINKS_TO"}
]
}