{"id":8105,"date":"2026-08-21T06:04:25","date_gmt":"2026-08-21T06:04:25","guid":{"rendered":"https:\/\/www.learn-vp.com\/pl\/gallery\/mastering-software-architecture-a-deep-dive-into-c4-component-diagrams-using-a-banking-system-example\/"},"modified":"2026-10-09T04:21:51","modified_gmt":"2026-10-09T04:21:51","slug":"mastering-software-architecture-a-deep-dive-into-c4-component-diagrams-using-a-banking-system-example","status":"publish","type":"gallery","link":"https:\/\/www.learn-vp.com\/pl\/gallery\/mastering-software-architecture-a-deep-dive-into-c4-component-diagrams-using-a-banking-system-example\/","title":{"rendered":"Mastering Software Architecture: A Deep Dive into C4 Component Diagrams using a Banking System Example"},"content":{"rendered":"<p><img decoding=\"async\" style=\"max-width: 100%; height: auto;\" src=\"https:\/\/online.visual-paradigm.com\/repository\/images\/f8ca52e5-8e0f-45ec-a8fe-d2e2933518e4\/c4-model-design\/c4-model-component-diagram-for-internet-banking-system.png\" alt=\"C4 model architecture diagram showing API application controllers, containers, and software systems.\" \/><\/p>\n<p>Visualizing complex software systems can be a daunting task, but the <strong>C4 model<\/strong> provides a structured, hierarchical approach to make architecture clear for everyone involved. In this tutorial, we will walk through a specific <strong>C4 Component Diagram<\/strong> representing a secure Internet Banking System. This diagram serves as a perfect example of how to document the internal logic of a backend system, its dependencies, and its interactions with external users.<\/p>\n<p>By understanding this diagram, you will learn how to break down a monolithic system into manageable components, identify key technologies (like Spring MVC), and map out data flows between databases and legacy systems.<\/p>\n<h2>Understanding the C4 Model: Where This Diagram Fits<\/h2>\n<p>The C4 model consists of four levels: Context, Container, Component, and Code. The diagram provided is a <strong>Level 3: Component Diagram<\/strong>. It zooms in on a single container\u2014the <em>API Application<\/em>\u2014to show how its internal parts work together.<\/p>\n<ul>\n<li><strong>Level 1 (Context):<\/strong> Shows the system in relation to users and external systems (not shown here).<\/li>\n<li><strong>Level 2 (Container):<\/strong> Shows the high-level building blocks (e.g., Web App, Mobile App, API). This is the dotted box in the center.<\/li>\n<li><strong>Level 3 (Component):<\/strong> <em>(This Diagram)<\/em> Shows the distinct parts inside a container and their responsibilities.<\/li>\n<li><strong>Level 4 (Code):<\/strong> Shows the class structure (not applicable here).<\/li>\n<\/ul>\n<figure>\n  <img decoding=\"async\" src=\"https:\/\/www.learn-vp.com\/pl\/wp-content\/uploads\/sites\/10\/2026\/08\/c4-model-hierarchy-levels-infographic.jpg\" alt=\"Infographic illustrating the four hierarchical levels of the C4 model including System Context, Containers, Components, and Code architecture.\" loading=\"lazy\" \/><figcaption>The four architectural layers of the C4 model, moving progressively from broad enterprise context down to individual code classes.<\/figcaption><\/figure>\n<h2>Deconstructing the External Interactions<\/h2>\n<p>At the very top of the diagram, we see the <strong>Client Applications<\/strong> that interact with our system. These are the entry points for the user.<\/p>\n<ul>\n<li><strong>Single-Page Application (SPA):<\/strong> Built with <em>JavaScript and Angular<\/em>. This provides the full internet banking functionality to customers via a web browser.<\/li>\n<li><strong>Mobile App:<\/strong> Built with <em>Xamarin<\/em>. This provides a limited subset of functionality for mobile users.<\/li>\n<\/ul>\n<p><strong>Connection Logic:<\/strong> Notice the dashed lines connecting these apps to the backend. The label <code>Makes API calls to [JSON \/ HTTPS]<\/code> indicates that these clients communicate with the API via standard RESTful web services using JSON data over secure HTTPS connections.<\/p>\n<h2>The Core: The API Application Container<\/h2>\n<p>The large dotted rectangle in the middle represents the <strong>API Application Container<\/strong>. This is the backend server responsible for handling business logic. Inside this container, we see three primary &#8220;Controller&#8221; components that handle specific user requests:<\/p>\n<h3>1. Sign In Controller<\/h3>\n<p>This component is a <em>Spring MVC Rest Controller<\/em>. Its sole responsibility is to authenticate users. It allows customers to sign in to the Internet Banking System securely.<\/p>\n<h3>2. Reset Password Controller<\/h3>\n<p>Also a <em>Spring MVC Rest Controller<\/em>, this component handles password recovery. It allows users to reset their credentials using a single-use URL, a critical security feature.<\/p>\n<h3>3. Accounts Summary Controller<\/h3>\n<p>This <em>Spring MVC Rest Controller<\/em> is responsible for data retrieval. It provides customers with a high-level summary of their bank accounts.<\/p>\n<h2>Supporting Components and Internal Logic<\/h2>\n<p>Controllers rarely work alone. They delegate specific tasks to supporting components. This separation of concerns keeps the code clean and maintainable.<\/p>\n<h3>The Security Component<\/h3>\n<p>Both the <em>Sign In<\/em> and <em>Reset Password<\/em> controllers rely on the <strong>Security Component<\/strong>. Labeled as a <em>Spring Bean<\/em>, this component encapsulates all logic related to authentication, password hashing, and session management. The arrow labeled <em>Uses [technology]<\/em> indicates a dependency.<\/p>\n<h3>The E-mail Component<\/h3>\n<p>The <strong>E-mail Component<\/strong> (another <em>Spring Bean<\/em>) handles communication. It sends transactional emails to users, such as the password reset link. It does not define <em>how<\/em> the email is sent, only <em>that<\/em> it is sent.<\/p>\n<h3>The Mainframe Banking System Facade<\/h3>\n<p>This is a classic design pattern implementation. The <strong>Mainframe Banking System Facade<\/strong> acts as a wrapper or proxy. It simplifies the interaction with the legacy Mainframe Banking System. Instead of the API talking directly to the complex Mainframe, it talks to the Facade, which handles the translation.<\/p>\n<figure>\n  <img decoding=\"async\" src=\"https:\/\/www.learn-vp.com\/pl\/wp-content\/uploads\/sites\/10\/2026\/08\/spring-mvc-component-interaction-flowchart.jpg\" alt=\"Technical flowchart detailing how Spring MVC controllers interact with security components, email beans, and legacy database layers.\" loading=\"lazy\" \/><figcaption>Detailed interaction flowchart mapping Spring MVC REST controllers to underlying security beans, data layers, and external service facades.<\/figcaption><\/figure>\n<figure class=\"wp-block-image size-full aligncenter\"><\/figure>\n<h2>External Systems and Data Storage<\/h2>\n<p>Finally, the diagram shows what sits outside the API Application but is essential for its operation. These are the supporting systems at the bottom.<\/p>\n<ul>\n<li><strong>Database (Oracle Database Schema):<\/strong> The <em>Security Component<\/em> reads from and writes to this database using <strong>JDBC<\/strong> (Java Database Connectivity). It stores user registration info, hashed credentials, and access logs.<\/li>\n<li><strong>E-mail System (Microsoft Exchange):<\/strong> The <em>E-mail Component<\/em> sends emails using this internal system.<\/li>\n<li><strong>Mainframe Banking System:<\/strong> The <em>Mainframe Facade<\/em> communicates with this legacy system using <strong>XML \/ HTTPS<\/strong>. This system stores the &#8220;source of truth&#8221; for customer accounts and transactions.<\/li>\n<\/ul>\n<h2>Key Takeaways for Developers<\/h2>\n<p>By modeling your system this way, you gain several advantages:<\/p>\n<ol>\n<li><strong>Clarity:<\/strong> You can instantly see that the API uses Spring MVC for controllers and Spring Beans for logic.<\/li>\n<li><strong>Dependency Management:<\/strong> It becomes obvious that if the Database goes down, the Sign In functionality is broken.<\/li>\n<li><strong>Technology Stack Visibility:<\/strong> Stakeholders can see that the backend relies on Oracle and a Mainframe, which might influence future migration plans.<\/li>\n<\/ol>\n<p>Whether you are using Visual Paradigm\u2019s AI tools or drawing by hand, adhering to the C4 model ensures your architecture documentation remains readable, regardless of how complex your software becomes.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Master C4 Component Diagrams with a secure Internet Banking example to deconstruct backend systems, identify Spring MVC technologies, and map data flows effectively.<\/p>\n","protected":false},"author":1,"featured_media":8106,"template":"","meta":{"_yoast_wpseo_title":"Mastering Software Architecture: A Deep Dive into C4 Component Diagrams using a Banking System Example","_yoast_wpseo_metadesc":"Master C4 Component Diagrams with a secure Internet Banking example to deconstruct backend systems, identify Spring MVC technologies, and map data flows effectively.","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.archimetric.com\/the-c4-model-a-comprehensive-guide-to-visualizing-software-architecture-with-ai-powered-tools\/","source_h1_title":"The C4 Model: A Comprehensive Guide to Visualizing Software Architecture with AI-Powered Tools","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":"14773bfa72b29e043baaa946e7e1f40e8b841e09a8a6348433d43493f9c1cda2"},"asset-category":[17],"class_list":["post-8105","gallery","type-gallery","status-publish","has-post-thumbnail","hentry","asset-category-c4"],"source_url":"https:\/\/www.archimetric.com\/the-c4-model-a-comprehensive-guide-to-visualizing-software-architecture-with-ai-powered-tools\/","source_h1_title":"The C4 Model: A Comprehensive Guide to Visualizing Software Architecture with AI-Powered Tools","fifu_image_url":"","fifu_image_alt":"","vp_image_hash":"14773bfa72b29e043baaa946e7e1f40e8b841e09a8a6348433d43493f9c1cda2","yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Mastering Software Architecture: A Deep Dive into C4 Component Diagrams using a Banking System Example<\/title>\n<meta name=\"description\" content=\"Master C4 Component Diagrams with a secure Internet Banking example to deconstruct backend systems, identify Spring MVC technologies, and map data flows effectively.\" \/>\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\/pl\/gallery\/mastering-software-architecture-a-deep-dive-into-c4-component-diagrams-using-a-banking-system-example\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mastering Software Architecture: A Deep Dive into C4 Component Diagrams using a Banking System Example\" \/>\n<meta property=\"og:description\" content=\"Master C4 Component Diagrams with a secure Internet Banking example to deconstruct backend systems, identify Spring MVC technologies, and map data flows effectively.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.learn-vp.com\/pl\/gallery\/mastering-software-architecture-a-deep-dive-into-c4-component-diagrams-using-a-banking-system-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Learn VP\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-09T04:21:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/online.visual-paradigm.com\/repository\/images\/f8ca52e5-8e0f-45ec-a8fe-d2e2933518e4\/c4-model-design\/c4-model-component-diagram-for-internet-banking-system.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=\"Szacowany czas czytania\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minuty\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.learn-vp.com\\\/pl\\\/gallery\\\/mastering-software-architecture-a-deep-dive-into-c4-component-diagrams-using-a-banking-system-example\\\/\",\"url\":\"https:\\\/\\\/www.learn-vp.com\\\/pl\\\/gallery\\\/mastering-software-architecture-a-deep-dive-into-c4-component-diagrams-using-a-banking-system-example\\\/\",\"name\":\"Mastering Software Architecture: A Deep Dive into C4 Component Diagrams using a Banking System Example\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.learn-vp.com\\\/pl\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.learn-vp.com\\\/pl\\\/gallery\\\/mastering-software-architecture-a-deep-dive-into-c4-component-diagrams-using-a-banking-system-example\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.learn-vp.com\\\/pl\\\/gallery\\\/mastering-software-architecture-a-deep-dive-into-c4-component-diagrams-using-a-banking-system-example\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/online.visual-paradigm.com\\\/repository\\\/images\\\/f8ca52e5-8e0f-45ec-a8fe-d2e2933518e4\\\/c4-model-design\\\/c4-model-component-diagram-for-internet-banking-system.png\",\"datePublished\":\"2026-08-21T06:04:25+00:00\",\"dateModified\":\"2026-10-09T04:21:51+00:00\",\"description\":\"Master C4 Component Diagrams with a secure Internet Banking example to deconstruct backend systems, identify Spring MVC technologies, and map data flows effectively.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.learn-vp.com\\\/pl\\\/gallery\\\/mastering-software-architecture-a-deep-dive-into-c4-component-diagrams-using-a-banking-system-example\\\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.learn-vp.com\\\/pl\\\/gallery\\\/mastering-software-architecture-a-deep-dive-into-c4-component-diagrams-using-a-banking-system-example\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\\\/\\\/www.learn-vp.com\\\/pl\\\/gallery\\\/mastering-software-architecture-a-deep-dive-into-c4-component-diagrams-using-a-banking-system-example\\\/#primaryimage\",\"url\":\"https:\\\/\\\/online.visual-paradigm.com\\\/repository\\\/images\\\/f8ca52e5-8e0f-45ec-a8fe-d2e2933518e4\\\/c4-model-design\\\/c4-model-component-diagram-for-internet-banking-system.png\",\"contentUrl\":\"https:\\\/\\\/online.visual-paradigm.com\\\/repository\\\/images\\\/f8ca52e5-8e0f-45ec-a8fe-d2e2933518e4\\\/c4-model-design\\\/c4-model-component-diagram-for-internet-banking-system.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.learn-vp.com\\\/pl\\\/gallery\\\/mastering-software-architecture-a-deep-dive-into-c4-component-diagrams-using-a-banking-system-example\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.learn-vp.com\\\/pl\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mastering Software Architecture: A Deep Dive into C4 Component Diagrams using a Banking System Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.learn-vp.com\\\/pl\\\/#website\",\"url\":\"https:\\\/\\\/www.learn-vp.com\\\/pl\\\/\",\"name\":\"Learn VP\",\"description\":\"Learn VP\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.learn-vp.com\\\/pl\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.learn-vp.com\\\/pl\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pl-PL\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.learn-vp.com\\\/pl\\\/#organization\",\"name\":\"Learn VP\",\"url\":\"https:\\\/\\\/www.learn-vp.com\\\/pl\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\\\/\\\/www.learn-vp.com\\\/pl\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.learn-vp.com\\\/pl\\\/wp-content\\\/uploads\\\/sites\\\/10\\\/2026\\\/08\\\/cropped-Gemini_Generated_Image_n6bgztn6bgztn6bg-clean-e1787131920742.png\",\"contentUrl\":\"https:\\\/\\\/www.learn-vp.com\\\/pl\\\/wp-content\\\/uploads\\\/sites\\\/10\\\/2026\\\/08\\\/cropped-Gemini_Generated_Image_n6bgztn6bgztn6bg-clean-e1787131920742.png\",\"width\":463,\"height\":404,\"caption\":\"Learn VP\"},\"image\":{\"@id\":\"https:\\\/\\\/www.learn-vp.com\\\/pl\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Mastering Software Architecture: A Deep Dive into C4 Component Diagrams using a Banking System Example","description":"Master C4 Component Diagrams with a secure Internet Banking example to deconstruct backend systems, identify Spring MVC technologies, and map data flows effectively.","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\/pl\/gallery\/mastering-software-architecture-a-deep-dive-into-c4-component-diagrams-using-a-banking-system-example\/","og_locale":"pl_PL","og_type":"article","og_title":"Mastering Software Architecture: A Deep Dive into C4 Component Diagrams using a Banking System Example","og_description":"Master C4 Component Diagrams with a secure Internet Banking example to deconstruct backend systems, identify Spring MVC technologies, and map data flows effectively.","og_url":"https:\/\/www.learn-vp.com\/pl\/gallery\/mastering-software-architecture-a-deep-dive-into-c4-component-diagrams-using-a-banking-system-example\/","og_site_name":"Learn VP","article_modified_time":"2026-10-09T04:21:51+00:00","og_image":[{"url":"https:\/\/online.visual-paradigm.com\/repository\/images\/f8ca52e5-8e0f-45ec-a8fe-d2e2933518e4\/c4-model-design\/c4-model-component-diagram-for-internet-banking-system.png","width":1024,"height":1024,"type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Szacowany czas czytania":"4 minuty"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.learn-vp.com\/pl\/gallery\/mastering-software-architecture-a-deep-dive-into-c4-component-diagrams-using-a-banking-system-example\/","url":"https:\/\/www.learn-vp.com\/pl\/gallery\/mastering-software-architecture-a-deep-dive-into-c4-component-diagrams-using-a-banking-system-example\/","name":"Mastering Software Architecture: A Deep Dive into C4 Component Diagrams using a Banking System Example","isPartOf":{"@id":"https:\/\/www.learn-vp.com\/pl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.learn-vp.com\/pl\/gallery\/mastering-software-architecture-a-deep-dive-into-c4-component-diagrams-using-a-banking-system-example\/#primaryimage"},"image":{"@id":"https:\/\/www.learn-vp.com\/pl\/gallery\/mastering-software-architecture-a-deep-dive-into-c4-component-diagrams-using-a-banking-system-example\/#primaryimage"},"thumbnailUrl":"https:\/\/online.visual-paradigm.com\/repository\/images\/f8ca52e5-8e0f-45ec-a8fe-d2e2933518e4\/c4-model-design\/c4-model-component-diagram-for-internet-banking-system.png","datePublished":"2026-08-21T06:04:25+00:00","dateModified":"2026-10-09T04:21:51+00:00","description":"Master C4 Component Diagrams with a secure Internet Banking example to deconstruct backend systems, identify Spring MVC technologies, and map data flows effectively.","breadcrumb":{"@id":"https:\/\/www.learn-vp.com\/pl\/gallery\/mastering-software-architecture-a-deep-dive-into-c4-component-diagrams-using-a-banking-system-example\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.learn-vp.com\/pl\/gallery\/mastering-software-architecture-a-deep-dive-into-c4-component-diagrams-using-a-banking-system-example\/"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/www.learn-vp.com\/pl\/gallery\/mastering-software-architecture-a-deep-dive-into-c4-component-diagrams-using-a-banking-system-example\/#primaryimage","url":"https:\/\/online.visual-paradigm.com\/repository\/images\/f8ca52e5-8e0f-45ec-a8fe-d2e2933518e4\/c4-model-design\/c4-model-component-diagram-for-internet-banking-system.png","contentUrl":"https:\/\/online.visual-paradigm.com\/repository\/images\/f8ca52e5-8e0f-45ec-a8fe-d2e2933518e4\/c4-model-design\/c4-model-component-diagram-for-internet-banking-system.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.learn-vp.com\/pl\/gallery\/mastering-software-architecture-a-deep-dive-into-c4-component-diagrams-using-a-banking-system-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.learn-vp.com\/pl\/"},{"@type":"ListItem","position":2,"name":"Mastering Software Architecture: A Deep Dive into C4 Component Diagrams using a Banking System Example"}]},{"@type":"WebSite","@id":"https:\/\/www.learn-vp.com\/pl\/#website","url":"https:\/\/www.learn-vp.com\/pl\/","name":"Learn VP","description":"Learn VP","publisher":{"@id":"https:\/\/www.learn-vp.com\/pl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.learn-vp.com\/pl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pl-PL"},{"@type":"Organization","@id":"https:\/\/www.learn-vp.com\/pl\/#organization","name":"Learn VP","url":"https:\/\/www.learn-vp.com\/pl\/","logo":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/www.learn-vp.com\/pl\/#\/schema\/logo\/image\/","url":"https:\/\/www.learn-vp.com\/pl\/wp-content\/uploads\/sites\/10\/2026\/08\/cropped-Gemini_Generated_Image_n6bgztn6bgztn6bg-clean-e1787131920742.png","contentUrl":"https:\/\/www.learn-vp.com\/pl\/wp-content\/uploads\/sites\/10\/2026\/08\/cropped-Gemini_Generated_Image_n6bgztn6bgztn6bg-clean-e1787131920742.png","width":463,"height":404,"caption":"Learn VP"},"image":{"@id":"https:\/\/www.learn-vp.com\/pl\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.learn-vp.com\/pl\/wp-json\/wp\/v2\/gallery\/8105","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.learn-vp.com\/pl\/wp-json\/wp\/v2\/gallery"}],"about":[{"href":"https:\/\/www.learn-vp.com\/pl\/wp-json\/wp\/v2\/types\/gallery"}],"author":[{"embeddable":true,"href":"https:\/\/www.learn-vp.com\/pl\/wp-json\/wp\/v2\/users\/1"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.learn-vp.com\/pl\/wp-json\/wp\/v2\/media\/8106"}],"wp:attachment":[{"href":"https:\/\/www.learn-vp.com\/pl\/wp-json\/wp\/v2\/media?parent=8105"}],"wp:term":[{"taxonomy":"asset-category","embeddable":true,"href":"https:\/\/www.learn-vp.com\/pl\/wp-json\/wp\/v2\/asset-category?post=8105"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}