O Canvas Editor

O Canvas é onde a mágica acontece na Armox. É um editor visual baseado em nodes, onde você conecta componentes para criar workflows poderosos de geração de conteúdo.

O que é o Canvas?

O Canvas editor com um workflow completo: vários nodes conectados para criar um pipeline de geração de conteúdo.

O Canvas é o editor visual de workflow da Armox. Em vez de escrever código ou usar interfaces complexas, você:

• 🎨 Arrasta e solta nodes em um canvas visual
• 🔗 Conecta nodes com linhas simples
• ▶️ Executa workflows com um clique
• 👀 Vê resultados diretamente no canvas

Pense nele como um fluxograma que realmente executa — cada caixa faz algo, e as linhas mostram como os dados fluem entre eles.

Visão geral da interface do Canvas

Quando você abre um Canvas, você verá:

Navegação

Zoom

• Scroll wheel — Zoom in/out
• Pinch gesture — No trackpad
• Zoom controls — Na toolbar

Pan (arrastar)

• Clique e arraste — Em área vazia do canvas
• Botão do meio do mouse — Clique e arraste
• Spacebar + arraste — Método alternativo

Minimap

O minimap no canto inferior direito mostra o canvas inteiro:

• Clique no minimap para pular para aquela área
• Arraste o retângulo de viewport para navegar
• Ative/desative o minimap nas configurações

Criando um novo Canvas

1. Clique em Canvas na sidebar
2. Clique em + New Canvas
3. Digite um nome para o canvas
4. Comece a adicionar nodes!

Um canvas novo e vazio pronto para seu workflow.

Seu canvas salva automaticamente enquanto você trabalha.

Adicionando nodes

Pela sidebar

1. Abra a left sidebar (clique no ícone de menu se estiver oculta)
2. Navegue pelas categorias:
   • Text — Prompts e geração de texto
   • Image — Geração de imagem por IA
   • Video — Geração de vídeo por IA
   • Audio — Música e fala
   • Upload — Seus próprios arquivos
   • Tools — Processamento e melhoria
3. Arraste um node para o canvas, ou clique para adicionar

O painel Add Node mostrando todos os tipos disponíveis organizados por categoria.

Quick Add

• Clique com o botão direito no canvas para abrir o menu de contexto
• Selecione um tipo de node para adicioná-lo naquela posição

Selecionando nodes

Seleção única

• Clique em um node para selecionar
• Nodes selecionados mostram uma borda de destaque
• O painel direito mostra configurações do node

Seleção múltipla

• Shift + clique — Adiciona à seleção
• Arraste uma caixa — Seleciona múltiplos nodes de uma vez
• Ctrl/Cmd + A — Seleciona todos os nodes

Movendo nodes

• Arraste nodes selecionados para reposicionar
• Setas — Ajuste fino (nudge) dos nodes selecionados
• Vários nodes selecionados se movem juntos

Conectando nodes

Criando conexões

1. Encontre o output handle (pequeno círculo no lado direito de um node)
2. Clique e arraste a partir do output handle
3. Arraste até um input handle (lado esquerdo de outro node)
4. Solte para criar a conexão

Cores de conexão

Conexões são codificadas por cor por tipo de dado:

Excluindo conexões

• Clique na linha de conexão para selecionar
• Pressione Delete ou Backspace
• Ou clique com o botão direito e selecione “Delete”

Configurações do node

Quando você seleciona um node, o painel direito mostra as configurações:

Configurações comuns

Seções recolhíveis

As configurações são organizadas em seções recolhíveis:

• Basic — Configurações essenciais
• Advanced — Ajustes finos
• Output — Preview e download

Executando workflows

Executar um único node

1. Selecione o node que quer executar
2. Clique no botão ▶ Play no node
3. Observe o indicador de progresso
4. Veja o resultado no preview do node

Executar o workflow inteiro

1. Clique em Run All na toolbar
2. Nodes executam em ordem baseada nas conexões
3. Cada node mostra o progresso
4. Resultados aparecem conforme cada node termina

Ordem de execução

Nodes rodam em ordem de dependência:

1. Nodes sem inputs rodam primeiro
2. Depois, nodes que dependem desses outputs
3. Continua até concluir todos os nodes

Visualizando resultados

Preview no node

Conteúdo gerado aparece diretamente no node:

• Images — Preview em thumbnail
• Videos — Player de vídeo
• Audio — Player de áudio
• Text — Exibição de texto

Preview completo

• Clique no preview para ver maior
• Botão de Download para salvar no seu computador
• Conteúdo também é salvo na sua Gallery

Salvando e organizando

Auto-save

Canvases salvam automaticamente. Você verá um indicador de “Saved” na toolbar.

Salvar manualmente

• Pressione Ctrl/Cmd + S para forçar o save
• Ou clique em Save na toolbar

Renomear

1. Clique no nome do canvas na toolbar
2. Digite um novo nome
3. Pressione Enter

Organizando canvases

• Use nomes descritivos
• Use convenções (ex.: “Client - Project - Version”)
• Exclua canvases antigos que você não precisa mais

Atalhos de teclado

Boas práticas no Canvas

Dicas de layout

• Fluxo da esquerda para a direita — Inputs à esquerda, outputs à direita
• Deixe espaço — Não deixe nodes colados
• Agrupe nodes relacionados — Funções semelhantes próximas
• Use o minimap — Para navegar em workflows grandes

Dicas de workflow

• Comece simples — Comece com 2–3 nodes, depois expanda
• Teste incrementalmente — Rode um node por vez para verificar
• Salve com frequência — Mesmo com auto-save, saves manuais ajudam
• Nomeie com clareza — Use nomes descritivos para canvases

Dicas de performance

• Não sobrecarregue — Canvases muito grandes podem ficar lentos
• Execute seletivamente — Rode apenas os nodes que você precisa
• Limpe — Exclua nodes e conexões não usados

Troubleshooting

O Canvas não carrega

• Recarregue a página
• Verifique sua conexão com a internet
• Tente outro navegador

Nodes não conectam

• Verifique compatibilidade de tipos (cores combinam, ou text para quase tudo)
• Garanta que está arrastando de output para input
• Tente excluir e recriar a conexão

Resultados não aparecem

• Verifique se o node terminou de rodar (sem spinner)
• Procure mensagens de erro no node
• Verifique seu saldo de créditos

Próximos passos

Agora que você conhece o Canvas, aprofunde em:

• Connecting Nodes — Crie workflows complexos
• Running Workflows — Execute e gerencie suas criações
• Creating Apps — Transforme workflows em Apps reutilizáveis