DEV Community

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

Posted on

10 1

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

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

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.

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay