# 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

```bash
npm install
```

### Development

```bash
npm run dev
```

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

### Build

```bash
npm run build
```

### Tests

```bash
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.