Mindmap

What does this tool do

The Mindmap tool lets you create and edit mind maps in your browser. Build a hierarchy of nodes and branches to brainstorm ideas, plan projects, or organize information visually. Add and edit nodes, expand or collapse branches, pan and zoom the canvas, and export your mind map as a PNG image or JSON file for re-import. No account required—everything runs in your browser. Your work is automatically saved as a draft in localStorage and restored when you return.

How to use it

1. Start — A default root node ("Central Idea") appears. Click it to select.
2. Add child nodes — Right-click a node and choose Add child, or select a node and click the + button in the toolbar. A new node is added under the selected node.
3. Edit node text — Double-click a node to edit its label. Press Enter to save or Escape to cancel.
4. Expand or collapse — Nodes with children show a +/- control. Click it to expand or collapse the branch.
5. Pan and zoom — Click and drag the canvas background to pan. Use the mouse wheel to zoom in and out.
6. Delete nodes — Right-click a node and choose Delete, or select a node and press Delete or Backspace. The root cannot be deleted.
7. Export — Use Export JSON to download the mind map for re-import later. Use Export PNG to download an image of the current view.
8. Import — Click Import JSON to load a previously exported mind map from a file.

How it works

The mind map is stored as a tree of nodes. Each node has an id, label, and list of children. The layout algorithm positions nodes horizontally: the root is on the left, children extend to the right, and siblings are stacked vertically with spacing. Connectors are Bézier curves from parent to child. Pan and zoom use CSS transforms on the canvas. PNG export uses dom-to-image to capture the mind map as a raster image. JSON import/export uses the File API and blob URLs—no upload to any server. Drafts are saved to localStorage every 500ms when the mind map changes.

All computation runs entirely in your browser. No data is sent to any server.

Use cases & examples

• Brainstorming — Capture ideas quickly and connect related concepts.
• Project planning — Break down a project into tasks and subtasks.
• Study notes — Organize topics and relationships for review.
• Meeting notes — Structure discussions and action items.
• Outlining — Build hierarchies of headings and content.

Example

Start with "Central Idea" as the root. Add children "Topic A" and "Topic B". Add a child "Detail 1" under "Topic A". The map shows a simple tree: Central Idea → Topic A → Detail 1, and Central Idea → Topic B.

Limitations & known constraints

• Node limit — Very large mind maps (hundreds of nodes) may slow layout and rendering.
• No cloud sync — Drafts stay in localStorage on the device; clearing site data removes them.
• Single map — One mind map per browser; importing replaces the current map.
• Export PNG — Captures the full layout at export time; pan/zoom position is not preserved in the image.