71 lines
1.8 KiB
Markdown
71 lines
1.8 KiB
Markdown
# 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.
|