# Aqueduto Faixas curvas que mostram para onde vai cada parte de um total, com pontinhos correndo na proporção do volume. > Aqueduto é um componente exclusivo do THM Componentes que mostra como um total se divide entre etapas: faixas curvas com largura proporcional ao volume ligam origens, etapas e resultados, e pontinhos coloridos percorrem os caminhos na mesma proporção. Ao passar o mouse, destaca o caminho completo com a fração exata. Serve para funis de vendas e jornadas. - Categoria: Dados e visualização - 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, Teclado - URL: https://vibecode.thmtecnologia.com/componentes/aqueduto/ ## Como ele é Imagine rios que se dividem e se juntam: à esquerda, as origens em barrinhas coloridas, índigo, ciano, âmbar e rosa; à direita, os resultados. Entre elas correm faixas curvas translúcidas com a largura de cada fluxo, que saem na cor da origem e escurecem pelo caminho. Pontinhos com rastro, como cometas, correm pelas faixas na proporção do volume, e o diagrama se revela da esquerda para a direita ao entrar na tela. Ao passar o mouse num nó ou numa faixa, o caminho inteiro acende, o resto esmaece e um cartão branco mostra o volume e as porcentagens. ## Você pode estar procurando isto se pediu algo assim - “diagrama que mostra para onde vão os leads em cada etapa do funil” - “gráfico de fluxo com faixas que se dividem, tipo rios” - “mostrar a jornada do paciente da entrada até o resultado” - “funil de vendas visual com bolinhas andando pelas etapas” - “ver de onde vem e para onde vai o dinheiro do projeto” - “gráfico de caminhos que acende quando passo o mouse” ## Também chamado de diagrama de Sankey, Sankey diagram, gráfico de fluxo, flow diagram, alluvial chart, funil visual ## Quando usar - Funil de vendas com origens, canais, etapas e resultado - Jornada de pacientes ou de clientes entre atendimentos e desfechos - Prestação de contas que mostra de onde vêm e para onde vão os recursos - Apresentações que precisam explicar perdas entre uma etapa e outra ## Quando evitar - Fluxos com dezenas de nós por coluna, que viram um emaranhado de faixas - Telas muito estreitas: abaixo de 520 pixels o diagrama rola para o lado - Sites de fundo escuro sem adaptar as cores, já que textos e faixas usam azul-marinho por padrão ## Como pedir para a sua IA ```text Crie um diagrama Sankey do funil de vendas com faixas proporcionais ao volume, partículas em Canvas fluindo na mesma proporção e destaque do caminho completo ao passar o mouse. Use as cores da minha marca, navegação pelas setas, pausa fora da tela e versão sem partículas para movimento reduzido. ``` 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 Aqueduto ### Como monto meu funil em Aqueduto? Passe a prop nodes com id e rótulo de cada etapa e a prop links com origem, destino e valor de cada fluxo. Aqueduto calcula as colunas pela profundidade, ordena os nós para reduzir cruzamentos e usa a prop columns para os títulos; a prop unit troca a palavra leads dos rótulos. ### Aqueduto pesa na página? É um componente Médio no THM Componentes. As faixas de Aqueduto são SVG e só as partículas usam Canvas, com limite de 420 ao mesmo tempo; a animação para quando o diagrama sai da tela, e a prop particles desliga os pontinhos se você quiser só o diagrama. ### Aqueduto respeita quem prefere menos movimento? Respeita. Com a preferência de reduzir movimento, o diagrama de Aqueduto aparece inteiro de uma vez, sem a revelação da esquerda para a direita e sem partículas, e o destaque dos caminhos troca sem transição. A leitura pelo mouse, pelas setas e pela tabela oculta para leitores de tela continua igual. ## Componentes relacionados - [Loteamento](https://vibecode.thmtecnologia.com/componentes/loteamento/): Um painel de retângulos coloridos, cada um do tamanho da sua fatia; clique para entrar no próximo nível. - [Páreo](https://vibecode.thmtecnologia.com/componentes/pareo/): Barras horizontais que avançam período a período e trocam de lugar no ranking enquanto o tempo passa. - [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. - [Teleférico](https://vibecode.thmtecnologia.com/componentes/teleferico/): Linhas finas ligam ícones e cards, e um pulso de luz colorida corre por elas, mostrando os dados em movimento. - [Alambique](https://vibecode.thmtecnologia.com/componentes/alambique/): Tabela que resume vendas por região, produto e trimestre; arraste os campos para mudar o cruzamento. --- 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.