# Engenhoca

Quadro infinito em que você liga caixas por fios para montar automações e vê o fluxo rodar com pulsos de luz.

> Engenhoca é um componente exclusivo do THM Componentes para montar fluxos ligando nós por conexões, como nos construtores de automação: você arrasta, dá zoom, conecta portas que validam o tipo do dado, organiza em camadas com um atalho e executa o fluxo com pulsos que percorrem as linhas. Serve para demonstrar agentes de IA e pipelines de dados.

- Categoria: Aplicações e produtividade
- Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo
- Peso no carregamento: Pesado: WebGL ou simulação; um por página, carregado sob demanda
- Tecnologia: Vue 3, TypeScript
- Interação: Mouse, Toque, Teclado
- URL: https://vibecode.thmtecnologia.com/componentes/engenhoca/

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

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

## Componentes relacionados

- [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.
- [Bastidores](https://vibecode.thmtecnologia.com/componentes/bastidores/): Painel que mostra, passo a passo, o que a IA está pensando, quais ferramentas chamou e quanto tempo cada etapa levou.
- [Ipê](https://vibecode.thmtecnologia.com/componentes/ipe/): Ideia central no meio e ramos coloridos em curvas que você cria com Tab e Enter, arrasta e recolhe.
- [Deriva](https://vibecode.thmtecnologia.com/componentes/deriva/): Um mural sem fim de cartões com fotos que você arrasta em qualquer direção e abre em detalhe com um clique.
- [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ó.

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