https://github.com/chrisrobison/mindmap
A simple web-based mindmapping and diagramming app
https://github.com/chrisrobison/mindmap
Last synced: 16 days ago
JSON representation
A simple web-based mindmapping and diagramming app
- Host: GitHub
- URL: https://github.com/chrisrobison/mindmap
- Owner: chrisrobison
- License: mit
- Created: 2024-12-18T18:30:24.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-19T17:34:57.000Z (over 1 year ago)
- Last Synced: 2025-01-19T18:35:21.960Z (over 1 year ago)
- Language: HTML
- Size: 32.2 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🧠 Interactive Mindmap
A powerful, browser-based mindmap tool for organizing thoughts, ideas, and concepts visually. Built with vanilla JavaScript and modern web technologies.
## ✨ Features
- **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
## 🚀 Getting Started
1. Clone the repository:
```bash
git clone https://github.com/yourusername/interactive-mindmap.git
```
2. Open `index.html` in a modern web browser
That's it! No build process or dependencies required.
## 🎮 Usage
- **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)
## 💡 Tips & Tricks
- **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
## 🛠️ Technical Details
Built with:
- Vanilla JavaScript
- HTML5 Canvas for connections
- LocalStorage for persistence
- CSS Grid and Flexbox
- ResizeObserver API
- File API for image handling
## 🎯 Upcoming Features
- [ ] Keyboard shortcuts
- [ ] Export/Import functionality
- [ ] Multiple mindmap support
- [ ] Collaborative editing
- [ ] Touch screen support
- [ ] Node groups/clustering
- [ ] Undo/Redo functionality
- [ ] Custom themes
## 🤝 Contributing
Contributions are welcome! Please read our [Contributing Guide](CONTRIBUTING.md) for details on our code of conduct and the process for submitting pull requests.
## 📝 License
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.
## 🙏 Acknowledgments
- Inspired by modern mind mapping tools
- Built for the web development community
- Special thanks to all contributors
---
Made with ❤️ by [Christopher Robison](mailto:cdr@cdr2.com)