Mind Map
Build a mind map as an outline, see it laid out automatically, and export it as SVG or PNG.
Runs in your browserOutline
One idea per line. Indentation shows the level. The arrow button adds a child, the plus button adds a sibling to the right.
Style
Each level is a lighter step of the base colour, so the depth reads at a glance without turning the map into a rainbow.
Preview
Drag empty space to pan, or use the zoom buttons. Double-click a node in the drawing to fold its branch.
Good to know
- Collapsing a branch removes it from the layout rather than only hiding it, so the rest of the map closes up.
- SVG is exported at its natural size regardless of your current zoom, so a zoomed-in view does not produce a cropped file.
- The outline is saved in this browser as you type, so refreshing does not lose it.
- Node widths are measured from the rendered text, so long lines get wider boxes instead of being clipped.
About this tool
You build the map as a plain outline — one line per idea, indented by level — and it is drawn as a tree as you type. Editing an outline is far faster than dragging boxes around a canvas, and it keeps you thinking about the content rather than about whether two nodes are aligned. The layout places each branch in its own band and centres parents on their children, so nothing overlaps and no connectors cross. Node widths are measured from the actual rendered text, so mixed Chinese and English lines get boxes that fit instead of clipping.
How to use it
- 1Type the central idea in the first line, then use the arrow button on any line to add a child, and the plus button to add a sibling.
- 2Collapse branches you are not working on — the folded subtree stops taking up space in the layout, so the rest of the map stays readable.
- 3Adjust the row and column spacing and the base colour, then export SVG for print or PNG for sharing.
Frequently asked questions
Why build it as an outline rather than dragging nodes?
Because dragging is slow and the layout work is what you want to avoid. In an outline you press one key per idea and never think about position; the drawing is a consequence of the structure. Rearranging is then a matter of moving a line up or down rather than dragging a node across a canvas and re-aligning everything it touched. The canvas view exists so you can look at the result, not so you have to assemble it.
What happens when I collapse a branch?
The subtree is removed from the layout entirely, so the space it occupied is reclaimed and the rest of the map closes up — rather than being hidden behind a fold while still pushing everything apart. The number of hidden children is shown as a small badge on the collapsed node, and double-clicking a node in the drawing toggles it too.
Is the layout fully automatic?
It is automatic in position but not optimal in width. Each level takes a fixed column, and parents are centred on their children, which guarantees no overlaps and no crossing connectors. A full implementation would also push subtrees together wherever their outlines allow it, producing a tighter drawing. For maps of a few dozen to a couple of hundred nodes the difference is small, so the simpler rule is used and the spacing controls are there if you want more air.