O editor visual de flows permite criar fluxos de conversa arrastando e conectando nós em um canvas interativo baseado em ReactFlow.
Visão geral do canvas
O canvas é a área principal do editor onde você constrói o fluxo:
- Zoom e pan — use scroll para zoom e arraste para mover o canvas
- Minimap — visualize o fluxo completo em miniatura
- Grid — nós são alinhados automaticamente ao grid
- Seleção múltipla — segure Shift e arraste para selecionar vários nós
Adicionando nós
Para adicionar um nó ao fluxo:
- Clique no botão + no painel lateral ou entre nós existentes
- Selecione o tipo de nó desejado no menu
- Configure as propriedades do nó no painel de configuração
Os nós são organizados em categorias: Gatilho, Envio,Espera, Lógica, Atualização e Controle.
Conexões entre nós
As conexões (edges) definem a ordem de execução do fluxo:
- Arraste do handle de saída de um nó até o handle de entrada de outro
- Nós de condição têm duas saídas: Sim e Não
- Para remover uma conexão, clique nela e pressione Delete
Cada nó pode receber múltiplas conexões de entrada, mas o comportamento depende do tipo. Nós de envio processam sequencialmente; nós de condição avaliam na ordem de chegada.
Painel de configuração
Ao clicar em um nó, o painel lateral mostra as configurações específicas:
- Nome do nó — identificador visual no canvas
- Propriedades — configurações específicas do tipo (texto, template, condições, etc.)
- Variáveis — referências a dados dinâmicos
Atalhos do teclado
| Atalho | Ação |
|---|---|
| Delete | Remover nó ou conexão selecionada |
| Ctrl + Z | Desfazer |
| Ctrl + Shift + Z | Refazer |
| Ctrl + S | Salvar flow |