# Ipê Ideia central no meio e ramos coloridos em curvas que você cria com Tab e Enter, arrasta e recolhe. > Ipê é um componente exclusivo do THM Componentes que cria um mapa mental radial no seu app: a ideia central fica no meio e os ramos saem em curvas orgânicas, cada um com sua cor. Tab cria um tópico filho, Enter cria um irmão, dá para arrastar e recolher ramos, e o mapa exporta e importa em Markdown. - Categoria: Aplicações e produtividade - Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo - Peso no carregamento: Médio: canvas ou animação contínua; bom para uma seção - Tecnologia: Vue 3, TypeScript, Canvas 2D - Interação: Mouse, Toque, Teclado - URL: https://vibecode.thmtecnologia.com/componentes/ipe/ ## Como ele é No centro fica uma pílula azul-marinho com a ideia principal em letras brancas. Em volta, distribuídos dos dois lados, os tópicos do primeiro nível aparecem como pílulas claras com contorno colorido, cada ramo numa cor. Dali saem fitas curvas que afinam a cada nível, como galhos de uma árvore vista de cima, até os tópicos menores, escritos sobre um sublinhado na cor do ramo. Quando você cria ou move um tópico, os vizinhos deslizam para as novas posições. Ramos recolhidos mostram quantos tópicos escondem. No canto de baixo ficam os atalhos e o zoom. ## Você pode estar procurando isto se pediu algo assim - “mapa mental para montar ideias com o cliente na reunião” - “diagrama com a ideia no meio e galhos coloridos saindo para os lados” - “brainstorm visual dentro do meu sistema que exporte em tópicos” - “criar tópicos só com Tab e Enter, sem usar o mouse” - “organizar o escopo do projeto em ramos que abrem e fecham” - “mapa de ideias igual aos aplicativos de mind map, só que no navegador” - “transformar uma lista em Markdown num mapa mental” ## Também chamado de mapa mental, mind map, mapa de ideias, brainstorming map, diagrama radial, radial tree, árvore de tópicos ## Quando usar - Oficinas de ideação e reuniões de descoberta com o cliente ao vivo - Escopo de projetos e briefings que depois viram listas em Markdown - Planejamento de agentes de IA, com intenções e respostas organizadas em ramos - Ferramentas de estudo e de anotações que pedem uma visão em árvore ## Quando evitar - Hierarquias formais de pessoas e cargos, em que um organograma fica mais claro - Fluxos com etapas e ligações entre ramos, que pedem um editor de fluxos ## Como pedir para a sua IA ```text Crie um mapa mental radial editável para as oficinas de ideação do meu app: Tab cria filho, Enter cria irmão, edição no lugar, arrastar para reorganizar, ramos recolhíveis nas cores da minha marca, exportação em Markdown, pan e zoom com pinça e navegação completa pelo teclado. ``` Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar. ## Perguntas sobre Ipê ### Como salvo e carrego um mapa de Ipê? Ipê trabalha com v-model: cada edição emite a árvore nova, com id, texto, filhos e ramos recolhidos. Para trocar com outras ferramentas, toMarkdown gera um título e listas aninhadas e fromMarkdown importa listas de volta; o botão Markdown copia o mapa ou baixa um arquivo .md se a cópia falhar. ### Dá para usar Ipê sem mouse? Dá. Em Ipê, Tab cria um tópico filho, Enter cria um irmão, F2 ou digitar edita, Delete exclui, Espaço recolhe o ramo, as setas navegam pelo mapa e Alt com seta para cima ou para baixo reordena. Para sair do mapa com Tab, pressione Esc antes; exclusões, movimentos e ramos recolhidos são anunciados a leitores de tela. ### Ipê funciona no celular? Funciona com toque: um dedo arrasta a vista, tocar seleciona um tópico, arrastar um tópico o leva para outro ramo e dois dedos dão zoom em pinça. Em telas estreitas, Ipê esconde a faixa de atalhos e os rótulos dos botões. Para escrever muitos tópicos, um teclado ainda é o caminho mais rápido. ## Componentes relacionados - [Linhagem](https://vibecode.thmtecnologia.com/componentes/linhagem/): Organograma que se monta sozinho em árvore, com equipes que abrem e fecham e busca que mostra o caminho até a pessoa. - [Engenhoca](https://vibecode.thmtecnologia.com/componentes/engenhoca/): Quadro infinito em que você liga caixas por fios para montar automações e vê o fluxo rodar com pulsos de luz. - [Mutirão](https://vibecode.thmtecnologia.com/componentes/mutirao/): Quadro branco sem bordas para colar notas, desenhar formas, ligar setas e rabiscar à mão, como numa oficina ao vivo. - [Constelação](https://vibecode.thmtecnologia.com/componentes/constelacao/): Milhares de pontos coloridos ligados por fios que se organizam sozinhos em grupos, com busca e zoom até cada nó. - [Lauda](https://vibecode.thmtecnologia.com/componentes/lauda/): Editor de texto em blocos: digite barra para inserir títulos, listas e tarefas, e arraste cada bloco para reordenar. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.