de_DEen_USes_ESfa_IRfr_FRhi_INid_IDjapl_PLpt_PTru_RUvizh_CNzh_TW

O modelo C4, desenvolvido por Simon Brown, é uma abordagem poderosa e hierárquica para visualizar arquitetura de software. Utiliza quatro níveis de abstração para fornecer o nível adequado de detalhe para diferentes públicos, desde stakeholders empresariais até desenvolvedores. Isso o torna ideal para criar documentação clara, sustentável e voltada para o público-alvo.

Introduction to C4 Model: a Quick Guide - Visual Paradigm Blog

Este guia abrangente baseia-se no bem conhecido estudo de caso de Sistema de Banco Online da Big Bank plc — um exemplo fictício, mas realista, de construção de uma plataforma de banco online para clientes pessoais visualizarem contas e efetuarem pagamentos. O estudo de caso demonstra como aplicar o modelo C4 de forma progressiva, utilizando PlantUML para “arquitetura como código”. Também incorpora ferramentas modernas como Visual Paradigm’s Studio C4 PlantUML com IA (lançado no final de 2025) para acelerar a criação e manutenção.

Visão geral do modelo C4

O modelo inclui quatro níveis:

  1. Nível 1: Contexto do Sistema — A visão geral: o sistema, os usuários e as dependências externas.

  2. Nível 2: Contêineres — Unidades principais implantáveis (aplicações, serviços, bancos de dados) e escolhas tecnológicas de alto nível.

  3. Nível 3: Componentes — Blocos lógicos internos dentro de um contêiner.

  4. Nível 4: Código — Detalhes de baixo nível opcionais (por exemplo, classes); frequentemente ignorados em favor de referências ao código-fonte.

Visões complementares adicionais incluem diagramas dinâmicos (fluxos em tempo de execução) e diagramas de implantação.

Aplicação do modelo C4: Estudo de caso do Sistema de Banco Online da Big Bank plc

Nível 1: Diagrama de Contexto do Sistema

Propósito: Fornecer uma visão geral de alto nível para stakeholders empresariais e públicos não técnicos, mostrando como o Sistema de Banco Online se encaixa no ambiente mais amplo sem jargões técnicos.

Elementos principais:

  • Pessoa: Cliente de Banco Pessoal — Um cliente com uma ou mais contas bancárias pessoais.

  • Sistema de Software: Sistema de Banco Online — Permite aos clientes visualizar informações da conta e efetuar pagamentos.

  • Sistemas Externos:

    • Sistema de Banco Central (mainframe existente) — Gerencia dados dos clientes, contas e transações.

    • Sistema de E-mail (por exemplo, AWS SES) — Envia confirmações e notificações.

Relacionamentos:

  • Cliente usa o Sistema de Banco Online.

  • Sistema de Banco Online usa o Sistema de Banco Central para dados e transações.

  • Sistema de Banco Online envia e-mail por meio de o Sistema de E-mail.

Este nível mantém as coisas simples e explícitas sobre escopo e integrações.

Exemplo de PlantUML (adaptado do estudo de caso):

@startuml
!include https://static.visual-paradigm.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
LAYOUT_TOP_DOWN()
LAYOUT_WITH_LEGEND()

título Diagrama de Contexto do Sistema (Nível 1) para o Sistema de Banco Online
Pessoa(cliente, "Cliente de Banco Pessoal", "Um cliente com uma ou mais contas bancárias pessoais.")
Sistema(sistema_banco_online, "Sistema de Banco Online", "Permite aos clientes visualizar contas e efetuar pagamentos.")
Sistema(sistema_banco_central, "Sistema de Banco Central", "Mainframe existente que gerencia dados dos clientes, contas e transações.")
Sistema_Ext(sistema_email, "Sistema de E-mail", "Serviço Simples de E-mail da Amazon Web Services (AWS SES) para envio de confirmações.")
Rel(cliente, sistema_banco_online, "Usa")
Rel(sistema_banco_online, sistema_banco_central, "Usa")
Rel(sistema_banco_online, sistema_email, "Envia e-mail por meio de")
@enduml

Nível 2: Diagrama de Container

Propósito: Ampliar para mostrar os principais blocos construtivos (containers) e escolhas tecnológicas, voltado para arquitetos, desenvolvedores e equipes DevOps.

Elementos Principais (dentro da fronteira do Sistema de Banco Online):

  • Aplicativo de Página Única (SPA) — JavaScript + Angular, interface completa no navegador web.

  • Aplicativo Móvel — iOS/Android com React Native (ou similar), funcionalidade limitada.

  • Aplicação da API — Java + Spring Boot, API JSON/HTTPS que atende ambos os front-ends.

  • Banco de Dados — PostgreSQL, armazena dados de sessão, preferências e resumos em cache (os dados principais permanecem na mainframe).

Externo — Sistema de Banco Central e Sistema de E-mail.

Relacionamentos:

  • O cliente usa a SPA e o aplicativo móvel por meio de HTTPS.

  • A SPA e o aplicativo móvel chamam a Aplicação da API (JSON/HTTPS).

  • A Aplicação da API lê/escrve no Banco de Dados (JDBC/SQL).

  • A Aplicação da API interage com o Sistema de Banco Central (JSON/HTTPS) e o Sistema de E-mail (HTTPS).

Este diagrama atua como a “única fonte de verdade” para decisões tecnológicas.

Exemplo do PlantUML (usa sprites para ícones):

@startuml
!include https://static.visual-paradigm.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
!include https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons/angular.puml
!include https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons/java.puml
!include https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons/postgresql.puml
LAYOUT_TOP_DOWN()
LAYOUT_WITH_LEGEND()

title Diagrama de Contêiner C4 para o Sistema de Banco Online
Person(customer, "Cliente de Banco Pessoal", "Um cliente com uma ou mais contas bancárias pessoais.")
System_Boundary(internet_banking_system, "Sistema de Banco Online") {
    Container(spa, "Aplicação de Página Única", "JavaScript + Angular", "Interface completa de banco online", $sprite="angular")
    Container(mobile_app, "Aplicativo Móvel", "iOS/Android (React Native)", "Funcionalidade limitada", $sprite="react")
    Container(api_app, "Aplicação da API", "Java + Spring Boot", "API JSON/HTTPS", $sprite="java")
    ContainerDb(database, "Banco de Dados", "PostgreSQL", "Dados de sessão, preferências, resumos em cache", $sprite="postgresql")
}
System(core_banking_system, "Sistema de Banco Central", "Mainframe existente...")
System_Ext(email_system, "Sistema de E-mail", "AWS SES...")
Rel(customer, spa, "Usa", "HTTPS")
Rel(customer, mobile_app, "Usa", "HTTPS")
Rel(spa, api_app, "Chama", "JSON/HTTPS")
Rel(mobile_app, api_app, "Chama", "JSON/HTTPS")
Rel(api_app, database, "Lê e escreve em", "JDBC/SQL")
Rel(api_app, core_banking_system, "Consulta / Atualiza", "JSON/HTTPS")
Rel(api_app, email_system, "Envia e-mail por meio de", "HTTPS")
@enduml

Nível 3: Diagrama de Componentes

Propósito: Detalha a estrutura interna de um contêiner-chave (aqui, a Aplicação da API) para equipes de desenvolvimento.

Componentes Principais (dentro da Aplicação da API):

  • Controlador de Contas (Spring MVC) — Fornece resumos e saldos.

  • Controlador de Autenticação (Spring MVC) — Login, sessões, tokens.

  • Controlador de Redefinição de Senha (Spring MVC) — Redefinição de senha por e-mail.

  • Componente de Segurança (Spring Bean) — Autenticação, JWT, hash.

  • Componente de Gestão de Contas (Spring Bean) — Orquestra chamadas ao Sistema de Banco Central.

  • Componente de Notificação por E-mail (Spring Bean) — Envia e-mails.

Interações — Os controladores usam a Segurança; a Gestão de Contas usa o Banco Central; o E-mail usa o Banco de Dados; os front-ends chamam os controladores.

Exemplo do PlantUML:

PlantUML Diagram

@startuml
!include https://static.visual-paradigm.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml
LAYOUT_WITH_LEGEND()
title Diagrama de Componentes para o Sistema de Banco na Internet - Aplicação da API
Container(spa, "Aplicação de Página Única", "javascript e angular", "...")
Container(ma, "Aplicativo Móvel", "...", "...")
ContainerDb(db, "Banco de Dados", "...", "...")
System_Ext(mbs, "Sistema de Banco Mainframe", "...")
Container_Boundary(api, "Aplicação da API") {
    Component(accounts, "Controlador de Contas", "Spring MVC", "...")
    Component(auth, "Controlador de Autenticação", "Spring MVC", "...")
    Component(reset, "Controlador de Redefinição de Senha", "Spring MVC", "...")
    Component(security, "Componente de Segurança", "Spring Bean", "...")
    Component(accountmgmt, "Componente de Gestão de Contas", "Spring Bean", "...")
    Component(email, "Componente de Notificação por E-mail", "Spring Bean", "...")
    Rel(accounts, security, "Usa")
    Rel(auth, security, "Usa")
    Rel(reset, security, "Usa")
    Rel(accountmgmt, mbs, "Usa", "XML/HTTPS")
    Rel(email, db, "Lê", "JDBC")
}
Rel(spa, accounts, "Usa", "JSON/HTTPS")
Rel(spa, auth, "Usa", "JSON/HTTPS")
Rel(spa, reset, "Usa", "JSON/HTTPS")
Rel(ma, accounts, "Usa", "JSON/HTTPS")
Rel(ma, auth, "Usa", "JSON/HTTPS")
Rel(ma, reset, "Usa", "JSON/HTTPS")
@enduml

Nível 4: Diagrama de Código (Opcional)

Propósito: Mostrar detalhes ao nível de classe para áreas específicas (por exemplo, Autenticação).

Freqüentemente omitido — aponte para o código-fonte em vez disso.

Exemplo — Diagrama de classe UML para Autenticação:

  • AuthenticationController usa JwtTokenProvider e UserRepository.

Exemplo do PlantUML:

@startuml
classDiagram
class "AuthenticationController" {
    +login(credentials)
    +refreshToken()
}
class "JwtTokenProvider" {
    +generateToken(user)
    +validateToken(token)
}
class "UserRepository" {
    +findByUsername()
}
AuthenticationController ..> JwtTokenProvider : "usa"
AuthenticationController ..> UserRepository : "usa"
@enduml

Visões Complementares

  • Diagrama Dinâmico (por exemplo, sequência de “Visualizar Resumo da Conta”): Cliente → SPA → API → Banco de Dados/Banco Central → Resposta.

  • Diagrama de Implantação: Mapeia contêineres para a infraestrutura (por exemplo, AWS EC2 para API, RDS para Banco de Dados, mainframe local).

Aproveitando as Ferramentas com IA do Visual Paradigm

Ferramentas do Visual Paradigm Estúdio C4 PlantUML com IA (lançamento no final de 2025) revoluciona esse processo:

  • Insira linguagem natural (por exemplo, “Crie um modelo C4 para um sistema de banco na internet com SPA, aplicativo móvel, API Spring Boot, PostgreSQL e integração com mainframe”).

  • A IA gera código PlantUML e diagramas para todos os níveis.

  • Use o chatbot de IA para iterar (por exemplo, “Adicione MFA ao componente de autenticação” ou “Gere a visão de implantação no AWS”).

  • Mantenha a consistência entre os níveis e apoie a “documentação viva”.

  • Exporte, versione e integre com repositórios.

Esta ferramenta fornece saídas estruturadas e compatíveis com C4 com muito mais confiabilidade do que IAs genéricas.

Melhores Práticas

  1. Comece com oficinas — Use quadros brancos para o Nível 1 para alinhar os interessados.

  2. Trate a arquitetura como código — Armazene arquivos PlantUML no seu repositório para atualizações automáticas com alterações no código.

  3. Automatize com IA — Use o Visual Paradigm para gerar e aprimorar diagramas rapidamente.

  4. Foco no público-alvo — Omita detalhes técnicos do Nível 1; adicione-os progressivamente.

  5. Mantenha leve — Detalhe apenas contêineres complexos no Nível 3; pule o Nível 4, a menos que essencial.

  6. Evolua a documentação — Torne os diagramas “vivos” para evitar artefatos desatualizados.

O estudo de caso da Big Bank plc continua sendo um exemplo canônico da eficácia do modelo C4 em cenários do mundo real, promovendo clareza, colaboração e comunicação escalonável de arquitetura. Para saber mais, explore o site oficial do C4 ou as ferramentas de IA do Visual Paradigm.

This post is also available in Deutsch, English, Español, فارسی, Français, English, Bahasa Indonesia, 日本語, Polski, Ру́сский, Việt Nam, 简体中文 and 繁體中文.