What it looks like
At the center sits a navy pill with the main idea in white letters. Around it, spread across both sides, first-level topics appear as light pills with a colored outline, one color per branch. From there, curved ribbons taper at each level, like tree branches seen from above, down to the smaller topics, written over an underline in the branch color. When you add or move a topic, its neighbors glide to their new positions. Collapsed branches show how many topics they hide. Shortcuts and zoom controls sit in the bottom corner.
You may be looking for this if you asked for something like
- a mind map to build ideas with a client during a meeting
- a diagram with the idea in the middle and colored branches going out
- a visual brainstorm inside my app that exports as an outline
- create topics with just Tab and Enter, no mouse
- organize a project scope into branches that open and close
- an idea map like the mind mapping apps, but in the browser
- turn a Markdown list into a mind map
Also known as
- mind map
- idea map
- brainstorming map
- radial tree
- radial diagram
- topic tree
When to use
- Ideation workshops and discovery meetings with the client in the room
- Project scopes and briefs that later become Markdown outlines
- AI agent planning, with intents and replies organized in branches
- Study and note-taking tools that need a tree view
When to avoid
- Formal hierarchies of people and roles, where an org chart communicates better
- Flows with steps and links between branches, which call for a flow editor
How to ask your AI
Build an editable radial mind map for the ideation workshops in my app: Tab adds a child, Enter adds a sibling, inline editing, drag to reorganize, collapsible branches in my brand colors, Markdown export, pan and pinch zoom and full keyboard navigation.
With THM Componentes, you paste the full prompt from the catalog, which already includes this component's source code, and the AI reproduces this exact effect instead of improvising.
Questions about Mind Map
How do I save and load a map in Mind Map?
Mind Map works with v-model: every edit emits the new tree, with id, text, children and collapsed branches. To exchange maps with other tools, toMarkdown produces a heading with nested lists and fromMarkdown imports lists back; the Markdown button copies the map or downloads an .md file if copying fails.
Can I use Mind Map without a mouse?
Yes. In Mind Map, Tab adds a child topic, Enter adds a sibling, F2 or typing starts editing, Delete removes, Space collapses a branch, the arrow keys move around the map and Alt with up or down reorders. To leave the map with Tab, press Esc first; deletions, moves and collapsed branches are announced to screen readers.
Does Mind Map work on phones?
Yes, with touch: one finger pans the view, a tap selects a topic, dragging a topic moves it to another branch and two fingers pinch to zoom. On narrow screens Mind Map hides the shortcut strip and the button labels. For writing many topics, a keyboard is still the fastest way.
