Client-side encrypted workspace
The workspace "" has been client-side encrypted, please enter the passphrase to decrypt it.
DSL editor
This browser-based DSL editor provides some rudimentary syntax highlighting and the ability to use the DSL without installing any tooling, but it does not provide access to the full feature set of the DSL. We recommend using the DSL in conjunction with Structurizr Lite or the Structurizr CLI instead. See Help - DSL for more details.
Structurizr Lite
Recommended
Structurizr Lite provides a way to quickly work with a single workspace. It's free to use, and allows you to view/edit diagrams, view documentation, and view architecture decision records defined in a DSL workspace.
The auto-sync feature provides the ability to sync your local changes with a workspace stored on the Structurizr cloud service or an on-premises installation.
Structurizr CLI
Recommended
The Structurizr CLI is a command line utility, designed to be used in conjunction with the Structurizr DSL. It provides the ability to push/pull workspaces to/from the Structurizr cloud service or an on-premises installation, in additional to exporting the views defined in a DSL file to other formats (PlantUML, Mermaid, WebSequenceDiagrams, and Ilograph).
See Getting started with the Structurizr CLI and DSL for more information.
DSL editor
Not recommended
If you'd rather not use Structurizr Lite or the Structurizr CLI, the Structurizr cloud service/on-premises installation provides a basic online DSL editor. The editor provides some rudimentary syntax highlighting and the ability to use the DSL without installing any tooling, but it does not provide access to the full feature set of the DSL.
PlantUML definitions are available via the Structurizr CLI export command,
using the -format plantuml
parameter.
See StructurizrPlantUMLExporter for customisation options.
@startuml set separator none title Internet Banking System - API Application - Components top to bottom direction skinparam { arrowFontSize 10 defaultTextAlignment center wrapWidth 200 maxMessageSize 100 } hide stereotype skinparam rectangle<<InternetBankingSystem.APIApplication.AccountsSummaryController>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 shadowing false } skinparam database<<InternetBankingSystem.Database>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam rectangle<<InternetBankingSystem.APIApplication.EmailComponent>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 shadowing false } skinparam rectangle<<EmailSystem>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b shadowing false } skinparam rectangle<<MainframeBankingSystem>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b shadowing false } skinparam rectangle<<InternetBankingSystem.APIApplication.MainframeBankingSystemFacade>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 shadowing false } skinparam rectangle<<InternetBankingSystem.MobileApp>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam rectangle<<InternetBankingSystem.APIApplication.ResetPasswordController>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 shadowing false } skinparam rectangle<<InternetBankingSystem.APIApplication.SecurityComponent>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 shadowing false } skinparam rectangle<<InternetBankingSystem.APIApplication.SignInController>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 shadowing false } skinparam rectangle<<InternetBankingSystem.SinglePageApplication>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam rectangle<<InternetBankingSystem.APIApplication>> { BorderColor #2e6295 FontColor #2e6295 shadowing false } rectangle "==Mainframe Banking System\n<size:10>[Software System]</size>\n\nStores all of the core banking information about customers, accounts, transactions, etc." <<MainframeBankingSystem>> as MainframeBankingSystem rectangle "==E-mail System\n<size:10>[Software System]</size>\n\nThe internal Microsoft Exchange e-mail system." <<EmailSystem>> as EmailSystem rectangle "==Single-Page Application\n<size:10>[Container: JavaScript and Angular]</size>\n\nProvides all of the Internet banking functionality to customers via their web browser." <<InternetBankingSystem.SinglePageApplication>> as InternetBankingSystem.SinglePageApplication rectangle "==Mobile App\n<size:10>[Container: Xamarin]</size>\n\nProvides a limited subset of the Internet banking functionality to customers via their mobile device." <<InternetBankingSystem.MobileApp>> as InternetBankingSystem.MobileApp database "==Database\n<size:10>[Container: Oracle Database Schema]</size>\n\nStores user registration information, hashed authentication credentials, access logs, etc." <<InternetBankingSystem.Database>> as InternetBankingSystem.Database rectangle "API Application\n<size:10>[Container: Java and Spring MVC]</size>" <<InternetBankingSystem.APIApplication>> { rectangle "==Sign In Controller\n<size:10>[Component: Spring MVC Rest Controller]</size>\n\nAllows users to sign in to the Internet Banking System." <<InternetBankingSystem.APIApplication.SignInController>> as InternetBankingSystem.APIApplication.SignInController rectangle "==Accounts Summary Controller\n<size:10>[Component: Spring MVC Rest Controller]</size>\n\nProvides customers with a summary of their bank accounts." <<InternetBankingSystem.APIApplication.AccountsSummaryController>> as InternetBankingSystem.APIApplication.AccountsSummaryController rectangle "==Reset Password Controller\n<size:10>[Component: Spring MVC Rest Controller]</size>\n\nAllows users to reset their passwords with a single use URL." <<InternetBankingSystem.APIApplication.ResetPasswordController>> as InternetBankingSystem.APIApplication.ResetPasswordController rectangle "==Security Component\n<size:10>[Component: Spring Bean]</size>\n\nProvides functionality related to signing in, changing passwords, etc." <<InternetBankingSystem.APIApplication.SecurityComponent>> as InternetBankingSystem.APIApplication.SecurityComponent rectangle "==Mainframe Banking System Facade\n<size:10>[Component: Spring Bean]</size>\n\nA facade onto the mainframe banking system." <<InternetBankingSystem.APIApplication.MainframeBankingSystemFacade>> as InternetBankingSystem.APIApplication.MainframeBankingSystemFacade rectangle "==E-mail Component\n<size:10>[Component: Spring Bean]</size>\n\nSends e-mails to users." <<InternetBankingSystem.APIApplication.EmailComponent>> as InternetBankingSystem.APIApplication.EmailComponent } InternetBankingSystem.SinglePageApplication .[#707070,thickness=2].> InternetBankingSystem.APIApplication.SignInController : "<color:#707070>Makes API calls to\n<color:#707070><size:8>[JSON/HTTPS]</size>" InternetBankingSystem.SinglePageApplication .[#707070,thickness=2].> InternetBankingSystem.APIApplication.AccountsSummaryController : "<color:#707070>Makes API calls to\n<color:#707070><size:8>[JSON/HTTPS]</size>" InternetBankingSystem.SinglePageApplication .[#707070,thickness=2].> InternetBankingSystem.APIApplication.ResetPasswordController : "<color:#707070>Makes API calls to\n<color:#707070><size:8>[JSON/HTTPS]</size>" InternetBankingSystem.MobileApp .[#707070,thickness=2].> InternetBankingSystem.APIApplication.SignInController : "<color:#707070>Makes API calls to\n<color:#707070><size:8>[JSON/HTTPS]</size>" InternetBankingSystem.MobileApp .[#707070,thickness=2].> InternetBankingSystem.APIApplication.AccountsSummaryController : "<color:#707070>Makes API calls to\n<color:#707070><size:8>[JSON/HTTPS]</size>" InternetBankingSystem.MobileApp .[#707070,thickness=2].> InternetBankingSystem.APIApplication.ResetPasswordController : "<color:#707070>Makes API calls to\n<color:#707070><size:8>[JSON/HTTPS]</size>" InternetBankingSystem.APIApplication.SignInController .[#707070,thickness=2].> InternetBankingSystem.APIApplication.SecurityComponent : "<color:#707070>Uses" InternetBankingSystem.APIApplication.AccountsSummaryController .[#707070,thickness=2].> InternetBankingSystem.APIApplication.MainframeBankingSystemFacade : "<color:#707070>Uses" InternetBankingSystem.APIApplication.ResetPasswordController .[#707070,thickness=2].> InternetBankingSystem.APIApplication.SecurityComponent : "<color:#707070>Uses" InternetBankingSystem.APIApplication.ResetPasswordController .[#707070,thickness=2].> InternetBankingSystem.APIApplication.EmailComponent : "<color:#707070>Uses" InternetBankingSystem.APIApplication.SecurityComponent .[#707070,thickness=2].> InternetBankingSystem.Database : "<color:#707070>Reads from and writes to\n<color:#707070><size:8>[SQL/TCP]</size>" InternetBankingSystem.APIApplication.MainframeBankingSystemFacade .[#707070,thickness=2].> MainframeBankingSystem : "<color:#707070>Makes API calls to\n<color:#707070><size:8>[XML/HTTPS]</size>" InternetBankingSystem.APIApplication.EmailComponent .[#707070,thickness=2].> EmailSystem : "<color:#707070>Sends e-mail using" @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml set separator none skinparam { shadowing false arrowFontSize 15 defaultTextAlignment center wrapWidth 100 maxMessageSize 100 } hide stereotype skinparam rectangle<<_transparent>> { BorderColor transparent BackgroundColor transparent FontColor transparent } skinparam rectangle<<1>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 } rectangle "==Component" <<1>> skinparam database<<2>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } database "==Container, Database" <<2>> skinparam rectangle<<3>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } rectangle "==Container, Mobile App" <<3>> skinparam rectangle<<4>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } rectangle "==Container, Web Browser" <<4>> skinparam rectangle<<5>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } rectangle "==Software System, Existing System" <<5>> rectangle "." <<_transparent>> as 6 6 .[#707070,thickness=2].> 6 : "<color:#707070>Relationship" @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml set separator none title Internet Banking System - Containers top to bottom direction skinparam { arrowFontSize 10 defaultTextAlignment center wrapWidth 200 maxMessageSize 100 } hide stereotype skinparam rectangle<<InternetBankingSystem.APIApplication>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam database<<InternetBankingSystem.Database>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam rectangle<<EmailSystem>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b shadowing false } skinparam rectangle<<MainframeBankingSystem>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b shadowing false } skinparam rectangle<<InternetBankingSystem.MobileApp>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam person<<PersonalBankingCustomer>> { BackgroundColor #08427b FontColor #ffffff BorderColor #052e56 shadowing false } skinparam rectangle<<InternetBankingSystem.SinglePageApplication>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam rectangle<<InternetBankingSystem.WebApplication>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam rectangle<<InternetBankingSystem>> { BorderColor #0b4884 FontColor #0b4884 shadowing false } person "==Personal Banking Customer\n<size:10>[Person]</size>\n\nA customer of the bank, with personal bank accounts." <<PersonalBankingCustomer>> as PersonalBankingCustomer rectangle "==Mainframe Banking System\n<size:10>[Software System]</size>\n\nStores all of the core banking information about customers, accounts, transactions, etc." <<MainframeBankingSystem>> as MainframeBankingSystem rectangle "==E-mail System\n<size:10>[Software System]</size>\n\nThe internal Microsoft Exchange e-mail system." <<EmailSystem>> as EmailSystem rectangle "Internet Banking System\n<size:10>[Software System]</size>" <<InternetBankingSystem>> { rectangle "==Web Application\n<size:10>[Container: Java and Spring MVC]</size>\n\nDelivers the static content and the Internet banking single page application." <<InternetBankingSystem.WebApplication>> as InternetBankingSystem.WebApplication rectangle "==API Application\n<size:10>[Container: Java and Spring MVC]</size>\n\nProvides Internet banking functionality via a JSON/HTTPS API." <<InternetBankingSystem.APIApplication>> as InternetBankingSystem.APIApplication database "==Database\n<size:10>[Container: Oracle Database Schema]</size>\n\nStores user registration information, hashed authentication credentials, access logs, etc." <<InternetBankingSystem.Database>> as InternetBankingSystem.Database rectangle "==Single-Page Application\n<size:10>[Container: JavaScript and Angular]</size>\n\nProvides all of the Internet banking functionality to customers via their web browser." <<InternetBankingSystem.SinglePageApplication>> as InternetBankingSystem.SinglePageApplication rectangle "==Mobile App\n<size:10>[Container: Xamarin]</size>\n\nProvides a limited subset of the Internet banking functionality to customers via their mobile device." <<InternetBankingSystem.MobileApp>> as InternetBankingSystem.MobileApp } EmailSystem .[#707070,thickness=2].> PersonalBankingCustomer : "<color:#707070>Sends e-mails to" PersonalBankingCustomer .[#707070,thickness=2].> InternetBankingSystem.WebApplication : "<color:#707070>Visits bigbank.com/ib using\n<color:#707070><size:8>[HTTPS]</size>" PersonalBankingCustomer .[#707070,thickness=2].> InternetBankingSystem.SinglePageApplication : "<color:#707070>Views account balances, and makes payments using" PersonalBankingCustomer .[#707070,thickness=2].> InternetBankingSystem.MobileApp : "<color:#707070>Views account balances, and makes payments using" InternetBankingSystem.WebApplication .[#707070,thickness=2].> InternetBankingSystem.SinglePageApplication : "<color:#707070>Delivers to the customer's web browser" InternetBankingSystem.SinglePageApplication .[#707070,thickness=2].> InternetBankingSystem.APIApplication : "<color:#707070>Makes API calls to\n<color:#707070><size:8>[JSON/HTTPS]</size>" InternetBankingSystem.MobileApp .[#707070,thickness=2].> InternetBankingSystem.APIApplication : "<color:#707070>Makes API calls to\n<color:#707070><size:8>[JSON/HTTPS]</size>" InternetBankingSystem.APIApplication .[#707070,thickness=2].> InternetBankingSystem.Database : "<color:#707070>Reads from and writes to\n<color:#707070><size:8>[SQL/TCP]</size>" InternetBankingSystem.APIApplication .[#707070,thickness=2].> MainframeBankingSystem : "<color:#707070>Makes API calls to\n<color:#707070><size:8>[XML/HTTPS]</size>" InternetBankingSystem.APIApplication .[#707070,thickness=2].> EmailSystem : "<color:#707070>Sends e-mail using" @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml set separator none skinparam { shadowing false arrowFontSize 15 defaultTextAlignment center wrapWidth 100 maxMessageSize 100 } hide stereotype skinparam rectangle<<_transparent>> { BorderColor transparent BackgroundColor transparent FontColor transparent } skinparam rectangle<<1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } rectangle "==Container" <<1>> skinparam database<<2>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } database "==Container, Database" <<2>> skinparam rectangle<<3>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } rectangle "==Container, Mobile App" <<3>> skinparam rectangle<<4>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } rectangle "==Container, Web Browser" <<4>> skinparam person<<5>> { BackgroundColor #08427b FontColor #ffffff BorderColor #052e56 } person "==Person, Customer" <<5>> skinparam rectangle<<6>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } rectangle "==Software System, Existing System" <<6>> rectangle "." <<_transparent>> as 7 7 .[#707070,thickness=2].> 7 : "<color:#707070>Relationship" @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml set separator none title Internet Banking System - Deployment - Development top to bottom direction skinparam { arrowFontSize 10 defaultTextAlignment center wrapWidth 200 maxMessageSize 100 } hide stereotype skinparam rectangle<<Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.APIApplication_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam rectangle<<Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 shadowing false } skinparam rectangle<<Development.BigBankplc>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 shadowing false } skinparam database<<Development.DeveloperLaptop.DockerContainerDatabaseServer.DatabaseServer.Database_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam rectangle<<Development.DeveloperLaptop.DockerContainerDatabaseServer.DatabaseServer>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 shadowing false } skinparam rectangle<<Development.DeveloperLaptop>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 shadowing false } skinparam rectangle<<Development.DeveloperLaptop.DockerContainerDatabaseServer>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 shadowing false } skinparam rectangle<<Development.DeveloperLaptop.DockerContainerWebServer>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 shadowing false } skinparam rectangle<<Development.BigBankplc.bigbankdev001.MainframeBankingSystem_1>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b shadowing false } skinparam rectangle<<Development.DeveloperLaptop.WebBrowser.SinglePageApplication_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam rectangle<<Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.WebApplication_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam rectangle<<Development.DeveloperLaptop.WebBrowser>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 shadowing false } skinparam rectangle<<Development.BigBankplc.bigbankdev001>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 shadowing false } rectangle "Developer Laptop\n<size:10>[Deployment Node: Microsoft Windows 10 or Apple macOS]</size>" <<Development.DeveloperLaptop>> as Development.DeveloperLaptop { rectangle "Web Browser\n<size:10>[Deployment Node: Chrome, Firefox, Safari, or Edge]</size>" <<Development.DeveloperLaptop.WebBrowser>> as Development.DeveloperLaptop.WebBrowser { rectangle "==Single-Page Application\n<size:10>[Container: JavaScript and Angular]</size>\n\nProvides all of the Internet banking functionality to customers via their web browser." <<Development.DeveloperLaptop.WebBrowser.SinglePageApplication_1>> as Development.DeveloperLaptop.WebBrowser.SinglePageApplication_1 } rectangle "Docker Container - Web Server\n<size:10>[Deployment Node: Docker]</size>" <<Development.DeveloperLaptop.DockerContainerWebServer>> as Development.DeveloperLaptop.DockerContainerWebServer { rectangle "Apache Tomcat\n<size:10>[Deployment Node: Apache Tomcat 8.x]</size>" <<Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat>> as Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat { rectangle "==Web Application\n<size:10>[Container: Java and Spring MVC]</size>\n\nDelivers the static content and the Internet banking single page application." <<Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.WebApplication_1>> as Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.WebApplication_1 rectangle "==API Application\n<size:10>[Container: Java and Spring MVC]</size>\n\nProvides Internet banking functionality via a JSON/HTTPS API." <<Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.APIApplication_1>> as Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.APIApplication_1 } } rectangle "Docker Container - Database Server\n<size:10>[Deployment Node: Docker]</size>" <<Development.DeveloperLaptop.DockerContainerDatabaseServer>> as Development.DeveloperLaptop.DockerContainerDatabaseServer { rectangle "Database Server\n<size:10>[Deployment Node: Oracle 12c]</size>" <<Development.DeveloperLaptop.DockerContainerDatabaseServer.DatabaseServer>> as Development.DeveloperLaptop.DockerContainerDatabaseServer.DatabaseServer { database "==Database\n<size:10>[Container: Oracle Database Schema]</size>\n\nStores user registration information, hashed authentication credentials, access logs, etc." <<Development.DeveloperLaptop.DockerContainerDatabaseServer.DatabaseServer.Database_1>> as Development.DeveloperLaptop.DockerContainerDatabaseServer.DatabaseServer.Database_1 } } } rectangle "Big Bank plc\n<size:10>[Deployment Node: Big Bank plc data center]</size>" <<Development.BigBankplc>> as Development.BigBankplc { rectangle "bigbank-dev001\n<size:10>[Deployment Node]</size>" <<Development.BigBankplc.bigbankdev001>> as Development.BigBankplc.bigbankdev001 { rectangle "==Mainframe Banking System\n<size:10>[Software System]</size>\n\nStores all of the core banking information about customers, accounts, transactions, etc." <<Development.BigBankplc.bigbankdev001.MainframeBankingSystem_1>> as Development.BigBankplc.bigbankdev001.MainframeBankingSystem_1 } } Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.WebApplication_1 .[#707070,thickness=2].> Development.DeveloperLaptop.WebBrowser.SinglePageApplication_1 : "<color:#707070>Delivers to the customer's web browser" Development.DeveloperLaptop.WebBrowser.SinglePageApplication_1 .[#707070,thickness=2].> Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.APIApplication_1 : "<color:#707070>Makes API calls to\n<color:#707070><size:8>[JSON/HTTPS]</size>" Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.APIApplication_1 .[#707070,thickness=2].> Development.DeveloperLaptop.DockerContainerDatabaseServer.DatabaseServer.Database_1 : "<color:#707070>Reads from and writes to\n<color:#707070><size:8>[SQL/TCP]</size>" Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.APIApplication_1 .[#707070,thickness=2].> Development.BigBankplc.bigbankdev001.MainframeBankingSystem_1 : "<color:#707070>Makes API calls to\n<color:#707070><size:8>[XML/HTTPS]</size>" @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml set separator none skinparam { shadowing false arrowFontSize 15 defaultTextAlignment center wrapWidth 100 maxMessageSize 100 } hide stereotype skinparam rectangle<<_transparent>> { BorderColor transparent BackgroundColor transparent FontColor transparent } skinparam rectangle<<1>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } rectangle "==Element" <<1>> skinparam rectangle<<2>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } rectangle "==Container" <<2>> skinparam database<<3>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } database "==Container, Database" <<3>> skinparam rectangle<<4>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } rectangle "==Container, Web Browser" <<4>> skinparam rectangle<<5>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } rectangle "==Software System, Existing System" <<5>> rectangle "." <<_transparent>> as 6 6 .[#707070,thickness=2].> 6 : "<color:#707070>Relationship" @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml set separator none title Internet Banking System - Deployment - Live top to bottom direction skinparam { arrowFontSize 10 defaultTextAlignment center wrapWidth 200 maxMessageSize 100 } hide stereotype skinparam rectangle<<Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam rectangle<<Live.BigBankplc.bigbankweb.ApacheTomcat>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 shadowing false } skinparam rectangle<<Live.BigBankplc.bigbankapi.ApacheTomcat>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 shadowing false } skinparam rectangle<<Live.BigBankplc>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 shadowing false } skinparam rectangle<<Live.Customerscomputer>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 shadowing false } skinparam rectangle<<Live.Customersmobiledevice>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 shadowing false } skinparam database<<Live.BigBankplc.bigbankdb01.OraclePrimary.Database_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam database<<Live.BigBankplc.bigbankdb02.OracleSecondary.Database_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam rectangle<<Live.BigBankplc.bigbankprod001.MainframeBankingSystem_1>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b shadowing false } skinparam rectangle<<Live.Customersmobiledevice.MobileApp_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam rectangle<<Live.BigBankplc.bigbankdb01.OraclePrimary>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 shadowing false } skinparam rectangle<<Live.BigBankplc.bigbankdb02.OracleSecondary>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 shadowing false } skinparam rectangle<<Live.Customerscomputer.WebBrowser.SinglePageApplication_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam rectangle<<Live.BigBankplc.bigbankweb.ApacheTomcat.WebApplication_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam rectangle<<Live.Customerscomputer.WebBrowser>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 shadowing false } skinparam rectangle<<Live.BigBankplc.bigbankapi>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 shadowing false } skinparam rectangle<<Live.BigBankplc.bigbankdb01>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 shadowing false } skinparam rectangle<<Live.BigBankplc.bigbankdb02>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 shadowing false } skinparam rectangle<<Live.BigBankplc.bigbankprod001>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 shadowing false } skinparam rectangle<<Live.BigBankplc.bigbankweb>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 shadowing false } rectangle "Customer's mobile device\n<size:10>[Deployment Node: Apple iOS or Android]</size>" <<Live.Customersmobiledevice>> as Live.Customersmobiledevice { rectangle "==Mobile App\n<size:10>[Container: Xamarin]</size>\n\nProvides a limited subset of the Internet banking functionality to customers via their mobile device." <<Live.Customersmobiledevice.MobileApp_1>> as Live.Customersmobiledevice.MobileApp_1 } rectangle "Customer's computer\n<size:10>[Deployment Node: Microsoft Windows or Apple macOS]</size>" <<Live.Customerscomputer>> as Live.Customerscomputer { rectangle "Web Browser\n<size:10>[Deployment Node: Chrome, Firefox, Safari, or Edge]</size>" <<Live.Customerscomputer.WebBrowser>> as Live.Customerscomputer.WebBrowser { rectangle "==Single-Page Application\n<size:10>[Container: JavaScript and Angular]</size>\n\nProvides all of the Internet banking functionality to customers via their web browser." <<Live.Customerscomputer.WebBrowser.SinglePageApplication_1>> as Live.Customerscomputer.WebBrowser.SinglePageApplication_1 } } rectangle "Big Bank plc\n<size:10>[Deployment Node: Big Bank plc data center]</size>" <<Live.BigBankplc>> as Live.BigBankplc { rectangle "bigbank-web*** (x4)\n<size:10>[Deployment Node: Ubuntu 16.04 LTS]</size>" <<Live.BigBankplc.bigbankweb>> as Live.BigBankplc.bigbankweb { rectangle "Apache Tomcat\n<size:10>[Deployment Node: Apache Tomcat 8.x]</size>" <<Live.BigBankplc.bigbankweb.ApacheTomcat>> as Live.BigBankplc.bigbankweb.ApacheTomcat { rectangle "==Web Application\n<size:10>[Container: Java and Spring MVC]</size>\n\nDelivers the static content and the Internet banking single page application." <<Live.BigBankplc.bigbankweb.ApacheTomcat.WebApplication_1>> as Live.BigBankplc.bigbankweb.ApacheTomcat.WebApplication_1 } } rectangle "bigbank-api*** (x8)\n<size:10>[Deployment Node: Ubuntu 16.04 LTS]</size>" <<Live.BigBankplc.bigbankapi>> as Live.BigBankplc.bigbankapi { rectangle "Apache Tomcat\n<size:10>[Deployment Node: Apache Tomcat 8.x]</size>" <<Live.BigBankplc.bigbankapi.ApacheTomcat>> as Live.BigBankplc.bigbankapi.ApacheTomcat { rectangle "==API Application\n<size:10>[Container: Java and Spring MVC]</size>\n\nProvides Internet banking functionality via a JSON/HTTPS API." <<Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1>> as Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1 } } rectangle "bigbank-db01\n<size:10>[Deployment Node: Ubuntu 16.04 LTS]</size>" <<Live.BigBankplc.bigbankdb01>> as Live.BigBankplc.bigbankdb01 { rectangle "Oracle - Primary\n<size:10>[Deployment Node: Oracle 12c]</size>" <<Live.BigBankplc.bigbankdb01.OraclePrimary>> as Live.BigBankplc.bigbankdb01.OraclePrimary { database "==Database\n<size:10>[Container: Oracle Database Schema]</size>\n\nStores user registration information, hashed authentication credentials, access logs, etc." <<Live.BigBankplc.bigbankdb01.OraclePrimary.Database_1>> as Live.BigBankplc.bigbankdb01.OraclePrimary.Database_1 } } rectangle "bigbank-db02\n<size:10>[Deployment Node: Ubuntu 16.04 LTS]</size>" <<Live.BigBankplc.bigbankdb02>> as Live.BigBankplc.bigbankdb02 { rectangle "Oracle - Secondary\n<size:10>[Deployment Node: Oracle 12c]</size>" <<Live.BigBankplc.bigbankdb02.OracleSecondary>> as Live.BigBankplc.bigbankdb02.OracleSecondary { database "==Database\n<size:10>[Container: Oracle Database Schema]</size>\n\nStores user registration information, hashed authentication credentials, access logs, etc." <<Live.BigBankplc.bigbankdb02.OracleSecondary.Database_1>> as Live.BigBankplc.bigbankdb02.OracleSecondary.Database_1 } } rectangle "bigbank-prod001\n<size:10>[Deployment Node]</size>" <<Live.BigBankplc.bigbankprod001>> as Live.BigBankplc.bigbankprod001 { rectangle "==Mainframe Banking System\n<size:10>[Software System]</size>\n\nStores all of the core banking information about customers, accounts, transactions, etc." <<Live.BigBankplc.bigbankprod001.MainframeBankingSystem_1>> as Live.BigBankplc.bigbankprod001.MainframeBankingSystem_1 } } Live.BigBankplc.bigbankweb.ApacheTomcat.WebApplication_1 .[#707070,thickness=2].> Live.Customerscomputer.WebBrowser.SinglePageApplication_1 : "<color:#707070>Delivers to the customer's web browser" Live.Customerscomputer.WebBrowser.SinglePageApplication_1 .[#707070,thickness=2].> Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1 : "<color:#707070>Makes API calls to\n<color:#707070><size:8>[JSON/HTTPS]</size>" Live.Customersmobiledevice.MobileApp_1 .[#707070,thickness=2].> Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1 : "<color:#707070>Makes API calls to\n<color:#707070><size:8>[JSON/HTTPS]</size>" Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1 .[#707070,thickness=2].> Live.BigBankplc.bigbankdb01.OraclePrimary.Database_1 : "<color:#707070>Reads from and writes to\n<color:#707070><size:8>[SQL/TCP]</size>" Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1 .[#707070,thickness=2].> Live.BigBankplc.bigbankdb02.OracleSecondary.Database_1 : "<color:#707070>Reads from and writes to\n<color:#707070><size:8>[SQL/TCP]</size>" Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1 .[#707070,thickness=2].> Live.BigBankplc.bigbankprod001.MainframeBankingSystem_1 : "<color:#707070>Makes API calls to\n<color:#707070><size:8>[XML/HTTPS]</size>" Live.BigBankplc.bigbankdb01.OraclePrimary .[#707070,thickness=2].> Live.BigBankplc.bigbankdb02.OracleSecondary : "<color:#707070>Replicates data to" @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml set separator none skinparam { shadowing false arrowFontSize 15 defaultTextAlignment center wrapWidth 100 maxMessageSize 100 } hide stereotype skinparam rectangle<<_transparent>> { BorderColor transparent BackgroundColor transparent FontColor transparent } skinparam rectangle<<1>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } rectangle "==Element" <<1>> skinparam rectangle<<2>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } rectangle "==Container" <<2>> skinparam database<<3>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } database "==Container, Database" <<3>> skinparam rectangle<<4>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } rectangle "==Container, Mobile App" <<4>> skinparam rectangle<<5>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } rectangle "==Container, Web Browser" <<5>> skinparam rectangle<<6>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } rectangle "==Failover" <<6>> skinparam rectangle<<7>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } rectangle "==Software System, Existing System" <<7>> rectangle "." <<_transparent>> as 8 8 .[#707070,thickness=2].> 8 : "<color:#707070>Relationship" @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml set separator none title API Application - Dynamic top to bottom direction skinparam { arrowFontSize 10 defaultTextAlignment center wrapWidth 200 maxMessageSize 100 } hide stereotype skinparam database<<InternetBankingSystem.Database>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam rectangle<<InternetBankingSystem.APIApplication.SecurityComponent>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 shadowing false } skinparam rectangle<<InternetBankingSystem.APIApplication.SignInController>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 shadowing false } skinparam rectangle<<InternetBankingSystem.SinglePageApplication>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam rectangle<<InternetBankingSystem.APIApplication>> { BorderColor #2e6295 FontColor #2e6295 shadowing false } rectangle "API Application\n<size:10>[Container: Java and Spring MVC]</size>" <<InternetBankingSystem.APIApplication>> { rectangle "==Sign In Controller\n<size:10>[Component: Spring MVC Rest Controller]</size>\n\nAllows users to sign in to the Internet Banking System." <<InternetBankingSystem.APIApplication.SignInController>> as InternetBankingSystem.APIApplication.SignInController rectangle "==Security Component\n<size:10>[Component: Spring Bean]</size>\n\nProvides functionality related to signing in, changing passwords, etc." <<InternetBankingSystem.APIApplication.SecurityComponent>> as InternetBankingSystem.APIApplication.SecurityComponent } rectangle "==Single-Page Application\n<size:10>[Container: JavaScript and Angular]</size>\n\nProvides all of the Internet banking functionality to customers via their web browser." <<InternetBankingSystem.SinglePageApplication>> as InternetBankingSystem.SinglePageApplication database "==Database\n<size:10>[Container: Oracle Database Schema]</size>\n\nStores user registration information, hashed authentication credentials, access logs, etc." <<InternetBankingSystem.Database>> as InternetBankingSystem.Database InternetBankingSystem.SinglePageApplication .[#707070,thickness=2].> InternetBankingSystem.APIApplication.SignInController : "<color:#707070>1. Submits credentials to\n<color:#707070><size:8>[JSON/HTTPS]</size>" InternetBankingSystem.APIApplication.SignInController .[#707070,thickness=2].> InternetBankingSystem.APIApplication.SecurityComponent : "<color:#707070>2. Validates credentials using" InternetBankingSystem.APIApplication.SecurityComponent .[#707070,thickness=2].> InternetBankingSystem.Database : "<color:#707070>3. select * from users where username = ?\n<color:#707070><size:8>[SQL/TCP]</size>" InternetBankingSystem.APIApplication.SecurityComponent <.[#707070,thickness=2]. InternetBankingSystem.Database : "<color:#707070>4. Returns user data to\n<color:#707070><size:8>[SQL/TCP]</size>" InternetBankingSystem.APIApplication.SignInController <.[#707070,thickness=2]. InternetBankingSystem.APIApplication.SecurityComponent : "<color:#707070>5. Returns true if the hashed password matches" InternetBankingSystem.SinglePageApplication <.[#707070,thickness=2]. InternetBankingSystem.APIApplication.SignInController : "<color:#707070>6. Sends back an authentication token to\n<color:#707070><size:8>[JSON/HTTPS]</size>" @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml set separator none skinparam { shadowing false arrowFontSize 15 defaultTextAlignment center wrapWidth 100 maxMessageSize 100 } hide stereotype skinparam rectangle<<_transparent>> { BorderColor transparent BackgroundColor transparent FontColor transparent } skinparam rectangle<<1>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 } rectangle "==Component" <<1>> skinparam database<<2>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } database "==Container, Database" <<2>> skinparam rectangle<<3>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } rectangle "==Container, Web Browser" <<3>> rectangle "." <<_transparent>> as 4 4 .[#707070,thickness=2].> 4 : "<color:#707070>Relationship" @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml set separator none title Internet Banking System - System Context top to bottom direction skinparam { arrowFontSize 10 defaultTextAlignment center wrapWidth 200 maxMessageSize 100 } hide stereotype skinparam rectangle<<EmailSystem>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b shadowing false } skinparam rectangle<<InternetBankingSystem>> { BackgroundColor #1168bd FontColor #ffffff BorderColor #0b4884 shadowing false } skinparam rectangle<<MainframeBankingSystem>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b shadowing false } skinparam person<<PersonalBankingCustomer>> { BackgroundColor #08427b FontColor #ffffff BorderColor #052e56 shadowing false } rectangle "Big Bank plc" <<group1>> as group1 { skinparam RectangleBorderColor<<group1>> #cccccc skinparam RectangleFontColor<<group1>> #cccccc skinparam RectangleBorderStyle<<group1>> dashed rectangle "==Mainframe Banking System\n<size:10>[Software System]</size>\n\nStores all of the core banking information about customers, accounts, transactions, etc." <<MainframeBankingSystem>> as MainframeBankingSystem rectangle "==E-mail System\n<size:10>[Software System]</size>\n\nThe internal Microsoft Exchange e-mail system." <<EmailSystem>> as EmailSystem rectangle "==Internet Banking System\n<size:10>[Software System]</size>\n\nAllows customers to view information about their bank accounts, and make payments." <<InternetBankingSystem>> as InternetBankingSystem } person "==Personal Banking Customer\n<size:10>[Person]</size>\n\nA customer of the bank, with personal bank accounts." <<PersonalBankingCustomer>> as PersonalBankingCustomer PersonalBankingCustomer .[#707070,thickness=2].> InternetBankingSystem : "<color:#707070>Views account balances, and makes payments using" InternetBankingSystem .[#707070,thickness=2].> MainframeBankingSystem : "<color:#707070>Gets account information from, and makes payments using" InternetBankingSystem .[#707070,thickness=2].> EmailSystem : "<color:#707070>Sends e-mail using" EmailSystem .[#707070,thickness=2].> PersonalBankingCustomer : "<color:#707070>Sends e-mails to" @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml set separator none skinparam { shadowing false arrowFontSize 15 defaultTextAlignment center wrapWidth 100 maxMessageSize 100 } hide stereotype skinparam rectangle<<_transparent>> { BorderColor transparent BackgroundColor transparent FontColor transparent } skinparam person<<1>> { BackgroundColor #08427b FontColor #ffffff BorderColor #052e56 } person "==Person, Customer" <<1>> skinparam rectangle<<2>> { BackgroundColor #1168bd FontColor #ffffff BorderColor #0b4884 } rectangle "==Software System" <<2>> skinparam rectangle<<3>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } rectangle "==Software System, Existing System" <<3>> rectangle "." <<_transparent>> as 4 4 .[#707070,thickness=2].> 4 : "<color:#707070>Relationship" @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml set separator none title System Landscape top to bottom direction skinparam { arrowFontSize 10 defaultTextAlignment center wrapWidth 200 maxMessageSize 100 } hide stereotype skinparam rectangle<<ATM>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b shadowing false } skinparam person<<BackOfficeStaff>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b shadowing false } skinparam person<<CustomerServiceStaff>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b shadowing false } skinparam rectangle<<EmailSystem>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b shadowing false } skinparam rectangle<<InternetBankingSystem>> { BackgroundColor #1168bd FontColor #ffffff BorderColor #0b4884 shadowing false } skinparam rectangle<<MainframeBankingSystem>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b shadowing false } skinparam person<<PersonalBankingCustomer>> { BackgroundColor #08427b FontColor #ffffff BorderColor #052e56 shadowing false } rectangle "Big Bank plc" <<group1>> as group1 { skinparam RectangleBorderColor<<group1>> #cccccc skinparam RectangleFontColor<<group1>> #cccccc skinparam RectangleBorderStyle<<group1>> dashed person "==Customer Service Staff\n<size:10>[Person]</size>\n\nCustomer service staff within the bank." <<CustomerServiceStaff>> as CustomerServiceStaff person "==Back Office Staff\n<size:10>[Person]</size>\n\nAdministration and support staff within the bank." <<BackOfficeStaff>> as BackOfficeStaff rectangle "==Mainframe Banking System\n<size:10>[Software System]</size>\n\nStores all of the core banking information about customers, accounts, transactions, etc." <<MainframeBankingSystem>> as MainframeBankingSystem rectangle "==E-mail System\n<size:10>[Software System]</size>\n\nThe internal Microsoft Exchange e-mail system." <<EmailSystem>> as EmailSystem rectangle "==ATM\n<size:10>[Software System]</size>\n\nAllows customers to withdraw cash." <<ATM>> as ATM rectangle "==Internet Banking System\n<size:10>[Software System]</size>\n\nAllows customers to view information about their bank accounts, and make payments." <<InternetBankingSystem>> as InternetBankingSystem } person "==Personal Banking Customer\n<size:10>[Person]</size>\n\nA customer of the bank, with personal bank accounts." <<PersonalBankingCustomer>> as PersonalBankingCustomer PersonalBankingCustomer .[#707070,thickness=2].> InternetBankingSystem : "<color:#707070>Views account balances, and makes payments using" InternetBankingSystem .[#707070,thickness=2].> MainframeBankingSystem : "<color:#707070>Gets account information from, and makes payments using" InternetBankingSystem .[#707070,thickness=2].> EmailSystem : "<color:#707070>Sends e-mail using" EmailSystem .[#707070,thickness=2].> PersonalBankingCustomer : "<color:#707070>Sends e-mails to" PersonalBankingCustomer .[#707070,thickness=2].> CustomerServiceStaff : "<color:#707070>Asks questions to\n<color:#707070><size:8>[Telephone]</size>" CustomerServiceStaff .[#707070,thickness=2].> MainframeBankingSystem : "<color:#707070>Uses" PersonalBankingCustomer .[#707070,thickness=2].> ATM : "<color:#707070>Withdraws cash using" ATM .[#707070,thickness=2].> MainframeBankingSystem : "<color:#707070>Uses" BackOfficeStaff .[#707070,thickness=2].> MainframeBankingSystem : "<color:#707070>Uses" @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml set separator none skinparam { shadowing false arrowFontSize 15 defaultTextAlignment center wrapWidth 100 maxMessageSize 100 } hide stereotype skinparam rectangle<<_transparent>> { BorderColor transparent BackgroundColor transparent FontColor transparent } skinparam person<<1>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } person "==Person, Bank Staff" <<1>> skinparam person<<2>> { BackgroundColor #08427b FontColor #ffffff BorderColor #052e56 } person "==Person, Customer" <<2>> skinparam rectangle<<3>> { BackgroundColor #1168bd FontColor #ffffff BorderColor #0b4884 } rectangle "==Software System" <<3>> skinparam rectangle<<4>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } rectangle "==Software System, Existing System" <<4>> rectangle "." <<_transparent>> as 5 5 .[#707070,thickness=2].> 5 : "<color:#707070>Relationship" @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
C4-PlantUML definitions are available via the Structurizr CLI export command,
using the -format plantuml/c4plantuml
parameter.
See C4PlantUMLExporter for customisation options.
@startuml set separator none title Internet Banking System - API Application - Components top to bottom direction !include <C4/C4> !include <C4/C4_Context> !include <C4/C4_Container> !include <C4/C4_Component> System(MainframeBankingSystem, "Mainframe Banking System", $descr="Stores all of the core banking information about customers, accounts, transactions, etc.", $tags="", $link="") System(EmailSystem, "E-mail System", $descr="The internal Microsoft Exchange e-mail system.", $tags="", $link="") Container(InternetBankingSystem.SinglePageApplication, "Single-Page Application", $techn="JavaScript and Angular", $descr="Provides all of the Internet banking functionality to customers via their web browser.", $tags="", $link="") Container(InternetBankingSystem.MobileApp, "Mobile App", $techn="Xamarin", $descr="Provides a limited subset of the Internet banking functionality to customers via their mobile device.", $tags="", $link="") ContainerDb(InternetBankingSystem.Database, "Database", $techn="Oracle Database Schema", $descr="Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="", $link="") Container_Boundary("InternetBankingSystem.APIApplication_boundary", "API Application", $tags="") { Component(InternetBankingSystem.APIApplication.SignInController, "Sign In Controller", $techn="Spring MVC Rest Controller", $descr="Allows users to sign in to the Internet Banking System.", $tags="", $link="") Component(InternetBankingSystem.APIApplication.AccountsSummaryController, "Accounts Summary Controller", $techn="Spring MVC Rest Controller", $descr="Provides customers with a summary of their bank accounts.", $tags="", $link="") Component(InternetBankingSystem.APIApplication.ResetPasswordController, "Reset Password Controller", $techn="Spring MVC Rest Controller", $descr="Allows users to reset their passwords with a single use URL.", $tags="", $link="") Component(InternetBankingSystem.APIApplication.SecurityComponent, "Security Component", $techn="Spring Bean", $descr="Provides functionality related to signing in, changing passwords, etc.", $tags="", $link="") Component(InternetBankingSystem.APIApplication.MainframeBankingSystemFacade, "Mainframe Banking System Facade", $techn="Spring Bean", $descr="A facade onto the mainframe banking system.", $tags="", $link="") Component(InternetBankingSystem.APIApplication.EmailComponent, "E-mail Component", $techn="Spring Bean", $descr="Sends e-mails to users.", $tags="", $link="") } Rel(InternetBankingSystem.SinglePageApplication, InternetBankingSystem.APIApplication.SignInController, "Makes API calls to", $techn="JSON/HTTPS", $tags="", $link="") Rel(InternetBankingSystem.SinglePageApplication, InternetBankingSystem.APIApplication.AccountsSummaryController, "Makes API calls to", $techn="JSON/HTTPS", $tags="", $link="") Rel(InternetBankingSystem.SinglePageApplication, InternetBankingSystem.APIApplication.ResetPasswordController, "Makes API calls to", $techn="JSON/HTTPS", $tags="", $link="") Rel(InternetBankingSystem.MobileApp, InternetBankingSystem.APIApplication.SignInController, "Makes API calls to", $techn="JSON/HTTPS", $tags="", $link="") Rel(InternetBankingSystem.MobileApp, InternetBankingSystem.APIApplication.AccountsSummaryController, "Makes API calls to", $techn="JSON/HTTPS", $tags="", $link="") Rel(InternetBankingSystem.MobileApp, InternetBankingSystem.APIApplication.ResetPasswordController, "Makes API calls to", $techn="JSON/HTTPS", $tags="", $link="") Rel(InternetBankingSystem.APIApplication.SignInController, InternetBankingSystem.APIApplication.SecurityComponent, "Uses", $techn="", $tags="", $link="") Rel(InternetBankingSystem.APIApplication.AccountsSummaryController, InternetBankingSystem.APIApplication.MainframeBankingSystemFacade, "Uses", $techn="", $tags="", $link="") Rel(InternetBankingSystem.APIApplication.ResetPasswordController, InternetBankingSystem.APIApplication.SecurityComponent, "Uses", $techn="", $tags="", $link="") Rel(InternetBankingSystem.APIApplication.ResetPasswordController, InternetBankingSystem.APIApplication.EmailComponent, "Uses", $techn="", $tags="", $link="") Rel(InternetBankingSystem.APIApplication.SecurityComponent, InternetBankingSystem.Database, "Reads from and writes to", $techn="SQL/TCP", $tags="", $link="") Rel(InternetBankingSystem.APIApplication.MainframeBankingSystemFacade, MainframeBankingSystem, "Makes API calls to", $techn="XML/HTTPS", $tags="", $link="") Rel(InternetBankingSystem.APIApplication.EmailComponent, EmailSystem, "Sends e-mail using", $techn="", $tags="", $link="") SHOW_LEGEND(true) @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml set separator none title Internet Banking System - Containers top to bottom direction !include <C4/C4> !include <C4/C4_Context> !include <C4/C4_Container> Person(PersonalBankingCustomer, "Personal Banking Customer", $descr="A customer of the bank, with personal bank accounts.", $tags="", $link="") System(MainframeBankingSystem, "Mainframe Banking System", $descr="Stores all of the core banking information about customers, accounts, transactions, etc.", $tags="", $link="") System(EmailSystem, "E-mail System", $descr="The internal Microsoft Exchange e-mail system.", $tags="", $link="") System_Boundary("InternetBankingSystem_boundary", "Internet Banking System", $tags="") { Container(InternetBankingSystem.WebApplication, "Web Application", $techn="Java and Spring MVC", $descr="Delivers the static content and the Internet banking single page application.", $tags="", $link="") Container(InternetBankingSystem.APIApplication, "API Application", $techn="Java and Spring MVC", $descr="Provides Internet banking functionality via a JSON/HTTPS API.", $tags="", $link="") ContainerDb(InternetBankingSystem.Database, "Database", $techn="Oracle Database Schema", $descr="Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="", $link="") Container(InternetBankingSystem.SinglePageApplication, "Single-Page Application", $techn="JavaScript and Angular", $descr="Provides all of the Internet banking functionality to customers via their web browser.", $tags="", $link="") Container(InternetBankingSystem.MobileApp, "Mobile App", $techn="Xamarin", $descr="Provides a limited subset of the Internet banking functionality to customers via their mobile device.", $tags="", $link="") } Rel(EmailSystem, PersonalBankingCustomer, "Sends e-mails to", $techn="", $tags="", $link="") Rel(PersonalBankingCustomer, InternetBankingSystem.WebApplication, "Visits bigbank.com/ib using", $techn="HTTPS", $tags="", $link="") Rel(PersonalBankingCustomer, InternetBankingSystem.SinglePageApplication, "Views account balances, and makes payments using", $techn="", $tags="", $link="") Rel(PersonalBankingCustomer, InternetBankingSystem.MobileApp, "Views account balances, and makes payments using", $techn="", $tags="", $link="") Rel(InternetBankingSystem.WebApplication, InternetBankingSystem.SinglePageApplication, "Delivers to the customer's web browser", $techn="", $tags="", $link="") Rel(InternetBankingSystem.SinglePageApplication, InternetBankingSystem.APIApplication, "Makes API calls to", $techn="JSON/HTTPS", $tags="", $link="") Rel(InternetBankingSystem.MobileApp, InternetBankingSystem.APIApplication, "Makes API calls to", $techn="JSON/HTTPS", $tags="", $link="") Rel(InternetBankingSystem.APIApplication, InternetBankingSystem.Database, "Reads from and writes to", $techn="SQL/TCP", $tags="", $link="") Rel(InternetBankingSystem.APIApplication, MainframeBankingSystem, "Makes API calls to", $techn="XML/HTTPS", $tags="", $link="") Rel(InternetBankingSystem.APIApplication, EmailSystem, "Sends e-mail using", $techn="", $tags="", $link="") SHOW_LEGEND(true) @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml set separator none title Internet Banking System - Deployment - Development top to bottom direction !include <C4/C4> !include <C4/C4_Context> !include <C4/C4_Container> !include <C4/C4_Deployment> Deployment_Node(Development.DeveloperLaptop, "Developer Laptop", $type="Microsoft Windows 10 or Apple macOS", $descr="", $tags="", $link="") { Deployment_Node(Development.DeveloperLaptop.WebBrowser, "Web Browser", $type="Chrome, Firefox, Safari, or Edge", $descr="", $tags="", $link="") { Container(Development.DeveloperLaptop.WebBrowser.SinglePageApplication_1, "Single-Page Application", $techn="JavaScript and Angular", $descr="Provides all of the Internet banking functionality to customers via their web browser.", $tags="", $link="") } Deployment_Node(Development.DeveloperLaptop.DockerContainerWebServer, "Docker Container - Web Server", $type="Docker", $descr="", $tags="", $link="") { Deployment_Node(Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat, "Apache Tomcat", $type="Apache Tomcat 8.x", $descr="", $tags="", $link="") { Container(Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.WebApplication_1, "Web Application", $techn="Java and Spring MVC", $descr="Delivers the static content and the Internet banking single page application.", $tags="", $link="") Container(Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.APIApplication_1, "API Application", $techn="Java and Spring MVC", $descr="Provides Internet banking functionality via a JSON/HTTPS API.", $tags="", $link="") } } Deployment_Node(Development.DeveloperLaptop.DockerContainerDatabaseServer, "Docker Container - Database Server", $type="Docker", $descr="", $tags="", $link="") { Deployment_Node(Development.DeveloperLaptop.DockerContainerDatabaseServer.DatabaseServer, "Database Server", $type="Oracle 12c", $descr="", $tags="", $link="") { ContainerDb(Development.DeveloperLaptop.DockerContainerDatabaseServer.DatabaseServer.Database_1, "Database", $techn="Oracle Database Schema", $descr="Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="", $link="") } } } Deployment_Node(Development.BigBankplc, "Big Bank plc", $type="Big Bank plc data center", $descr="", $tags="", $link="") { Deployment_Node(Development.BigBankplc.bigbankdev001, "bigbank-dev001", $type="", $descr="", $tags="", $link="") { System(Development.BigBankplc.bigbankdev001.MainframeBankingSystem_1, "Mainframe Banking System", $descr="Stores all of the core banking information about customers, accounts, transactions, etc.", $tags="", $link="") } } Rel(Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.WebApplication_1, Development.DeveloperLaptop.WebBrowser.SinglePageApplication_1, "Delivers to the customer's web browser", $techn="", $tags="", $link="") Rel(Development.DeveloperLaptop.WebBrowser.SinglePageApplication_1, Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.APIApplication_1, "Makes API calls to", $techn="JSON/HTTPS", $tags="", $link="") Rel(Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.APIApplication_1, Development.DeveloperLaptop.DockerContainerDatabaseServer.DatabaseServer.Database_1, "Reads from and writes to", $techn="SQL/TCP", $tags="", $link="") Rel(Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.APIApplication_1, Development.BigBankplc.bigbankdev001.MainframeBankingSystem_1, "Makes API calls to", $techn="XML/HTTPS", $tags="", $link="") SHOW_LEGEND(true) @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml set separator none title Internet Banking System - Deployment - Live top to bottom direction !include <C4/C4> !include <C4/C4_Context> !include <C4/C4_Container> !include <C4/C4_Deployment> Deployment_Node(Live.Customersmobiledevice, "Customer's mobile device", $type="Apple iOS or Android", $descr="", $tags="", $link="") { Container(Live.Customersmobiledevice.MobileApp_1, "Mobile App", $techn="Xamarin", $descr="Provides a limited subset of the Internet banking functionality to customers via their mobile device.", $tags="", $link="") } Deployment_Node(Live.Customerscomputer, "Customer's computer", $type="Microsoft Windows or Apple macOS", $descr="", $tags="", $link="") { Deployment_Node(Live.Customerscomputer.WebBrowser, "Web Browser", $type="Chrome, Firefox, Safari, or Edge", $descr="", $tags="", $link="") { Container(Live.Customerscomputer.WebBrowser.SinglePageApplication_1, "Single-Page Application", $techn="JavaScript and Angular", $descr="Provides all of the Internet banking functionality to customers via their web browser.", $tags="", $link="") } } Deployment_Node(Live.BigBankplc, "Big Bank plc", $type="Big Bank plc data center", $descr="", $tags="", $link="") { Deployment_Node(Live.BigBankplc.bigbankweb, "bigbank-web*** (x4)", $type="Ubuntu 16.04 LTS", $descr="", $tags="", $link="") { Deployment_Node(Live.BigBankplc.bigbankweb.ApacheTomcat, "Apache Tomcat", $type="Apache Tomcat 8.x", $descr="", $tags="", $link="") { Container(Live.BigBankplc.bigbankweb.ApacheTomcat.WebApplication_1, "Web Application", $techn="Java and Spring MVC", $descr="Delivers the static content and the Internet banking single page application.", $tags="", $link="") } } Deployment_Node(Live.BigBankplc.bigbankapi, "bigbank-api*** (x8)", $type="Ubuntu 16.04 LTS", $descr="", $tags="", $link="") { Deployment_Node(Live.BigBankplc.bigbankapi.ApacheTomcat, "Apache Tomcat", $type="Apache Tomcat 8.x", $descr="", $tags="", $link="") { Container(Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1, "API Application", $techn="Java and Spring MVC", $descr="Provides Internet banking functionality via a JSON/HTTPS API.", $tags="", $link="") } } Deployment_Node(Live.BigBankplc.bigbankdb01, "bigbank-db01", $type="Ubuntu 16.04 LTS", $descr="", $tags="", $link="") { Deployment_Node(Live.BigBankplc.bigbankdb01.OraclePrimary, "Oracle - Primary", $type="Oracle 12c", $descr="", $tags="", $link="") { ContainerDb(Live.BigBankplc.bigbankdb01.OraclePrimary.Database_1, "Database", $techn="Oracle Database Schema", $descr="Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="", $link="") } } Deployment_Node(Live.BigBankplc.bigbankdb02, "bigbank-db02", $type="Ubuntu 16.04 LTS", $descr="", $tags="", $link="") { Deployment_Node(Live.BigBankplc.bigbankdb02.OracleSecondary, "Oracle - Secondary", $type="Oracle 12c", $descr="", $tags="", $link="") { ContainerDb(Live.BigBankplc.bigbankdb02.OracleSecondary.Database_1, "Database", $techn="Oracle Database Schema", $descr="Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="", $link="") } } Deployment_Node(Live.BigBankplc.bigbankprod001, "bigbank-prod001", $type="", $descr="", $tags="", $link="") { System(Live.BigBankplc.bigbankprod001.MainframeBankingSystem_1, "Mainframe Banking System", $descr="Stores all of the core banking information about customers, accounts, transactions, etc.", $tags="", $link="") } } Rel(Live.BigBankplc.bigbankweb.ApacheTomcat.WebApplication_1, Live.Customerscomputer.WebBrowser.SinglePageApplication_1, "Delivers to the customer's web browser", $techn="", $tags="", $link="") Rel(Live.Customerscomputer.WebBrowser.SinglePageApplication_1, Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1, "Makes API calls to", $techn="JSON/HTTPS", $tags="", $link="") Rel(Live.Customersmobiledevice.MobileApp_1, Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1, "Makes API calls to", $techn="JSON/HTTPS", $tags="", $link="") Rel(Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1, Live.BigBankplc.bigbankdb01.OraclePrimary.Database_1, "Reads from and writes to", $techn="SQL/TCP", $tags="", $link="") Rel(Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1, Live.BigBankplc.bigbankdb02.OracleSecondary.Database_1, "Reads from and writes to", $techn="SQL/TCP", $tags="", $link="") Rel(Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1, Live.BigBankplc.bigbankprod001.MainframeBankingSystem_1, "Makes API calls to", $techn="XML/HTTPS", $tags="", $link="") Rel(Live.BigBankplc.bigbankdb01.OraclePrimary, Live.BigBankplc.bigbankdb02.OracleSecondary, "Replicates data to", $techn="", $tags="", $link="") SHOW_LEGEND(true) @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml set separator none title API Application - Dynamic top to bottom direction !include <C4/C4> !include <C4/C4_Context> !include <C4/C4_Container> !include <C4/C4_Component> Container_Boundary("InternetBankingSystem.APIApplication_boundary", "API Application", $tags="") { Component(InternetBankingSystem.APIApplication.SignInController, "Sign In Controller", $techn="Spring MVC Rest Controller", $descr="Allows users to sign in to the Internet Banking System.", $tags="", $link="") Component(InternetBankingSystem.APIApplication.SecurityComponent, "Security Component", $techn="Spring Bean", $descr="Provides functionality related to signing in, changing passwords, etc.", $tags="", $link="") } Container(InternetBankingSystem.SinglePageApplication, "Single-Page Application", $techn="JavaScript and Angular", $descr="Provides all of the Internet banking functionality to customers via their web browser.", $tags="", $link="") ContainerDb(InternetBankingSystem.Database, "Database", $techn="Oracle Database Schema", $descr="Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="", $link="") Rel(InternetBankingSystem.SinglePageApplication, InternetBankingSystem.APIApplication.SignInController, "1. Submits credentials to", $techn="JSON/HTTPS", $tags="", $link="") Rel(InternetBankingSystem.APIApplication.SignInController, InternetBankingSystem.APIApplication.SecurityComponent, "2. Validates credentials using", $techn="", $tags="", $link="") Rel(InternetBankingSystem.APIApplication.SecurityComponent, InternetBankingSystem.Database, "3. select * from users where username = ?", $techn="SQL/TCP", $tags="", $link="") Rel(InternetBankingSystem.Database, InternetBankingSystem.APIApplication.SecurityComponent, "4. Returns user data to", $techn="SQL/TCP", $tags="", $link="") Rel(InternetBankingSystem.APIApplication.SecurityComponent, InternetBankingSystem.APIApplication.SignInController, "5. Returns true if the hashed password matches", $techn="", $tags="", $link="") Rel(InternetBankingSystem.APIApplication.SignInController, InternetBankingSystem.SinglePageApplication, "6. Sends back an authentication token to", $techn="JSON/HTTPS", $tags="", $link="") SHOW_LEGEND(true) @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml set separator none title Internet Banking System - System Context top to bottom direction !include <C4/C4> !include <C4/C4_Context> AddBoundaryTag("Big Bank plc", $borderColor="#cccccc", $fontColor="#cccccc", $borderStyle="dashed") Boundary(group_1, "Big Bank plc", $tags="Big Bank plc") { System(MainframeBankingSystem, "Mainframe Banking System", $descr="Stores all of the core banking information about customers, accounts, transactions, etc.", $tags="", $link="") System(EmailSystem, "E-mail System", $descr="The internal Microsoft Exchange e-mail system.", $tags="", $link="") System(InternetBankingSystem, "Internet Banking System", $descr="Allows customers to view information about their bank accounts, and make payments.", $tags="", $link="") } Person(PersonalBankingCustomer, "Personal Banking Customer", $descr="A customer of the bank, with personal bank accounts.", $tags="", $link="") Rel(PersonalBankingCustomer, InternetBankingSystem, "Views account balances, and makes payments using", $techn="", $tags="", $link="") Rel(InternetBankingSystem, MainframeBankingSystem, "Gets account information from, and makes payments using", $techn="", $tags="", $link="") Rel(InternetBankingSystem, EmailSystem, "Sends e-mail using", $techn="", $tags="", $link="") Rel(EmailSystem, PersonalBankingCustomer, "Sends e-mails to", $techn="", $tags="", $link="") SHOW_LEGEND(true) @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml set separator none title System Landscape top to bottom direction !include <C4/C4> !include <C4/C4_Context> AddBoundaryTag("Big Bank plc", $borderColor="#cccccc", $fontColor="#cccccc", $borderStyle="dashed") Boundary(group_1, "Big Bank plc", $tags="Big Bank plc") { Person(CustomerServiceStaff, "Customer Service Staff", $descr="Customer service staff within the bank.", $tags="", $link="") Person(BackOfficeStaff, "Back Office Staff", $descr="Administration and support staff within the bank.", $tags="", $link="") System(MainframeBankingSystem, "Mainframe Banking System", $descr="Stores all of the core banking information about customers, accounts, transactions, etc.", $tags="", $link="") System(EmailSystem, "E-mail System", $descr="The internal Microsoft Exchange e-mail system.", $tags="", $link="") System(ATM, "ATM", $descr="Allows customers to withdraw cash.", $tags="", $link="") System(InternetBankingSystem, "Internet Banking System", $descr="Allows customers to view information about their bank accounts, and make payments.", $tags="", $link="") } Person(PersonalBankingCustomer, "Personal Banking Customer", $descr="A customer of the bank, with personal bank accounts.", $tags="", $link="") Rel(PersonalBankingCustomer, InternetBankingSystem, "Views account balances, and makes payments using", $techn="", $tags="", $link="") Rel(InternetBankingSystem, MainframeBankingSystem, "Gets account information from, and makes payments using", $techn="", $tags="", $link="") Rel(InternetBankingSystem, EmailSystem, "Sends e-mail using", $techn="", $tags="", $link="") Rel(EmailSystem, PersonalBankingCustomer, "Sends e-mails to", $techn="", $tags="", $link="") Rel(PersonalBankingCustomer, CustomerServiceStaff, "Asks questions to", $techn="Telephone", $tags="", $link="") Rel(CustomerServiceStaff, MainframeBankingSystem, "Uses", $techn="", $tags="", $link="") Rel(PersonalBankingCustomer, ATM, "Withdraws cash using", $techn="", $tags="", $link="") Rel(ATM, MainframeBankingSystem, "Uses", $techn="", $tags="", $link="") Rel(BackOfficeStaff, MainframeBankingSystem, "Uses", $techn="", $tags="", $link="") SHOW_LEGEND(true) @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
Mermaid definitions are available via the Structurizr CLI export command,
using the -format mermaid
parameter. Your Mermaid configuration will need to include "securityLevel": "loose"
to render this definition correctly.
graph TB linkStyle default fill:#ffffff subgraph diagram ["Internet Banking System - API Application - Components"] style diagram fill:#ffffff,stroke:#ffffff 4["<div style='font-weight: bold'>Mainframe Banking System</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>Stores all of the core<br />banking information about<br />customers, accounts,<br />transactions, etc.</div>"] style 4 fill:#999999,stroke:#6b6b6b,color:#ffffff 5["<div style='font-weight: bold'>E-mail System</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>The internal Microsoft<br />Exchange e-mail system.</div>"] style 5 fill:#999999,stroke:#6b6b6b,color:#ffffff 8["<div style='font-weight: bold'>Single-Page Application</div><div style='font-size: 70%; margin-top: 0px'>[Container: JavaScript and Angular]</div><div style='font-size: 80%; margin-top:10px'>Provides all of the Internet<br />banking functionality to<br />customers via their web<br />browser.</div>"] style 8 fill:#438dd5,stroke:#2e6295,color:#ffffff 9["<div style='font-weight: bold'>Mobile App</div><div style='font-size: 70%; margin-top: 0px'>[Container: Xamarin]</div><div style='font-size: 80%; margin-top:10px'>Provides a limited subset of<br />the Internet banking<br />functionality to customers<br />via their mobile device.</div>"] style 9 fill:#438dd5,stroke:#2e6295,color:#ffffff 18[("<div style='font-weight: bold'>Database</div><div style='font-size: 70%; margin-top: 0px'>[Container: Oracle Database Schema]</div><div style='font-size: 80%; margin-top:10px'>Stores user registration<br />information, hashed<br />authentication credentials,<br />access logs, etc.</div>")] style 18 fill:#438dd5,stroke:#2e6295,color:#ffffff subgraph 11 ["API Application"] style 11 fill:#ffffff,stroke:#2e6295,color:#2e6295 12["<div style='font-weight: bold'>Sign In Controller</div><div style='font-size: 70%; margin-top: 0px'>[Component: Spring MVC Rest Controller]</div><div style='font-size: 80%; margin-top:10px'>Allows users to sign in to<br />the Internet Banking System.</div>"] style 12 fill:#85bbf0,stroke:#5d82a8,color:#000000 13["<div style='font-weight: bold'>Accounts Summary Controller</div><div style='font-size: 70%; margin-top: 0px'>[Component: Spring MVC Rest Controller]</div><div style='font-size: 80%; margin-top:10px'>Provides customers with a<br />summary of their bank<br />accounts.</div>"] style 13 fill:#85bbf0,stroke:#5d82a8,color:#000000 14["<div style='font-weight: bold'>Reset Password Controller</div><div style='font-size: 70%; margin-top: 0px'>[Component: Spring MVC Rest Controller]</div><div style='font-size: 80%; margin-top:10px'>Allows users to reset their<br />passwords with a single use<br />URL.</div>"] style 14 fill:#85bbf0,stroke:#5d82a8,color:#000000 15["<div style='font-weight: bold'>Security Component</div><div style='font-size: 70%; margin-top: 0px'>[Component: Spring Bean]</div><div style='font-size: 80%; margin-top:10px'>Provides functionality<br />related to signing in,<br />changing passwords, etc.</div>"] style 15 fill:#85bbf0,stroke:#5d82a8,color:#000000 16["<div style='font-weight: bold'>Mainframe Banking System Facade</div><div style='font-size: 70%; margin-top: 0px'>[Component: Spring Bean]</div><div style='font-size: 80%; margin-top:10px'>A facade onto the mainframe<br />banking system.</div>"] style 16 fill:#85bbf0,stroke:#5d82a8,color:#000000 17["<div style='font-weight: bold'>E-mail Component</div><div style='font-size: 70%; margin-top: 0px'>[Component: Spring Bean]</div><div style='font-size: 80%; margin-top:10px'>Sends e-mails to users.</div>"] style 17 fill:#85bbf0,stroke:#5d82a8,color:#000000 end 8-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->12 8-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->13 8-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->14 9-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->12 9-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->13 9-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->14 12-. "<div>Uses</div><div style='font-size: 70%'></div>" .->15 13-. "<div>Uses</div><div style='font-size: 70%'></div>" .->16 14-. "<div>Uses</div><div style='font-size: 70%'></div>" .->15 14-. "<div>Uses</div><div style='font-size: 70%'></div>" .->17 15-. "<div>Reads from and writes to</div><div style='font-size: 70%'>[SQL/TCP]</div>" .->18 16-. "<div>Makes API calls to</div><div style='font-size: 70%'>[XML/HTTPS]</div>" .->4 17-. "<div>Sends e-mail using</div><div style='font-size: 70%'></div>" .->5 end
(this will send your diagram content to https://mermaid.ink)
graph TB linkStyle default fill:#ffffff subgraph diagram ["Internet Banking System - Containers"] style diagram fill:#ffffff,stroke:#ffffff 1["<div style='font-weight: bold'>Personal Banking Customer</div><div style='font-size: 70%; margin-top: 0px'>[Person]</div><div style='font-size: 80%; margin-top:10px'>A customer of the bank, with<br />personal bank accounts.</div>"] style 1 fill:#08427b,stroke:#052e56,color:#ffffff 4["<div style='font-weight: bold'>Mainframe Banking System</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>Stores all of the core<br />banking information about<br />customers, accounts,<br />transactions, etc.</div>"] style 4 fill:#999999,stroke:#6b6b6b,color:#ffffff 5["<div style='font-weight: bold'>E-mail System</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>The internal Microsoft<br />Exchange e-mail system.</div>"] style 5 fill:#999999,stroke:#6b6b6b,color:#ffffff subgraph 7 ["Internet Banking System"] style 7 fill:#ffffff,stroke:#0b4884,color:#0b4884 10["<div style='font-weight: bold'>Web Application</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring MVC]</div><div style='font-size: 80%; margin-top:10px'>Delivers the static content<br />and the Internet banking<br />single page application.</div>"] style 10 fill:#438dd5,stroke:#2e6295,color:#ffffff 11["<div style='font-weight: bold'>API Application</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring MVC]</div><div style='font-size: 80%; margin-top:10px'>Provides Internet banking<br />functionality via a<br />JSON/HTTPS API.</div>"] style 11 fill:#438dd5,stroke:#2e6295,color:#ffffff 18[("<div style='font-weight: bold'>Database</div><div style='font-size: 70%; margin-top: 0px'>[Container: Oracle Database Schema]</div><div style='font-size: 80%; margin-top:10px'>Stores user registration<br />information, hashed<br />authentication credentials,<br />access logs, etc.</div>")] style 18 fill:#438dd5,stroke:#2e6295,color:#ffffff 8["<div style='font-weight: bold'>Single-Page Application</div><div style='font-size: 70%; margin-top: 0px'>[Container: JavaScript and Angular]</div><div style='font-size: 80%; margin-top:10px'>Provides all of the Internet<br />banking functionality to<br />customers via their web<br />browser.</div>"] style 8 fill:#438dd5,stroke:#2e6295,color:#ffffff 9["<div style='font-weight: bold'>Mobile App</div><div style='font-size: 70%; margin-top: 0px'>[Container: Xamarin]</div><div style='font-size: 80%; margin-top:10px'>Provides a limited subset of<br />the Internet banking<br />functionality to customers<br />via their mobile device.</div>"] style 9 fill:#438dd5,stroke:#2e6295,color:#ffffff end 5-. "<div>Sends e-mails to</div><div style='font-size: 70%'></div>" .->1 1-. "<div>Visits bigbank.com/ib using</div><div style='font-size: 70%'>[HTTPS]</div>" .->10 1-. "<div>Views account balances, and<br />makes payments using</div><div style='font-size: 70%'></div>" .->8 1-. "<div>Views account balances, and<br />makes payments using</div><div style='font-size: 70%'></div>" .->9 10-. "<div>Delivers to the customer's<br />web browser</div><div style='font-size: 70%'></div>" .->8 8-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->11 9-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->11 11-. "<div>Reads from and writes to</div><div style='font-size: 70%'>[SQL/TCP]</div>" .->18 11-. "<div>Makes API calls to</div><div style='font-size: 70%'>[XML/HTTPS]</div>" .->4 11-. "<div>Sends e-mail using</div><div style='font-size: 70%'></div>" .->5 end
(this will send your diagram content to https://mermaid.ink)
graph TB linkStyle default fill:#ffffff subgraph diagram ["Internet Banking System - Deployment - Development"] style diagram fill:#ffffff,stroke:#ffffff subgraph 50 ["Developer Laptop"] style 50 fill:#ffffff,stroke:#888888,color:#000000 subgraph 51 ["Web Browser"] style 51 fill:#ffffff,stroke:#888888,color:#000000 52["<div style='font-weight: bold'>Single-Page Application</div><div style='font-size: 70%; margin-top: 0px'>[Container: JavaScript and Angular]</div><div style='font-size: 80%; margin-top:10px'>Provides all of the Internet<br />banking functionality to<br />customers via their web<br />browser.</div>"] style 52 fill:#438dd5,stroke:#2e6295,color:#ffffff end subgraph 53 ["Docker Container - Web Server"] style 53 fill:#ffffff,stroke:#888888,color:#000000 subgraph 54 ["Apache Tomcat"] style 54 fill:#ffffff,stroke:#888888,color:#000000 55["<div style='font-weight: bold'>Web Application</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring MVC]</div><div style='font-size: 80%; margin-top:10px'>Delivers the static content<br />and the Internet banking<br />single page application.</div>"] style 55 fill:#438dd5,stroke:#2e6295,color:#ffffff 57["<div style='font-weight: bold'>API Application</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring MVC]</div><div style='font-size: 80%; margin-top:10px'>Provides Internet banking<br />functionality via a<br />JSON/HTTPS API.</div>"] style 57 fill:#438dd5,stroke:#2e6295,color:#ffffff end end subgraph 59 ["Docker Container - Database Server"] style 59 fill:#ffffff,stroke:#888888,color:#000000 subgraph 60 ["Database Server"] style 60 fill:#ffffff,stroke:#888888,color:#000000 61[("<div style='font-weight: bold'>Database</div><div style='font-size: 70%; margin-top: 0px'>[Container: Oracle Database Schema]</div><div style='font-size: 80%; margin-top:10px'>Stores user registration<br />information, hashed<br />authentication credentials,<br />access logs, etc.</div>")] style 61 fill:#438dd5,stroke:#2e6295,color:#ffffff end end end subgraph 63 ["Big Bank plc"] style 63 fill:#ffffff,stroke:#888888,color:#000000 subgraph 64 ["bigbank-dev001"] style 64 fill:#ffffff,stroke:#888888,color:#000000 65["<div style='font-weight: bold'>Mainframe Banking System</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>Stores all of the core<br />banking information about<br />customers, accounts,<br />transactions, etc.</div>"] style 65 fill:#999999,stroke:#6b6b6b,color:#ffffff end end 55-. "<div>Delivers to the customer's<br />web browser</div><div style='font-size: 70%'></div>" .->52 52-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->57 57-. "<div>Reads from and writes to</div><div style='font-size: 70%'>[SQL/TCP]</div>" .->61 57-. "<div>Makes API calls to</div><div style='font-size: 70%'>[XML/HTTPS]</div>" .->65 end
(this will send your diagram content to https://mermaid.ink)
graph TB linkStyle default fill:#ffffff subgraph diagram ["Internet Banking System - Deployment - Live"] style diagram fill:#ffffff,stroke:#ffffff subgraph 67 ["Customer's mobile device"] style 67 fill:#ffffff,stroke:#888888,color:#000000 68["<div style='font-weight: bold'>Mobile App</div><div style='font-size: 70%; margin-top: 0px'>[Container: Xamarin]</div><div style='font-size: 80%; margin-top:10px'>Provides a limited subset of<br />the Internet banking<br />functionality to customers<br />via their mobile device.</div>"] style 68 fill:#438dd5,stroke:#2e6295,color:#ffffff end subgraph 69 ["Customer's computer"] style 69 fill:#ffffff,stroke:#888888,color:#000000 subgraph 70 ["Web Browser"] style 70 fill:#ffffff,stroke:#888888,color:#000000 71["<div style='font-weight: bold'>Single-Page Application</div><div style='font-size: 70%; margin-top: 0px'>[Container: JavaScript and Angular]</div><div style='font-size: 80%; margin-top:10px'>Provides all of the Internet<br />banking functionality to<br />customers via their web<br />browser.</div>"] style 71 fill:#438dd5,stroke:#2e6295,color:#ffffff end end subgraph 72 ["Big Bank plc"] style 72 fill:#ffffff,stroke:#888888,color:#000000 subgraph 73 ["bigbank-web***"] style 73 fill:#ffffff,stroke:#888888,color:#000000 subgraph 74 ["Apache Tomcat"] style 74 fill:#ffffff,stroke:#888888,color:#000000 75["<div style='font-weight: bold'>Web Application</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring MVC]</div><div style='font-size: 80%; margin-top:10px'>Delivers the static content<br />and the Internet banking<br />single page application.</div>"] style 75 fill:#438dd5,stroke:#2e6295,color:#ffffff end end subgraph 77 ["bigbank-api***"] style 77 fill:#ffffff,stroke:#888888,color:#000000 subgraph 78 ["Apache Tomcat"] style 78 fill:#ffffff,stroke:#888888,color:#000000 79["<div style='font-weight: bold'>API Application</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring MVC]</div><div style='font-size: 80%; margin-top:10px'>Provides Internet banking<br />functionality via a<br />JSON/HTTPS API.</div>"] style 79 fill:#438dd5,stroke:#2e6295,color:#ffffff end end subgraph 82 ["bigbank-db01"] style 82 fill:#ffffff,stroke:#888888,color:#000000 subgraph 83 ["Oracle - Primary"] style 83 fill:#ffffff,stroke:#888888,color:#000000 84[("<div style='font-weight: bold'>Database</div><div style='font-size: 70%; margin-top: 0px'>[Container: Oracle Database Schema]</div><div style='font-size: 80%; margin-top:10px'>Stores user registration<br />information, hashed<br />authentication credentials,<br />access logs, etc.</div>")] style 84 fill:#438dd5,stroke:#2e6295,color:#ffffff end end subgraph 86 ["bigbank-db02"] style 86 fill:#ffffff,stroke:#888888,color:#000000 subgraph 87 ["Oracle - Secondary"] style 87 fill:#ffffff,stroke:#888888,color:#000000 88[("<div style='font-weight: bold'>Database</div><div style='font-size: 70%; margin-top: 0px'>[Container: Oracle Database Schema]</div><div style='font-size: 80%; margin-top:10px'>Stores user registration<br />information, hashed<br />authentication credentials,<br />access logs, etc.</div>")] style 88 fill:#438dd5,stroke:#2e6295,color:#ffffff end end subgraph 90 ["bigbank-prod001"] style 90 fill:#ffffff,stroke:#888888,color:#000000 91["<div style='font-weight: bold'>Mainframe Banking System</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>Stores all of the core<br />banking information about<br />customers, accounts,<br />transactions, etc.</div>"] style 91 fill:#999999,stroke:#6b6b6b,color:#ffffff end end 75-. "<div>Delivers to the customer's<br />web browser</div><div style='font-size: 70%'></div>" .->71 71-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->79 68-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->79 79-. "<div>Reads from and writes to</div><div style='font-size: 70%'>[SQL/TCP]</div>" .->84 79-. "<div>Reads from and writes to</div><div style='font-size: 70%'>[SQL/TCP]</div>" .->88 79-. "<div>Makes API calls to</div><div style='font-size: 70%'>[XML/HTTPS]</div>" .->91 end
(this will send your diagram content to https://mermaid.ink)
graph TB linkStyle default fill:#ffffff subgraph diagram ["API Application - Dynamic"] style diagram fill:#ffffff,stroke:#ffffff subgraph 11 ["API Application"] style 11 fill:#ffffff,stroke:#2e6295,color:#2e6295 12["<div style='font-weight: bold'>Sign In Controller</div><div style='font-size: 70%; margin-top: 0px'>[Component: Spring MVC Rest Controller]</div><div style='font-size: 80%; margin-top:10px'>Allows users to sign in to<br />the Internet Banking System.</div>"] style 12 fill:#85bbf0,stroke:#5d82a8,color:#000000 15["<div style='font-weight: bold'>Security Component</div><div style='font-size: 70%; margin-top: 0px'>[Component: Spring Bean]</div><div style='font-size: 80%; margin-top:10px'>Provides functionality<br />related to signing in,<br />changing passwords, etc.</div>"] style 15 fill:#85bbf0,stroke:#5d82a8,color:#000000 end 8["<div style='font-weight: bold'>Single-Page Application</div><div style='font-size: 70%; margin-top: 0px'>[Container: JavaScript and Angular]</div><div style='font-size: 80%; margin-top:10px'>Provides all of the Internet<br />banking functionality to<br />customers via their web<br />browser.</div>"] style 8 fill:#438dd5,stroke:#2e6295,color:#ffffff 18[("<div style='font-weight: bold'>Database</div><div style='font-size: 70%; margin-top: 0px'>[Container: Oracle Database Schema]</div><div style='font-size: 80%; margin-top:10px'>Stores user registration<br />information, hashed<br />authentication credentials,<br />access logs, etc.</div>")] style 18 fill:#438dd5,stroke:#2e6295,color:#ffffff 8-. "<div>1. Submits credentials to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->12 12-. "<div>2. Validates credentials<br />using</div><div style='font-size: 70%'></div>" .->15 15-. "<div>3. select * from users where<br />username = ?</div><div style='font-size: 70%'>[SQL/TCP]</div>" .->18 18-. "<div>4. Returns user data to</div><div style='font-size: 70%'>[SQL/TCP]</div>" .->15 15-. "<div>5. Returns true if the hashed<br />password matches</div><div style='font-size: 70%'></div>" .->12 12-. "<div>6. Sends back an<br />authentication token to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->8 end
(this will send your diagram content to https://mermaid.ink)
graph TB linkStyle default fill:#ffffff subgraph diagram ["Internet Banking System - System Context"] style diagram fill:#ffffff,stroke:#ffffff subgraph group1 ["Big Bank plc"] style group1 fill:#ffffff,stroke:#cccccc,color:#cccccc,stroke-dasharray:5 4["<div style='font-weight: bold'>Mainframe Banking System</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>Stores all of the core<br />banking information about<br />customers, accounts,<br />transactions, etc.</div>"] style 4 fill:#999999,stroke:#6b6b6b,color:#ffffff 5["<div style='font-weight: bold'>E-mail System</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>The internal Microsoft<br />Exchange e-mail system.</div>"] style 5 fill:#999999,stroke:#6b6b6b,color:#ffffff 7["<div style='font-weight: bold'>Internet Banking System</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>Allows customers to view<br />information about their bank<br />accounts, and make payments.</div>"] style 7 fill:#1168bd,stroke:#0b4884,color:#ffffff end 1["<div style='font-weight: bold'>Personal Banking Customer</div><div style='font-size: 70%; margin-top: 0px'>[Person]</div><div style='font-size: 80%; margin-top:10px'>A customer of the bank, with<br />personal bank accounts.</div>"] style 1 fill:#08427b,stroke:#052e56,color:#ffffff 1-. "<div>Views account balances, and<br />makes payments using</div><div style='font-size: 70%'></div>" .->7 7-. "<div>Gets account information<br />from, and makes payments<br />using</div><div style='font-size: 70%'></div>" .->4 7-. "<div>Sends e-mail using</div><div style='font-size: 70%'></div>" .->5 5-. "<div>Sends e-mails to</div><div style='font-size: 70%'></div>" .->1 end
(this will send your diagram content to https://mermaid.ink)
graph TB linkStyle default fill:#ffffff subgraph diagram ["System Landscape"] style diagram fill:#ffffff,stroke:#ffffff subgraph group1 ["Big Bank plc"] style group1 fill:#ffffff,stroke:#cccccc,color:#cccccc,stroke-dasharray:5 2["<div style='font-weight: bold'>Customer Service Staff</div><div style='font-size: 70%; margin-top: 0px'>[Person]</div><div style='font-size: 80%; margin-top:10px'>Customer service staff within<br />the bank.</div>"] style 2 fill:#999999,stroke:#6b6b6b,color:#ffffff 3["<div style='font-weight: bold'>Back Office Staff</div><div style='font-size: 70%; margin-top: 0px'>[Person]</div><div style='font-size: 80%; margin-top:10px'>Administration and support<br />staff within the bank.</div>"] style 3 fill:#999999,stroke:#6b6b6b,color:#ffffff 4["<div style='font-weight: bold'>Mainframe Banking System</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>Stores all of the core<br />banking information about<br />customers, accounts,<br />transactions, etc.</div>"] style 4 fill:#999999,stroke:#6b6b6b,color:#ffffff 5["<div style='font-weight: bold'>E-mail System</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>The internal Microsoft<br />Exchange e-mail system.</div>"] style 5 fill:#999999,stroke:#6b6b6b,color:#ffffff 6["<div style='font-weight: bold'>ATM</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>Allows customers to withdraw<br />cash.</div>"] style 6 fill:#999999,stroke:#6b6b6b,color:#ffffff 7["<div style='font-weight: bold'>Internet Banking System</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>Allows customers to view<br />information about their bank<br />accounts, and make payments.</div>"] style 7 fill:#1168bd,stroke:#0b4884,color:#ffffff end 1["<div style='font-weight: bold'>Personal Banking Customer</div><div style='font-size: 70%; margin-top: 0px'>[Person]</div><div style='font-size: 80%; margin-top:10px'>A customer of the bank, with<br />personal bank accounts.</div>"] style 1 fill:#08427b,stroke:#052e56,color:#ffffff 1-. "<div>Views account balances, and<br />makes payments using</div><div style='font-size: 70%'></div>" .->7 7-. "<div>Gets account information<br />from, and makes payments<br />using</div><div style='font-size: 70%'></div>" .->4 7-. "<div>Sends e-mail using</div><div style='font-size: 70%'></div>" .->5 5-. "<div>Sends e-mails to</div><div style='font-size: 70%'></div>" .->1 1-. "<div>Asks questions to</div><div style='font-size: 70%'>[Telephone]</div>" .->2 2-. "<div>Uses</div><div style='font-size: 70%'></div>" .->4 1-. "<div>Withdraws cash using</div><div style='font-size: 70%'></div>" .->6 6-. "<div>Uses</div><div style='font-size: 70%'></div>" .->4 3-. "<div>Uses</div><div style='font-size: 70%'></div>" .->4 end
(this will send your diagram content to https://mermaid.ink)
WebSequenceDiagram definitions are available via the Structurizr CLI export command,
using the -format websequencediagrams
parameter. Only dynamic views are supported.
title API Application - Dynamic - SignIn participant <<Container>>\nSingle-Page Application as Single-Page Application participant <<Component>>\nSign In Controller as Sign In Controller participant <<Component>>\nSecurity Component as Security Component participant <<Container>>\nDatabase as Database Single-Page Application->Sign In Controller: Submits credentials to Sign In Controller->Security Component: Validates credentials using Security Component->Database: select * from users where username = ? Database-->Security Component: Returns user data to Security Component-->Sign In Controller: Returns true if the hashed password matches Sign In Controller-->Single-Page Application: Sends back an authentication token to
DOT definitions are available via the Structurizr CLI export command,
using the -format dot
parameter.
digraph { compound=true graph [fontname="Arial", rankdir=TB, ranksep=1.0, nodesep=1.0] node [fontname="Arial", shape=box, margin="0.4,0.3"] edge [fontname="Arial"] label=<<br /><font point-size="34">Internet Banking System - API Application - Components</font><br /><font point-size="24">The component diagram for the API Application.</font>> 4 [id=4,shape=rect, label=<<font point-size="34">Mainframe Banking<br />System</font><br /><font point-size="19">[Software System]</font><br /><br /><font point-size="24">Stores all of the core banking<br />information about customers,<br />accounts, transactions, etc.</font>>, style=filled, color="#6b6b6b", fillcolor="#999999", fontcolor="#ffffff"] 5 [id=5,shape=rect, label=<<font point-size="34">E-mail System</font><br /><font point-size="19">[Software System]</font><br /><br /><font point-size="24">The internal Microsoft<br />Exchange e-mail system.</font>>, style=filled, color="#6b6b6b", fillcolor="#999999", fontcolor="#ffffff"] 8 [id=8,shape=rect, label=<<font point-size="34">Single-Page<br />Application</font><br /><font point-size="19">[Container: JavaScript and Angular]</font><br /><br /><font point-size="24">Provides all of the Internet<br />banking functionality to<br />customers via their web<br />browser.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] 9 [id=9,shape=rect, label=<<font point-size="34">Mobile App</font><br /><font point-size="19">[Container: Xamarin]</font><br /><br /><font point-size="24">Provides a limited subset of<br />the Internet banking<br />functionality to customers via<br />their mobile device.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] 18 [id=18,shape=cylinder, label=<<font point-size="34">Database</font><br /><font point-size="19">[Container: Oracle Database Schema]</font><br /><br /><font point-size="24">Stores user registration<br />information, hashed<br />authentication credentials,<br />access logs, etc.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] subgraph cluster_11 { margin=25 label=<<font point-size="24"><br />API Application</font><br /><font point-size="19">[Container: Java and Spring MVC]</font>> labelloc=b color="#444444" fontcolor="#444444" fillcolor="#444444" 12 [id=12,shape=rect, label=<<font point-size="34">Sign In Controller</font><br /><font point-size="19">[Component: Spring MVC Rest Controller]</font><br /><br /><font point-size="24">Allows users to sign in to the<br />Internet Banking System.</font>>, style=filled, color="#5d82a8", fillcolor="#85bbf0", fontcolor="#000000"] 13 [id=13,shape=rect, label=<<font point-size="34">Accounts Summary<br />Controller</font><br /><font point-size="19">[Component: Spring MVC Rest Controller]</font><br /><br /><font point-size="24">Provides customers with a<br />summary of their bank<br />accounts.</font>>, style=filled, color="#5d82a8", fillcolor="#85bbf0", fontcolor="#000000"] 14 [id=14,shape=rect, label=<<font point-size="34">Reset Password<br />Controller</font><br /><font point-size="19">[Component: Spring MVC Rest Controller]</font><br /><br /><font point-size="24">Allows users to reset their<br />passwords with a single use<br />URL.</font>>, style=filled, color="#5d82a8", fillcolor="#85bbf0", fontcolor="#000000"] 15 [id=15,shape=rect, label=<<font point-size="34">Security Component</font><br /><font point-size="19">[Component: Spring Bean]</font><br /><br /><font point-size="24">Provides functionality related<br />to signing in, changing<br />passwords, etc.</font>>, style=filled, color="#5d82a8", fillcolor="#85bbf0", fontcolor="#000000"] 16 [id=16,shape=rect, label=<<font point-size="34">Mainframe Banking<br />System Facade</font><br /><font point-size="19">[Component: Spring Bean]</font><br /><br /><font point-size="24">A facade onto the mainframe<br />banking system.</font>>, style=filled, color="#5d82a8", fillcolor="#85bbf0", fontcolor="#000000"] 17 [id=17,shape=rect, label=<<font point-size="34">E-mail Component</font><br /><font point-size="19">[Component: Spring Bean]</font><br /><br /><font point-size="24">Sends e-mails to users.</font>>, style=filled, color="#5d82a8", fillcolor="#85bbf0", fontcolor="#000000"] } 8 -> 12 [id=32, label=<<font point-size="24">Makes API calls to</font><br /><font point-size="19">[JSON/HTTPS]</font>>, style="dashed", color="#707070", fontcolor="#707070"] 8 -> 13 [id=34, label=<<font point-size="24">Makes API calls to</font><br /><font point-size="19">[JSON/HTTPS]</font>>, style="dashed", color="#707070", fontcolor="#707070"] 8 -> 14 [id=35, label=<<font point-size="24">Makes API calls to</font><br /><font point-size="19">[JSON/HTTPS]</font>>, style="dashed", color="#707070", fontcolor="#707070"] 9 -> 12 [id=36, label=<<font point-size="24">Makes API calls to</font><br /><font point-size="19">[JSON/HTTPS]</font>>, style="dashed", color="#707070", fontcolor="#707070"] 9 -> 13 [id=38, label=<<font point-size="24">Makes API calls to</font><br /><font point-size="19">[JSON/HTTPS]</font>>, style="dashed", color="#707070", fontcolor="#707070"] 9 -> 14 [id=39, label=<<font point-size="24">Makes API calls to</font><br /><font point-size="19">[JSON/HTTPS]</font>>, style="dashed", color="#707070", fontcolor="#707070"] 12 -> 15 [id=40, label=<<font point-size="24">Uses</font>>, style="dashed", color="#707070", fontcolor="#707070"] 13 -> 16 [id=41, label=<<font point-size="24">Uses</font>>, style="dashed", color="#707070", fontcolor="#707070"] 14 -> 15 [id=42, label=<<font point-size="24">Uses</font>>, style="dashed", color="#707070", fontcolor="#707070"] 14 -> 17 [id=43, label=<<font point-size="24">Uses</font>>, style="dashed", color="#707070", fontcolor="#707070"] 15 -> 18 [id=44, label=<<font point-size="24">Reads from and writes to</font><br /><font point-size="19">[SQL/TCP]</font>>, style="dashed", color="#707070", fontcolor="#707070"] 16 -> 4 [id=46, label=<<font point-size="24">Makes API calls to</font><br /><font point-size="19">[XML/HTTPS]</font>>, style="dashed", color="#707070", fontcolor="#707070"] 17 -> 5 [id=48, label=<<font point-size="24">Sends e-mail using</font>>, style="dashed", color="#707070", fontcolor="#707070"] }
digraph { compound=true graph [fontname="Arial", rankdir=TB, ranksep=1.0, nodesep=1.0] node [fontname="Arial", shape=box, margin="0.4,0.3"] edge [fontname="Arial"] label=<<br /><font point-size="34">Internet Banking System - Containers</font><br /><font point-size="24">The container diagram for the Internet Banking System.</font>> 1 [id=1,shape=rect, label=<<font point-size="32">Personal Banking<br />Customer</font><br /><font point-size="17">[Person]</font><br /><br /><font point-size="22">A customer of the bank, with<br />personal bank accounts.</font>>, style=filled, color="#052e56", fillcolor="#08427b", fontcolor="#ffffff"] 4 [id=4,shape=rect, label=<<font point-size="34">Mainframe Banking<br />System</font><br /><font point-size="19">[Software System]</font><br /><br /><font point-size="24">Stores all of the core banking<br />information about customers,<br />accounts, transactions, etc.</font>>, style=filled, color="#6b6b6b", fillcolor="#999999", fontcolor="#ffffff"] 5 [id=5,shape=rect, label=<<font point-size="34">E-mail System</font><br /><font point-size="19">[Software System]</font><br /><br /><font point-size="24">The internal Microsoft<br />Exchange e-mail system.</font>>, style=filled, color="#6b6b6b", fillcolor="#999999", fontcolor="#ffffff"] subgraph cluster_7 { margin=25 label=<<font point-size="24"><br />Internet Banking System</font><br /><font point-size="19">[Software System]</font>> labelloc=b color="#444444" fontcolor="#444444" fillcolor="#444444" 10 [id=10,shape=rect, label=<<font point-size="34">Web Application</font><br /><font point-size="19">[Container: Java and Spring MVC]</font><br /><br /><font point-size="24">Delivers the static content<br />and the Internet banking<br />single page application.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] 11 [id=11,shape=rect, label=<<font point-size="34">API Application</font><br /><font point-size="19">[Container: Java and Spring MVC]</font><br /><br /><font point-size="24">Provides Internet banking<br />functionality via a JSON/HTTPS<br />API.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] 18 [id=18,shape=cylinder, label=<<font point-size="34">Database</font><br /><font point-size="19">[Container: Oracle Database Schema]</font><br /><br /><font point-size="24">Stores user registration<br />information, hashed<br />authentication credentials,<br />access logs, etc.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] 8 [id=8,shape=rect, label=<<font point-size="34">Single-Page<br />Application</font><br /><font point-size="19">[Container: JavaScript and Angular]</font><br /><br /><font point-size="24">Provides all of the Internet<br />banking functionality to<br />customers via their web<br />browser.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] 9 [id=9,shape=rect, label=<<font point-size="34">Mobile App</font><br /><font point-size="19">[Container: Xamarin]</font><br /><br /><font point-size="24">Provides a limited subset of<br />the Internet banking<br />functionality to customers via<br />their mobile device.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] } 5 -> 1 [id=22, label=<<font point-size="24">Sends e-mails to</font>>, style="dashed", color="#707070", fontcolor="#707070"] 1 -> 10 [id=28, label=<<font point-size="24">Visits bigbank.com/ib<br />using</font><br /><font point-size="19">[HTTPS]</font>>, style="dashed", color="#707070", fontcolor="#707070"] 1 -> 8 [id=29, label=<<font point-size="24">Views account balances,<br />and makes payments using</font>>, style="dashed", color="#707070", fontcolor="#707070"] 1 -> 9 [id=30, label=<<font point-size="24">Views account balances,<br />and makes payments using</font>>, style="dashed", color="#707070", fontcolor="#707070"] 10 -> 8 [id=31, label=<<font point-size="24">Delivers to the customer's<br />web browser</font>>, style="dashed", color="#707070", fontcolor="#707070"] 8 -> 11 [id=33, label=<<font point-size="24">Makes API calls to</font><br /><font point-size="19">[JSON/HTTPS]</font>>, style="dashed", color="#707070", fontcolor="#707070"] 9 -> 11 [id=37, label=<<font point-size="24">Makes API calls to</font><br /><font point-size="19">[JSON/HTTPS]</font>>, style="dashed", color="#707070", fontcolor="#707070"] 11 -> 18 [id=45, label=<<font point-size="24">Reads from and writes to</font><br /><font point-size="19">[SQL/TCP]</font>>, style="dashed", color="#707070", fontcolor="#707070"] 11 -> 4 [id=47, label=<<font point-size="24">Makes API calls to</font><br /><font point-size="19">[XML/HTTPS]</font>>, style="dashed", color="#707070", fontcolor="#707070"] 11 -> 5 [id=49, label=<<font point-size="24">Sends e-mail using</font>>, style="dashed", color="#707070", fontcolor="#707070"] }
digraph { compound=true graph [fontname="Arial", rankdir=TB, ranksep=1.0, nodesep=1.0] node [fontname="Arial", shape=box, margin="0.4,0.3"] edge [fontname="Arial"] label=<<br /><font point-size="34">Internet Banking System - Deployment - Development</font><br /><font point-size="24">An example development deployment scenario for the Internet Banking System.</font>> subgraph cluster_50 { margin=25 label=<<font point-size="24">Developer Laptop</font><br /><font point-size="19">[Deployment Node: Microsoft Windows 10 or Apple macOS]</font>> labelloc=b color="#888888" fontcolor="#000000" fillcolor="#ffffff" subgraph cluster_51 { margin=25 label=<<font point-size="24">Web Browser</font><br /><font point-size="19">[Deployment Node: Chrome, Firefox, Safari, or Edge]</font>> labelloc=b color="#888888" fontcolor="#000000" fillcolor="#ffffff" 52 [id=52,shape=rect, label=<<font point-size="34">Single-Page<br />Application</font><br /><font point-size="19">[Container: JavaScript and Angular]</font><br /><br /><font point-size="24">Provides all of the Internet<br />banking functionality to<br />customers via their web<br />browser.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] } subgraph cluster_53 { margin=25 label=<<font point-size="24">Docker Container - Web Server</font><br /><font point-size="19">[Deployment Node: Docker]</font>> labelloc=b color="#888888" fontcolor="#000000" fillcolor="#ffffff" subgraph cluster_54 { margin=25 label=<<font point-size="24">Apache Tomcat</font><br /><font point-size="19">[Deployment Node: Apache Tomcat 8.x]</font>> labelloc=b color="#888888" fontcolor="#000000" fillcolor="#ffffff" 55 [id=55,shape=rect, label=<<font point-size="34">Web Application</font><br /><font point-size="19">[Container: Java and Spring MVC]</font><br /><br /><font point-size="24">Delivers the static content<br />and the Internet banking<br />single page application.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] 57 [id=57,shape=rect, label=<<font point-size="34">API Application</font><br /><font point-size="19">[Container: Java and Spring MVC]</font><br /><br /><font point-size="24">Provides Internet banking<br />functionality via a JSON/HTTPS<br />API.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] } } subgraph cluster_59 { margin=25 label=<<font point-size="24">Docker Container - Database Server</font><br /><font point-size="19">[Deployment Node: Docker]</font>> labelloc=b color="#888888" fontcolor="#000000" fillcolor="#ffffff" subgraph cluster_60 { margin=25 label=<<font point-size="24">Database Server</font><br /><font point-size="19">[Deployment Node: Oracle 12c]</font>> labelloc=b color="#888888" fontcolor="#000000" fillcolor="#ffffff" 61 [id=61,shape=cylinder, label=<<font point-size="34">Database</font><br /><font point-size="19">[Container: Oracle Database Schema]</font><br /><br /><font point-size="24">Stores user registration<br />information, hashed<br />authentication credentials,<br />access logs, etc.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] } } } subgraph cluster_63 { margin=25 label=<<font point-size="24">Big Bank plc</font><br /><font point-size="19">[Deployment Node: Big Bank plc data center]</font>> labelloc=b color="#888888" fontcolor="#000000" fillcolor="#ffffff" subgraph cluster_64 { margin=25 label=<<font point-size="24">bigbank-dev001</font><br /><font point-size="19">[Deployment Node]</font>> labelloc=b color="#888888" fontcolor="#000000" fillcolor="#ffffff" 65 [id=65,shape=rect, label=<<font point-size="34">Mainframe Banking<br />System</font><br /><font point-size="19">[Software System]</font><br /><br /><font point-size="24">Stores all of the core banking<br />information about customers,<br />accounts, transactions, etc.</font>>, style=filled, color="#6b6b6b", fillcolor="#999999", fontcolor="#ffffff"] } } 55 -> 52 [id=56, label=<<font point-size="24">Delivers to the customer's<br />web browser</font>>, style="dashed", color="#707070", fontcolor="#707070"] 52 -> 57 [id=58, label=<<font point-size="24">Makes API calls to</font><br /><font point-size="19">[JSON/HTTPS]</font>>, style="dashed", color="#707070", fontcolor="#707070"] 57 -> 61 [id=62, label=<<font point-size="24">Reads from and writes to</font><br /><font point-size="19">[SQL/TCP]</font>>, style="dashed", color="#707070", fontcolor="#707070"] 57 -> 65 [id=66, label=<<font point-size="24">Makes API calls to</font><br /><font point-size="19">[XML/HTTPS]</font>>, style="dashed", color="#707070", fontcolor="#707070"] }
digraph { compound=true graph [fontname="Arial", rankdir=TB, ranksep=1.0, nodesep=1.0] node [fontname="Arial", shape=box, margin="0.4,0.3"] edge [fontname="Arial"] label=<<br /><font point-size="34">Internet Banking System - Deployment - Live</font><br /><font point-size="24">An example live deployment scenario for the Internet Banking System.</font>> subgraph cluster_67 { margin=25 label=<<font point-size="24">Customer's mobile device</font><br /><font point-size="19">[Deployment Node: Apple iOS or Android]</font>> labelloc=b color="#888888" fontcolor="#000000" fillcolor="#ffffff" 68 [id=68,shape=rect, label=<<font point-size="34">Mobile App</font><br /><font point-size="19">[Container: Xamarin]</font><br /><br /><font point-size="24">Provides a limited subset of<br />the Internet banking<br />functionality to customers via<br />their mobile device.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] } subgraph cluster_69 { margin=25 label=<<font point-size="24">Customer's computer</font><br /><font point-size="19">[Deployment Node: Microsoft Windows or Apple macOS]</font>> labelloc=b color="#888888" fontcolor="#000000" fillcolor="#ffffff" subgraph cluster_70 { margin=25 label=<<font point-size="24">Web Browser</font><br /><font point-size="19">[Deployment Node: Chrome, Firefox, Safari, or Edge]</font>> labelloc=b color="#888888" fontcolor="#000000" fillcolor="#ffffff" 71 [id=71,shape=rect, label=<<font point-size="34">Single-Page<br />Application</font><br /><font point-size="19">[Container: JavaScript and Angular]</font><br /><br /><font point-size="24">Provides all of the Internet<br />banking functionality to<br />customers via their web<br />browser.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] } } subgraph cluster_72 { margin=25 label=<<font point-size="24">Big Bank plc</font><br /><font point-size="19">[Deployment Node: Big Bank plc data center]</font>> labelloc=b color="#888888" fontcolor="#000000" fillcolor="#ffffff" subgraph cluster_73 { margin=25 label=<<font point-size="24">bigbank-web***</font><br /><font point-size="19">[Deployment Node: Ubuntu 16.04 LTS]</font>> labelloc=b color="#888888" fontcolor="#000000" fillcolor="#ffffff" subgraph cluster_74 { margin=25 label=<<font point-size="24">Apache Tomcat</font><br /><font point-size="19">[Deployment Node: Apache Tomcat 8.x]</font>> labelloc=b color="#888888" fontcolor="#000000" fillcolor="#ffffff" 75 [id=75,shape=rect, label=<<font point-size="34">Web Application</font><br /><font point-size="19">[Container: Java and Spring MVC]</font><br /><br /><font point-size="24">Delivers the static content<br />and the Internet banking<br />single page application.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] } } subgraph cluster_77 { margin=25 label=<<font point-size="24">bigbank-api***</font><br /><font point-size="19">[Deployment Node: Ubuntu 16.04 LTS]</font>> labelloc=b color="#888888" fontcolor="#000000" fillcolor="#ffffff" subgraph cluster_78 { margin=25 label=<<font point-size="24">Apache Tomcat</font><br /><font point-size="19">[Deployment Node: Apache Tomcat 8.x]</font>> labelloc=b color="#888888" fontcolor="#000000" fillcolor="#ffffff" 79 [id=79,shape=rect, label=<<font point-size="34">API Application</font><br /><font point-size="19">[Container: Java and Spring MVC]</font><br /><br /><font point-size="24">Provides Internet banking<br />functionality via a JSON/HTTPS<br />API.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] } } subgraph cluster_82 { margin=25 label=<<font point-size="24">bigbank-db01</font><br /><font point-size="19">[Deployment Node: Ubuntu 16.04 LTS]</font>> labelloc=b color="#888888" fontcolor="#000000" fillcolor="#ffffff" subgraph cluster_83 { margin=25 label=<<font point-size="24">Oracle - Primary</font><br /><font point-size="19">[Deployment Node: Oracle 12c]</font>> labelloc=b color="#888888" fontcolor="#000000" fillcolor="#ffffff" 84 [id=84,shape=cylinder, label=<<font point-size="34">Database</font><br /><font point-size="19">[Container: Oracle Database Schema]</font><br /><br /><font point-size="24">Stores user registration<br />information, hashed<br />authentication credentials,<br />access logs, etc.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] } } subgraph cluster_86 { margin=25 label=<<font point-size="24">bigbank-db02</font><br /><font point-size="19">[Deployment Node: Ubuntu 16.04 LTS]</font>> labelloc=b color="#888888" fontcolor="#000000" fillcolor="#ffffff" subgraph cluster_87 { margin=25 label=<<font point-size="24">Oracle - Secondary</font><br /><font point-size="19">[Deployment Node: Oracle 12c]</font>> labelloc=b color="#888888" fontcolor="#000000" fillcolor="#ffffff" 88 [id=88,shape=cylinder, label=<<font point-size="34">Database</font><br /><font point-size="19">[Container: Oracle Database Schema]</font><br /><br /><font point-size="24">Stores user registration<br />information, hashed<br />authentication credentials,<br />access logs, etc.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] } } subgraph cluster_90 { margin=25 label=<<font point-size="24">bigbank-prod001</font><br /><font point-size="19">[Deployment Node]</font>> labelloc=b color="#888888" fontcolor="#000000" fillcolor="#ffffff" 91 [id=91,shape=rect, label=<<font point-size="34">Mainframe Banking<br />System</font><br /><font point-size="19">[Software System]</font><br /><br /><font point-size="24">Stores all of the core banking<br />information about customers,<br />accounts, transactions, etc.</font>>, style=filled, color="#6b6b6b", fillcolor="#999999", fontcolor="#ffffff"] } } 75 -> 71 [id=76, label=<<font point-size="24">Delivers to the customer's<br />web browser</font>>, style="dashed", color="#707070", fontcolor="#707070"] 71 -> 79 [id=80, label=<<font point-size="24">Makes API calls to</font><br /><font point-size="19">[JSON/HTTPS]</font>>, style="dashed", color="#707070", fontcolor="#707070"] 68 -> 79 [id=81, label=<<font point-size="24">Makes API calls to</font><br /><font point-size="19">[JSON/HTTPS]</font>>, style="dashed", color="#707070", fontcolor="#707070"] 79 -> 84 [id=85, label=<<font point-size="24">Reads from and writes to</font><br /><font point-size="19">[SQL/TCP]</font>>, style="dashed", color="#707070", fontcolor="#707070"] 79 -> 88 [id=89, label=<<font point-size="24">Reads from and writes to</font><br /><font point-size="19">[SQL/TCP]</font>>, style="dashed", color="#707070", fontcolor="#707070"] 79 -> 91 [id=92, label=<<font point-size="24">Makes API calls to</font><br /><font point-size="19">[XML/HTTPS]</font>>, style="dashed", color="#707070", fontcolor="#707070"] 84 -> 88 [id=93, label=<<font point-size="24">Replicates data to</font>>, style="dashed", color="#707070", fontcolor="#707070",ltail=cluster_83,lhead=cluster_87] }
digraph { compound=true graph [fontname="Arial", rankdir=TB, ranksep=1.0, nodesep=1.0] node [fontname="Arial", shape=box, margin="0.4,0.3"] edge [fontname="Arial"] label=<<br /><font point-size="34">API Application - Dynamic</font><br /><font point-size="24">Summarises how the sign in feature works in the single-page application.</font>> subgraph cluster_11 { margin=25 label=<<font point-size="24"><br />API Application</font><br /><font point-size="19">[Container: Java and Spring MVC]</font>> labelloc=b color="#444444" fontcolor="#444444" fillcolor="#444444" 12 [id=12,shape=rect, label=<<font point-size="34">Sign In Controller</font><br /><font point-size="19">[Component: Spring MVC Rest Controller]</font><br /><br /><font point-size="24">Allows users to sign in to the<br />Internet Banking System.</font>>, style=filled, color="#5d82a8", fillcolor="#85bbf0", fontcolor="#000000"] 15 [id=15,shape=rect, label=<<font point-size="34">Security Component</font><br /><font point-size="19">[Component: Spring Bean]</font><br /><br /><font point-size="24">Provides functionality related<br />to signing in, changing<br />passwords, etc.</font>>, style=filled, color="#5d82a8", fillcolor="#85bbf0", fontcolor="#000000"] } 8 [id=8,shape=rect, label=<<font point-size="34">Single-Page<br />Application</font><br /><font point-size="19">[Container: JavaScript and Angular]</font><br /><br /><font point-size="24">Provides all of the Internet<br />banking functionality to<br />customers via their web<br />browser.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] 18 [id=18,shape=cylinder, label=<<font point-size="34">Database</font><br /><font point-size="19">[Container: Oracle Database Schema]</font><br /><br /><font point-size="24">Stores user registration<br />information, hashed<br />authentication credentials,<br />access logs, etc.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] 8 -> 12 [id=32, label=<<font point-size="24">1. Submits credentials to</font><br /><font point-size="19">[JSON/HTTPS]</font>>, style="dashed", color="#707070", fontcolor="#707070"] 12 -> 15 [id=40, label=<<font point-size="24">2. Validates credentials<br />using</font>>, style="dashed", color="#707070", fontcolor="#707070"] 15 -> 18 [id=44, label=<<font point-size="24">3. select * from users<br />where username = ?</font><br /><font point-size="19">[SQL/TCP]</font>>, style="dashed", color="#707070", fontcolor="#707070"] 18 -> 15 [id=44, label=<<font point-size="24">4. Returns user data to</font><br /><font point-size="19">[SQL/TCP]</font>>, style="dashed", color="#707070", fontcolor="#707070"] 15 -> 12 [id=40, label=<<font point-size="24">5. Returns true if the<br />hashed password matches</font>>, style="dashed", color="#707070", fontcolor="#707070"] 12 -> 8 [id=32, label=<<font point-size="24">6. Sends back an<br />authentication token to</font><br /><font point-size="19">[JSON/HTTPS]</font>>, style="dashed", color="#707070", fontcolor="#707070"] }
digraph { compound=true graph [fontname="Arial", rankdir=TB, ranksep=1.0, nodesep=1.0] node [fontname="Arial", shape=box, margin="0.4,0.3"] edge [fontname="Arial"] label=<<br /><font point-size="34">Internet Banking System - System Context</font><br /><font point-size="24">The system context diagram for the Internet Banking System.</font>> subgraph "cluster_group_Big Bank plc" { margin=25 label=<<font point-size="24"><br />Big Bank plc</font>> labelloc=b color="#cccccc" fontcolor="#cccccc" fillcolor="#ffffff" style="dashed" 4 [id=4,shape=rect, label=<<font point-size="34">Mainframe Banking<br />System</font><br /><font point-size="19">[Software System]</font><br /><br /><font point-size="24">Stores all of the core banking<br />information about customers,<br />accounts, transactions, etc.</font>>, style=filled, color="#6b6b6b", fillcolor="#999999", fontcolor="#ffffff"] 5 [id=5,shape=rect, label=<<font point-size="34">E-mail System</font><br /><font point-size="19">[Software System]</font><br /><br /><font point-size="24">The internal Microsoft<br />Exchange e-mail system.</font>>, style=filled, color="#6b6b6b", fillcolor="#999999", fontcolor="#ffffff"] 7 [id=7,shape=rect, label=<<font point-size="34">Internet Banking<br />System</font><br /><font point-size="19">[Software System]</font><br /><br /><font point-size="24">Allows customers to view<br />information about their bank<br />accounts, and make payments.</font>>, style=filled, color="#0b4884", fillcolor="#1168bd", fontcolor="#ffffff"] } 1 [id=1,shape=rect, label=<<font point-size="32">Personal Banking<br />Customer</font><br /><font point-size="17">[Person]</font><br /><br /><font point-size="22">A customer of the bank, with<br />personal bank accounts.</font>>, style=filled, color="#052e56", fillcolor="#08427b", fontcolor="#ffffff"] 1 -> 7 [id=19, label=<<font point-size="24">Views account balances,<br />and makes payments using</font>>, style="dashed", color="#707070", fontcolor="#707070"] 7 -> 4 [id=20, label=<<font point-size="24">Gets account information<br />from, and makes payments<br />using</font>>, style="dashed", color="#707070", fontcolor="#707070"] 7 -> 5 [id=21, label=<<font point-size="24">Sends e-mail using</font>>, style="dashed", color="#707070", fontcolor="#707070"] 5 -> 1 [id=22, label=<<font point-size="24">Sends e-mails to</font>>, style="dashed", color="#707070", fontcolor="#707070"] }
digraph { compound=true graph [fontname="Arial", rankdir=TB, ranksep=1.0, nodesep=1.0] node [fontname="Arial", shape=box, margin="0.4,0.3"] edge [fontname="Arial"] label=<<br /><font point-size="34">System Landscape</font>> subgraph "cluster_group_Big Bank plc" { margin=25 label=<<font point-size="24"><br />Big Bank plc</font>> labelloc=b color="#cccccc" fontcolor="#cccccc" fillcolor="#ffffff" style="dashed" 2 [id=2,shape=rect, label=<<font point-size="32">Customer Service<br />Staff</font><br /><font point-size="17">[Person]</font><br /><br /><font point-size="22">Customer service staff within<br />the bank.</font>>, style=filled, color="#6b6b6b", fillcolor="#999999", fontcolor="#ffffff"] 3 [id=3,shape=rect, label=<<font point-size="32">Back Office Staff</font><br /><font point-size="17">[Person]</font><br /><br /><font point-size="22">Administration and support<br />staff within the bank.</font>>, style=filled, color="#6b6b6b", fillcolor="#999999", fontcolor="#ffffff"] 4 [id=4,shape=rect, label=<<font point-size="34">Mainframe Banking<br />System</font><br /><font point-size="19">[Software System]</font><br /><br /><font point-size="24">Stores all of the core banking<br />information about customers,<br />accounts, transactions, etc.</font>>, style=filled, color="#6b6b6b", fillcolor="#999999", fontcolor="#ffffff"] 5 [id=5,shape=rect, label=<<font point-size="34">E-mail System</font><br /><font point-size="19">[Software System]</font><br /><br /><font point-size="24">The internal Microsoft<br />Exchange e-mail system.</font>>, style=filled, color="#6b6b6b", fillcolor="#999999", fontcolor="#ffffff"] 6 [id=6,shape=rect, label=<<font point-size="34">ATM</font><br /><font point-size="19">[Software System]</font><br /><br /><font point-size="24">Allows customers to withdraw<br />cash.</font>>, style=filled, color="#6b6b6b", fillcolor="#999999", fontcolor="#ffffff"] 7 [id=7,shape=rect, label=<<font point-size="34">Internet Banking<br />System</font><br /><font point-size="19">[Software System]</font><br /><br /><font point-size="24">Allows customers to view<br />information about their bank<br />accounts, and make payments.</font>>, style=filled, color="#0b4884", fillcolor="#1168bd", fontcolor="#ffffff"] } 1 [id=1,shape=rect, label=<<font point-size="32">Personal Banking<br />Customer</font><br /><font point-size="17">[Person]</font><br /><br /><font point-size="22">A customer of the bank, with<br />personal bank accounts.</font>>, style=filled, color="#052e56", fillcolor="#08427b", fontcolor="#ffffff"] 1 -> 7 [id=19, label=<<font point-size="24">Views account balances,<br />and makes payments using</font>>, style="dashed", color="#707070", fontcolor="#707070"] 7 -> 4 [id=20, label=<<font point-size="24">Gets account information<br />from, and makes payments<br />using</font>>, style="dashed", color="#707070", fontcolor="#707070"] 7 -> 5 [id=21, label=<<font point-size="24">Sends e-mail using</font>>, style="dashed", color="#707070", fontcolor="#707070"] 5 -> 1 [id=22, label=<<font point-size="24">Sends e-mails to</font>>, style="dashed", color="#707070", fontcolor="#707070"] 1 -> 2 [id=23, label=<<font point-size="24">Asks questions to</font><br /><font point-size="19">[Telephone]</font>>, style="dashed", color="#707070", fontcolor="#707070"] 2 -> 4 [id=24, label=<<font point-size="24">Uses</font>>, style="dashed", color="#707070", fontcolor="#707070"] 1 -> 6 [id=25, label=<<font point-size="24">Withdraws cash using</font>>, style="dashed", color="#707070", fontcolor="#707070"] 6 -> 4 [id=26, label=<<font point-size="24">Uses</font>>, style="dashed", color="#707070", fontcolor="#707070"] 3 -> 4 [id=27, label=<<font point-size="24">Uses</font>>, style="dashed", color="#707070", fontcolor="#707070"] }
Ilograph definitions are available via the Structurizr CLI export command,
using the -format ilograph
parameter. A single Ilograph export contains the model and all views.
resources: - id: "1" name: "Personal Banking Customer" subtitle: "[Person]" description: "A customer of the bank, with personal bank accounts." backgroundColor: "#08427b" color: "#ffffff" - id: "2" name: "Customer Service Staff" subtitle: "[Person]" description: "Customer service staff within the bank." backgroundColor: "#999999" color: "#ffffff" - id: "3" name: "Back Office Staff" subtitle: "[Person]" description: "Administration and support staff within the bank." backgroundColor: "#999999" color: "#ffffff" - id: "4" name: "Mainframe Banking System" subtitle: "[Software System]" description: "Stores all of the core banking information about customers, accounts, transactions, etc." backgroundColor: "#999999" color: "#ffffff" - id: "5" name: "E-mail System" subtitle: "[Software System]" description: "The internal Microsoft Exchange e-mail system." backgroundColor: "#999999" color: "#ffffff" - id: "6" name: "ATM" subtitle: "[Software System]" description: "Allows customers to withdraw cash." backgroundColor: "#999999" color: "#ffffff" - id: "7" name: "Internet Banking System" subtitle: "[Software System]" description: "Allows customers to view information about their bank accounts, and make payments." backgroundColor: "#1168bd" color: "#ffffff" children: - id: "10" name: "Web Application" subtitle: "[Container: Java and Spring MVC]" description: "Delivers the static content and the Internet banking single page application." backgroundColor: "#438dd5" color: "#ffffff" - id: "11" name: "API Application" subtitle: "[Container: Java and Spring MVC]" description: "Provides Internet banking functionality via a JSON/HTTPS API." backgroundColor: "#438dd5" color: "#ffffff" children: - id: "12" name: "Sign In Controller" subtitle: "[Component: Spring MVC Rest Controller]" description: "Allows users to sign in to the Internet Banking System." backgroundColor: "#85bbf0" color: "#000000" - id: "13" name: "Accounts Summary Controller" subtitle: "[Component: Spring MVC Rest Controller]" description: "Provides customers with a summary of their bank accounts." backgroundColor: "#85bbf0" color: "#000000" - id: "14" name: "Reset Password Controller" subtitle: "[Component: Spring MVC Rest Controller]" description: "Allows users to reset their passwords with a single use URL." backgroundColor: "#85bbf0" color: "#000000" - id: "15" name: "Security Component" subtitle: "[Component: Spring Bean]" description: "Provides functionality related to signing in, changing passwords, etc." backgroundColor: "#85bbf0" color: "#000000" - id: "16" name: "Mainframe Banking System Facade" subtitle: "[Component: Spring Bean]" description: "A facade onto the mainframe banking system." backgroundColor: "#85bbf0" color: "#000000" - id: "17" name: "E-mail Component" subtitle: "[Component: Spring Bean]" description: "Sends e-mails to users." backgroundColor: "#85bbf0" color: "#000000" - id: "18" name: "Database" subtitle: "[Container: Oracle Database Schema]" description: "Stores user registration information, hashed authentication credentials, access logs, etc." backgroundColor: "#438dd5" color: "#ffffff" - id: "8" name: "Single-Page Application" subtitle: "[Container: JavaScript and Angular]" description: "Provides all of the Internet banking functionality to customers via their web browser." backgroundColor: "#438dd5" color: "#ffffff" - id: "9" name: "Mobile App" subtitle: "[Container: Xamarin]" description: "Provides a limited subset of the Internet banking functionality to customers via their mobile device." backgroundColor: "#438dd5" color: "#ffffff" - id: "50" name: "Developer Laptop" subtitle: "[Deployment Node: Microsoft Windows 10 or Apple macOS]" backgroundColor: "#ffffff" color: "#000000" children: - id: "51" name: "Web Browser" subtitle: "[Deployment Node: Chrome, Firefox, Safari, or Edge]" backgroundColor: "#ffffff" color: "#000000" children: - id: "52" name: "Single-Page Application" subtitle: "[Container: JavaScript and Angular]" description: "Provides all of the Internet banking functionality to customers via their web browser." backgroundColor: "#438dd5" color: "#ffffff" - id: "53" name: "Docker Container - Web Server" subtitle: "[Deployment Node: Docker]" backgroundColor: "#ffffff" color: "#000000" children: - id: "54" name: "Apache Tomcat" subtitle: "[Deployment Node: Apache Tomcat 8.x]" backgroundColor: "#ffffff" color: "#000000" children: - id: "55" name: "Web Application" subtitle: "[Container: Java and Spring MVC]" description: "Delivers the static content and the Internet banking single page application." backgroundColor: "#438dd5" color: "#ffffff" - id: "57" name: "API Application" subtitle: "[Container: Java and Spring MVC]" description: "Provides Internet banking functionality via a JSON/HTTPS API." backgroundColor: "#438dd5" color: "#ffffff" - id: "59" name: "Docker Container - Database Server" subtitle: "[Deployment Node: Docker]" backgroundColor: "#ffffff" color: "#000000" children: - id: "60" name: "Database Server" subtitle: "[Deployment Node: Oracle 12c]" backgroundColor: "#ffffff" color: "#000000" children: - id: "61" name: "Database" subtitle: "[Container: Oracle Database Schema]" description: "Stores user registration information, hashed authentication credentials, access logs, etc." backgroundColor: "#438dd5" color: "#ffffff" - id: "63" name: "Big Bank plc" subtitle: "[Deployment Node: Big Bank plc data center]" backgroundColor: "#ffffff" color: "#000000" children: - id: "64" name: "bigbank-dev001" subtitle: "[Deployment Node]" backgroundColor: "#ffffff" color: "#000000" children: - id: "65" name: "Mainframe Banking System" subtitle: "[Software System]" description: "Stores all of the core banking information about customers, accounts, transactions, etc." backgroundColor: "#999999" color: "#ffffff" - id: "67" name: "Customer's mobile device" subtitle: "[Deployment Node: Apple iOS or Android]" backgroundColor: "#ffffff" color: "#000000" children: - id: "68" name: "Mobile App" subtitle: "[Container: Xamarin]" description: "Provides a limited subset of the Internet banking functionality to customers via their mobile device." backgroundColor: "#438dd5" color: "#ffffff" - id: "69" name: "Customer's computer" subtitle: "[Deployment Node: Microsoft Windows or Apple macOS]" backgroundColor: "#ffffff" color: "#000000" children: - id: "70" name: "Web Browser" subtitle: "[Deployment Node: Chrome, Firefox, Safari, or Edge]" backgroundColor: "#ffffff" color: "#000000" children: - id: "71" name: "Single-Page Application" subtitle: "[Container: JavaScript and Angular]" description: "Provides all of the Internet banking functionality to customers via their web browser." backgroundColor: "#438dd5" color: "#ffffff" - id: "72" name: "Big Bank plc" subtitle: "[Deployment Node: Big Bank plc data center]" backgroundColor: "#ffffff" color: "#000000" children: - id: "73" name: "bigbank-web***" subtitle: "[Deployment Node: Ubuntu 16.04 LTS]" backgroundColor: "#ffffff" color: "#000000" children: - id: "74" name: "Apache Tomcat" subtitle: "[Deployment Node: Apache Tomcat 8.x]" backgroundColor: "#ffffff" color: "#000000" children: - id: "75" name: "Web Application" subtitle: "[Container: Java and Spring MVC]" description: "Delivers the static content and the Internet banking single page application." backgroundColor: "#438dd5" color: "#ffffff" - id: "77" name: "bigbank-api***" subtitle: "[Deployment Node: Ubuntu 16.04 LTS]" backgroundColor: "#ffffff" color: "#000000" children: - id: "78" name: "Apache Tomcat" subtitle: "[Deployment Node: Apache Tomcat 8.x]" backgroundColor: "#ffffff" color: "#000000" children: - id: "79" name: "API Application" subtitle: "[Container: Java and Spring MVC]" description: "Provides Internet banking functionality via a JSON/HTTPS API." backgroundColor: "#438dd5" color: "#ffffff" - id: "82" name: "bigbank-db01" subtitle: "[Deployment Node: Ubuntu 16.04 LTS]" backgroundColor: "#ffffff" color: "#000000" children: - id: "83" name: "Oracle - Primary" subtitle: "[Deployment Node: Oracle 12c]" backgroundColor: "#ffffff" color: "#000000" children: - id: "84" name: "Database" subtitle: "[Container: Oracle Database Schema]" description: "Stores user registration information, hashed authentication credentials, access logs, etc." backgroundColor: "#438dd5" color: "#ffffff" - id: "86" name: "bigbank-db02" subtitle: "[Deployment Node: Ubuntu 16.04 LTS]" backgroundColor: "#ffffff" color: "#000000" children: - id: "87" name: "Oracle - Secondary" subtitle: "[Deployment Node: Oracle 12c]" backgroundColor: "#ffffff" color: "#000000" children: - id: "88" name: "Database" subtitle: "[Container: Oracle Database Schema]" description: "Stores user registration information, hashed authentication credentials, access logs, etc." backgroundColor: "#438dd5" color: "#ffffff" - id: "90" name: "bigbank-prod001" subtitle: "[Deployment Node]" backgroundColor: "#ffffff" color: "#000000" children: - id: "91" name: "Mainframe Banking System" subtitle: "[Software System]" description: "Stores all of the core banking information about customers, accounts, transactions, etc." backgroundColor: "#999999" color: "#ffffff" perspectives: - name: Static Structure relations: - from: "1" to: "7" label: "Views account balances, and makes payments using" color: "#707070" - from: "1" to: "2" label: "Asks questions to" description: "Telephone" color: "#707070" - from: "1" to: "6" label: "Withdraws cash using" color: "#707070" - from: "2" to: "4" label: "Uses" color: "#707070" - from: "3" to: "4" label: "Uses" color: "#707070" - from: "5" to: "1" label: "Sends e-mails to" color: "#707070" - from: "6" to: "4" label: "Uses" color: "#707070" - from: "7" to: "4" label: "Gets account information from, and makes payments using" color: "#707070" - from: "7" to: "5" label: "Sends e-mail using" color: "#707070" - from: "1" to: "10" label: "Visits bigbank.com/ib using" description: "HTTPS" color: "#707070" - from: "1" to: "8" label: "Views account balances, and makes payments using" color: "#707070" - from: "1" to: "9" label: "Views account balances, and makes payments using" color: "#707070" - from: "10" to: "8" label: "Delivers to the customer's web browser" color: "#707070" - from: "11" to: "18" label: "Reads from and writes to" description: "SQL/TCP" color: "#707070" - from: "11" to: "4" label: "Makes API calls to" description: "XML/HTTPS" color: "#707070" - from: "11" to: "5" label: "Sends e-mail using" color: "#707070" - from: "8" to: "11" label: "Makes API calls to" description: "JSON/HTTPS" color: "#707070" - from: "9" to: "11" label: "Makes API calls to" description: "JSON/HTTPS" color: "#707070" - from: "12" to: "15" label: "Uses" color: "#707070" - from: "13" to: "16" label: "Uses" color: "#707070" - from: "14" to: "15" label: "Uses" color: "#707070" - from: "14" to: "17" label: "Uses" color: "#707070" - from: "15" to: "18" label: "Reads from and writes to" description: "SQL/TCP" color: "#707070" - from: "16" to: "4" label: "Makes API calls to" description: "XML/HTTPS" color: "#707070" - from: "17" to: "5" label: "Sends e-mail using" color: "#707070" - from: "8" to: "12" label: "Makes API calls to" description: "JSON/HTTPS" color: "#707070" - from: "8" to: "13" label: "Makes API calls to" description: "JSON/HTTPS" color: "#707070" - from: "8" to: "14" label: "Makes API calls to" description: "JSON/HTTPS" color: "#707070" - from: "9" to: "12" label: "Makes API calls to" description: "JSON/HTTPS" color: "#707070" - from: "9" to: "13" label: "Makes API calls to" description: "JSON/HTTPS" color: "#707070" - from: "9" to: "14" label: "Makes API calls to" description: "JSON/HTTPS" color: "#707070" - name: Dynamic - API Application - Dynamic sequence: start: "8" steps: - to: "12" label: "1. Submits credentials to" description: "JSON/HTTPS" color: "#707070" - to: "15" label: "2. Validates credentials using" color: "#707070" - to: "18" label: "3. select * from users where username = ?" description: "SQL/TCP" color: "#707070" - to: "15" label: "4. Returns user data to" description: "SQL/TCP" color: "#707070" - to: "12" label: "5. Returns true if the hashed password matches" color: "#707070" - to: "8" label: "6. Sends back an authentication token to" description: "JSON/HTTPS" color: "#707070" - name: Deployment - Development relations: - from: "52" to: "57" label: "Makes API calls to" description: "JSON/HTTPS" color: "#707070" - from: "55" to: "52" label: "Delivers to the customer's web browser" color: "#707070" - from: "57" to: "61" label: "Reads from and writes to" description: "SQL/TCP" color: "#707070" - from: "57" to: "65" label: "Makes API calls to" description: "XML/HTTPS" color: "#707070" - name: Deployment - Live relations: - from: "68" to: "79" label: "Makes API calls to" description: "JSON/HTTPS" color: "#707070" - from: "71" to: "79" label: "Makes API calls to" description: "JSON/HTTPS" color: "#707070" - from: "75" to: "71" label: "Delivers to the customer's web browser" color: "#707070" - from: "79" to: "84" label: "Reads from and writes to" description: "SQL/TCP" color: "#707070" - from: "79" to: "88" label: "Reads from and writes to" description: "SQL/TCP" color: "#707070" - from: "79" to: "91" label: "Makes API calls to" description: "XML/HTTPS" color: "#707070"