An interactive concept map editor for creating and exploring hierarchical graph diagrams. Build knowledge structures visually by connecting nodes into nested subgraphs.

Features

Interactive graph editing — click nodes to create children, ctrl+click to multi-select, click edges to remove them
Nested subgraphs — convert any node into its own subgraph layer for infinite nesting
Breadcrumb navigation — navigate through graph hierarchy with breadcrumb trail
Sidebar tree view — see and navigate the full hierarchical structure at a glance
Rename nodes — right-click any node to rename, create subgraphs, or remove
Orphaned nodes — right-click empty canvas area to create standalone nodes
Save & load — export/import your entire graph as a JSON file

Getting Started

Prerequisites

Node.js (v18+)
npm

Installation

npm install

Development

npm run dev

Opens at http://localhost:5173 with hot module replacement.

Build

npm run build

Tests

npx playwright test

Usage

Action	Result
Click a node	Create a new child node
Ctrl+click nodes, then click target	Link selected nodes as parents to target
Click an edge	Delete that edge
Right-click a node	Open context menu (Rename / Subgraph / Remove)
Right-click empty area	Create an orphaned (unconnected) node
Click sidebar tree item	Navigate to that subgraph

Tech Stack

React 19 + TypeScript
Vite — build tool
Viz.js (Graphviz) — graph rendering
D3 — SVG interactivity
Ant Design — UI components
Zustand — state management

File Format

Graphs are saved as concept-sketch.json. The format supports nested subgraphs with recursive structure, preserving the full hierarchy.