An interactive D3.js-powered knowledge graph visualization with zoom, pan, drag, tooltips, and export functionality.
Search for a command to run...
An interactive D3.js-powered knowledge graph visualization with zoom, pan, drag, tooltips, and export functionality.
An interactive force-directed graph visualization powered by D3.js. Perfect for displaying relationships, knowledge bases, memory systems, mind maps, and entity connections.
💡 Drag nodes to reposition • Scroll to zoom • Click nodes for details
Visualizing the brain. Shows how Gaia connects entities and memories.
First, install the required D3.js dependency:
npm install d3 @types/d3Then add the component:
npx shadcn@latest add "https://ui.heygaia.io/r/knowledge-graph"import { KnowledgeGraph } from "@/components/ui/knowledge-graph";
const nodes = [
{ id: "1", label: "React", type: "technology" },
{ id: "2", label: "TypeScript", type: "technology" },
{ id: "3", label: "User", type: "user", size: 30 },
];
const links = [
{ source: "3", target: "1", label: "uses" },
{ source: "3", target: "2", label: "uses" },
{ source: "1", target: "2" },
];
export default function Example() {
return (
<div className="h-[400px]">
<KnowledgeGraph
nodes={nodes}
links={links}
onNodeClick={(node) => console.log(node)}
/>
</div>
);
}import { useRef } from "react";
import { KnowledgeGraph, type KnowledgeGraphHandle } from "@/components/ui/knowledge-graph";
export default function Example() {
const graphRef = useRef<KnowledgeGraphHandle>(null);
return (
<div>
<button onClick={() => graphRef.current?.exportAsPNG()}>
Export as PNG
</button>
<button onClick={() => graphRef.current?.resetZoom()}>
Reset Zoom
</button>
<KnowledgeGraph ref={graphRef} nodes={nodes} links={links} />
</div>
);
}<KnowledgeGraph
nodes={nodes}
links={links}
showLegend={false}
showLinkLabels={false}
/>const nodes = [
{ id: "1", label: "Important", type: "main", size: 40, color: "#ff0000" },
{ id: "2", label: "Related", type: "secondary", size: 20 },
];| Prop | Type | Default | Description |
|---|---|---|---|
nodes | GraphNode[] | Required | Array of nodes to display |
links | GraphLink[] | Required | Array of links connecting nodes |
onNodeClick | (node: GraphNode) => void | - | Callback when node is clicked |
onNodeHover | (node: GraphNode | null) => void | - | Callback on node hover |
showLegend | boolean | true | Show node type legend |
showLinkLabels | boolean | true | Show relationship labels on links |
centerNodeId | string | - | Node ID to position in center |
className | string | - | Additional CSS classes |
interface GraphNode {
id: string; // Unique identifier
label: string; // Display label
type: string; // Category (for coloring)
size?: number; // Node radius (default: 20)
color?: string; // Custom color override
data?: unknown; // Additional data
}interface GraphLink {
source: string; // Source node ID
target: string; // Target node ID
label?: string; // Relationship label
strength?: number; // Link strength (default: 0.8)
}Access via ref:
| Method | Description |
|---|---|
exportAsSVG() | Download graph as SVG file |
exportAsPNG() | Download graph as PNG file |
resetZoom() | Reset zoom and pan to default |