> For the complete documentation index, see [llms.txt](https://docs.chatlayer.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.chatlayer.ai/chatlayer-documentation-pt-br/navegacao/bot-builder/flows/canvas-functionalities.md).

# Funcionalidades da tela

🎥 Tutorial em vídeo do Canvas

Prefere assistir em vez de ler? Neste tutorial, aprenda a usar as diferentes funcionalidades do canvas construindo um bot de Pizza rápido e fácil 👇

{% embed url="<https://vimeo.com/889422326?share=copy>" %}

Se você prefere ler, vamos passar por cada funcionalidade especial do canvas abaixo 👇

## Layout automático

Se você testar o canvas com um bot existente, os blocos do seu bot aparecerão sobrepostos. A funcionalidade de layout automático existe para resolver isso.

Para usar o layout automático:

1. Na sua tela, clique em **Layout automático** botão no canto inferior direito da sua tela.

<figure><img src="/files/c6293771546da9465cf489ca3691e754b0386e65" alt="" width="276"><figcaption><p>Botão de layout automático.</p></figcaption></figure>

2. Seus blocos agora estão distribuídos pelo canvas de forma não sobreposta. Fique à vontade para arrastar e soltar cada bloco onde você preferir!

{% hint style="danger" %}
Observe que, depois que você organizar seu fluxo usando o layout automático, não é possível voltar ao aspecto anterior do seu fluxo.
{% endhint %}

## Arraste e solte

Para adicionar novos blocos ao seu bot com o canvas, basta arrastá-los e soltá-los diretamente do canto superior direito para qualquer lugar que você quiser no canvas.

<figure><img src="/files/1ff0912d27a52367b46d9db8057f4685d5d38702" alt=""><figcaption><p>Arraste e solte um bloco no seu canvas.</p></figcaption></figure>

## 🆕 Duplicar blocos

Para duplicar um bloco:

1. Selecione um bloco clicando nele.
2. Clique no **Duplicar** ícone acima dele.

<figure><img src="/files/d2b2dfe5604376e4bfe1c51ee5a964a4522be8ee" alt="" width="375"><figcaption><p>Duplique um bloco.</p></figcaption></figure>

3. Uma cópia deste bloco aparece no seu canvas!

## Conexões

Há 2 tipos de conexões de seta no canvas: conexões Go-to e conexões pai-filho.

### Conexões Go-to

As setas contínuas representam as [Conexões Go-to](https://docs.chatlayer.ai/bot-answers/dialog-state/plugins#go-tos-within-dialog-types), ou seja, uma conexão real de fluxo. Isso significa que o bloco apontado pela seta acontece logo após o primeiro, guiando a conversa de um componente para outro.

<figure><img src="/files/b84c714b1ac6a471a22d0a63c0c4e438648d42e4" alt=""><figcaption><p>Ponto Go-to de onde você pode desenhar conexões</p></figcaption></figure>

Para vincular 2 componentes com um Go-to:

1. Clique e segure o **Go-to** ponto no canto inferior direito de um nó.
2. Conecte-o a qualquer outro bloco existente desenhando uma seta, ou você pode simplesmente criar um novo se ainda não tiver um bloco disponível.

<figure><img src="/files/3c074739c6c5b4ce5d24c76c1daa9a6fd4eac2f6" alt=""><figcaption><p>A partir dos pontos Go-to, desenhe conexões entre componentes.</p></figcaption></figure>

### Conexões pai-filho

As setas tracejadas são [Conexões pai-filho](https://docs.chatlayer.ai/bot-answers/dialog-state#parent-bot-dialog), projetadas como um auxílio visual para ajudar você a organizar seus fluxos. Embora não criem links funcionais entre componentes, elas oferecem uma ferramenta para estruturar visualmente seu bloco de maneira coerente.

Para adicionar uma conexão pai-filho:

1. Abra o seu [bloco](/chatlayer-documentation-pt-br/buildabot/flow-logic/dialog-state.md).
2. Vá para o seu **Configurações**.
3. Em **Pai**, defina um bloco pai.
4. Clique em **Salvar**.

{% hint style="info" %}
Por exemplo, conexões pai-filho são especialmente úteis quando você está usando [contexto](/chatlayer-documentation-pt-br/nlp/natural-language-processing-nlp/using-context.md).
{% endhint %}

<figure><img src="/files/3afc8eed61a8b7dc1e3f332f27e42258ba91a54c" alt=""><figcaption><p>A conexão pai-filho melhora a visualização.</p></figcaption></figure>

### Configurações de conexão

#### **Excluir setas**

Tanto as setas Go-to quanto as pai-filho podem ser excluídas ao passar o mouse sobre elas e clicar no ícone da lixeira.

<figure><img src="/files/250d165cff08327d067d3e764e6b6bb02498e120" alt=""><figcaption><p>Clique no ícone da lixeira de uma seta para excluir uma conexão de fluxo</p></figcaption></figure>

#### Posição e cor das setas

Você tem a flexibilidade de mover as setas para frente e para trás conforme sua conveniência, para obter o posicionamento perfeito. Além disso, você pode modificar as cores delas para atender às suas preferências.

<figure><img src="/files/05020c208060ceb73f8f5029af4f5129f7955c30" alt=""><figcaption><p>Altere a cor e o posicionamento da seta.</p></figcaption></figure>

Se algum dia você quiser reverter para o design anterior das setas, uma simples opção de redefinição permite restaurar instantaneamente as setas originais.

<figure><img src="/files/4869e261636121340ba90cd0929544116e490bdf" alt=""><figcaption><p>Redefina a seta para seu estado anterior.</p></figcaption></figure>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.chatlayer.ai/chatlayer-documentation-pt-br/navegacao/bot-builder/flows/canvas-functionalities.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
