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
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.
