![](\"https:\/\/www.go-deck.com\/wp-content\/uploads\/2026\/08\/img_6a82c395e9a6d.png\")
<\/p>\n<\/p>\n
In the world of software architecture, capturing high-level interactions is often the first step in understanding complex systems. While traditional drawing tools are common, there is a growing preference for defining diagrams through code\u2014a practice known as “Diagram-as-Code.” This approach allows architects to version control their designs and iterate quickly.<\/p>\n
In this tutorial, we will look at a practical example: an Internet Banking System<\/strong>. We will walk through the specific code required to generate a System Context diagram using VPasCode<\/strong>, the PlantUML interface provided by Visual Paradigm.<\/p>\n Before defining any actors or systems, it is important to establish the visual style of our diagram. In the code editor on the left side of the screen, you can see layout directives that control the appearance.<\/p>\n A System Context diagram focuses on the system itself and its immediate environment. To build this, we need to define four distinct elements using specific keywords:<\/p>\n We start with the primary user of the application. Using the This creates the top node in your diagram, representing the individual initiating the interaction.<\/p>\n Next, we define the central application. Here, we use the This component sits at the center of the context, acting as the bridge between the user and backend data.<\/p>\n Banks rarely operate in isolation. They rely on other services. For those external dependencies, we use the Once the boxes are defined, the real story begins with the relationships. We use the The customer accesses the banking system over a secure connection. The relationship is defined as:<\/p>\n This clearly indicates that the user interacts via the HTTPS protocol.<\/p>\n The Internet Banking System then communicates with the external systems. Notice how we specify the protocols used:<\/p>\n By following this workflow in VPasCode, you have successfully modeled a standard banking architecture. You learned how to:<\/p>\n This method provides a rapid way to visualize complex integrations without getting bogged down in manual drawing.<\/p>\n","protected":false},"excerpt":{"rendered":" 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.<\/p>\n","protected":false},"author":1,"featured_media":7757,"template":"","meta":{"_yoast_wpseo_title":"Visualizing Banking Architecture with VPasCode","_yoast_wpseo_metadesc":"Explore how to design a System Context diagram for an Internet Banking System using VPasCode. Learn the syntax and architecture modeling techniques.","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.go-deck.com\/architecting-with-code-a-comprehensive-guide-to-c4-modeling-with-plantuml-and-visual-paradigm\/","source_h1_title":"Architecting with Code: A Comprehensive Guide to C4 Modeling with PlantUML and Visual Paradigm","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-7453","gallery","type-gallery","status-publish","has-post-thumbnail","hentry","asset-category-c4"],"source_url":"https:\/\/www.go-deck.com\/architecting-with-code-a-comprehensive-guide-to-c4-modeling-with-plantuml-and-visual-paradigm\/","source_h1_title":"Architecting with Code: A Comprehensive Guide to C4 Modeling with PlantUML and Visual Paradigm","fifu_image_url":"","fifu_image_alt":"","vp_image_hash":"","yoast_head":"\nSetting the Stage with Layout Directives<\/h2>\n
\n
skinparam Linetype polyline<\/code>: This command ensures that the connecting lines between components appear as polylines (lines with right-angle bends) rather than straight diagonal lines, which often results in a cleaner, more organized look.<\/li>\n<\/ul>\nDefining the Core Components<\/h2>\n
1. The Human Actor<\/h3>\n
Person<\/code> keyword, we define the customer:<\/p>\nPerson(customer, \"Banking Customer\", \"A customer of the bank, with personal bank accounts.\")<\/code><\/div>\n2. The Primary System<\/h3>\n
System<\/code> keyword to represent the Internet Banking platform:<\/p>\nSystem(banking_system, \"Internet Banking System\", \"Allows customers to check accounts, make payments, and manage profile.\")<\/code><\/div>\n3. External Systems<\/h3>\n
System_Ext<\/code> keyword. In our scenario, we have two critical external systems:<\/p>\n\n
Mapping the Interactions (Rel)<\/h2>\n
Rel<\/code> (Relationship) keyword to draw arrows and describe the flow of data.<\/p>\nCustomer Interaction<\/h3>\n
Rel(customer, banking_system, \"Uses\", \"HTTPS\")<\/code><\/div>\nInternal Communications<\/h3>\n
\n
Summary of Key Learnings<\/h2>\n
\n
Person<\/code>) and technical systems (System<\/code>, System_Ext<\/code>).<\/li>\n