AI Mind Map Generator

Convert any paragraph or article into a visual mind map using Claude AI.

Setup (5 minutes)

1. Install dependencies

npm install

2. Add your API key

Copy .env.example to .env:

cp .env.example .env

Then open .env and replace your_api_key_here with your real key from https://console.anthropic.com

3. Run the app

npm run dev

Open http://localhost:5173 in your browser.

---

File Structure

src/
├── main.jsx              # React entry point
├── App.jsx               # Root component + layout
├── App.css               # Global styles + CSS variables
│
├── components/
│   ├── TextInput.jsx     # Textarea + example button
│   ├── Toolbar.jsx       # Generate / Clear / Export buttons
│   ├── MindMapCanvas.jsx # SVG renderer (main visual)
│   ├── MapNode.jsx       # Single node (center / branch / leaf)
│   ├── MapEdge.jsx       # Curved connection line between nodes
│   ├── Loader.jsx        # Loading animation
│   └── ExportButton.jsx  # Download PNG / SVG
│
├── hooks/
│   ├── useMindMap.js     # State: API call, loading, error
│   └── useLayout.js      # Converts data → positioned nodes
│
├── services/
│   ├── claudeApi.js      # Fetch call to Anthropic API
│   └── parseMap.js       # AI JSON → nodes + edges format
│
└── utils/
    ├── layout.js         # Radial layout math (x, y positions)
    ├── colors.js         # Color palette for branches
    └── exportSvg.js      # SVG → PNG download logic

How it works

1. User pastes text → TextInput component captures it
2. User clicks "Generate" → useMindMap hook calls claudeApi.js
3. Claude AI returns structured JSON: { center, branches[] }
4. parseMap.js converts JSON → flat nodes[] + edges[]
5. useLayout.js calculates x/y positions (radial layout)
6. MindMapCanvas.jsx renders everything as SVG

Build for production

npm run build

Output goes to the dist/ folder. Deploy to Vercel, Netlify, or GitHub Pages.

Tech stack

• React 18
• Vite 5
• Claude AI (Anthropic API)
• Pure SVG (no graph library needed!)