>diagramas na computação▌

01

Por que diagramar

Um diagrama é uma representação gráfica de uma ideia, com regras de leitura combinadas. Em computação ele cumpre três funções: comunicar (duas pessoas entendem a mesma coisa), verificar (um erro de lógica fica visível antes de o código existir) e documentar (o conhecimento sobrevive a quem o criou).

Cada notação responde a uma pergunta diferente. Escolher o diagrama é escolher a pergunta: “qual é a sequência de passos?”, “quem faz o quê?”, “em que estados o objeto pode estar?”, “quem conversa com quem, e em que ordem?”.

02

Famílias de diagramas

Este material aprofunda o fluxograma, que é a base, e compara com o diagrama de atividades e o BPMN, que o herdam e ampliam.

03

ISO 5807: símbolos e convenções

A ISO 5807:1985 tem o título Information processing — Documentation symbols and conventions for data, program and system flowcharts, program network charts and system resources charts. Ela define símbolos e convenções de uso para fluxogramas de dados, de programas e de sistemas, além de gráficos de rede de programas e de recursos de sistemas. Segundo a página da ISO, foi publicada em 14/02/1985 e confirmada em 2019.

Na prática, o conjunto mais usado é este:

04

Paralelos entre as notações

As três notações descrevem fluxos, mas aumentam o poder expressivo. A tabela mostra como cada conceito do fluxograma reaparece nas outras.

Dois pontos importantes. Primeiro, o fluxograma trata de lógica sequencial de uma única linha de execução, e por isso não tem paralelismo nem responsáveis. Segundo, o BPMN acrescenta o que falta para processos de negócio: quem faz, o que dispara cada passo e a comunicação entre participantes. Uma comparação formal das duas notações mais novas está em A Comparison of BPMN and UML 2.0 Activity Diagrams (SBQS).

O quadro de equivalências vem de conhecimento geral sobre as especificações. Leia como material didático, não como citação normativa.

05

Boas práticas de construção

• Uma entrada, um ou mais fins. Todo caminho precisa chegar a um terminador.
• Toda decisão tem todas as saídas rotuladas. Um losango com uma saída só é um erro de lógica.
• Texto curto, no infinitivo. “Validar senha”, não “a senha é validada pelo sistema”.
• Um nível de detalhe por diagrama. Se um bloco ficou grande, vire um processo predefinido e detalhe em outro diagrama.
• Evite cruzar linhas. Use conectores e leia de cima para baixo.
• Faça o teste de mesa. Percorra o diagrama com valores reais, incluindo um caso de borda e um caso de erro.
• Legibilidade antes de estética. Contraste, alinhamento e espaçamento regular.

06

Exemplos

Fluxograma: login com limite de tentativas

Diagrama de estados: pedido de uma loja

07

Diagramas como código

Em vez de desenhar caixa por caixa, o diagrama é escrito em texto e renderizado. Para quem trabalha com software, a vantagem é que o texto entra no Git: tem histórico, revisão por pull request e diferença linha a linha.

Mapeamento de símbolos no Mermaid

Ferramentas gratuitas

• Mermaid: texto para diagrama, com editor online em mermaid.js.org. Guia de sintaxe de fluxogramas na Miro.
• diagrams.net (draw.io): editor visual no navegador, que também importa código Mermaid.
• Papel e quadro: continuam sendo a melhor ferramenta para pensar. Passe para a ferramenta digital depois que a lógica estiver correta.

08

Atividade sugerida: diagramar e testar

1. Escolha um procedimento do cotidiano ou de sistemas, como cadastro com validação de CPF, caixa eletrônico ou carrinho de compras.
2. Desenhe o fluxograma no papel e depois refaça em draw.io ou Mermaid.
3. Faça o teste de mesa com um caso normal, um caso de borda e um caso de erro.
4. Troque com outra pessoa, que procura caminhos sem saída e decisões incompletas.

Sem computador, a versão em papel com foto na entrega cumpre o mesmo objetivo.