> 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 preferir ler, vamos passar por cada funcionalidade especial do canvas abaixo 👇

## Auto layout

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

Para usar o Auto layout:

1. Do seu canvas, clique no **Auto layout** botão no canto inferior direito da sua tela.

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

2. Seus blocos agora estão distribuídos pelo canvas sem sobreposição. Sinta-se à vontade para arrastar e soltar cada bloco onde achar melhor!

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

## Arraste e solte&#x20;

Para adicionar novos blocos ao seu bot pelo canvas, simplesmente arraste e solte-os diretamente do canto superior direito para qualquer lugar do 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 em **Duplicar** ícone acima dele.

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

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

## Conexões&#x20;

Existem 2 tipos de conexões por setas no canvas: Go-to e conexões Pai.

### Conexões Go-to

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

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

Para ligar 2 componentes com um Go-to:

1. Clique e segure o **Conexões Ir para** 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 os componentes.</p></figcaption></figure>

### Conexões pai-filho

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

Para adicionar uma conexão pai-filho:

1. Abra seu [bloco](/chatlayer-documentation-pt-br/buildabot/flow-logic/dialog-state.md).
2. Vá para seu **Configurações**.
3. Em **Pai**, defina um bloco pai.&#x20;
4. Clique **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/1c3e3b4ca817a65a8f4c05c85c61c6232a8b4fec" 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 passando o cursor sobre elas e clicando no ícone de lixeira.&#x20;

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

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

Você tem flexibilidade para mover as setas para frente e para trás conforme necessário para alcançar o posicionamento perfeito. Além disso, é possível modificar suas cores para adequá-las às suas preferências.&#x20;

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

Se você quiser reverter para o design anterior da seta, uma opção simples de redefinir permite restaurar as setas originais instantaneamente.

<figure><img src="/files/39322e17cc6d3983b40c2278968e5d6a1ef66877" alt=""><figcaption><p>Redefinir 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.
