000aad362a
- Add CutStore (Zustand) to store cut node IDs, node data, edges, and source graph ID - Update graphToDot() to render cut nodes with dashed grey style for visual indication - Add 'Cut' action to node context menu; 'Paste' action to empty-area context menu - Cut logic: captures selected nodes (or right-clicked node if none selected) plus all nodes reachable by outgoing edges from those nodes; clears selection afterwards - Paste logic: adds cut nodes/edges to target graph, removes them from source graph in GraphsStore; pasting on the same graph as the cut source cancels the cut - Graph re-renders automatically when cutNodeIds changes via useCutStore subscription - Clear cut store on file load for consistency - Add E2E tests covering: Cut menu visibility, Paste menu visibility, cut styling, linked-node inclusion, cross-subgraph paste, source-graph cleanup, same-graph cancel 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.