A modern, CmapTools-style concept-mapping tool: concepts are boxes, verbs (linking phrases) are first-class objects — connect any number of concepts to one verb, move the verb and every connection follows. Think Workflowy × CmapTools × MindNode.
npm install
npm run dev # → http://localhost:5173[Concept] ──> (verb) ──> [Concept]
│
└──────> [Another concept] ← same verb, many connections
- Drag the dot above a concept onto another concept → a verb pill is inserted between them, ready to name.
- Drag the dot above a verb onto a concept (or empty canvas) → another concept joins the same verb.
- Drop on empty canvas → new concept (with a verb when starting from a concept). Drops register anywhere on a node's body.
- Verbs are nodes: select, move, rename, delete them like anything else. Deleting a concept prunes verbs that lost a side.
- Focus (
F/ ◎): Workflowy-style zoom into a branch, with breadcrumbs. - Collapse (
C/ hover chevron): fold a branch into a+Nbadge. Collapse is smart about diamonds — it never offers a fold that would hide nothing. - Tidy (
L) + Auto toggle: ELK layered auto-layout with animated re-arrangement — you never push boxes around by hand. - Zoom: pinch / ⌘± / bottom-left controls; minimap bottom-right.
| Key | Action |
|---|---|
| Double-click canvas | New concept |
| Tab | Add connected concept (chains while typing) |
| Enter | Edit selected node |
| F / C | Focus / collapse selected branch |
| Esc | Step out of focus |
| N / L | New concept / tidy layout |
| ⌫ | Delete selection |
| ⌘Z / ⇧⌘Z | Undo / redo (includes view state) |
| Shift+drag | Box-select |
Undo/redo (100 steps), autosave to localStorage (flushed on tab close), JSON import/export, PNG export, dark mode.
Vite · React 19 · TypeScript · @xyflow/react v12 (canvas, custom floating edges) · elkjs (layered auto-layout) · zustand (state + history).
src/
graph.ts visibility: focus + collapse with diamond/cycle rescue
layout.ts ELK layered layout, recentered to keep the camera stable
store.ts zustand store: doc, history, persistence, derived view cache
App.tsx React Flow wiring, keyboard, layout/camera orchestration
components/ Concept & verb nodes, floating edges, toolbar, breadcrumbs…