Knowledge Graph

Component 6

About

An interactive force-directed graph visualization for showing relationships between entities, memories, or knowledge-base items, with zoom, pan, drag, tooltips and SVG/PNG export.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Knowledge Graph to your project and fits it to your theme.

Code

How Knowledge Graph is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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] w-full">
      <KnowledgeGraph
        nodes={nodes}
        links={links}
        onNodeClick={(node) => console.log(node)}
      />
    </div>
  );
}