{"id":7484,"date":"2026-08-17T18:27:46","date_gmt":"2026-08-17T10:27:46","guid":{"rendered":"https:\/\/guides.visual-paradigm.com\/gallery\/online-banking-platform-container-architecture-diagram\/"},"modified":"2026-10-09T04:22:56","modified_gmt":"2026-10-09T04:22:56","slug":"online-banking-platform-container-architecture-diagram","status":"publish","type":"gallery","link":"https:\/\/www.learn-vp.com\/pt\/gallery\/online-banking-platform-container-architecture-diagram\/","title":{"rendered":"Mastering C4: Designing a Secure Online Banking Platform"},"content":{"rendered":"<p><img decoding=\"async\" src=\"https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/08\/img_6a82e0eed06f8.png\" \/><\/p>\n<h2>The Foundation of Modern Application Architecture<\/h2>\n<p>Welcome back to our tutorial series on software architecture visualization. Today, we are diving deep into a classic example that every developer should understand: the <strong>Online Banking Platform<\/strong>. This diagram is a perfect representation of how we use the C4 model to break down complex systems into understandable pieces.<\/p>\n<p>When you look at this architecture, don&#8217;t just see boxes and lines. See a story of data flow, security, and reliability. We are going to walk through this system from the perspective of the user all the way down to the legacy infrastructure.<\/p>\n<h3>Step 1: The Human Element (The Person)<\/h3>\n<p>Every digital system starts with a user. In this diagram, we see the <strong>Bank Customer<\/strong> at the very top. Notice how they are represented as a \u00abPerson\u00bb element. This is crucial because it reminds us that technology serves people.<\/p>\n<p>The customer interacts with the system in two primary ways:<\/p>\n<ul>\n<li><strong>Web Application:<\/strong> For those who prefer browser-based banking.<\/li>\n<li><strong>Mobile App:<\/strong> For users on the go, likely built with cross-platform frameworks like Flutter for efficiency.<\/li>\n<\/ul>\n<p>Both channels communicate over HTTPS, ensuring that the initial handshake between the user and the bank is encrypted and secure.<\/p>\n<h3>Step 2: The Gateway (API Gateway)<\/h3>\n<p>Imagine if your mobile app tried to talk directly to your database or your session cache. It would be chaos. Instead, both the Web and Mobile applications route their requests through a single entry point: the <strong>API Gateway<\/strong>.<\/p>\n<p>In modern architectures, often visualized using tools like Visual Paradigm, the API Gateway acts as a bouncer and a traffic cop. Its responsibilities here include:<\/p>\n<ul>\n<li><strong>Routing:<\/strong> Sending the right request to the right service.<\/li>\n<li><strong>Rate Limiting:<\/strong> Preventing abuse by limiting how many requests a user can make.<\/li>\n<li><strong>Authentication Validation:<\/strong> Checking tokens before letting anyone in.<\/li>\n<\/ul>\n<h3>Step 3: The Core Logic (Account Service)<\/h3>\n<p>Once the request passes through the gateway, it lands in the heart of the application: the <strong>Account Service<\/strong>. This is where the actual business logic lives\u2014calculating balances, processing transactions, and managing account details. By isolating this logic into its own container, we ensure that changes to the account logic won&#8217;t accidentally break the mobile interface.<\/p>\n<h3>Step 4: Supporting Infrastructure &amp; External Systems<\/h3>\n<p>A banking system doesn&#8217;t exist in a vacuum. Look closely at the connections branching out from the Account Service. These represent the critical dependencies required to keep the bank running:<\/p>\n<ul>\n<li><strong>Session Cache (Redis):<\/strong> To keep the user logged in without constantly hitting the database, the system uses a fast in-memory store for JWT tokens and session states.<\/li>\n<li><strong>Account Database (PostgreSQL):<\/strong> The permanent home for financial records. We use SQL here because we need strong consistency for money.<\/li>\n<li><strong>Event Bus (RabbitMQ):<\/strong> Banking isn&#8217;t always synchronous. When a transaction happens, we might want to trigger an email notification or update a dashboard later. The Event Bus handles these asynchronous tasks efficiently.<\/li>\n<li><strong>External Systems:<\/strong> Notice the gray boxes? The <strong>OAuth2 Provider<\/strong> handles identity management, while the <strong>Core Banking Mainframe<\/strong> represents the &#8220;legacy&#8221; backend where the ultimate ledger lives. The mainframe is often slow and rigid, so our modern services sync with it carefully via SOAP protocols.<\/li>\n<\/ul>\n<h2>Summary: Key Takeaways<\/h2>\n<p>By analyzing this C4 diagram, we&#8217;ve uncovered several architectural best practices:<\/p>\n<ol>\n<li><strong>Abstraction:<\/strong> Users don&#8217;t need to know what database is used; they just use the Web or Mobile app.<\/li>\n<li><strong>Security First:<\/strong> Every interaction is validated, starting with OAuth2 and continuing through the API Gateway.<\/li>\n<li><strong>Decoupling:<\/strong> The separation of the frontend, the API layer, and the backend logic allows teams to work independently.<\/li>\n<\/ol>\n<p>Whether you are designing a new fintech startup or refactoring an existing monolith, understanding how these containers interact is the first step toward building robust software.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>C4: A container diagram illustrates the architecture of an Online Banking Platform, showing a Bank Customer interacting with web and mobile application containers that route requests through an API Gateway to an Account Service and backend infrastructure including a Session Cache, Account Database, Event Bus, and external systems for OAuth2 and Core Banking Mainframe.<\/p>\n","protected":false},"author":1,"featured_media":7771,"template":"","meta":{"_yoast_wpseo_title":"Mastering C4: Designing a Secure Online Banking Platform","_yoast_wpseo_metadesc":"Explore how to architect a secure, scalable online banking platform using the C4 Container Model. Learn about API Gateways, microservices, and external integrations.","inline_featured_image":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"source_url":"https:\/\/www.ai-diagrams.com\/stop-dragging-boxes-generating-c4-diagrams-via-vpascode-and-ai-chatbots\/","source_h1_title":"Stop Dragging Boxes: Generating C4 Diagrams via VPasCode and AI Chatbots","fifu_image_url":"","fifu_image_alt":"","_fifu_image_alt":"","fifu_alt":"","_fifu_alt":"","fifu_image_title":"","_fifu_image_title":"","fifu_input_alt":"","vp_image_hash":""},"asset-category":[17],"class_list":["post-7484","gallery","type-gallery","status-publish","has-post-thumbnail","hentry","asset-category-c4"],"source_url":"https:\/\/www.ai-diagrams.com\/stop-dragging-boxes-generating-c4-diagrams-via-vpascode-and-ai-chatbots\/","source_h1_title":"Stop Dragging Boxes: Generating C4 Diagrams via VPasCode and AI Chatbots","fifu_image_url":"","fifu_image_alt":"","vp_image_hash":"","yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Mastering C4: Designing a Secure Online Banking Platform<\/title>\n<meta name=\"description\" content=\"Explore how to architect a secure, scalable online banking platform using the C4 Container Model. Learn about API Gateways, microservices, and external integrations.\" \/>\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.learn-vp.com\/pt\/gallery\/online-banking-platform-container-architecture-diagram\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mastering C4: Designing a Secure Online Banking Platform\" \/>\n<meta property=\"og:description\" content=\"Explore how to architect a secure, scalable online banking platform using the C4 Container Model. Learn about API Gateways, microservices, and external integrations.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.learn-vp.com\/pt\/gallery\/online-banking-platform-container-architecture-diagram\/\" \/>\n<meta property=\"og:site_name\" content=\"Learn VP\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-09T04:22:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/08\/img_6a82e0eed06f8.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.learn-vp.com\\\/pt\\\/gallery\\\/online-banking-platform-container-architecture-diagram\\\/\",\"url\":\"https:\\\/\\\/www.learn-vp.com\\\/pt\\\/gallery\\\/online-banking-platform-container-architecture-diagram\\\/\",\"name\":\"Mastering C4: Designing a Secure Online Banking Platform\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.learn-vp.com\\\/pt\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.learn-vp.com\\\/pt\\\/gallery\\\/online-banking-platform-container-architecture-diagram\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.learn-vp.com\\\/pt\\\/gallery\\\/online-banking-platform-container-architecture-diagram\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.ai-diagrams.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/img_6a82e0eed06f8.png\",\"datePublished\":\"2026-08-17T10:27:46+00:00\",\"dateModified\":\"2026-10-09T04:22:56+00:00\",\"description\":\"Explore how to architect a secure, scalable online banking platform using the C4 Container Model. Learn about API Gateways, microservices, and external integrations.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.learn-vp.com\\\/pt\\\/gallery\\\/online-banking-platform-container-architecture-diagram\\\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.learn-vp.com\\\/pt\\\/gallery\\\/online-banking-platform-container-architecture-diagram\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\\\/\\\/www.learn-vp.com\\\/pt\\\/gallery\\\/online-banking-platform-container-architecture-diagram\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.ai-diagrams.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/img_6a82e0eed06f8.png\",\"contentUrl\":\"https:\\\/\\\/www.ai-diagrams.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/img_6a82e0eed06f8.png\",\"caption\":\"Online Banking Platform Container Architecture Diagram\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.learn-vp.com\\\/pt\\\/gallery\\\/online-banking-platform-container-architecture-diagram\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.learn-vp.com\\\/pt\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mastering C4: Designing a Secure Online Banking Platform\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.learn-vp.com\\\/pt\\\/#website\",\"url\":\"https:\\\/\\\/www.learn-vp.com\\\/pt\\\/\",\"name\":\"Learn VP\",\"description\":\"Learn VP\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.learn-vp.com\\\/pt\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.learn-vp.com\\\/pt\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.learn-vp.com\\\/pt\\\/#organization\",\"name\":\"Learn VP\",\"url\":\"https:\\\/\\\/www.learn-vp.com\\\/pt\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\\\/\\\/www.learn-vp.com\\\/pt\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.learn-vp.com\\\/pt\\\/wp-content\\\/uploads\\\/sites\\\/11\\\/2026\\\/08\\\/cropped-Gemini_Generated_Image_n6bgztn6bgztn6bg-clean-e1787131920742.png\",\"contentUrl\":\"https:\\\/\\\/www.learn-vp.com\\\/pt\\\/wp-content\\\/uploads\\\/sites\\\/11\\\/2026\\\/08\\\/cropped-Gemini_Generated_Image_n6bgztn6bgztn6bg-clean-e1787131920742.png\",\"width\":463,\"height\":404,\"caption\":\"Learn VP\"},\"image\":{\"@id\":\"https:\\\/\\\/www.learn-vp.com\\\/pt\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Mastering C4: Designing a Secure Online Banking Platform","description":"Explore how to architect a secure, scalable online banking platform using the C4 Container Model. Learn about API Gateways, microservices, and external integrations.","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.learn-vp.com\/pt\/gallery\/online-banking-platform-container-architecture-diagram\/","og_locale":"pt_PT","og_type":"article","og_title":"Mastering C4: Designing a Secure Online Banking Platform","og_description":"Explore how to architect a secure, scalable online banking platform using the C4 Container Model. Learn about API Gateways, microservices, and external integrations.","og_url":"https:\/\/www.learn-vp.com\/pt\/gallery\/online-banking-platform-container-architecture-diagram\/","og_site_name":"Learn VP","article_modified_time":"2026-10-09T04:22:56+00:00","og_image":[{"url":"https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/08\/img_6a82e0eed06f8.png","width":1024,"height":1024,"type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Tempo estimado de leitura":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.learn-vp.com\/pt\/gallery\/online-banking-platform-container-architecture-diagram\/","url":"https:\/\/www.learn-vp.com\/pt\/gallery\/online-banking-platform-container-architecture-diagram\/","name":"Mastering C4: Designing a Secure Online Banking Platform","isPartOf":{"@id":"https:\/\/www.learn-vp.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.learn-vp.com\/pt\/gallery\/online-banking-platform-container-architecture-diagram\/#primaryimage"},"image":{"@id":"https:\/\/www.learn-vp.com\/pt\/gallery\/online-banking-platform-container-architecture-diagram\/#primaryimage"},"thumbnailUrl":"https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/08\/img_6a82e0eed06f8.png","datePublished":"2026-08-17T10:27:46+00:00","dateModified":"2026-10-09T04:22:56+00:00","description":"Explore how to architect a secure, scalable online banking platform using the C4 Container Model. Learn about API Gateways, microservices, and external integrations.","breadcrumb":{"@id":"https:\/\/www.learn-vp.com\/pt\/gallery\/online-banking-platform-container-architecture-diagram\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.learn-vp.com\/pt\/gallery\/online-banking-platform-container-architecture-diagram\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/www.learn-vp.com\/pt\/gallery\/online-banking-platform-container-architecture-diagram\/#primaryimage","url":"https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/08\/img_6a82e0eed06f8.png","contentUrl":"https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/08\/img_6a82e0eed06f8.png","caption":"Online Banking Platform Container Architecture Diagram"},{"@type":"BreadcrumbList","@id":"https:\/\/www.learn-vp.com\/pt\/gallery\/online-banking-platform-container-architecture-diagram\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.learn-vp.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Mastering C4: Designing a Secure Online Banking Platform"}]},{"@type":"WebSite","@id":"https:\/\/www.learn-vp.com\/pt\/#website","url":"https:\/\/www.learn-vp.com\/pt\/","name":"Learn VP","description":"Learn VP","publisher":{"@id":"https:\/\/www.learn-vp.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.learn-vp.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/www.learn-vp.com\/pt\/#organization","name":"Learn VP","url":"https:\/\/www.learn-vp.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/www.learn-vp.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/www.learn-vp.com\/pt\/wp-content\/uploads\/sites\/11\/2026\/08\/cropped-Gemini_Generated_Image_n6bgztn6bgztn6bg-clean-e1787131920742.png","contentUrl":"https:\/\/www.learn-vp.com\/pt\/wp-content\/uploads\/sites\/11\/2026\/08\/cropped-Gemini_Generated_Image_n6bgztn6bgztn6bg-clean-e1787131920742.png","width":463,"height":404,"caption":"Learn VP"},"image":{"@id":"https:\/\/www.learn-vp.com\/pt\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.learn-vp.com\/pt\/wp-json\/wp\/v2\/gallery\/7484","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.learn-vp.com\/pt\/wp-json\/wp\/v2\/gallery"}],"about":[{"href":"https:\/\/www.learn-vp.com\/pt\/wp-json\/wp\/v2\/types\/gallery"}],"author":[{"embeddable":true,"href":"https:\/\/www.learn-vp.com\/pt\/wp-json\/wp\/v2\/users\/1"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.learn-vp.com\/pt\/wp-json\/wp\/v2\/media\/7771"}],"wp:attachment":[{"href":"https:\/\/www.learn-vp.com\/pt\/wp-json\/wp\/v2\/media?parent=7484"}],"wp:term":[{"taxonomy":"asset-category","embeddable":true,"href":"https:\/\/www.learn-vp.com\/pt\/wp-json\/wp\/v2\/asset-category?post=7484"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}