Como ele é
Parece uma mesa de trabalho infinita coberta por uma grade de pontinhos. Os nós são cartões brancos com ícone colorido, título e linhas de entradas e saídas; cada porta é uma bolinha na cor do seu tipo de dado, e uma legenda no rodapé explica as cores. Arrastar de uma saída até uma entrada puxa uma curva; se os tipos não combinam, a linha fica vermelha e aparece o motivo. Ao executar, cada nó acende enquanto trabalha, ganha um sinal de concluído com uma nota, e pulsos de luz correm pelas conexões até o próximo. Um minimapa no canto mostra onde você está.
Você pode estar procurando isto se pediu algo assim
- montar um fluxo arrastando caixinhas e ligando com setas
- editor visual de automação com nós e conexões para o meu SaaS
- mostrar para o cliente como o agente de IA decide, passo a passo
- diagrama de fluxo editável em que dá para conectar blocos
- tela de construtor de chatbot com caixas ligadas por linhas
- animação do fluxo rodando com bolinhas passando pelas linhas
- quadro infinito com zoom para desenhar um pipeline de dados
Também chamado de
- editor de fluxos
- editor de nós
- node editor
- node-based editor
- flow builder
- workflow builder
- construtor de automações
- visual programming
Quando usar
- Construtor de automações ou de chatbots dentro de um SaaS
- Demonstração ao vivo de agentes de IA, com o cliente vendo cada etapa rodar
- Pipelines de dados e integrações que precisam de um mapa editável
- Ferramentas internas de regras e aprovações com ramos de decisão
Quando evitar
- Organogramas, mapas mentais e outras árvores simples, que têm componentes próprios mais leves
- Páginas de marketing que só ilustram um fluxo fixo, em que uma imagem resolve
- Público que usa principalmente celular, já que montar fluxos pede tela grande
Como pedir para a sua IA
Crie um editor de fluxos com nós no meu SaaS de automação: pan e zoom com inércia, portas tipadas que recusam conexões inválidas dizendo o motivo, layout automático em camadas, minimapa, modo executar com pulsos ligado ao meu backend, teclado completo e versão sem animação 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 Engenhoca
Engenhoca executa o fluxo de verdade ou só simula?
Os dois. Sem configuração, Engenhoca simula a execução e decide os ramos de condição por uma semente. Com a prop executor, cada nó chama a sua função, que pode ser assíncrona e devolve quais saídas disparam e uma nota; os eventos runStart, runStep e runEnd acompanham a execução inteira.
Engenhoca pesa na página e funciona no celular?
Engenhoca é um componente Pesado no THM Componentes, mas usa só DOM e SVG, sem WebGL, e o laço de animação roda apenas enquanto algo se move, parando quando o editor sai da tela. No celular, um dedo arrasta a vista, dois dedos dão zoom em pinça, e o minimapa some em telas estreitas.
Dá para usar Engenhoca só pelo teclado?
Dá. Em Engenhoca, Tab percorre nós e conexões, as setas movem os nós pela grade, N abre o menu de adicionar, C começa uma conexão a partir do nó em foco e as setas escolhem o destino, L organiza em camadas e Ctrl+Enter executa. As ações são anunciadas a leitores de tela.
