{"id":12041,"date":"2026-03-05T10:48:15","date_gmt":"2026-03-05T02:48:15","guid":{"rendered":"https:\/\/www.cybermedian.com\/pt\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/"},"modified":"2026-03-05T10:48:15","modified_gmt":"2026-03-05T02:48:15","slug":"a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc","status":"publish","type":"post","link":"https:\/\/www.cybermedian.com\/pt\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/","title":{"rendered":"Um Estudo de Caso Completo e Passo a Passo: Aplicando o Modelo C4 ao Sistema de Banco Online (Big Bank plc)"},"content":{"rendered":"<p>O\u00a0<strong>modelo C4<\/strong>, criado por Simon Brown, \u00e9 uma forma simples, hier\u00e1rquica e amig\u00e1vel para desenvolvedores de visualizar arquitetura de software. Ele utiliza quatro n\u00edveis de abstra\u00e7\u00e3o (da\u00ed o nome \u201cC4\u201d) para descrever um sistema desde uma vis\u00e3o geral de alto n\u00edvel at\u00e9 detalhes de n\u00edvel de c\u00f3digo:<\/p>\n<ol>\n<li>\n<p><strong>Contexto do Sistema<\/strong>\u00a0(N\u00edvel 1) \u2013 A vis\u00e3o geral: o sistema e seus usu\u00e1rios\/depend\u00eancias externas.<\/p>\n<\/li>\n<li>\n<p><strong>Cont\u00eaineres<\/strong>\u00a0(N\u00edvel 2) \u2013 Escolhas tecnol\u00f3gicas de alto n\u00edvel e responsabilidades.<\/p>\n<\/li>\n<li>\n<p><strong>Componentes<\/strong>\u00a0(N\u00edvel 3) \u2013 Principais blocos l\u00f3gicos dentro de um cont\u00eainer.<\/p>\n<\/li>\n<li>\n<p><strong>C\u00f3digo<\/strong>\u00a0(N\u00edvel 4) \u2013 Detalhes opcionais de n\u00edvel de classe ou estrutura de c\u00f3digo.<\/p>\n<\/li>\n<\/ol>\n<p>\u00c9 apoiado por tr\u00eas tipos adicionais de diagramas:<\/p>\n<ul>\n<li>\n<p><strong>Paisagem do Sistema<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>Din\u00e2mico<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>Implanta\u00e7\u00e3o<\/strong><\/p>\n<\/li>\n<\/ul>\n<p class=\"\">O modelo \u00e9 independente de nota\u00e7\u00e3o (voc\u00ea pode usar qualquer ferramenta de diagrama\u00e7\u00e3o) e se concentra em clareza, consist\u00eancia e detalhes adequados ao p\u00fablico-alvo. \u00c9 amplamente adotado porque evita diagramas de arquitetura do tipo \u201cbola de lama\u201d e escala desde esbo\u00e7os em quadro branco at\u00e9 documenta\u00e7\u00e3o automatizada.<\/p>\n<p>Para este\u00a0<strong>estudo de caso direcionado<\/strong>, utilizamos o exemplo can\u00f4nico do site oficial do C4:\u00a0<strong>Sistema de Banco Online<\/strong>\u00a0para a fict\u00edcia \u201cBig Bank plc\u201d. O objetivo comercial \u00e9 permitir que clientes pessoais visualizem suas contas e fa\u00e7am pagamentos online, ao mesmo tempo em que se integram aos sistemas centrais existentes do banco.<\/p>\n<p>Vamos percorrer\u00a0<strong>cada n\u00edvel<\/strong>\u00a0com:<\/p>\n<ul>\n<li>\n<p>Prop\u00f3sito e p\u00fablico-alvo<\/p>\n<\/li>\n<li>\n<p>Elementos principais + responsabilidades<\/p>\n<\/li>\n<li>\n<p>Relacionamentos<\/p>\n<\/li>\n<li>\n<p>Um diagrama C4 em PlantUML pronto para uso\u00a0<strong>diagrama C4 em PlantUML<\/strong>(PlantUML suporta a sintaxe C4 e \u00e9 renderizada elegantemente na maioria dos visualizadores de Markdown)<\/p>\n<\/li>\n<li>\n<p>Racional e decis\u00f5es principais<\/p>\n<\/li>\n<li>\n<p>Como o diagrama ajuda os interessados<\/p>\n<\/li>\n<\/ul>\n<h3>Etapa 1: Definir Escopo e Criar o Diagrama de Contexto do Sistema (N\u00edvel 1)<\/h3>\n<p><strong>Prop\u00f3sito<\/strong>: Mostrar como o novo Sistema de Banco Online se encaixa no mundo. P\u00fablico-alvo: interessados empresariais, pessoas n\u00e3o t\u00e9cnicas e novos membros da equipe.<\/p>\n<p><strong>Elementos<\/strong>\u00a0(exemplo oficial):<\/p>\n<ul>\n<li>\n<p><strong>Cliente de Banco Pessoal<\/strong>\u00a0(Pessoa) \u2013 Um cliente com uma ou mais contas banc\u00e1rias pessoais.<\/p>\n<\/li>\n<li>\n<p><strong>Sistema de Banco Online<\/strong>\u00a0(Sistema de Software) \u2013 O novo sistema que estamos construindo.<\/p>\n<\/li>\n<li>\n<p><strong>Sistema de Banco Central<\/strong>\u00a0(Sistema de Software, existente) \u2013 Mainframe que gerencia dados de clientes, contas e transa\u00e7\u00f5es.<\/p>\n<\/li>\n<li>\n<p><strong>Sistema de E-mail<\/strong>\u00a0(Sistema de Software, externo) \u2013 Servi\u00e7o Simples de E-mail da Amazon Web Services (AWS SES) para envio de confirma\u00e7\u00f5es.<\/p>\n<\/li>\n<\/ul>\n<p><strong>Relacionamentos<\/strong>:<\/p>\n<ul>\n<li>\n<p>Cliente \u2192 utiliza \u2192 Sistema de Banco Online (para visualizar contas e efetuar pagamentos)<\/p>\n<\/li>\n<li>\n<p>Sistema de Banco Online \u2192 utiliza \u2192 Sistema de Banco Central (para dados de conta e pagamentos)<\/p>\n<\/li>\n<li>\n<p>Sistema de Banco Online \u2192 envia e-mail por meio \u2192 Sistema de E-mail<\/p>\n<\/li>\n<\/ul>\n<p>Aqui est\u00e1 o\u00a0<strong>Diagrama de Contexto C4 do PlantUML<\/strong>:<\/p>\n<p id=\"GeUKeRH\"><img alt=\"\" class=\"alignnone size-full wp-image-15959\" decoding=\"async\" height=\"739\" loading=\"lazy\" sizes=\"auto, (max-width: 527px) 100vw, 527px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png 527w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5-214x300.png 214w\" width=\"527\"\/><code data-language=\"mermaid\"><\/code><\/p>\n<pre class=\"relative p-4 text-sm overflow-auto h-full box-border !bg-gray-900 text-gray-100\"><code class=\"text-gray-100\">@startuml\r\n!include https:\/\/static.visual-paradigm.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Context.puml\r\n\r\nLAYOUT_TOP_DOWN()\r\nLAYOUT_WITH_LEGEND()\r\n\r\ntitle Diagrama de Contexto do Sistema (N\u00edvel 1) para Sistema de Banco Online\r\n\r\nPerson(customer, \"Cliente de Banco Pessoal\", \"Um cliente com uma ou mais contas banc\u00e1rias pessoais.\")\r\nSystem(internet_banking_system, \"Sistema de Banco Online\", \"O novo sistema para visualizar contas e efetuar pagamentos.\")\r\nSystem(core_banking_system, \"Sistema de Banco Central\", \"Mainframe existente que gerencia dados de clientes, contas e transa\u00e7\u00f5es.\")\r\nSystem_Ext(email_system, \"Sistema de E-mail\", \"Servi\u00e7o Simples de E-mail da Amazon Web Services (AWS SES) para envio de confirma\u00e7\u00f5es.\")\r\n\r\nRel(customer, internet_banking_system, \"Utiliza\")\r\nRel(internet_banking_system, core_banking_system, \"Utiliza\")\r\nRel(internet_banking_system, email_system, \"Envia e-mail por meio de\")\r\n\r\nLay_D(customer, internet_banking_system)\r\nLay_D(internet_banking_system, core_banking_system)\r\nLay_U(email_system, internet_banking_system)\r\n@enduml<\/code><\/pre>\n<pre class=\"lang-mermaid\"><code data-language=\"mermaid\"><\/code><\/pre>\n<p><strong>Racional e valor<\/strong>: Este \u00fanico diagrama responde imediatamente a \u201cO que estamos construindo e com quem ele se comunica?\u201d Previne o crescimento excessivo do escopo tornando as depend\u00eancias externas expl\u00edcitas. Os interessados empresariais adoram porque ainda n\u00e3o h\u00e1 detalhes de tecnologia.<\/p>\n<h3>Etapa 2: Diagrama de Containers (N\u00edvel 2)<\/h3>\n<p><strong>Prop\u00f3sito<\/strong>: Ampliar o foco no Sistema de Banco Online e mostrar as principais unidades implant\u00e1veis\/execut\u00e1veis (containers) e suas escolhas de tecnologia. P\u00fablico-alvo: arquitetos, desenvolvedores principais e opera\u00e7\u00f5es.<\/p>\n<p><strong>Cont\u00eaineres dentro do Sistema de Banco na Internet<\/strong>:<\/p>\n<ul>\n<li>\n<p><strong>Aplica\u00e7\u00e3o de P\u00e1gina \u00danica<\/strong>\u00a0(Navegador Web \u2013 JavaScript + Angular) \u2013 Interface completa de banco na internet.<\/p>\n<\/li>\n<li>\n<p><strong>Aplicativo M\u00f3vel<\/strong>\u00a0(Dispositivo m\u00f3vel \u2013 nativo iOS\/Android ou React Native) \u2013 Funcionalidade limitada para uso em movimento.<\/p>\n<\/li>\n<li>\n<p><strong>Aplicativo de API<\/strong>\u00a0(Lado do servidor \u2013 Java + Spring Boot) \u2013 API JSON\/HTTPS usada por ambos os front-ends.<\/p>\n<\/li>\n<li>\n<p><strong>Banco de Dados<\/strong>\u00a0(Banco de dados relacional \u2013 PostgreSQL) \u2013 Armazena dados de sess\u00e3o, prefer\u00eancias do usu\u00e1rio, resumos de contas em cache (os dados principais permanecem na mainframe).<\/p>\n<\/li>\n<\/ul>\n<p><strong>Relacionamentos principais<\/strong>\u00a0(mesmos sistemas externos do N\u00edvel 1):<\/p>\n<ul>\n<li>\n<p>SPA e Aplicativo M\u00f3vel \u2192 chamam \u2192 Aplicativo de API<\/p>\n<\/li>\n<li>\n<p>Aplicativo de API \u2194 Banco de Dados<\/p>\n<\/li>\n<li>\n<p>Aplicativo de API \u2192 Sistema Central de Banco e Sistema de E-mail<\/p>\n<\/li>\n<\/ul>\n<p><strong>Diagrama de Cont\u00eaineres C4 do PlantUML<\/strong>:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/uml.planttext.com\/plantuml\/png\/lLN1ZY8t4BqZyGyL52azoW27x2bIf6M0P2TY1tORDCe9LNSNuCHjExORbaIHyW_vm_sIBRiRwDbXjCfbEU5oLRrNhbVLhvr7wwjITZlV29NBgY3OUM_SZyCXNtcH3_R2LIZx1YqMObiESbqEZKGLelhE5r9am_6h_YAOLczdmnAT9ykczLWhZqAH7PZh21OFWwtmkogh7DcStKdv2E0hWuNzuG8a-BQ_OO--CrPuSYUSWlRXpWrHRIk9NmVhTzpZLm4oslcj9VUdRE2wdTdej_bgkLxE5-l9_F4XkJcR7k-NRzQpwI_JXqcmTZjUU4amVWNdJi14uDPY2HjjuPwfMKKUxb3z8TGMqYEZbo5oGTPfbUILyxeaUmkzseBox3nkxdfyEOAJ9nouTD2AW05ARGdCAJ3ZGC0yrvNoRj2B36l4zHtR2hJ7H3IKrbcDidRHWI5U81lGbpi2HGUeVMDfUq67u7I20rG5b1W33HvBgYd0tzqEyE_yFeapo1bJzfFKN-2MO6IC53cFWbO1x5TkVPfROJny3wDQSy7-SoKbdEX3GnzMztptRTtTdtgDH4FfJr5BdGb9QpI6CxsDXu0RyefvEXofmcfHGFAUCFVmm6JsT1DkPwBap0LiAfK7XYY5FyONO6Nv7VMt6bY6RH8sv7XE0Orey4UB-sj5Sxaff-2YxhJsqPhE7uPlbij52Y66SGh8Zf1fLi361bcJAbmREypDC-X9bXJeCKD7d7JI_0q0YrhzwRjPEAMUvUJ0aNDC2qBCRG2rO2njo9BAoTr2ZlcEYJIT1rUL9Lf1JtXSnYgm-UUYn2HdZEVY6mSXFnVUz8DmFfXABcJ3OyLRW8KcW-ay43NFan1lenAzHUKmTgoUX6OEfXzyGfnCNg2duTZ279Nu5rV_I1caP7bDy9EaeZIicCQrja8oUamXdQOtKGwEMn5fQRKHjiGBTBVp7RmdMLjsmhXkXu-jqOyZSVhrLYu-vSKG1H0IFOrgI_fBKMs4imxPQOnIjiDQYZk5jc7-PsZB7Iu2X1uFMU62WClOgqFSpE1rbFpaRZmCUhoIuxfqtbKKr0T3M1b6YS_m1JAVAI0DKrGRUQzXY3-7XkRDyAWh3piHzboYJRq7uEE__y6Ef75m-ZG3MjOThpII53SWPEHvOOKl21xNarRtNjZ3PyyNz_ILHsY2Lfyf-sM8RkSrbyoVkqy0\"\/><\/p>\n<p>@startuml<br \/>\n!include https:\/\/static.visual-paradigm.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Container.puml<br \/>\n!include https:\/\/raw.githubusercontent.com\/tupadr3\/plantuml-icon-font-sprites\/master\/devicons\/angular.puml<br \/>\n!include https:\/\/raw.githubusercontent.com\/tupadr3\/plantuml-icon-font-sprites\/master\/devicons\/java.puml<br \/>\n!include https:\/\/raw.githubusercontent.com\/tupadr3\/plantuml-icon-font-sprites\/master\/devicons\/postgresql.puml<\/p>\n<p>LAYOUT_DE_CIMA_PARA_BAIXO()<br \/>\nLAYOUT_COM_LEGENDA()<\/p>\n<p>t\u00edtulo Diagrama de Cont\u00eaineres C4 para o Sistema de Banco na Internet<\/p>\n<p>Pessoa(cliente, \u201cCliente de Banco Pessoal\u201d, \u201cUm cliente com uma ou mais contas banc\u00e1rias pessoais.\u201d)<\/p>\n<p>LimiteDoSistema(sistema_banco_na_internet, \u201cSistema de Banco na Internet\u201d, \u201cO novo sistema para visualizar contas e efetuar pagamentos.\u201d) {<br \/>\nCont\u00eainer(spa, \u201cAplica\u00e7\u00e3o de P\u00e1gina \u00danica\u201d, \u201cJavaScript + Angular\u201d, \u201cInterface completa de banco na internet\u201d, $sprite=\u201dangular\u201d)<br \/>\nCont\u00eainer(aplicativo_movel, \u201cAplicativo M\u00f3vel\u201d, \u201ciOS\/Android (React Native)\u201d, \u201cFuncionalidade limitada para uso em movimento\u201d, $sprite=\u201dreact\u201d)<br \/>\nCont\u00eainer(aplicativo_api, \u201cAplicativo de API\u201d, \u201cJava + Spring Boot\u201d, \u201cAPI JSON\/HTTPS usada por ambos os front-ends\u201d, $sprite=\u201djava\u201d)<br \/>\nContainerDb(database, \u201cBanco de Dados\u201d, \u201cPostgreSQL\u201d, \u201cArmazena dados de sess\u00e3o, prefer\u00eancias do usu\u00e1rio e resumos de contas em cache\u201d, $sprite=\u201dpostgresql\u201d)<br \/>\n}<\/p>\n<p>System(core_banking_system, \u201cSistema Principal de Banc\u00e1rio\u201d, \u201cMainframe existente que gerencia dados de clientes, contas e transa\u00e7\u00f5es.\u201d)<br \/>\nSystem_Ext(email_system, \u201cSistema de E-mail\u201d, \u201cAmazon Web Services Simple Email Service (AWS SES) para envio de confirma\u00e7\u00f5es.\u201d)<\/p>\n<p>\u2018 Relacionamentos<br \/>\nRel(cliente, spa, \u201cUtiliza\u201d, \u201cHTTPS\u201d)<br \/>\nRel(cliente, aplicativo_movel, \u201cUtiliza\u201d, \u201cHTTPS\u201d)<br \/>\nRel(spa, api_app, \u201cChama\u201d, \u201cJSON\/HTTPS\u201d)<br \/>\nRel(aplicativo_movel, api_app, \u201cChama\u201d, \u201cJSON\/HTTPS\u201d)<br \/>\nRel(api_app, database, \u201cL\u00ea e escreve em\u201d, \u201cJDBC\/SQL\u201d)<br \/>\nRel(api_app, core_banking_system, \u201cConsulta \/ Atualiza\u201d, \u201cJSON\/HTTPS\u201d)<br \/>\nRel(api_app, sistema_email, \u201cEnvia e-mail via\u201d, \u201cHTTPS\u201d)<\/p>\n<p>\u2018 Dicas de layout (opcional \u2013 ajuda o PlantUML a organizar os elementos melhor)<br \/>\nLay_D(cliente, sistema_bancario_online)<br \/>\nLay_D(sistema_bancario_online, core_banking_system)<br \/>\nLay_U(sistema_email, sistema_bancario_online)<\/p>\n<p>@enduml<code data-language=\"mermaid\"><br \/>\n<\/code><\/p>\n<p><strong>Justificativa<\/strong>: Escolhemos um padr\u00e3o moderno de SPA + backend de API para a web, um aplicativo m\u00f3vel nativo para desempenho e mantivemos o banco de dados leve (a maioria dos dados reside na mainframe legada). Este diagrama \u00e9 a \u00fanica fonte de verdade para decis\u00f5es de tecnologia de alto n\u00edvel e ajuda a equipe DevOps a planejar a infraestrutura.<\/p>\n<h3>Passo 3: Diagrama de Componentes (N\u00edvel 3)<\/h3>\n<p><strong>Prop\u00f3sito<\/strong>: Amplie um cont\u00eainer (geralmente o mais complexo \u2013 o Aplicativo de API) e mostre seus principais componentes l\u00f3gicos. P\u00fablico-alvo: equipes de desenvolvimento.<\/p>\n<p><strong>Exemplo: Componentes dentro do Aplicativo de API<\/strong>:<\/p>\n<ul>\n<li>\n<p>Controlador de Contas (Spring MVC)<\/p>\n<\/li>\n<li>\n<p>Controlador de Autentica\u00e7\u00e3o<\/p>\n<\/li>\n<li>\n<p>Controlador de Redefini\u00e7\u00e3o de Senha<\/p>\n<\/li>\n<li>\n<p>Componente de Seguran\u00e7a (gerencia autentica\u00e7\u00e3o, JWT, etc.)<\/p>\n<\/li>\n<li>\n<p>Componente de Gest\u00e3o de Contas (coordena chamadas ao Sistema Principal de Banc\u00e1rio)<\/p>\n<\/li>\n<li>\n<p>Componente de Notifica\u00e7\u00e3o por E-mail<\/p>\n<\/li>\n<\/ul>\n<p><strong>Diagrama de Componente C4 do PlantUML<\/strong>\u00a0(focado na Aplica\u00e7\u00e3o da API):<\/p>\n<p id=\"fzJuCAx\"><img alt=\"\" class=\"alignnone size-full wp-image-15962\" decoding=\"async\" height=\"916\" loading=\"lazy\" sizes=\"auto, (max-width: 1684px) 100vw, 1684px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8eafc11b62.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8eafc11b62.png 1684w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8eafc11b62-300x163.png 300w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8eafc11b62-1024x557.png 1024w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8eafc11b62-768x418.png 768w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8eafc11b62-1536x835.png 1536w\" width=\"1684\"\/><\/p>\n<pre class=\"relative p-4 text-sm overflow-auto h-full box-border !bg-gray-900 text-gray-100\"><code class=\"text-gray-100\">@startuml\r\n!include https:\/\/static.visual-paradigm.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Component.puml\r\n\r\nLAYOUT_WITH_LEGEND()\r\n\r\ntitle Diagrama de Componente para o Sistema de Banco Online - Aplica\u00e7\u00e3o da API\r\n\r\nContainer(spa, \"Aplica\u00e7\u00e3o de P\u00e1gina \u00danica\", \"javascript e angular\", \"Fornece todas as funcionalidades de banco online para os clientes por meio de seu navegador web.\")\r\nContainer(ma, \"Aplicativo M\u00f3vel\", \"Xamarin\", \"Fornece um subconjunto limitado das funcionalidades de banco online para os clientes por meio de seus dispositivos m\u00f3veis.\")\r\nContainerDb(db, \"Banco de Dados\", \"Esquema de Banco de Dados Relacional\", \"Armazena informa\u00e7\u00f5es de registro de usu\u00e1rios, credenciais de autentica\u00e7\u00e3o criptografadas, logs de acesso, etc.\")\r\nSystem_Ext(mbs, \"Sistema Banc\u00e1rio Mainframe\", \"Armazena todas as informa\u00e7\u00f5es principais de banco sobre clientes, contas, transa\u00e7\u00f5es, etc.\")\r\n\r\nContainer_Boundary(api, \"Aplica\u00e7\u00e3o da API\") {\r\n    Component(accounts, \"Controlador de Contas\", \"Spring MVC\", \"Fornece resumos e saldos de contas para os clientes.\")\r\n    Component(auth, \"Controlador de Autentica\u00e7\u00e3o\", \"Spring MVC\", \"Gerencia o login do usu\u00e1rio, gerenciamento de sess\u00e3o e gera\u00e7\u00e3o de tokens.\")\r\n    Component(reset, \"Controlador de Redefini\u00e7\u00e3o de Senha\", \"Spring MVC\", \"Permite que os usu\u00e1rios redefinam sua senha por e-mail.\")\r\n    Component(security, \"Componente de Seguran\u00e7a\", \"Spring Bean\", \"Gerencia autentica\u00e7\u00e3o, gera\u00e7\u00e3o de tokens JWT e criptografia de senhas.\")\r\n    Component(accountmgmt, \"Componente de Gest\u00e3o de Contas\", \"Spring Bean\", \"Orquestra chamadas ao sistema de banco principal para opera\u00e7\u00f5es de conta.\")\r\n    Component(email, \"Componente de Notifica\u00e7\u00e3o por E-mail\", \"Spring Bean\", \"Envia e-mails de redefini\u00e7\u00e3o de senha e e-mails de verifica\u00e7\u00e3o de conta por SMTP.\")\r\n\r\n    Rel(accounts, security, \"Utiliza\")\r\n    Rel(auth, security, \"Utiliza\")\r\n    Rel(reset, security, \"Utiliza\")\r\n    Rel(accountmgmt, mbs, \"Utiliza\", \"XML\/HTTPS\")\r\n    Rel(email, db, \"L\u00ea\", \"JDBC\")\r\n}\r\n\r\nRel(spa, accounts, \"Utiliza\", \"JSON\/HTTPS\")\r\nRel(spa, auth, \"Utiliza\", \"JSON\/HTTPS\")\r\nRel(spa, reset, \"Utiliza\", \"JSON\/HTTPS\")\r\nRel(ma, accounts, \"Utiliza\", \"JSON\/HTTPS\")\r\nRel(ma, auth, \"Utiliza\", \"JSON\/HTTPS\")\r\nRel(ma, reset, \"Utiliza\", \"JSON\/HTTPS\")\r\n@enduml<\/code><\/pre>\n<p><code data-language=\"mermaid\"><br \/>\n<\/code><\/p>\n<p><strong>Racional<\/strong>: Este n\u00edvel mostra como as responsabilidades s\u00e3o divididas (separa\u00e7\u00e3o de preocupa\u00e7\u00f5es) e torna o onboarding de novos desenvolvedores muito mais r\u00e1pido. Voc\u00ea desenha diagramas de componentes apenas para cont\u00eaineres complexos o suficiente para justificar isso.<\/p>\n<h3>Passo 4: Diagrama de C\u00f3digo (N\u00edvel 4) \u2013 Opcional<\/h3>\n<p><strong>Prop\u00f3sito<\/strong>: Mostrar a estrutura interna de um \u00fanico componente (diagrama de classes, sequ\u00eancia, etc.). P\u00fablico-alvo: desenvolvedores trabalhando nesse c\u00f3digo.<\/p>\n<p>Exemplo para o\u00a0<strong>Controlador de Autentica\u00e7\u00e3o<\/strong> componente \u2013 um diagrama de classes UML simples no PlantUML:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/uml.planttext.com\/plantuml\/png\/XL91QiCm4BmR_0VXNX8AWRIb3Js4ECOvz5HA-m0XRHnXUJUiv8HGylTQTkea3gM2rM5cPtPMQE6yP5zNDexYo9K6jv9b9RxZI0Yc6hKYHc0n2q3AJFkCBB6uUsfFZwu8_Gsp9DR0Dt2ep4hdkZ63lcdwyFYIdmYfogADSIBpMPwkdZloOkHPSuoZOrX5jVv9MliDe3TAUaEODGecQu6JRlIzfSBWI37eq2Mj6xSmmvh1RJwf11oDhotVzhx5tvbsHf-j2cZUINheHBK3xhnsqXhTupxS0yUlflS3jkIC9pxy-gqDwkKXS2Whw5FyjP6OJEPYc4syYgH9uf9_TDS9BbGBGDryZXy0\"\/><\/p>\n<p>@startuml<br \/>\ndiagramaDeClasses<\/p>\n<p>skinparam {<br \/>\nroundcorner 8<br \/>\nArrowColor #444444<br \/>\nArrowFontColor #444444<br \/>\nBorderColor #444444<\/p>\n<p>Class {<br \/>\nBorderColor #1A237E<br \/>\nBackgroundColor #E8EAF6<br \/>\nFontColor #1A237E<br \/>\n}<br \/>\n}<\/p>\n<p>class \u201cControladorDeAutenticacao\u201d {<br \/>\n+login(credenciais)<br \/>\n+refreshToken()<br \/>\n}<\/p>\n<p>class \u201cJwtTokenProvider\u201d {<br \/>\n+generateToken(usuario)<br \/>+validateToken(token)<br \/>\n}<\/p>\n<p>class \u201cUserRepository\u201d {<br \/>\n+findByUsername()<br \/>\n}<\/p>\n<p>AuthenticationController ..&gt; JwtTokenProvider : \u201cusa\u201d<br \/>\nAuthenticationController ..&gt; UserRepository : \u201cusa\u201d<br \/>\n@enduml<\/p>\n<p><code data-language=\"mermaid\"><br \/>\n<\/code>Em projetos reais, voc\u00ea frequentemente pula o N\u00edvel 4 e aponta diretamente para o c\u00f3digo-fonte real.<\/p>\n<h3>Passo 5: Diagramas Complementares<\/h3>\n<p><strong>Diagrama Din\u00e2mico<\/strong>\u00a0(exemplo: fluxo de \u201cVisualizar Resumo da Conta\u201d)<\/p>\n<p><img alt=\"\" class=\"alignnone size-full wp-image-15964\" decoding=\"async\" height=\"823\" loading=\"lazy\" sizes=\"auto, (max-width: 533px) 100vw, 533px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8ec710652f.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8ec710652f.png 533w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8ec710652f-194x300.png 194w\" width=\"533\"\/><\/p>\n<p>@startuml<br \/>\n!include https:\/\/static.visual-paradigm.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Deployment.puml<\/p>\n<p>title Diagrama din\u00e2mico para Visualizar Resumo da Conta<\/p>\n<p>Person(customer, \u201cCliente de Banco Pessoal\u201d) {<br \/>\nContainer(spa, \u201cAplica\u00e7\u00e3o de P\u00e1gina \u00danica\u201d) {<br \/>\nContainer(api, \u201cAplica\u00e7\u00e3o de API\u201d) {<br \/>\nContainerDb(db, \u201cBanco de Dados\u201d) {<br \/>\nSystem_Ext(coreBanking, \u201cSistema de Banco Central\u201d)<br \/>\n}<br \/>\n}<br \/>\n}<br \/>\n}<\/p>\n<p>Rel(customer, spa, \u201c1. Clica em \u2018Contas\u2019\u201d, \u201c\u201d)<br \/>\nRel(spa, api, \u201c2. GET \/accounts\u201d, \u201cJSON\/HTTPS\u201d)<br \/>\nRel(api, db, \u201c3. Ler resumo em cache\u201d, \u201c\u201d)<br \/>\nRel(api, coreBanking, \u201c4. Buscar dados mais recentes\u201d, \u201c\u201d)<br \/>\nRel(api, spa, \u201c5. Retornar JSON\u201d, \u201c\u201d)<\/p>\n<p>MOSTRAR_LEGENDA()<br \/>\n@enduml<code data-language=\"mermaid\"><br \/>\n<\/code><\/p>\n<p><strong>Diagrama de Implanta\u00e7\u00e3o<\/strong>\u00a0(mapeamento f\u00edsico de alto n\u00edvel):<\/p>\n<p id=\"EQNbTiP\"><img alt=\"\" class=\"alignnone size-full wp-image-15965\" decoding=\"async\" height=\"562\" loading=\"lazy\" sizes=\"auto, (max-width: 714px) 100vw, 714px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8edea159ca.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8edea159ca.png 714w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8edea159ca-300x236.png 300w\" width=\"714\"\/><\/p>\n<p>@startuml<br \/>\n!include https:\/\/static.visual-paradigm.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Deployment.puml<\/p>\n<p>t\u00edtulo Diagrama de Implanta\u00e7\u00e3o para o Sistema de Banco Online<\/p>\n<p>N\u00f3_de_Implanta\u00e7\u00e3o(aws, \u201cAmazon Web Services\u201d, \u201cCloud\u201d) {<br \/>\nN\u00f3_de_Implanta\u00e7\u00e3o(ec2, \u201cGrupo de Auto-Escalabilidade EC2\u201d, \u201cLinux\u201d) {<br \/>\nCont\u00eainer(api, \u201cAplica\u00e7\u00e3o da API\u201d, \u201cJava Spring Boot\u201d)<br \/>\n}<br \/>\nN\u00f3_de_Implanta\u00e7\u00e3o(rds, \u201cRDS\u201d, \u201cPostgreSQL\u201d) {<br \/>\nCont\u00eainerBd(db, \u201cBanco de Dados\u201d)<br \/>\n}<br \/>\n}<\/p>\n<p>N\u00f3_de_Implanta\u00e7\u00e3o(deviceCliente, \u201cDispositivo do Cliente\u201d, \u201cWeb\/M\u00f3vel\u201d) {<br \/>\nCont\u00eainer(spa, \u201cAplica\u00e7\u00e3o de P\u00e1gina \u00danica\u201d)<br \/>\nCont\u00eainer(mobile, \u201cAplicativo M\u00f3vel\u201d)<br \/>\n}<\/p>\n<p>Sistema_Ext(sistemaBancarioPrincipal, \u201cSistema de Banco Principal (mainframe local)\u201d)<\/p>\n<p>Rel(spa, api, \u201cFaz chamadas \u00e0 API para\u201d, \u201cHTTPS\u201d)<br \/>\nRel(mobile, api, \u201cFaz chamadas \u00e0 API para\u201d, \u201cHTTPS\u201d)<br \/>\nRel_U(api, spa, \u201cEntrega ao navegador web do cliente\u201d)<br \/>\nRel_U(api, mobile, \u201cEntrega ao aplicativo m\u00f3vel\u201d)<\/p>\n<p>MOSTRAR_LEGENDA()<br \/>\n@enduml<\/p>\n<pre class=\"lang-mermaid\"><code data-language=\"mermaid\"><\/code><\/pre>\n<h3>Como Utilizar Este Estudo de Caso na Pr\u00e1tica<\/h3>\n<ol>\n<li>\n<p>Comece com uma oficina: desenhe o Contexto em um quadro branco.<\/p>\n<\/li>\n<li>\n<p>Itere at\u00e9 Cont\u00eaineres e Componentes usando o PlantUML C4.<\/p>\n<\/li>\n<li>\n<p>Mantenha os diagramas no reposit\u00f3rio de c\u00f3digo (como c\u00f3digo!) para que permane\u00e7am atualizados.<\/p>\n<\/li>\n<li>\n<p>Gere documenta\u00e7\u00e3o viva automaticamente.<\/p>\n<\/li>\n<\/ol>\n<p>Este exemplo exato do Sistema de Banco na Internet \u00e9 a refer\u00eancia oficial criada por Simon Brown e \u00e9 utilizado por milhares de organiza\u00e7\u00f5es em todo o mundo. Ao seguir estas etapas, voc\u00ea agora possui uma descri\u00e7\u00e3o completa e pronta para produ\u00e7\u00e3o da arquitetura, que qualquer pessoa \u2014 desde o CEO at\u00e9 um novo desenvolvedor j\u00fanior \u2014 pode entender no n\u00edvel adequado de detalhes.<\/p>\n<h3>Artigos sobre Diagramas C4<\/h3>\n<ul>\n<li><a href=\"https:\/\/www.archimetric.com\/the-ultimate-guide-to-c4-model-visualization-with-visual-paradigms-ai-tools\/\"><strong>Guia Definitivo para a Visualiza\u00e7\u00e3o do Modelo C4 Usando as Ferramentas de IA do Visual Paradigm<\/strong><\/a>: Este guia explica como aproveitar ferramentas com intelig\u00eancia artificial para automatizar e aprimorar a visualiza\u00e7\u00e3o do modelo C4, acelerando o design de arquitetura de software.<\/li>\n<li><a href=\"https:\/\/www.archimetric.com\/leveraging-visual-paradigms-ai-c4-studio-a-comprehensive-guide-to-streamlined-architectural-documentation\/\"><strong>Aproveitando o Est\u00fadio C4 com IA do Visual Paradigm para Documenta\u00e7\u00e3o de Arquitetura Simplificada<\/strong><\/a>: Este artigo detalha o uso de um est\u00fadio aprimorado com IA para criar documenta\u00e7\u00e3o de arquitetura de software limpa, escal\u00e1vel e sustent\u00e1vel.<\/li>\n<li><a href=\"https:\/\/blog.visual-paradigm.com\/the-ultimate-guide-to-c4-plantuml-studio-revolutionizing-software-architecture-design\/\"><strong>O Guia Definitivo para o Est\u00fadio C4-PlantUML: Revolucionando o Design de Arquitetura de Software<\/strong><\/a>: Este recurso explora a combina\u00e7\u00e3o da automa\u00e7\u00e3o impulsionada por IA, a clareza do modelo C4 e a flexibilidade do PlantUML em uma \u00fanica ferramenta poderosa.<\/li>\n<li><a href=\"https:\/\/www.cybermedian.com\/%F0%9F%A7%A0-a-comprehensive-guide-to-visual-paradigms-ai-powered-c4-plantuml-studio\/\"><strong>Um Guia Compreensivo para o Est\u00fadio C4 PlantUML com IA do Visual Paradigm<\/strong><\/a>: Este guia descreve uma ferramenta desenvolvida especificamente, lan\u00e7ada no final de 2025, que transforma prompts em linguagem natural em diagramas C4 em camadas.<\/li>\n<li><a href=\"https:\/\/www.visual-paradigm.com\/features\/c4-plantuml-studio\/\"><strong>Est\u00fadio C4-PlantUML | Gerador de Diagramas C4 com IA<\/strong><\/a>: Esta vis\u00e3o geral destaca uma ferramenta impulsionada por IA projetada para gerar diagramas de arquitetura de software C4 a partir de descri\u00e7\u00f5es de texto simples.<\/li>\n<li><a href=\"https:\/\/www.archimetric.com\/comprehensive-tutorial-generating-and-modifying-c4-component-diagrams-with-visual-paradigm-ai-chatbot\/\"><strong>Gerando e Modificando Diagramas de Componentes C4 com o Chatbot de IA do Visual Paradigm<\/strong><\/a>: Este tutorial demonstra o uso de um chatbot com IA para criar e aprimorar iterativamente a arquitetura de n\u00edvel de componente para sistemas complexos.<\/li>\n<li><a href=\"https:\/\/ai.visual-paradigm.com\/tool\/ai-powered-c4-plantuml-studio\/about-the-diagrams\/\"><strong>Gerador de Diagramas C4 com IA: N\u00edveis Principais e Vis\u00f5es de Apoio<\/strong><\/a>: Esta p\u00e1gina explica como o gerador de IA suporta os quatro n\u00edveis principais do modelo C4 \u2014 Contexto, Container, Componente e Implanta\u00e7\u00e3o \u2014 para fornecer documenta\u00e7\u00e3o abrangente.<\/li>\n<li><a href=\"https:\/\/updates.visual-paradigm.com\/releases\/ai-diagram-generator-complete-c4-model\/\"><strong>Gerador de Diagramas com IA: Lan\u00e7amento com Suporte Completo ao Modelo C4<\/strong><\/a>: Esta atualiza\u00e7\u00e3o detalha a integra\u00e7\u00e3o de recursos com IA para a cria\u00e7\u00e3o automatizada de diagramas hier\u00e1rquicos do modelo C4.<\/li>\n<li><a href=\"https:\/\/www.ez-knowledge.com\/beyond-the-code-how-ai-automates-c4-model-diagrams-for-devops-and-cloud-teams\/\"><strong>Gerador de Modelo C4 com IA: Automatizando todo o Ciclo de Modelagem<\/strong><\/a>: Este recurso destaca como um chatbot de IA especializado usa prompts conversacionais para garantir consist\u00eancia na documenta\u00e7\u00e3o de arquitetura para equipes DevOps.<\/li>\n<li><a href=\"https:\/\/www.archimetric.com\/comprehensive-review-generic-ai-chatbots-vs-visual-paradigms-c4-tools\/\"><strong>Revis\u00e3o Compreensiva: Chatbots de IA Gen\u00e9ricos vs. Ferramentas C4 do Visual Paradigm<\/strong><\/a>: Esta compara\u00e7\u00e3o explica por que ferramentas especializadas, como o Est\u00fadio C4 PlantUML, fornecem resultados mais estruturados e de qualidade profissional do que modelos de linguagem gen\u00e9ricos.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>O\u00a0modelo C4, criado por Simon Brown, \u00e9 uma forma simples, hier\u00e1rquica e amig\u00e1vel para desenvolvedores de visualizar arquitetura de software.<\/p>\n","protected":false},"author":11,"featured_media":12042,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_yoast_wpseo_title":"","_yoast_wpseo_metadesc":"","footnotes":""},"categories":[110],"tags":[],"class_list":["post-12041","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-c4-model"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Um Estudo de Caso Completo e Passo a Passo: Aplicando o Modelo C4 ao Sistema de Banco Online (Big Bank plc) - Cibermediano<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.cybermedian.com\/pt\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Um Estudo de Caso Completo e Passo a Passo: Aplicando o Modelo C4 ao Sistema de Banco Online (Big Bank plc) - Cibermediano\" \/>\n<meta property=\"og:description\" content=\"O\u00a0modelo C4, criado por Simon Brown, \u00e9 uma forma simples, hier\u00e1rquica e amig\u00e1vel para desenvolvedores de visualizar arquitetura de software.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.cybermedian.com\/pt\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\" \/>\n<meta property=\"og:site_name\" content=\"Cibermediano\" \/>\n<meta property=\"article:published_time\" content=\"2026-03-05T02:48:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png\" \/><meta property=\"og:image\" content=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png\" \/>\n\t<meta property=\"og:image:width\" content=\"527\" \/>\n\t<meta property=\"og:image:height\" content=\"739\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"curtis\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"curtis\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.cybermedian.com\/pt\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.cybermedian.com\/pt\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\"},\"author\":{\"name\":\"curtis\",\"@id\":\"https:\/\/www.cybermedian.com\/pt\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d\"},\"headline\":\"Um Estudo de Caso Completo e Passo a Passo: Aplicando o Modelo C4 ao Sistema de Banco Online (Big Bank plc)\",\"datePublished\":\"2026-03-05T02:48:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.cybermedian.com\/pt\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\"},\"wordCount\":2075,\"image\":{\"@id\":\"https:\/\/www.cybermedian.com\/pt\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.cybermedian.com\/pt\/wp-content\/uploads\/sites\/11\/2026\/03\/img_69a8e7e9e8ab5.png\",\"articleSection\":[\"C4 Model\"],\"inLanguage\":\"pt-PT\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.cybermedian.com\/pt\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\",\"url\":\"https:\/\/www.cybermedian.com\/pt\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\",\"name\":\"Um Estudo de Caso Completo e Passo a Passo: Aplicando o Modelo C4 ao Sistema de Banco Online (Big Bank plc) - Cibermediano\",\"isPartOf\":{\"@id\":\"https:\/\/www.cybermedian.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.cybermedian.com\/pt\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.cybermedian.com\/pt\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.cybermedian.com\/pt\/wp-content\/uploads\/sites\/11\/2026\/03\/img_69a8e7e9e8ab5.png\",\"datePublished\":\"2026-03-05T02:48:15+00:00\",\"author\":{\"@id\":\"https:\/\/www.cybermedian.com\/pt\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.cybermedian.com\/pt\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.cybermedian.com\/pt\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/www.cybermedian.com\/pt\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage\",\"url\":\"https:\/\/www.cybermedian.com\/pt\/wp-content\/uploads\/sites\/11\/2026\/03\/img_69a8e7e9e8ab5.png\",\"contentUrl\":\"https:\/\/www.cybermedian.com\/pt\/wp-content\/uploads\/sites\/11\/2026\/03\/img_69a8e7e9e8ab5.png\",\"width\":527,\"height\":739},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.cybermedian.com\/pt\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.cybermedian.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Um Estudo de Caso Completo e Passo a Passo: Aplicando o Modelo C4 ao Sistema de Banco Online (Big Bank plc)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.cybermedian.com\/pt\/#website\",\"url\":\"https:\/\/www.cybermedian.com\/pt\/\",\"name\":\"Cibermediano\",\"description\":\"Aprendendo uma coisa nova todos os dias\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.cybermedian.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.cybermedian.com\/pt\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d\",\"name\":\"curtis\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/www.cybermedian.com\/pt\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g\",\"caption\":\"curtis\"},\"url\":\"https:\/\/www.cybermedian.com\/pt\/author\/curtis\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Um Estudo de Caso Completo e Passo a Passo: Aplicando o Modelo C4 ao Sistema de Banco Online (Big Bank plc) - Cibermediano","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.cybermedian.com\/pt\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/","og_locale":"pt_PT","og_type":"article","og_title":"Um Estudo de Caso Completo e Passo a Passo: Aplicando o Modelo C4 ao Sistema de Banco Online (Big Bank plc) - Cibermediano","og_description":"O\u00a0modelo C4, criado por Simon Brown, \u00e9 uma forma simples, hier\u00e1rquica e amig\u00e1vel para desenvolvedores de visualizar arquitetura de software.","og_url":"https:\/\/www.cybermedian.com\/pt\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/","og_site_name":"Cibermediano","article_published_time":"2026-03-05T02:48:15+00:00","og_image":[{"url":"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png","type":"","width":"","height":""},{"width":527,"height":739,"url":"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png","type":"image\/png"}],"author":"curtis","twitter_card":"summary_large_image","twitter_image":"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png","twitter_misc":{"Escrito por":"curtis","Tempo estimado de leitura":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.cybermedian.com\/pt\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#article","isPartOf":{"@id":"https:\/\/www.cybermedian.com\/pt\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/"},"author":{"name":"curtis","@id":"https:\/\/www.cybermedian.com\/pt\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d"},"headline":"Um Estudo de Caso Completo e Passo a Passo: Aplicando o Modelo C4 ao Sistema de Banco Online (Big Bank plc)","datePublished":"2026-03-05T02:48:15+00:00","mainEntityOfPage":{"@id":"https:\/\/www.cybermedian.com\/pt\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/"},"wordCount":2075,"image":{"@id":"https:\/\/www.cybermedian.com\/pt\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage"},"thumbnailUrl":"https:\/\/www.cybermedian.com\/pt\/wp-content\/uploads\/sites\/11\/2026\/03\/img_69a8e7e9e8ab5.png","articleSection":["C4 Model"],"inLanguage":"pt-PT"},{"@type":"WebPage","@id":"https:\/\/www.cybermedian.com\/pt\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/","url":"https:\/\/www.cybermedian.com\/pt\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/","name":"Um Estudo de Caso Completo e Passo a Passo: Aplicando o Modelo C4 ao Sistema de Banco Online (Big Bank plc) - Cibermediano","isPartOf":{"@id":"https:\/\/www.cybermedian.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.cybermedian.com\/pt\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage"},"image":{"@id":"https:\/\/www.cybermedian.com\/pt\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage"},"thumbnailUrl":"https:\/\/www.cybermedian.com\/pt\/wp-content\/uploads\/sites\/11\/2026\/03\/img_69a8e7e9e8ab5.png","datePublished":"2026-03-05T02:48:15+00:00","author":{"@id":"https:\/\/www.cybermedian.com\/pt\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d"},"breadcrumb":{"@id":"https:\/\/www.cybermedian.com\/pt\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.cybermedian.com\/pt\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/www.cybermedian.com\/pt\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage","url":"https:\/\/www.cybermedian.com\/pt\/wp-content\/uploads\/sites\/11\/2026\/03\/img_69a8e7e9e8ab5.png","contentUrl":"https:\/\/www.cybermedian.com\/pt\/wp-content\/uploads\/sites\/11\/2026\/03\/img_69a8e7e9e8ab5.png","width":527,"height":739},{"@type":"BreadcrumbList","@id":"https:\/\/www.cybermedian.com\/pt\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.cybermedian.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Um Estudo de Caso Completo e Passo a Passo: Aplicando o Modelo C4 ao Sistema de Banco Online (Big Bank plc)"}]},{"@type":"WebSite","@id":"https:\/\/www.cybermedian.com\/pt\/#website","url":"https:\/\/www.cybermedian.com\/pt\/","name":"Cibermediano","description":"Aprendendo uma coisa nova todos os dias","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.cybermedian.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Person","@id":"https:\/\/www.cybermedian.com\/pt\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d","name":"curtis","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/www.cybermedian.com\/pt\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g","caption":"curtis"},"url":"https:\/\/www.cybermedian.com\/pt\/author\/curtis\/"}]}},"_links":{"self":[{"href":"https:\/\/www.cybermedian.com\/pt\/wp-json\/wp\/v2\/posts\/12041","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cybermedian.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cybermedian.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cybermedian.com\/pt\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cybermedian.com\/pt\/wp-json\/wp\/v2\/comments?post=12041"}],"version-history":[{"count":0,"href":"https:\/\/www.cybermedian.com\/pt\/wp-json\/wp\/v2\/posts\/12041\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cybermedian.com\/pt\/wp-json\/wp\/v2\/media\/12042"}],"wp:attachment":[{"href":"https:\/\/www.cybermedian.com\/pt\/wp-json\/wp\/v2\/media?parent=12041"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cybermedian.com\/pt\/wp-json\/wp\/v2\/categories?post=12041"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cybermedian.com\/pt\/wp-json\/wp\/v2\/tags?post=12041"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}