# Mind Map A central idea in the middle and colored curved branches you create with Tab and Enter, drag and collapse. > Mind Map is an exclusive THM Componentes component that builds a radial mind map inside your app: the central idea sits in the middle and branches flow out in organic curves, each in its own color. Tab adds a child topic, Enter adds a sibling, branches can be dragged and collapsed, and the map exports to and imports from Markdown. - Category: Apps and productivity - Origin: THM exclusive, built by THM Tecnologia Inteligente; the prompt includes the full source code - Load weight: Medium: canvas or continuous animation; fine for one section - Technology: Vue 3, TypeScript, Canvas 2D - Interaction: Mouse, Touch, Keyboard - URL: https://vibecode.thmtecnologia.com/en/components/mind-map/ ## 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 ```text 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. ## Related components - [Org Chart](https://vibecode.thmtecnologia.com/en/components/org-chart/): An org chart that lays itself out as a tree, with teams that open and close and search that traces the path to anyone. - [Flow Editor](https://vibecode.thmtecnologia.com/en/components/flow-editor/): An infinite board where you wire boxes together to build automations and watch the flow run with pulses of light. - [Whiteboard](https://vibecode.thmtecnologia.com/en/components/whiteboard/): An endless whiteboard to stick notes, draw shapes, connect arrows and sketch by hand, like a live workshop wall. - [Force Graph](https://vibecode.thmtecnologia.com/en/components/force-graph/): Thousands of colored dots linked by threads that arrange themselves into clusters, with search and zoom to any node. - [Block Editor](https://vibecode.thmtecnologia.com/en/components/block-editor/): A text editor where every line is a block: type a slash to add headings, lists and to-dos, and drag to reorder. --- THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).