DEV Community

Cover image for Visualize a arquitetura do seu sistema com C4 Model
Alexandre Liberato
Alexandre Liberato

Posted on

Visualize a arquitetura do seu sistema com C4 Model

C4 Model

website: https://c4model.com/
author: Simon Brown

Inspirado em UML e 4+1 Model, foi criado e melhorado ao longo do tempo para ajudar a visualizar a arquitetura de sistemas e aproximar o modelo do sistema com o código.

Principais lemas

  • Foco nas estruturas estáticas (componentes)
  • Abstrações e não notações (mapas)
  • Engenharia e não arte, não use visio use plantuml

Quem usa UML?

alt text

  • Desculpas
    • "Nem todos sabem UML no time"
    • "Vou parecer velho"
    • "Ferramentars ruins"
    • "Muito detalhado"
    • "É uma bela forma de perder tempo"
    • "Agile não precisa documentar"
    • "O valor ta na conversa", daí a conversa é só sobre ficar até mais tarde...
    • "O valor tá no código", daí vc olha o código e...

Com a chegada das metodologias ágeis as pessoas tem buscado simplificar e usar formas mais simples de modelagem.


  • Use um quadro branco! alt text

  • O problema é que faltou tempo e/ou ferramenta adequada! alt text

  • Problemas dos diagramas atuais
    • Tamanhos, cores diferentes
    • Falta de legenda e descrição
    • Não padronização
    • Abreviações
    • Falta de títulos

Por quê?

Alt Text

  • Troca de pessoas, rotatividade = informação pro ralo
  • Visualização!
  • Peça para um arquiteto desenhar a sua casa, o que terá? Sim, a planta baixa da sua casa.
  • Você, uma pessoa que não é formada em arquitetura conseguirá entender todo contexto, principais idéias da planta. Consegue se localizar e localizar portas, janelas etc.

alt text
alt text



    "Boa comunicação = times melhores"
Enter fullscreen mode Exit fullscreen mode




Público

alt text
Sam Brinson

  • Temos que ter em mente que o público de nossos diagramas pode ser amplo, desde um presidente e um diretor da companhia até seu colega que acabou de entrar na firma.

Mapas

alt text

Olhe o mapa da sua cidade ou imagine ele.
O que vai notar?

  • Igrejas
  • Hospitais
  • Ferrovias
  • Estradas
  • Estações de metrô
  • Museus

Olhe o mapa de outra cidade e perceba como as mesmas abstrações estarão presentes, apenas com notações diferentes (fontes, linhas cores, formatos)

alt text
alt text

Como funciona?

Abstrações hierárquicas / Agrupamentos

alt text

  • Contamos uma história linear de C1 até C4 , ou seja a história continua ao dar o zoom.

  • O C4 Model é uma estrutura estática, uma vez definido pode-se por exemplo criar outras documentações mais específicas caso necessário, como: diagramas de sequência, ER, BP, etc.

4Cs

alt text

C1 - Contexto | Overview | Continente
C2 - Containers | Overview | Estado
C3 - Componentes | Zoom | Cidade
C4 - Código | Detalhes | Foto da rua

alt text

!!! C4 não é recomendado devido ao detalhamento, pode ser usado por exemplo com uma ferramenta que gere essa doc

Notação

  • Use títulos!
  • Coloque descrições do que o sistema faz! alt text

Quando usar?

alt text

  • Se seu diagrama tem mais de ~20 elementos já pode ser melhor dividir nas camadas do C4 para melhor entendimento

alt text

Exemplo

Level 1 - Contexto
Sistemas, usuários e dependências
Alt Text

Level 2 - Containers
Arquitetura geral e escolhas de tecnologias
Alt Text

Level 3 - Componentes
Componentes lógicos e interações
Alt Text

Level 4 - Classes
Alt Text


Visão geral (time), é um L1 de Contexto sem foco em apenas um sistema:
Alt Text

Mais

https://www.youtube.com/watch?v=x2-rSnhpw0g

Top comments (1)

Collapse
 
victormenegusso profile image
Victor Menegusso

Achei massa esse esquema do C4, ajuda a não poluir e também ajuda chegarmos o sistema que queremos. Esta bem explicado. Vou adotar esse esquema.
Porém ainda sou do time que não curte o diagrama de classes. Eu acredito que em um Level 4 eu colocaria um papa de endpoints ( sim não estaria seguindo o padrão ). Acredito que se o código esta dificíl o problema esta nele.