A powerful, browser-based mindmap tool for organizing thoughts, ideas, and concepts visually. Built with vanilla JavaScript and modern web technologies.
-
Intuitive Node Management
- Create nodes with a single click
- Drag & drop nodes using headers
- Resize nodes from any edge or corner
- Rich text editing within nodes
- Custom node titles with dedicated header sections
-
Rich Media Support
- 📸 Paste images directly into nodes
- Supports animated GIFs
- Automatic image resizing
- Preserves image quality
-
Dynamic Connections
- Connect nodes by holding Ctrl and dragging
- Automatic connection line updates
- Visual feedback during connection creation
- Smart connection point calculation
-
Advanced Styling
- 🎨 Customizable node colors
- Font family and size options
- Border styles and colors
- Box shadow customization
- Dark mode support
-
Zoom Controls
- 🔍 Zoom in/out functionality (50% - 200%)
- Persistent zoom levels
- Smooth zoom transitions
- Maintains connection accuracy at all zoom levels
-
State Management
- 💾 Automatic state saving
- Persists between sessions
- Preserves all node properties
- Complete layout restoration
- Clone the repository:
git clone https://github.com/yourusername/interactive-mindmap.git- Open
index.htmlin a modern web browser
That's it! No build process or dependencies required.
-
Creating Nodes
- Click anywhere on the canvas to create a new node
- Click and drag the header to move nodes
- Resize from any edge or corner
-
Making Connections
- Hold Ctrl and drag from one node to another
- Or select a node and click another node to connect them
-
Editing Content
- Click the header to edit node title
- Click the content area to add/edit text
- Paste images directly into nodes
-
Styling Nodes
- Click a node to open the properties panel
- Customize colors, fonts, borders, and more
- Changes are saved automatically
-
Zooming
- Use the zoom controls in the bottom-left corner
- Or use Ctrl + Mouse Wheel (coming soon)
-
Organization
- Use different colors to categorize nodes
- Create hierarchies with connection lines
- Use headers for quick topic identification
-
Productivity
- Paste screenshots directly into nodes
- Use keyboard shortcuts (documentation coming soon)
- Organize nodes spatially for better understanding
Built with:
- Vanilla JavaScript
- HTML5 Canvas for connections
- LocalStorage for persistence
- CSS Grid and Flexbox
- ResizeObserver API
- File API for image handling
- Keyboard shortcuts
- Export/Import functionality
- Multiple mindmap support
- Collaborative editing
- Touch screen support
- Node groups/clustering
- Undo/Redo functionality
- Custom themes
Contributions are welcome! Please read our Contributing Guide for details on our code of conduct and the process for submitting pull requests.
This project is licensed under the MIT License - see the LICENSE.md file for details.
- Inspired by modern mind mapping tools
- Built for the web development community
- Special thanks to all contributors
Made with ❤️ by Christopher Robison