> For the complete documentation index, see [llms.txt](https://kb.stoque.com.br/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://kb.stoque.com.br/zeev/como-construir-processos/como-desenhar-processos/desenhador-de-processos.md).

# Desenhador de processos

## Visão geral

Ao criar um aplicativo de processo, você será direcionado para o desenhador de processos, compatível com elementos do padrão [BPMN 2.0](/zeev/como-construir-processos/como-desenhar-processos/o-padrao-bpmn.md). Será carregado um desenho modelo para te guiar nos primeiros passos:

<figure><img src="/files/8XDMGzbDSe5yvswy0BjP" alt=""><figcaption></figcaption></figure>

## Componentes

O desenhador é composto por 3 partes:

* A barra de elementos que contém os elementos da especificação BPMN;
* A área de desenho onde é possível incluir os elementos, conectá-los e criar o desenho;
* Uma barra de ferramentas que te permite manipular a visualização do processo.

<figure><img src="/files/dqVcv6amO8d7OAICxb0X" alt=""><figcaption></figcaption></figure>

O rol de elementos que você tem disponível na barra pode variar conforme a versão do produto.

A área de desenho não possui um tamanho fixo pré-definido. Ela pode crescer indefinidamente para cima, para baixo, para a esquerda ou para a direita.&#x20;

## Como adicionar um elemento

Para adicionar um elemento, clique no elemento desejado na barra lateral de elementos e, após, clique na posição do desenho onde deseja criar o elemento.&#x20;

A única exceção é o elemento do tipo [raia](/zeev/como-construir-processos/como-desenhar-processos/como-usar-swinlanes/raias.md#como-criar-raias), que é [criado a partir de uma piscina](/zeev/como-construir-processos/como-desenhar-processos/como-usar-swinlanes/raias.md#como-criar-raias).

<figure><img src="/files/9xTyRVpLdhi0l7j78DHW" alt=""><figcaption></figcaption></figure>

## Como renomear elemento

Para renomear um elemento, clique duas vezes sobre o elemento, digite o novo nome e aperte ENTER.&#x20;

<div align="left"><figure><img src="/files/YsLKMDhNUQGBpshhb6hK" alt="" width="234"><figcaption></figcaption></figure></div>

No caso de [raias ](/zeev/como-construir-processos/como-desenhar-processos/como-usar-swinlanes/raias.md)e [piscinas](/zeev/como-construir-processos/como-desenhar-processos/como-usar-swinlanes/piscinas.md), clique duas vezes sobre a área interna próxima a borda esquerda da raia ou piscina, onde o título do elemento é mostrado.

## Como selecionar elemento

Para selecionar um elemento, simplesmente clique nele. Um borda pontilhada mostrará que o elemento está selecionado.&#x20;

No caso de [raias ](/zeev/como-construir-processos/como-desenhar-processos/como-usar-swinlanes/raias.md)e [piscinas](/zeev/como-construir-processos/como-desenhar-processos/como-usar-swinlanes/piscinas.md), clique sobre uma das bordas do elemento.

<div align="left"><figure><img src="/files/MDIJMyUZbbyqeHHGzySZ" alt="" width="294"><figcaption></figcaption></figure></div>

## Como selecionar diversos elementos

Para selecionar diversos elementos de uma vez, aperte e segure a tecla SHIFT e arraste  o mouse, criando uma área de seleção que englobe todos os elementos desejados.

<div align="left"><figure><img src="/files/Bx3nAdCSGPdEBK6zREYV" alt="" width="563"><figcaption></figcaption></figure></div>

## Como mover um elemento

Para mover um elemento, [selecione ](#selecionar-elemento)o elemento e arraste-o pelo desenho.

## Como mover diversos elementos

Para mover diversos elementos de uma só vez, [selecione os diversos elementos desejados](#selecionar-diversos-elementos), clique sobre um deles e arraste o bloco de elementos para a posição desejada.

## Como configurar elemento

Para configurar um elemento, [selecione o elemento](#selecionar-elemento) e, nos ícones de opções, clique no ícone de configuração. A barra de configurações aparecerá do lado direito da tela.

<figure><img src="/files/Nu5McuCOOhaKFhgKkKy5" alt="" width="563"><figcaption></figcaption></figure>

## Como conectar elementos

Para conectar dois elementos, [selecione o elemento](#selecionar-elemento) de origem e, nos ícones de opções avançadas, clique no ícone de criar link. Após, clique no elemento de destino.

![](/files/BWxueH7yKCEeeG2wcsre)

É possível criar apenas uma conexão de sequência entre os dois mesmos elementos. Veja o desenho abaixo:

![Apenas uma conexão de sequência pode ser criada do elemento de origem ao elemento de destino.](/files/V6LxoZr1oakKUnZ4E19p)

## Como dar ou editar título à conexão

Para dar um título ou editar um título existente a uma linha de conexão entre dois elementos, clique duas vezes na linha de conexão, preencha o título e tecle ENTER.

<div align="left"><figure><img src="/files/IEuOrrJ2Eve7Hd6qGAwx" alt="" width="406"><figcaption></figcaption></figure></div>

## Como excluir conexão

Para excluir uma conexão, selecione-a clicando sobre ela e clique no ícone de exclusão ou aperte DEL no teclado.

<div align="left"><figure><img src="/files/KiAHQVaYoQglXkdUd7lE" alt="" width="452"><figcaption></figcaption></figure></div>

## Como modificar formato da conexão

Para modificar o formato da linha conexão, clique sobre um ponto da linha e arraste o mouse para a posição desejada. A linha de conexão tomará nova forma.&#x20;

<figure><img src="/files/9yV1tDGcQPFPYuQU2yvX" alt=""><figcaption></figcaption></figure>

## Como copiar elemento

Para copiar um elemento, [selecione o elemento](#selecionar-elemento), aperte CTRL + C e, após, CTRL + V. Por fim, clique na posição do desenho onde deseja criar o elemento copiado.

## Como comentar elemento

Para adicionar um comentário a um elemento, selecione o elemento e, nos ícones de opções avançadas, clique no ícone de comentários. Adicione seu comentário e aperte ENTER.

<div align="left"><figure><img src="/files/6lbxlucqqzYX7wVCWExU" alt="" width="346"><figcaption></figcaption></figure></div>

## Como excluir um elemento

Para excluir um elemento, [selecione o elemento](#selecionar-elemento) e, nos ícones de opções avançadas, clique no ícone de exclusão.&#x20;

<div align="left"><figure><img src="/files/VCA4T2SMh8ajsyG9CU2L" alt="" width="260"><figcaption></figcaption></figure></div>

Opcionalmente, [selecione o elemento](#selecionar-elemento) e aperte a tecla DEL.

## Como pesquisar elemento

Para pesquisar elementos do processo, tecle CTRL + F e digite o nome do seu elemento. Selecione o elemento dentro das opções que serão mostradas. A tela será movimentada para a área do elemento e o elemento [será selecionado](#selecionar-elemento).

Também é possível clicar em "Pesquisar" na barra de ferramentas disponível.

<figure><img src="/files/eA1EDCa3E2VqzcaBYpMP" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/Hw2Dy3qXZifaB6pAlNoK" alt=""><figcaption></figcaption></figure>

## Como navegar pelo processo

Para navegar pelo desenho, clique sobre uma área em branco do desenho e arraste o mouse para a direita, esquerda, para cima ou para baixo.

Você também pode usar a barra de ferramentas à direita com suas opções.

<div align="left"><figure><img src="/files/OObIuDElXFul3fDAN4cO" alt="" width="252"><figcaption></figcaption></figure></div>

## Como fazer zoom

Para dar zoom in no processo (aumentar o zoom), tecle CTRL e o sinal de **+** ("mais"), diversas vezes. Opcionalmente, segure a tecla CTRL e realize o scroll do mouse para cima.&#x20;

Para dar zoom out no processo (diminuir o zoom), tecle CTRL e o sinal de **-** ("menos"), diversas vezes. Opcionalmente, segure a tecla CTRL e realize o scroll do mouse para baixo.&#x20;

Para retornar ao zoom padrão 100%, tecle CTRL + 0.

## Como criar ou remover espaços

Essa é uma poderosa ferramenta para facilitar a manutenção de grandes desenhos de processos. Com ela você pode mover diversos elementos de uma só vez para a esquerda, direita, para cima, ou para baixo.&#x20;

* Primeiramente, selecione o elemento na barra de elementos.&#x20;
* O cursor do mouse será modificado, e duas linhas pontilhadas, uma horizontal e outra vertical, aparecerão junto ao mouse.&#x20;
* Clique e segure o botão do mouse na posição que você quer criar ou remover espaços;
* Arraste ou mouse para cima, para baixo, para a esquerda ou para a direita.  Os elementos da tela irão se mover junto com reduzindo o espaço entre eles ou criando espaço entre eles.

![](/files/iadLosKpD9MzlbiDqXV3)

## Resumo de teclas de atalho

O novo modelador tem muitas teclas de atalho para facilitar sua navegação. Veja algumas:

* CTRL + F: Pesquisar um elemento;
* CTRL + C: Copiar;
* CTRL + V: Colar;
* CTRL + Z: Desfazer;
* CTRL + Y: Refazer;
* CTRL + Scroll do mouse para cima: Aumentar o zoom;&#x20;
* CTRL + Scroll do mouse para baixo: Diminuir o zoom;&#x20;
* CTRL + 0: Zerar o zoom;
* Delete (com elemento selecionado): Excluir elemento ou objeto do desenho;
* SHIFT + Arrastar mouse: Selecionar elementos da área;

## Demonstração prática

Confira no vídeo a seguir a demonstração de como utilizar o desenhador de processos.![](/files/5jiNyZdmaCiL0I3BmJ5X)

{% embed url="<https://youtu.be/9pmBHoBgmSw>" %}