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.
A PlantUML-based diagram illustrating the system context of an online banking platform, featuring a Bank Customer and Back Office Admin interacting with the central Online Banking Platform. The platform connects to external systems including a Core Banking Mainframe, Email Service, and OAuth2 Provider, with labeled relationships indicating communication protocols such as HTTPS, REST/SOAP, SMTP/API, and OIDC.
A before-and-after comparison of an E-commerce platform use case diagram demonstrating refinement from a basic model to an advanced version incorporating additional system functionalities like payment handling and inventory checks. The transformation introduces specialized use cases including Handle Payment Failure, Check Inventory Availability, and Apply Discount Code while maintaining core customer interactions.
A flowchart illustrates “Conversation-Driven C4 Modeling,” where a natural language prompt for an e-commerce system is converted by an AI chatbot into production-grade PlantUML code and a corresponding C4 architecture diagram.
VPasCode displays a C4 PlantUML component diagram for an API Gateway and Backend service, showing a Single-Page App in React and TypeScript communicating with Auth Controller, Order Controller, Order Service, and Order Repository components connected to a PostgreSQL database.
A VPasCode editor displays a PlantUML C4 container diagram for an E-Commerce Platform, showing its architecture with an Online Shopper interacting with a Single-Page App, API Gateway, Database, Cache Layer, and Payment Gateway. The left panel contains the code using React, TypeScript, Node.js, Express, PostgreSQL, and Redis components, while the right panel renders the corresponding visual diagram illustrating data flows and system boundaries.
A System Context Diagram for an E-Commerce Platform displays the central system and its interactions with four external entities: Online Shopper, Back-office Admin, Payment Gateway, Global Shipping API, and CRM System. The diagram illustrates data flows labeled with protocols such as HTTPS, REST API, and Webhook connecting the central platform to these external actors.
A VPasCode PlantUML interface displays the code and rendered System Context diagram for an Internet Banking System, illustrating the interaction between a Banking Customer and internal systems including an Email System and Mainframe Banking System.
An infographic illustrating the C4 Model for “Architecture as Code” using PlantUML, demonstrating a solution to documentation rot through living, breathing documentation directly alongside source code. The visual contrasts stale diagrams with a synchronized workflow where code, components, and containers are version-controlled and kept in sync using modern tools like Visual Paradigm and VPASCODE.
