A arquitetura de software desempenha um papel fundamental no sucesso de um projeto. Ela define a estrutura, os componentes e as interações entre eles, fornecendo uma visão clara do sistema como um todo. Nesse sentido, o C4 Model se destaca como uma abordagem poderosa para a criação e comunicação de arquiteturas de software. Neste post, vamos explorar as vantagens da utilização do C4 Model e como criar os modelos utilizando a biblioteca Mermaid.js.
O C4 Model, criado por Simon Brown, é uma abordagem leve e pragmática para modelar arquiteturas de software. Ele é baseado em quatro níveis de abstração: Contexto, Contêineres, Componentes e Código. Cada nível oferece uma perspectiva diferente da arquitetura, permitindo uma compreensão clara e concisa do sistema.
Vantagens da utilização do C4 Model:
Comunicação eficaz
Fornece uma linguagem visual clara e padronizada para comunicar a arquitetura de software. Ele ajuda a alinhar a equipe técnica e os stakeholders, facilitando discussões e tomadas de decisão fundamentadas.
Foco na simplicidade
O modelo utiliza uma abordagem simplificada e de alto nível, evitando excesso de detalhes desnecessários. Isso torna a arquitetura mais compreensível e permite uma melhor comunicação entre as partes interessadas.
Clareza na hierarquia
Permite representar a arquitetura em diferentes níveis de abstração, o que ajuda a identificar as dependências e a hierarquia dos componentes. Isso facilita a identificação de problemas, como acoplamento excessivo ou falta de coesão, e auxilia na tomada de decisões de design.
Rastreabilidade
É possível rastrear os componentes de software desde a sua concepção até a implementação. Isso ajuda a manter uma visão consistente da arquitetura ao longo do tempo e a tomar decisões informadas sobre refatoração, atualizações e evolução do sistema.
Estrutura
O modelo é composto por quatro níveis de abstração que ajudam a compreender e comunicar a arquitetura de software. Esses níveis fornecem diferentes perspectivas da arquitetura, permitindo uma representação clara e concisa do sistema. Vamos descrever cada um deles:
Nível 1: Contexto
No nível de contexto, o objetivo é fornecer uma visão geral do sistema e seu ambiente externo. Ele representa o sistema como um todo e mostra como ele interage com entidades externas, como usuários, sistemas externos ou serviços. O diagrama de contexto fornece uma visão de alto nível das interações entre o sistema e seus atores externos.
Nível 2: Contêineres
No nível de contêineres, o foco é nas principais divisões arquiteturais do sistema. Um contêiner é uma unidade de software que agrupa componentes relacionados. Pode ser uma aplicação web, um serviço, um banco de dados ou qualquer outra unidade lógica significativa. Os diagramas de contêineres mostram as relações entre os contêineres e como eles se comunicam, destacando as interfaces entre eles.
Nível 3: Componentes
No nível de componentes, o objetivo é detalhar os elementos internos dos contêineres. Os componentes são unidades de software independentes que fornecem funcionalidades específicas dentro de um contêiner. Por exemplo, um contêiner web pode ter componentes como controladores, modelos e visualizações. Os diagramas de componentes mostram os componentes dentro de cada contêiner e suas dependências, permitindo entender a estrutura interna de cada contêiner.
Nível 4: Código
No nível de código, o foco está nas implementações detalhadas dos componentes. Esse nível não faz parte do C4 Model originalmente proposto por Simon Brown, mas é uma extensão que permite uma visão ainda mais detalhada da arquitetura. Aqui, o código-fonte é analisado para entender a estrutura interna dos componentes, como classes, módulos ou pacotes, e suas interações.
Cada nível de abstração do C4 Model fornece um nível crescente de detalhes e é útil para diferentes propósitos de comunicação e compreensão da arquitetura de software. A utilização desses níveis ajuda a identificar os elementos-chave do sistema e suas relações, proporcionando uma visão completa e estruturada da arquitetura.
Criando diagramas do C4 Model com Mermaid.js
Existem várias ferramentas para criação dos diagramas do C4 Model, mas escolhi esta por ser baseada em texto e acredito que com este formato tende a ser mais fiel ao conceito que o modelo solicita.
Mermaid.js é uma biblioteca JavaScript que permite criar diagramas de forma simples e legível. Para criar modelos do C4 com Mermaid.js, siga estas etapas:
Crie um arquivo com a extensão .mmd (por exemplo, contexto.mmd) e abra-o em um editor de texto.
No arquivo .mmd, você pode usar a sintaxe Mermaid.js para definir seus diagramas. Por exemplo, para representar o contexto do sistema, use o seguinte código:
C4Context
title Diagrama de Contexto do Sistema para Sistema de Internet Banking
Person(customer, "Cliente do Banco", "Um cliente do banco, com contas bancárias pessoal.")
Enterprise_Boundary(BankBoundary,"") {
System_Ext(MainframeBankSystem, "Sistema Mainframe do Banco", "Armazena todas as principais informações bancárias sobre clientes, contas, transações, etc.")
System(InternetBankSystem, "Sistema de Internet Banking", "Permite que os clientes visualizem informações sobre suas contas bancárias e façam pagamentos.")
System_Ext(EMailSystem, "Sistema de E-mail", "O sistema de e-mail interno.")
}
Rel(customer, InternetBankSystem, "Usa")
Rel(InternetBankSystem, MainframeBankSystem, "Usa")
Rel(EMailSystem, customer, "Envia e-mails para")
Rel(InternetBankSystem, EMailSystem, "Envia e-mails usando")Continue adicionando os demais elementos do C4 Model, como contêineres e componentes, utilizando a sintaxe Mermaid.js.
Depois de adicionar todos os diagramas desejados, salve o arquivo .mmd.
Para visualizar os diagramas renderizados, você precisará processar o arquivo .mmd em um visualizador que ofereça suporte a Mermaid.js. Existem várias opções disponíveis, como o Visual Studio Code com a extensão "Markdown Preview Mermaid Support" ou utilitários de renderização online.
Ao processar o arquivo .mmd, os diagramas serão renderizados e exibidos na documentação final.
Lembre-se de que é importante ter certeza de que você possui as dependências corretas para a renderização dos diagramas Mermaid.js no seu ambiente de desenvolvimento.
Para mais informações e ver a palestra sobre C4 Model acesse:
