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 ao desenvolvedor de visualizar arquitetura de software. Ele utiliza quatro níveis de abstração (daí o nome “C4”) para descrever um sistema desde a 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 o banco fictício “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

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

Propósito: Mostrar como o novo Sistema de Banco na Internet se encaixa no mundo. Público-alvo: interessados empresariais, pessoas não técnicas, 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 na Internet (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 na Internet (para visualizar contas e efetuar pagamentos)
  • Sistema de Banco na Internet → utiliza → Sistema de Banco Central (para dados de conta e pagamentos)
  • Sistema de Banco na Internet → envia e-mail por meio de → Sistema de E-mail

Aqui está o Diagrama de Contexto C4 do PlantUML:

PlantUML


Editar PlantUML no VPasCode
Plantuml Edit Plantuml in VPasCode 

@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 na Internet

Person(customer, "Cliente de Banco Pessoal", "Um cliente com uma ou mais contas bancárias pessoais.")
System(internet_banking_system, "Sistema de Banco na Internet", "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
Edit Plantuml in VPasCode



Editar PlantUML no VPasCode

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

Passo 2: Diagrama de Contêineres (Nível 2)

Propósito: Amplie o Sistema de Banco na Internet e mostre as principais unidades implantáveis/executáveis (contêineres) e suas escolhas tecnológicas. Público-alvo: arquitetos, desenvolvedores principais e operações.

Contêineres dentro do Sistema de Banco na Internet:

  • Aplicativo 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 e resumos de contas em cache (os dados principais permanecem na mainframe legada).

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 de Banco Central e Sistema de E-mail

Diagrama de Contêineres C4 do PlantUML:

PlantUML


Edite o PlantUML no VPasCode
Plantuml Edit Plantuml in VPasCode 

@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êineres C4 para o Sistema de Banco na Internet

Person(customer, "Cliente de Banco Pessoal", "Um cliente com uma ou mais contas bancárias pessoais.")

System_Boundary(internet_banking_system, "Sistema de Banco na Internet", "O novo sistema para visualizar contas e efetuar pagamentos.") {
Container(spa, "Aplicativo de Página Única", "JavaScript + Angular", "Interface completa de banco na internet", $sprite="angular")
Container(mobile_app, "Aplicativo Móvel", "iOS/Android (React Native)", "Funcionalidade limitada para uso em movimento", $sprite="react")
Container(api_app, "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 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.")

' Relacionamentos
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 via", "HTTPS")

' Dicas de layout (opcionais – ajudam o PlantUML a organizar os elementos melhor)
Lay_D(customer, internet_banking_system)
Lay_D(internet_banking_system, core_banking_system)
Lay_U(email_system, internet_banking_system)

@enduml
Edit Plantuml in VPasCode



Edite o PlantUML no VPasCode

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 confiável para decisões tecnológicas de alto nível e ajuda a equipe de 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 Bancário Central)
  • Componente de Notificação por E-mail

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

PlantUML


Editar PlantUML no VPasCode
Plantuml Edit Plantuml in VPasCode 

@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 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 seu dispositivo móvel.")
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 centrais 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", "Coordena chamadas ao sistema bancário central 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 via 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
Edit Plantuml in VPasCode



Editar PlantUML no VPasCode

Justificativa: 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 com esse código.

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

PlantUML


Editar PlantUML no VPasCode
Plantuml Edit Plantuml in VPasCode 

@startuml
classDiagram

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

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

class "ControladorDeAutenticacao" {
+login(credenciais)
+refreshToken()
}

class "FornecedorDeTokenJwt" {
+generateToken(usuario)
+validateToken(token)
}

class "RepositorioDeUsuario" {
+findByUsername()
}

ControladorDeAutenticacao ..> FornecedorDeTokenJwt : "utiliza"
ControladorDeAutenticacao ..> RepositorioDeUsuario : "utiliza"
@enduml
Edit Plantuml in VPasCode



Editar PlantUML no VPasCode

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”)

PlantUML


Edite o PlantUML no VPasCode
Plantuml Edit Plantuml in VPasCode 

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

title Diagrama dinâmico para Visualizar Resumo de Contas

Pessoa(cliente, "Cliente de Banco Pessoal") {
Container(spa, "Aplicação de Página Única") {
Container(api, "Aplicação de API") {
ContainerDb(db, "Banco de Dados") {
Sistema_Ext(sistemaBancario, "Sistema Bancário Central")
}
}
}
}

Rel(cliente, spa, "1. Clica em 'Contas'", "")
Rel(spa, api, "2. GET /accounts", "JSON/HTTPS")
Rel(api, db, "3. Lê resumo em cache", "")
Rel(api, sistemaBancario, "4. Busca dados mais recentes", "")
Rel(api, spa, "5. Retorna JSON", "")

MOSTRAR_LEGENDA()
@enduml
Edit Plantuml in VPasCode



Edite o PlantUML no VPasCode

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

PlantUML


Edite o PlantUML no VPasCode
Plantuml Edit Plantuml in VPasCode 

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

title Diagrama de Implantação para o Sistema de Banco na Internet

Nó_Implantação(aws, "Amazon Web Services", "Cloud") {
Nó_Implantação(ec2, "Grupo de Escalonamento Automático EC2", "Linux") {
Container(api, "Aplicação de API", "Java Spring Boot")
}
Nó_Implantação(rds, "RDS", "PostgreSQL") {
ContainerDb(db, "Banco de Dados")
}
}

Nó_Implantação(dispositivoCliente, "Dispositivo do Cliente", "Web/Móvel") {
Container(spa, "Aplicação de Página Única")
Container(mobile, "Aplicativo Móvel")
}

Sistema_Ext(sistemaBancario, "Sistema Bancário Central (mainframe local)")

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

MOSTRAR_LEGENDA()
@enduml
Edit Plantuml in VPasCode



Edite o PlantUML no VPasCode

Como usar este estudo de caso na prática

  1. Comece com uma oficina: desenhe o Contexto em um quadro branco.
  2. Itere até Containers 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 é usado 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 繁體中文.