Knowledge Graph — Personal Knowledge Base Viewer

An interactive, browser-based knowledge graph tool built with Next.js, React Flow, and Zustand.

---

Tech Stack

Layer	Library
Framework	Next.js 15 (App Router) + TypeScript
Graph	@xyflow/react (React Flow v12)
State	Zustand with persist middleware
Styling	Tailwind CSS + inline styles
Icons	Lucide React
Font	Space Mono (Google Fonts)

---

Features

• Interactive Graph Canvas — drag nodes, zoom/pan, minimap
• Node CRUD — add, edit title + note inline, delete (removes edges too)
• Edge CRUD — add with relationship label, delete from detail panel
• Detail Panel — click any node to open sidebar with full edit + connection list
• Persistence — all state saved to localStorage, restored on page load
• Drag & persist positions — reposition nodes, positions are saved
• Animations — slide-in panel, scale-in modals, golden glow on selection

---

Getting Started

npm install
npm run dev
# open http://localhost:3000

Production build

npm run build && npm start

---

Project Structure

├── app/
│   ├── layout.tsx
│   ├── page.tsx
│   └── globals.css
├── components/
│   ├── GraphCanvas.tsx     # React Flow canvas
│   ├── KnowledgeNode.tsx   # Custom node renderer
│   ├── Toolbar.tsx         # Add Node / Add Edge modals
│   └── DetailPanel.tsx     # Slide-in node detail sidebar
└── store/
    └── graphStore.ts       # Zustand store + localStorage persistence