44378c2bf0
The fix in issue #2 resolved a stale-closure bug in createPathSegment where onClick captured graphsPath at render time; after further navigation findIndex returned -1 and splice(0) wiped the entire breadcrumb array. New test suite 'Stale-closure regression (issue #2)' covers: - Root breadcrumb remains functional after navigating three levels deep - Level-1 breadcrumb resolves correctly when clicked from level 3 - Successive back-clicks each trim exactly one breadcrumb level - Clicking the currently active breadcrumb does not alter the path Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
ConceptSketch
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.