Think big first, drill down later.
A visual thinking tool for organizing ideas from the top down. Map your projects, goals, and concepts visually - then connect them to documentation (Obsidian) and tasks (Todoist) when you're ready.
Sample graph showing interconnected goals, projects, and concepts organized by cognitive zones (Philosophy in red, Utility in green, Value in gray, Marketing in blue).
Have you ever tried to plan a complex project or life goal, only to get lost in the details before you even see the big picture?
Traditional mind maps force you into tree structures - everything must have exactly one parent. But real ideas don't work that way. Your side project might connect to your career goals AND your creative outlet AND that book you're reading. Projects have dependencies, peer relationships, and loose associations that trees can't capture.
Most planning tools start with the minutiae - tasks, due dates, subtasks - and expect you to organize upward. But it's hard to prioritize when you can't see how everything connects.
Enter BigThink MindMap...
Start with the big picture. Lay out your major concepts, projects, and goals visually. Position matters - related things go near each other. Connect them with different relationship types. Optionally color-code by cognitive category. Then, when you're ready, drill down into documentation and tasks.
- Graph, not tree - Multiple roots, cycles, and arbitrary connections supported
- Position encodes meaning - Drag nodes anywhere; layout is preserved
- Multiple edge types - Parent-child, peer, weak/related, dependency
- Optional zone coloring - Color-code by cognitive category (or don't)
- View snapshots - Save and restore different layout arrangements
- Import/Export JSON - Portable data format
- Offline-capable PWA - Works without internet once installed
# Clone the repository
git clone https://github.com/djdarcy/bigthink-mindmap.git
cd bigthink-mindmap
# Install dependencies
npm install
# Start development server
npm run devThe app will be available at http://localhost:3000
npm run build
npm run preview # Preview production build- Double-click anywhere on the canvas to create a node
- Click "+ Add Node" in the toolbar to select a zone or type
- Click "Load Test Data" for sample nodes to explore
- Scroll wheel to zoom in/out
- Click and drag on empty canvas to pan
- Escape to deselect
- Click a node to select and open the property panel
- Drag nodes to reposition them
- Edit label, type, zone, priority, and description in the panel
- Export - Download current graph as JSON
- Import - Load a JSON file
- Save View - Capture current layout as a named snapshot
BigThink MindMap supports optional PUVM zones - a cognitive framework for organizing complex systems. You don't need to use zones at all - many users will treat this as a general mind-mapping tool.
| Zone | Color | Question | When to Use |
|---|---|---|---|
| Philosophy | Red | "Why should this exist?" | Theories, frameworks, principles - the "why" |
| Utility | Green | "What function does it serve?" | Tools, infrastructure, systems - the "how" |
| Value | Gray | "How does it compare?" | Core goals, priorities - what matters most |
| Marketing | Blue | "Why does it appeal?" | Public-facing, sharing - the appeal |
| PUVM-idea | Purple | "What do all the questions combine into, as a single thing?" | Life, family, health - separate concerns |
PUVM (Philosophy, Utility, Value, Marketing) is a framework for evaluating ideas, products, or actions. The "Marketing" zone isn't just external promotion - it's the inherent appeal that makes something desirable.
If you're curious, PUVM is part of a larger cognitive system including SPCR (Story, Puzzle, Content, Result). But you don't need any of this to use the tool effectively - zones just provide color-coding if you find it useful.
| Type | Visual | Meaning |
|---|---|---|
| Parent-Child | Solid arrow | Hierarchical ownership |
| Cosubstantial | Thick line | Peer relationship |
| Weak | Dashed | Loose association |
| Dependency | Dotted arrow | A requires B |
| Key | Action |
|---|---|
| Escape | Deselect node/edge |
BigThink MindMap is designed as a flexible visualization layer that connects to other tools:
| Integration | Status | Description |
|---|---|---|
| Standalone PWA | Complete | Works offline, stores data locally |
| Obsidian | Planned | Double-click nodes to create/open markdown files |
| Todoist | Planned | Sync actionable items as tasks |
| Todoist Import | Planned | Generate graph from existing Todoist projects |
Nodes can exist in multiple states - you choose the flow:
visualizationalone - Brainstorming, not ready to commitvisualization -> obsidian- Document without task trackingvisualization -> todoist- Quick task capture without docsvisualization -> obsidian -> todoist- Full flow: concept to doc to taskvisualization -> todoist -> obsidian- Task first, document latertodoist -> visualization- Import existing projects to visualize
BigThink MindMap uses Playwright for cross-browser E2E testing.
# Run all tests on Chrome, Firefox, and Edge
npm run test:e2e
# Run on specific browser
npx playwright test --project=chromium
# Interactive UI mode (great for debugging)
npm run test:e2e:ui
# Debug mode with step-through
npm run test:e2e:debug
# Run with visible browser
npm run test:e2e:headedTest Coverage:
- Smoke tests (app loads, toolbar, data loading)
- Interaction tests (node selection, dragging, zoom, property panel)
- Visual baseline screenshots for regression tracking
Note: Due to D3.js event handling limitations with automated testing, double-click canvas tests are skipped. Node clicks work via a hybrid { force: true } + JavaScript dispatchEvent approach.
- React 18 - UI framework
- TypeScript - Type safety
- D3.js - Graph visualization
- Graphology - Graph data structure and algorithms (docs)
- Zustand - State management with localStorage persistence
- Vite - Build tool with PWA plugin
- Tailwind CSS - Styling
- Playwright - E2E testing across Chrome, Firefox, Edge
See ROADMAP.md for detailed development phases and vision.
Quick Status:
- Basic graph rendering with D3.js
- Zoom and pan navigation
- Node CRUD operations
- Zone coloring (optional)
- Drag-and-drop positioning
- Property panel editing
- Double-click to create nodes
- Export/Import JSON
- Test data loader
- Node spacing fixes (v0.2.x - in progress)
- Edge creation UI (v0.6.x)
- Undo/Redo (v0.8.x)
- Fog of War view mode (v0.24.x)
- Obsidian vault integration
- Todoist integration
Track progress: Milestones | Project Board
- Playwright E2E Testing - Cross-browser automated testing
- 23 tests across Chrome, Firefox, and Edge
- Visual baseline screenshots for regression tracking
- D3.js click workarounds for reliable SVG interaction
- See docs/e2e-testing.md for developer guide
- Graph Algorithm API - Integrated Graphology for efficient graph operations
- Traversal, cycle detection, connected components, topological sort
- See docs/graph-algorithms.md for developer usage
- Private/public test data toggle - Dev mode toolbar button to switch between public and private test datasets
- Automatic version tracking - Version info auto-updated on each commit via
scripts/update-version.py - Renamed project from "PUVM Graph" to "BigThink MindMap"
- Core graph visualization with D3.js
- PUVM zone support with color coding
- Multiple edge types (parent-child, peer, weak, dependency)
- Property panel for node/edge editing
- Import/Export JSON format
- PWA support for offline use
- View snapshots for saving layouts
Contributions are welcome! Feel free to submit a pull request.
Like the project?
- D3.js - Powerful visualization library
- Zustand - Simple state management
- Vite PWA - PWA plugin for Vite
- The PUVM framework from the Zero_AG cognitive system
BigThink MindMap, Copyright (C) 2025 Dustin Darcy
This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
You should have received a copy of the GNU General Public License along with this program. If not, see http://www.gnu.org/licenses/.