Online Mind Map

Features

• Type an outline on the left, watch the map on the right
• Indentation sets the level: spaces, tabs or a mix
• Leading - / * / + are stripped, so Markdown lists paste right in
• Two layouts: split both sides (the classic look) or right only (good for documents)
• One colour per branch, so a branch reads as a group at a glance
• Adjustable font size (10–24)
• Export SVG: vector, sharp at any size, editable in Figma or Illustrator
• Copy the SVG source in one click
• Node text is escaped, so angle brackets cannot break the image
• An empty outline gets a hint instead of a blank canvas

How to use

1. Write the outline on the left, one line per node
2. Indent by two spaces (or a tab) to nest a level
3. Pick a layout and colour scheme; the map updates as you type
4. Adjust the font size if you need to
5. Download the SVG, or copy the source

FAQ

Can I drag nodes around?

No, deliberately. Drag-and-drop needs a whole canvas interaction layer — hit testing, marquee selection, an undo stack, snapping — while the more common need is turning an outline you have already thought through into a picture quickly. To change the structure, edit the outline; it is usually faster than dragging.

Can the exported image be edited further?

Yes. It is a standard SVG (vector) and opens in Figma, Illustrator or Inkscape, where the text stays text rather than becoming outlines. It also drops straight into a web page or a Markdown document.

Does it measure Chinese text correctly?

Yes. Node boxes are sized by display width, where a Chinese character counts as two cells, so a Chinese node is exactly as wide as it looks — no overflowing text and no half-empty boxes.

Why is the exported image on a white background?

Because a transparent image becomes unreadable in a dark theme (a dark-mode document or chat app). White works in both dark and light surroundings. If you want transparency, delete the background rectangle in an editor.

Is a very long outline a problem?

No, but the picture gets large (the canvas fits the content). For deep nesting the right-only layout reads better — splitting both ways curves back on itself once there are many levels.