Diagramas para analistas desenvolvedores web

engineer 4941330 19201
Tempo de leitura: 4 minuto(s)

A profissão de analista desenvolvedor requer do profissional uma série de técnicas e habilidades, dentre elas a interpretação de diagramas de software e pelo menos uma compreensão em alto nível sobre comunicação dos componentes. Tais diagramas seguem padrões de formatação global, como a UML, mas é plausível utilizar adaptações com propósito de facilitar o entendimento. Tentei exemplificar alguns dos diagramas mais recorrentes nas rotinas de desenvolvimento (com foco na web) junto a informações úteis:


Fluxo de processo

Diagrama de Fluxo de processo
Figura 1 – Fluxo de um processo de matrícula de aluno
Temos que, de forma paralela, múltiplos agentes, com múltiplas atividades, estão envolvidos no processo de matrícula de um aluno. Cada agente é visualizado em sua própria báia, de forma que suas respectivas atividades e decisões sejam identificadas, assim como o tipo de atividade até que se alcance o final do fluxo.

Casos de uso

Casos de uso de um sistema de cobranças
Figura 2 – Casos de uso de um sistema de cobranças – Fonte: MSDN

Diagramas de casos de uso são diagramas de fácil criação e entendimento. Agentes são representados por “bonecos” e as atividades representados por balões. DCUs representam as interações possíveis entre pessoas e o sistema em questão.

Diagramas de sequência (DSS) ou diagrama de interação (UML)

Diagramas de sequência (DSS) ou diagrama de interação (UML)
Fonte: MSDN
A partir do DSS, é possível compreender a pilha de chamadas internas de funções do sistema. Quais os nomes das funções, a assinatura (parâmetros de entrada), chamadas dessa função e o retorno. É um diagrama que permite identificar chamadas extras que podem ser eliminadas, resultando na criação de funções menores, mais fáceis de modificar e reutilizar.

Diagramas Entidade-Relacionamento (E.R.)

Diagrama E.R.

Diagramas Modelo-Entidade-Relacionamento (M.E.R)

Diagrama M.E.R.

O processo de desenvolvimento inclui refatoração constante das estruturas de dados. A preocupação nos MER é entender quais relações entre objetos do sistema existem, e se essas são de um para muitos ou muitos para muitos.

Extra: as chamadas “Migrations” são classes em arquivo que podem ser executadas para recriar toda a estrutura do banco de dados e inclusive preencher com dados de teste.

Diagramas de Arquitetura Web (MVC)

Diagramas de arquitetura web
Autor: Fernando Montoan

Diagramas MVC são úteis em momentos onde profissionais trabalhando em aplicações inovadoras precisam encontrar o modelo ideal para a arquitetura da aplicação. Nem sempre o MVC é útil, por exemplo, quando se deseja criar apenas um serviço de API, que não utiliza a camada View. Também não são úteis Modelo e Controlador, no caso da criação de uma aplicação SPA que apenas consome dados de serviços externos.

Diagramas de implementação de software

Diagramas de implementação de software
Fonte: Lucidchart

Diagramas de Infraestrutura de Rede

Diagramas de Infraestrutura de Rede

Fonte: Guia do Hardware

Diagrama útil para explicar a novos integrantes de equipe, por exemplo, como está arquitetados serviços cloud e quais são e como se relacionam as APIs.

Diagrama de estados de transição

Diagrama de estados de transição

A finalidade do diagrama de estados de transição é mapear os eventos. Isso contribui na elaboração do projetos por facilitar a identificação de objetos e suas interações.


Estes são os principais diagramas encontrados na rotina do desenvolvimento web. Diagramas tornam um projeto mais claro para uma equipe, facilitam mudanças e a divisão de tarefas. Há uma diversidade de ferramentas pagas e gratuitas para criar diagramas e tornar seus projetos mais profissionais.

Diagrama útil especialmente em casos com muitas condicionais (if-elses) onde se torna muito complexo testar “de cabeça” os possíveis comportamentos em uma operação.

Recomendo o yEd Graph Editor para criação de todos esses diagramas.

Quer saber mais sobre como funciona? Fale com um desenvolvedor agora mesmo!
Este artigo foi lido 9983+ vezes. Obrigado por ler até aqui! Fique à vontade pra copiar e compartilhar. Ajude sempre seus colegas. O conhecimento muda vidas!

O conteudo foi útil? Isso é fantástico. Quer incentivar mais posts como esse? Mostre seu apoio com qualquer valor.
Chave PIX: d0311e58-cb6e-4d47-b3d8-3d4254763ce7

Inscrever-se
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments