---
title: A tela do Flow Builder
description: Canvas, painel de nós, painel de configuração e barra superior — as partes da tela onde você monta e organiza um fluxo.
---

# A tela do Flow Builder

O Flow Builder é o coração do Atende Direito. É aqui que você desenha o caminho que cada conversa vai seguir — como montar um quebra-cabeça de peças que se encaixam.

<Captura legenda="Visão geral do canvas do Flow Builder, com a barra lateral de blocos à esquerda, o mini-mapa no canto inferior direito e a barra superior com os botões Testar e Publicar" src="/img/flowbuilder-canvas.png" />

## As partes da tela

### Canvas (área de trabalho)

A área central cinza escura é onde você arrasta, conecta e organiza os blocos do seu fluxo. Pense nela como uma mesa de trabalho infinita: você pode arrastar para qualquer direção e dar zoom para ver mais ou menos detalhe.

- **Arrastar o canvas** — clique em qualquer área vazia e arraste.
- **Zoom** — use a roda do mouse ou os botões `+` / `–` no canto inferior direito.
- **Mini-mapa** — quadradinho no canto inferior direito mostra uma visão aérea do fluxo inteiro. Clique nele para navegar rapidamente.

<Captura legenda="O mini-mapa no canto inferior direito do canvas, mostrando uma visão reduzida de todo o fluxo" src="/img/flowbuilder-canvas.png" />

### Painel de nós (barra lateral esquerda)

Aqui ficam todos os blocos disponíveis, organizados por categoria:

| Categoria | O que tem |
|-----------|-----------|
| Gatilhos | Start, Webhook, Agenda |
| Mensagem | Enviar Mensagem, Esperar Texto, Esperar Botão |
| Lógica | Se/Senão (condição), Repetir para cada item, Repetir (laço), Subfluxo, Fim, Nota... |
| Dados | Variáveis, HTTP, Transformar texto (template), Entender Mídia... |
| IA | LLM, Agent, Classificador, Conhecimento... |
| Ações | Ações na Plataforma, Ferramenta MCP |
| Jornada do lead | Agendar Follow-up |

Para adicionar um bloco ao canvas, **arraste-o** da barra lateral para qualquer área vazia.

<Captura legenda="Painel de busca de blocos aberto no canvas, com as categorias e a lista de nós disponíveis para arrastar" src="/img/flowbuilder-paleta-aberta.png" />

### Painel de configuração (barra lateral direita)

Quando você clica em um bloco no canvas, as opções dele aparecem aqui. Cada nó tem campos diferentes — você vai conhecê-los nas páginas específicas de cada um.

<Captura legenda="Painel de configuração de um nó aberto na lateral direita, com as abas Configurar, Última Execução e Variáveis" src="/img/flowbuilder-inspector-no-agent.png" />

#### Renomear um nó

No topo do painel de configuração, o título do nó é editável: clique nele (ou no ícone de lápis) para entrar em modo de edição, digite o novo nome e confirme com **Enter** (ou clicando fora). **Esc** cancela a edição sem salvar.

O nome vira o **identificador (id)** do nó — e é por esse id que as outras partes do fluxo passam a se referir a ele, inclusive nas variáveis de saída (veja [Variáveis](/guia/flow-builder/dados/variaveis)). Todas as referências existentes no fluxo (templates, condições, ponteiros de conexão) são reescritas automaticamente — renomear não quebra nada que já apontava para o nó.

<Cuidado>

O nó **Start** não pode ser renomeado — ele mantém sempre o mesmo id.

</Cuidado>

### Barra superior

| Elemento | O que faz |
|----------|-----------|
| Nome do fluxo | Clique para renomear |
| Botão Salvar | Salva o rascunho atual |
| Botão Publicar | Ativa o fluxo para receber mensagens reais |
| Botão Testar | Abre o simulador de execução |
| Toggle Ativo/Inativo | Liga ou desliga o fluxo — enquanto desativado, ele não executa |

<Dica>
Salve com frequência durante a edição. O atalho **Ctrl + S** (ou **Cmd + S** no Mac) funciona diretamente no canvas.
</Dica>

<Dica>
O mesmo toggle Ativo/Inativo também aparece no card de cada fluxo na tela de listagem — não precisa abrir o editor para ligar ou desligar.
</Dica>

## Conexões entre blocos

Para conectar dois blocos, passe o mouse pela borda do bloco de origem até aparecer um ponto azul. Arraste esse ponto até o bloco de destino.

- Cada conexão representa o **caminho que a execução vai seguir**.
- Blocos de lógica (como Se/Senão (condição)) têm saídas múltiplas — uma para cada condição.
- Você pode **deletar uma conexão** clicando nela e pressionando `Delete`.

<Captura legenda="Blocos conectados no canvas, com as setas de ligação indicando o caminho de execução do fluxo" src="/img/flow-exemplo-inicio.png" />

## Seleção e organização

- **Selecionar vários blocos** — clique e arraste uma área de seleção, ou segure `Shift` e clique em cada bloco.
- **Mover em grupo** — após selecionar, arraste qualquer um dos blocos selecionados.
- **Deletar** — selecione e pressione `Delete` ou `Backspace`.
- **Copiar / Colar** — `Ctrl+C` / `Ctrl+V` (os blocos são colados com um pequeno deslocamento).

<Cuidado>
Deletar um bloco remove também todas as conexões ligadas a ele. Se o bloco fazia parte de um caminho importante, reconstrua as conexões depois.
</Cuidado>

## Próximos passos

Agora que você conhece a tela, escolha um tipo de bloco para aprender em detalhe:

- [Gatilhos](/guia/flow-builder/gatilhos/start) — como o fluxo começa
- [Mensagem](/guia/flow-builder/mensagem/enviar-mensagem) — como você fala com o contato
- [Lógica](/guia/flow-builder/logica/if-else) — como você toma decisões no fluxo