An intuitive, interactive, feature-rich web-based mind mapping application designed for seamless visual thinking, content planning, study mapping, and structured brainstorming.
Built with pure vanilla JavaScript, modern CSS, Quill.js rich text editor, html2canvas, and jsPDF, MindMap Pro offers a fast, fluid, and responsive experience without heavy framework overhead.
- Infinite Canvas & Smooth Pan/Zoom: Fluid canvas navigation with mouse drag-to-pan, wheel zoom focused at cursor position, and fit-to-screen (
Fit View). - Rich Node Editing: In-place rich text editing powered by Quill.js. Add formatted text, bold, italics, lists, colors, links, embedded images, and video clips directly within any node.
- Node Management & Hierarchy: Create parent-child and sibling relationships effortlessly. Collapse and expand sub-branches to keep complex maps clean.
- Drag-and-Drop Positioning: Freely position nodes anywhere on the canvas with immediate visual connection updating.
- Custom Color Swatches: Personalize individual nodes or major branches with a vibrant 12-color palette.
- Background Themes & Patterns: Choose between clean solid colors, dot matrices, grids, diagonal stripes, waves, or vivid gradient backgrounds.
- Dark Mode Support: Toggle seamlessly between Light and Dark themes with full color harmonization.
Jumpstart your workflow with pre-built mind map templates:
- Project Plan: Milestone tracking, design phases, research, and development breakdowns.
- Brainstorming: Main concept trees with nested multi-level sub-ideas.
- SWOT Analysis: Structured layout with predefined color tags for Strengths, Weaknesses, Opportunities, and Threats.
- Learning Map: Educational subject breakdown, prerequisites, and topic branches.
- Real-time full-text node search (
Ctrl+F/Cmd+F). - Interactive search dropdown displaying ancestor paths for deep hierarchy context.
- Jump directly to any matched node with auto-centering and highlighting.
- JSON Import/Export: Full lossless saving and loading of mind maps including hierarchy, custom positioning, colors, and collapsed states.
- PDF Export: Generate high-resolution landscape A3 PDF documents of your entire mind map.
- Markdown Export: Export structured tree lists directly into
.mdformat for notes, documentation, or publishing. - Auto-Save: Automatic background saving to LocalStorage every 5 seconds to prevent data loss.
| Shortcut | Action |
|---|---|
Tab |
Add Child node to selected node |
Shift + Tab |
Add Sibling node next to selected node |
Double Click (on node) |
Edit node text with Rich Text Editor |
Double Click (on canvas) |
Create new floating node |
Space |
Collapse / Expand selected branch |
Delete / Backspace |
Delete selected node and its children |
Ctrl + Z / Cmd + Z |
Undo |
Ctrl + Shift + Z |
Redo |
Ctrl + S / Cmd + S |
Export as JSON |
Ctrl + P / Cmd + P |
Export as PDF |
Ctrl + N / Cmd + N |
Create new empty mind map |
Ctrl + F / Cmd + F |
Focus search bar |
Mouse Scroll |
Zoom in / out at cursor location |
Left Drag (on canvas) |
Pan around canvas |
Since MindMap Pro is a zero-dependency front-end web application, running it requires no complex build tools or runtime installations.
- Clone or download this repository:
git clone https://github.com/your-username/mindmap-pro.git
- Open
index.htmldirectly in any modern web browser (Chrome, Firefox, Edge, Safari).
Using a local web server ensures proper loading of Web Fonts and smooth canvas rendering:
# Using Python
python3 -m http.server 8000
# Using Node.js npx http-server
npx http-server .Then navigate to http://localhost:8000 in your web browser.
- HTML5 & CSS3: Custom CSS variables, CSS grid/flexbox layouts, responsive design,
@importcustom typography (Ubuntu). - Vanilla JavaScript (ES6+): Core graph state engine, custom undo/redo history stack, dynamic SVG curve renderer (
Cubic Bezierconnections). - Quill.js: Rich text inline node editing and media pasting/embedding.
- Font Awesome 6: Vector UI icon set.
- html2canvas & jsPDF: High-resolution PDF map rendering and document generation.
This project is open source and available under the MIT License.