Fluxogramas

Conhecendo o draw.io

Entre no draw.io. Se você estiver entrando nele pela primeira vez, você será perguntado onde você quer salvar os seus diagramas. Há várias opções, sendo que uma delas é a Device, que salva os diagramas no seu HD.

Perceba também como a ferramenta te dá a opção de escolher o seu idioma: basta clicar no ícone do globo e escolher o seu idioma na lista que aparecer.

Depois disso, você é perguntado se quer criar um novo diagrama ou abrir um diagrama existente:

Essa pergunta também é feita mesmo se esse não for o seu primeiro acesso no site. Opte por criar um novo diagrama. Você pode começar com um diagrama em branco ou com um que tenha alguns elementos já definidos. Escolha o diagrama em branco e clique em Criar.

Já pela interface gráfica do sistema, de cara já dá pra perceber que ele tenta imitar um software de desktop em alguns pontos. Há um menu que é bem semelhante à menus de desktop e uma barra de ferramentas, que também é bem frequente em softwares de desktop e pouco frequente em sistemas web.

O sistema tenta imitar softwares de desktop em outros aspectos também: nos atalhos de teclado. Ele é cheio de atalhos de teclado para várias tarefas e é claro que os mais usados não poderiam faltar: Ctrl + C / Ctrl + V, para copiar e colar; Ctrl + X, para recortar; Ctrl + Z / Ctrl + Shift + Z para desfazer e refazer.

Há algumas opções interessantes no submenu Ajuda. Elas podem te ajudar a entender melhor como usar o draw.io para criar os seus fluxuogramas. Lembrando que ele é uma ferramenta que serve para criar diagramas de diversos tipos, de diversas áreas de conhecimento, não apenas na área de desenvolvimento de software.

Eu destaco também algumas opções do submenu Arquivo: tem opções pra salvar o diagrama que você fez, abrir diagramas que você salvou, imprimir o diagrama e muitas outras opções.

Outro submenu bem interessante é o Ordenar: ele tem opções pra rotacionar elementos, agrupar e desagrupar elementos e também alinhar elementos tanto horizontal quanto verticalmente.

Muitas opções da barra de ferramentas fazem a mesma coisa que algumas opções do menu. Entre os elementos da barra de ferramentas, eu destaco a opção de zoom. Ela tem vários valores pré-definidos e tem uma opção bem interessante, de ajustar à largura da página, que é muito interessante e também está presente em vários softwares de desktop, como o leitor de PDF Adobe Reader.

Veja que, abaixo da barra de ferramentas, há três colunas: a primeira mostra algumas formas e símbolos que podem ser adicionados à coluna do meio, que seria uma espécie de área de trabalho do sistema. Na coluna da direita, podemos configurar algumas coisas, tais como:

• Habilitar ou desabilitar a grelha.
• Habilitar ou desabilitar a guia. A guia é útil para alinhar os elementos do fluxograma.
• Definir o tamanho do papel e a orientação dele (retrato/paisagem).

Primeiros fluxogramas

Agora que você já teve uma pequena introdução ao draw.io, vou mostrar nessa seção como você pode criar seus primeiros fluxogramas nessa ferramenta. Antes de criar um fluxograma, eu vou explicar alguns símbolos e formas básicos:

• Input: paralelogramo inclinado para a esquerda.
• Processamento: retângulo.
• Output: paralelogramo inclinado para a direita.
• Flechas: conectam instruções.
• Início/Fim: elipse.

Vamos ver como adicionar cada um desses símbolos e formas. Primeiramente, vamos começar pelo processamento, que é o mais simples. Para adicioná-lo, basta clicar no primeiro elemento da aba "Geral", que é um retângulo:

Depois do clique, o elemento vai aparecer na Área de Trabalho. Aí, basta arrastar e soltar o elemento para mudar a posição dele. Coloque o elemento na posição que você quiser e adicione o segundo elemento, que é a forma de Output, representada pelo paralelogramo inclinado para a direita:

Note que ao selecionar um elemento, como o paralelogramo que você acabou de criar, aparecem três abas do lado direito: Estilo, Texto e Ordenar. Elas servem para alterar várias propriedades do elemento. Selecione a aba Ordenar. Clique no botão Horizontal, que está dentro da seção Virar. Esse botão faz com que o paralelogramo passe a ficar inclinado para a esquerda, que é como um elemento de input é representado. Veja na imagem abaixo:

A forma de início/fim é representada por uma elipse. A aba Geral até tem uma, mas a elipse que é usada em fluxogramas é bem mais achatada do que essa. Por sorte, o draw.io tem uma aba específica para elementos de fluxogramas. Clique nela e adicione o elemento Terminator:

Esse elemento será usado para criar as formas de início e fim do algoritmo. Você pode ter notado que o draw.io disponibilizou uma elipse mais arredondada para representar o início do algoritmo (elemento Start). Só que, na prática, os fluxogramas costumam usar essa elipse mais achatada para representar o início e o fim do algoritmo, e é o que faremos também.

Falta apenas mostrar como criar as flechas. É bem simples. Ao selecionar um elemento, aparecem flechas azuis nos lados do elemento. Simplesmente clique na flecha mais próxima do elemento que você quer conectar. Veja na imagem abaixo:

Tome cuidado para não deixar os elementos muito distantes um do outro, senão eles não serão conectados e a conexão será feita com um elemento novo. Sempre quando não há um elemento próximo da flecha, é criado um novo elemento igual ao que está selecionado e o elemento selecionado é conectado com o elemento recém-criado.

Tem outros símbolos de fluxogramas, mas eles serão explicados depois. Esses que foram citados são suficientes pra que você crie seu primeiro fluxograma.

No caso dos pseudocódigos do Portugol Studio, é necessário declarar as variáveis do algoritmo que você está representando. Porém, isso é desnecessário nos fluxogramas.

Vamos representar em um fluxograma um algoritmo que lê um número do usuário, eleva ele ao cubo e retorna o número elevado ao cubo para o usuário. Siga os passos abaixo para criar o fluxograma:

• Coloque uma forma de início do algoritmo.
• Coloque uma forma de input em uma variável numero.
• Coloque uma forma de processamento com a variável cubo recebendo o número elevado ao cubo.
• Coloque uma forma de output com o texto "imprime cubo" (forma resumida pra facilitar).
• Coloque uma forma de fim do algoritmo (basta copiar a forma de início)
• Conecte as instruções.

Após terminar o fluxograma, ele deve ficar mais ou menos assim:

Às vezes, alguns elementos que são de pouca importância para o algoritmo são omitidos para simplificar a representação do fluxograma, já que ela ocupa muito espaço com facilidade, por ser uma representação gráfica.

No caso do algoritmo que acabamos de discutir, é normal que seja escrito um texto pedindo para o usuário digitar um número, para que ele saiba que precisamos que ele digite um número e estamos esperando por isso. Porém, isso não tem nenhuma importância para a lógica do algoritmo. É algo que é incluído apenas para que o usuário saiba o que ele precisa fazer. Por isso, não costuma ser incluído em fluxogramas e também não é incluído em alguns pseudocódigos, pelo mesmo motivo.

Esse foi só um exemplo básico de criação de fluxograma. Quando você for criar seus próprios fluxogramas, se você também usar o draw.io, use e abuse da cópia dos elementos, porque ela agiliza bastante a criação dos fluxogramas.

Além de criar fluxogramas no computador, você também pode criá-los desenhando em um caderno. Qual dos métodos é melhor? Depende de você. Se você se sente mais confortável desenhando e acha mais produtivo, então é a melhor opção para você.

A mesma coisa vale para os pseudocódigos. Você pode escrever seus pseudocódigos em um caderno ou no computador. Você pode escolher qualquer um dos dois. O que realmente importa é representar corretamente o seu algoritmo.

Além disso, pseudocódigos e fluxogramas são duas maneiras de representar algoritmos. O que escolher, mais uma vez, depende do que você se sentir mais confortável e do que você achar que transmite com mais clareza o algoritmo que você quer descreve. No entanto, a maioria dos desenvolvedores prefere pseudocódigos porque criá-los é mais rápido do que criar fluxogramas e ocupa bem menos espaço.