de_DEen_USes_ESfa_IRfr_FRhi_INid_IDjapl_PLpt_PTru_RUvizh_CNzh_TW

Um Estudo de Caso Completo e Passo a Passo: Aplicando o Modelo C4 ao Sistema de Banco Online (Big Bank plc)

O modelo C4, criado por Simon Brown, é uma forma simples, hierárquica e amigável para desenvolvedores de visualizar arquitetura de software. Ele utiliza quatro níveis de abstração (daí o nome “C4”) para descrever um sistema desde uma visão geral de alto nível até detalhes de nível de código:

  1. Contexto do Sistema (Nível 1) – A visão geral: o sistema e seus usuários/dependências externas.

  2. Contêineres (Nível 2) – Escolhas tecnológicas de alto nível e responsabilidades.

  3. Componentes (Nível 3) – Principais blocos lógicos dentro de um contêiner.

  4. Código (Nível 4) – Detalhes opcionais de nível de classe ou estrutura de código.

É apoiado por três tipos adicionais de diagramas:

  • Paisagem do Sistema

  • Dinâmico

  • Implantação

O modelo é independente de notação (você pode usar qualquer ferramenta de diagramação) e se concentra em clareza, consistência e detalhes adequados ao público-alvo. É amplamente adotado porque evita diagramas de arquitetura do tipo “bola de lama” e escala desde esboços em quadro branco até documentação automatizada.

Para este estudo de caso direcionado, utilizamos o exemplo canônico do site oficial do C4: Sistema de Banco Online para a fictícia “Big Bank plc”. O objetivo comercial é permitir que clientes pessoais visualizem suas contas e façam pagamentos online, ao mesmo tempo em que se integram aos sistemas centrais existentes do banco.

Vamos percorrer cada nível com:

  • Propósito e público-alvo

  • Elementos principais + responsabilidades

  • Relacionamentos

  • Um diagrama C4 em PlantUML pronto para uso diagrama C4 em PlantUML(PlantUML suporta a sintaxe C4 e é renderizada elegantemente na maioria dos visualizadores de Markdown)

  • Racional e decisões principais

  • Como o diagrama ajuda os interessados

Etapa 1: Definir Escopo e Criar o Diagrama de Contexto do Sistema (Nível 1)

Propósito: Mostrar como o novo Sistema de Banco Online se encaixa no mundo. Público-alvo: interessados empresariais, pessoas não técnicas e novos membros da equipe.

Elementos (exemplo oficial):

  • Cliente de Banco Pessoal (Pessoa) – Um cliente com uma ou mais contas bancárias pessoais.

  • Sistema de Banco Online (Sistema de Software) – O novo sistema que estamos construindo.

  • Sistema de Banco Central (Sistema de Software, existente) – Mainframe que gerencia dados de clientes, contas e transações.

  • Sistema de E-mail (Sistema de Software, externo) – Serviço Simples de E-mail da Amazon Web Services (AWS SES) para envio de confirmações.

Relacionamentos:

  • Cliente → utiliza → Sistema de Banco Online (para visualizar contas e efetuar pagamentos)

  • Sistema de Banco Online → utiliza → Sistema de Banco Central (para dados de conta e pagamentos)

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

Aqui está o Diagrama de Contexto C4 do PlantUML:

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

LAYOUT_TOP_DOWN()
LAYOUT_WITH_LEGEND()

title Diagrama de Contexto do Sistema (Nível 1) para Sistema de Banco Online

Person(customer, "Cliente de Banco Pessoal", "Um cliente com uma ou mais contas bancárias pessoais.")
System(internet_banking_system, "Sistema de Banco Online", "O novo sistema para visualizar contas e efetuar pagamentos.")
System(core_banking_system, "Sistema de Banco Central", "Mainframe existente que gerencia dados de clientes, contas e transações.")
System_Ext(email_system, "Sistema de E-mail", "Serviço Simples de E-mail da Amazon Web Services (AWS SES) para envio de confirmações.")

Rel(customer, internet_banking_system, "Utiliza")
Rel(internet_banking_system, core_banking_system, "Utiliza")
Rel(internet_banking_system, email_system, "Envia e-mail por meio de")

Lay_D(customer, internet_banking_system)
Lay_D(internet_banking_system, core_banking_system)
Lay_U(email_system, internet_banking_system)
@enduml

Racional e valor: Este único diagrama responde imediatamente a “O que estamos construindo e com quem ele se comunica?” Previne o crescimento excessivo do escopo tornando as dependências externas explícitas. Os interessados empresariais adoram porque ainda não há detalhes de tecnologia.

Etapa 2: Diagrama de Containers (Nível 2)

Propósito: Ampliar o foco no Sistema de Banco Online e mostrar as principais unidades implantáveis/executáveis (containers) e suas escolhas de tecnologia. Público-alvo: arquitetos, desenvolvedores principais e operações.

Contêineres dentro do Sistema de Banco na Internet:

  • Aplicação de Página Única (Navegador Web – JavaScript + Angular) – Interface completa de banco na internet.

  • Aplicativo Móvel (Dispositivo móvel – nativo iOS/Android ou React Native) – Funcionalidade limitada para uso em movimento.

  • Aplicativo de API (Lado do servidor – Java + Spring Boot) – API JSON/HTTPS usada por ambos os front-ends.

  • Banco de Dados (Banco de dados relacional – PostgreSQL) – Armazena dados de sessão, preferências do usuário, resumos de contas em cache (os dados principais permanecem na mainframe).

Relacionamentos principais (mesmos sistemas externos do Nível 1):

  • SPA e Aplicativo Móvel → chamam → Aplicativo de API

  • Aplicativo de API ↔ Banco de Dados

  • Aplicativo de API → Sistema Central de Banco e Sistema de E-mail

Diagrama de Contêineres C4 do PlantUML:

@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_DE_CIMA_PARA_BAIXO()
LAYOUT_COM_LEGENDA()

título Diagrama de Contêineres C4 para o Sistema de Banco na Internet

Pessoa(cliente, “Cliente de Banco Pessoal”, “Um cliente com uma ou mais contas bancárias pessoais.”)

LimiteDoSistema(sistema_banco_na_internet, “Sistema de Banco na Internet”, “O novo sistema para visualizar contas e efetuar pagamentos.”) {
Contêiner(spa, “Aplicação de Página Única”, “JavaScript + Angular”, “Interface completa de banco na internet”, $sprite=”angular”)
Contêiner(aplicativo_movel, “Aplicativo Móvel”, “iOS/Android (React Native)”, “Funcionalidade limitada para uso em movimento”, $sprite=”react”)
Contêiner(aplicativo_api, “Aplicativo de API”, “Java + Spring Boot”, “API JSON/HTTPS usada por ambos os front-ends”, $sprite=”java”)
ContainerDb(database, “Banco de Dados”, “PostgreSQL”, “Armazena dados de sessão, preferências do usuário e resumos de contas em cache”, $sprite=”postgresql”)
}

System(core_banking_system, “Sistema Principal de Bancário”, “Mainframe existente que gerencia dados de clientes, contas e transações.”)
System_Ext(email_system, “Sistema de E-mail”, “Amazon Web Services Simple Email Service (AWS SES) para envio de confirmações.”)

‘ Relacionamentos
Rel(cliente, spa, “Utiliza”, “HTTPS”)
Rel(cliente, aplicativo_movel, “Utiliza”, “HTTPS”)
Rel(spa, api_app, “Chama”, “JSON/HTTPS”)
Rel(aplicativo_movel, 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, sistema_email, “Envia e-mail via”, “HTTPS”)

‘ Dicas de layout (opcional – ajuda o PlantUML a organizar os elementos melhor)
Lay_D(cliente, sistema_bancario_online)
Lay_D(sistema_bancario_online, core_banking_system)
Lay_U(sistema_email, sistema_bancario_online)

@enduml

Justificativa: Escolhemos um padrão moderno de SPA + backend de API para a web, um aplicativo móvel nativo para desempenho e mantivemos o banco de dados leve (a maioria dos dados reside na mainframe legada). Este diagrama é a única fonte de verdade para decisões de tecnologia de alto nível e ajuda a equipe DevOps a planejar a infraestrutura.

Passo 3: Diagrama de Componentes (Nível 3)

Propósito: Amplie um contêiner (geralmente o mais complexo – o Aplicativo de API) e mostre seus principais componentes lógicos. Público-alvo: equipes de desenvolvimento.

Exemplo: Componentes dentro do Aplicativo de API:

  • Controlador de Contas (Spring MVC)

  • Controlador de Autenticação

  • Controlador de Redefinição de Senha

  • Componente de Segurança (gerencia autenticação, JWT, etc.)

  • Componente de Gestão de Contas (coordena chamadas ao Sistema Principal de Bancário)

  • Componente de Notificação por E-mail

Diagrama de Componente C4 do PlantUML (focado na Aplicação da API):

@startuml
!include https://static.visual-paradigm.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml

LAYOUT_WITH_LEGEND()

title Diagrama de Componente para o Sistema de Banco Online - Aplicação da API

Container(spa, "Aplicação de Página Única", "javascript e angular", "Fornece todas as funcionalidades de banco online para os clientes por meio de seu navegador web.")
Container(ma, "Aplicativo Móvel", "Xamarin", "Fornece um subconjunto limitado das funcionalidades de banco online para os clientes por meio de seus dispositivos móveis.")
ContainerDb(db, "Banco de Dados", "Esquema de Banco de Dados Relacional", "Armazena informações de registro de usuários, credenciais de autenticação criptografadas, logs de acesso, etc.")
System_Ext(mbs, "Sistema Bancário Mainframe", "Armazena todas as informações principais de banco sobre clientes, contas, transações, etc.")

Container_Boundary(api, "Aplicação da API") {
    Component(accounts, "Controlador de Contas", "Spring MVC", "Fornece resumos e saldos de contas para os clientes.")
    Component(auth, "Controlador de Autenticação", "Spring MVC", "Gerencia o login do usuário, gerenciamento de sessão e geração de tokens.")
    Component(reset, "Controlador de Redefinição de Senha", "Spring MVC", "Permite que os usuários redefinam sua senha por e-mail.")
    Component(security, "Componente de Segurança", "Spring Bean", "Gerencia autenticação, geração de tokens JWT e criptografia de senhas.")
    Component(accountmgmt, "Componente de Gestão de Contas", "Spring Bean", "Orquestra chamadas ao sistema de banco principal para operações de conta.")
    Component(email, "Componente de Notificação por E-mail", "Spring Bean", "Envia e-mails de redefinição de senha e e-mails de verificação de conta por SMTP.")

    Rel(accounts, security, "Utiliza")
    Rel(auth, security, "Utiliza")
    Rel(reset, security, "Utiliza")
    Rel(accountmgmt, mbs, "Utiliza", "XML/HTTPS")
    Rel(email, db, "Lê", "JDBC")
}

Rel(spa, accounts, "Utiliza", "JSON/HTTPS")
Rel(spa, auth, "Utiliza", "JSON/HTTPS")
Rel(spa, reset, "Utiliza", "JSON/HTTPS")
Rel(ma, accounts, "Utiliza", "JSON/HTTPS")
Rel(ma, auth, "Utiliza", "JSON/HTTPS")
Rel(ma, reset, "Utiliza", "JSON/HTTPS")
@enduml


Racional: Este nível mostra como as responsabilidades são divididas (separação de preocupações) e torna o onboarding de novos desenvolvedores muito mais rápido. Você desenha diagramas de componentes apenas para contêineres complexos o suficiente para justificar isso.

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

Propósito: Mostrar a estrutura interna de um único componente (diagrama de classes, sequência, etc.). Público-alvo: desenvolvedores trabalhando nesse código.

Exemplo para o Controlador de Autenticação componente – um diagrama de classes UML simples no PlantUML:

@startuml
diagramaDeClasses

skinparam {
roundcorner 8
ArrowColor #444444
ArrowFontColor #444444
BorderColor #444444

Class {
BorderColor #1A237E
BackgroundColor #E8EAF6
FontColor #1A237E
}
}

class “ControladorDeAutenticacao” {
+login(credenciais)
+refreshToken()
}

class “JwtTokenProvider” {
+generateToken(usuario)
+validateToken(token)
}

class “UserRepository” {
+findByUsername()
}

AuthenticationController ..> JwtTokenProvider : “usa”
AuthenticationController ..> UserRepository : “usa”
@enduml


Em projetos reais, você frequentemente pula o Nível 4 e aponta diretamente para o código-fonte real.

Passo 5: Diagramas Complementares

Diagrama Dinâmico (exemplo: fluxo de “Visualizar Resumo da Conta”)

@startuml
!include https://static.visual-paradigm.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml

title Diagrama dinâmico para Visualizar Resumo da Conta

Person(customer, “Cliente de Banco Pessoal”) {
Container(spa, “Aplicação de Página Única”) {
Container(api, “Aplicação de API”) {
ContainerDb(db, “Banco de Dados”) {
System_Ext(coreBanking, “Sistema de Banco Central”)
}
}
}
}

Rel(customer, spa, “1. Clica em ‘Contas’”, “”)
Rel(spa, api, “2. GET /accounts”, “JSON/HTTPS”)
Rel(api, db, “3. Ler resumo em cache”, “”)
Rel(api, coreBanking, “4. Buscar dados mais recentes”, “”)
Rel(api, spa, “5. Retornar JSON”, “”)

MOSTRAR_LEGENDA()
@enduml

Diagrama de Implantação (mapeamento físico de alto nível):

@startuml
!include https://static.visual-paradigm.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml

título Diagrama de Implantação para o Sistema de Banco Online

Nó_de_Implantação(aws, “Amazon Web Services”, “Cloud”) {
Nó_de_Implantação(ec2, “Grupo de Auto-Escalabilidade EC2”, “Linux”) {
Contêiner(api, “Aplicação da API”, “Java Spring Boot”)
}
Nó_de_Implantação(rds, “RDS”, “PostgreSQL”) {
ContêinerBd(db, “Banco de Dados”)
}
}

Nó_de_Implantação(deviceCliente, “Dispositivo do Cliente”, “Web/Móvel”) {
Contêiner(spa, “Aplicação de Página Única”)
Contêiner(mobile, “Aplicativo Móvel”)
}

Sistema_Ext(sistemaBancarioPrincipal, “Sistema de Banco Principal (mainframe local)”)

Rel(spa, api, “Faz chamadas à API para”, “HTTPS”)
Rel(mobile, api, “Faz chamadas à API para”, “HTTPS”)
Rel_U(api, spa, “Entrega ao navegador web do cliente”)
Rel_U(api, mobile, “Entrega ao aplicativo móvel”)

MOSTRAR_LEGENDA()
@enduml

Como Utilizar Este Estudo de Caso na Prática

  1. Comece com uma oficina: desenhe o Contexto em um quadro branco.

  2. Itere até Contêineres e Componentes usando o PlantUML C4.

  3. Mantenha os diagramas no repositório de código (como código!) para que permaneçam atualizados.

  4. Gere documentação viva automaticamente.

Este exemplo exato do Sistema de Banco na Internet é a referência oficial criada por Simon Brown e é utilizado por milhares de organizações em todo o mundo. Ao seguir estas etapas, você agora possui uma descrição completa e pronta para produção da arquitetura, que qualquer pessoa — desde o CEO até um novo desenvolvedor júnior — pode entender no nível adequado de detalhes.

Artigos sobre Diagramas C4

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