C4 Diagrams

C4 diagrams provide a way to describe and communicate software architecture at different levels of detail.

System Context Diagram

C4Context
    title System Context diagram for Internet Banking System
    
    Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
    Person(customerB, "Banking Customer B")
    Person_Ext(customerC, "Banking Customer C", "desc")
    
    System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
    
    System_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
    System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
    
    Rel(customerA, SystemAA, "Uses")
    Rel(SystemAA, SystemE, "Uses")
    Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
    Rel(SystemC, customerA, "Sends e-mails to")
    
    UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
    UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
    UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
    UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
    UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
    
    UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")

Container Diagram

C4Container
    title Container diagram for Internet Banking System

    System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system", $tags="v1.0")
    Person(customer, "Customer", "A customer of the bank, with personal bank accounts")

    Container_Boundary(c1, "Internet Banking") {
        Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA")
        Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to customers via their web browser")
        Container(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device")
        Container(api, "API Application", "Java, Spring Boot", "Provides Internet banking functionality via JSON/HTTPS API")
        ContainerDb(database, "Database", "SQL Database", "Stores user registration information, hashed auth credentials, access logs, etc.")
    }

    System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")

    Rel(customer, web_app, "Uses", "HTTPS")
    UpdateRelStyle(customer, web_app, $offsetX="50")
    Rel(customer, spa, "Uses", "HTTPS")
    UpdateRelStyle(customer, spa, $offsetX="50")
    Rel(customer, mobile_app, "Uses")
    UpdateRelStyle(customer, mobile_app, $offsetY="15")

    Rel_Back(web_app, spa, "Delivers")
    UpdateRelStyle(web_app, spa, $offsetY="15")

    Rel(spa, api, "Uses", "JSON/HTTPS")
    Rel(mobile_app, api, "Uses", "JSON/HTTPS")
    Rel_Back_Neighbor(database, api, "Reads from and writes to", "SQL")

    Rel(api, banking_system, "Uses", "XML/HTTPS")
    Rel(api, email_system, "Sends e-mail using", "SMTP")

    UpdateLayoutConfig($c4ShapeInRow="2", $c4BoundaryInRow="1")

Component Diagram

C4Component
    title Component diagram for Internet Banking System - API Application

    Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.")
    Container(ma, "Mobile App", "Xamarin", "Provides a limited subset of the internet banking functionality to customers via their mobile mobile device.")
    ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
    System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")

    Container_Boundary(api, "API Application") {
        Component(sign, "Sign In Controller", "MVC Rest Controller", "Allows users to sign in to the internet banking system")
        Component(accounts, "Accounts Summary Controller", "MVC Rest Controller", "Provides customers with a summary of their bank accounts")
        Component(security, "Security Component", "Spring Bean", "Provides functionality related to signing in, changing passwords, etc.")
        Component(mbsfacade, "Mainframe Banking System Facade", "Spring Bean", "A facade onto the mainframe banking system.")

        Rel(sign, security, "Uses")
        Rel(accounts, mbsfacade, "Uses")
        Rel(security, db, "Read & write to", "JDBC")
        Rel(mbsfacade, mbs, "Uses", "XML/HTTPS")
    }

    Rel_Back(spa, sign, "Uses", "JSON/HTTPS")
    Rel(spa, accounts, "Uses", "JSON/HTTPS")

    Rel(ma, sign, "Uses", "JSON/HTTPS")
    Rel(ma, accounts, "Uses", "JSON/HTTPS")

    UpdateLayoutConfig($c4ShapeInRow="2", $c4BoundaryInRow="1")

Microservices System Context

C4Context
    title E-Commerce Platform System Context
    
    Person(customer, "Customer", "Person who shops online")
    Person(admin, "Administrator", "Manages the platform")
    Person(vendor, "Vendor", "Sells products on platform")
    
    System(ecommerce, "E-Commerce Platform", "Online shopping platform with multiple services")
    
    System_Ext(payment, "Payment Gateway", "Processes payments")
    System_Ext(shipping, "Shipping Service", "Handles logistics")
    System_Ext(email, "Email Service", "Sends notifications")
    System_Ext(analytics, "Analytics Platform", "Tracks user behavior")
    
    Rel(customer, ecommerce, "Shops using")
    Rel(admin, ecommerce, "Manages")
    Rel(vendor, ecommerce, "Sells through")
    
    Rel(ecommerce, payment, "Processes payments via")
    Rel(ecommerce, shipping, "Arranges shipping via")
    Rel(ecommerce, email, "Sends emails via")
    Rel(ecommerce, analytics, "Sends data to")

Microservices Container View

C4Container
    title E-Commerce Platform - Container View
    
    Person(customer, "Customer")
    Person(admin, "Admin")
    
    Container_Boundary(platform, "E-Commerce Platform") {
        Container(web, "Web Application", "React", "Customer-facing web interface")
        Container(admin_panel, "Admin Panel", "Vue.js", "Administrative interface")
        Container(api_gateway, "API Gateway", "Kong", "Routes requests to services")
        
        Container(user_service, "User Service", "Node.js", "Manages user accounts and authentication")
        Container(product_service, "Product Service", "Java Spring", "Manages product catalog")
        Container(order_service, "Order Service", "Python FastAPI", "Handles order processing")
        Container(cart_service, "Cart Service", "Go", "Manages shopping carts")
        
        ContainerDb(user_db, "User Database", "PostgreSQL", "Stores user data")
        ContainerDb(product_db, "Product Database", "MongoDB", "Stores product data")
        ContainerDb(order_db, "Order Database", "PostgreSQL", "Stores order data")
        ContainerDb(cache, "Cache", "Redis", "Caches frequently accessed data")
    }
    
    System_Ext(payment, "Payment Gateway")
    
    Rel(customer, web, "Uses")
    Rel(admin, admin_panel, "Uses")
    
    Rel(web, api_gateway, "Makes API calls")
    Rel(admin_panel, api_gateway, "Makes API calls")
    
    Rel(api_gateway, user_service, "Routes to")
    Rel(api_gateway, product_service, "Routes to")
    Rel(api_gateway, order_service, "Routes to")
    Rel(api_gateway, cart_service, "Routes to")
    
    Rel(user_service, user_db, "Reads/Writes")
    Rel(product_service, product_db, "Reads/Writes")
    Rel(order_service, order_db, "Reads/Writes")
    
    Rel(cart_service, cache, "Stores cart data")
    Rel(order_service, payment, "Processes payments")
    
    UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")