Client-side encrypted workspace
The workspace "" has been client-side encrypted, please enter the passphrase to decrypt it.
!docs
, !adrs
, !script
, etc) are unavailable on this demo page - see Help - DSL for details.
PlantUML definitions are available via the Structurizr CLI export command,
using the -format plantuml
parameter.
@startuml title Internet Banking System - API Application - Components top to bottom direction skinparam { shadowing false arrowFontSize 10 defaultTextAlignment center wrapWidth 200 maxMessageSize 100 } hide stereotype skinparam rectangle<<InternetBankingSystem.APIApplication.AccountsSummaryController>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 } skinparam database<<InternetBankingSystem.Database>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam rectangle<<InternetBankingSystem.APIApplication.EmailComponent>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 } skinparam rectangle<<EmailSystem>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } skinparam rectangle<<MainframeBankingSystem>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } skinparam rectangle<<InternetBankingSystem.APIApplication.MainframeBankingSystemFacade>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 } skinparam rectangle<<InternetBankingSystem.MobileApp>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam rectangle<<InternetBankingSystem.APIApplication.ResetPasswordController>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 } skinparam rectangle<<InternetBankingSystem.APIApplication.SecurityComponent>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 } skinparam rectangle<<InternetBankingSystem.APIApplication.SignInController>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 } skinparam rectangle<<InternetBankingSystem.SinglePageApplication>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } 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 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 package "API Application\n[Container: Java and Spring MVC]" <<InternetBankingSystem.APIApplication>> { skinparam PackageBorderColor<<InternetBankingSystem.APIApplication>> #444444 skinparam PackageFontColor<<InternetBankingSystem.APIApplication>> #444444 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>[JDBC]</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 title Internet Banking System - API Application - Components top to bottom direction skinparam { shadowing false arrowFontSize 10 defaultTextAlignment center wrapWidth 200 maxMessageSize 100 } hide stereotype skinparam rectangle<<InternetBankingSystem.APIApplication.AccountsSummaryController>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 } skinparam database<<InternetBankingSystem.Database>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam rectangle<<InternetBankingSystem.APIApplication.EmailComponent>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 } skinparam rectangle<<EmailSystem>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } skinparam rectangle<<MainframeBankingSystem>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } skinparam rectangle<<InternetBankingSystem.APIApplication.MainframeBankingSystemFacade>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 } skinparam rectangle<<InternetBankingSystem.MobileApp>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam rectangle<<InternetBankingSystem.APIApplication.ResetPasswordController>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 } skinparam rectangle<<InternetBankingSystem.APIApplication.SecurityComponent>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 } skinparam rectangle<<InternetBankingSystem.APIApplication.SignInController>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 } skinparam rectangle<<InternetBankingSystem.SinglePageApplication>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } 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 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 package "API Application\n[Container: Java and Spring MVC]" <<InternetBankingSystem.APIApplication>> { skinparam PackageBorderColor<<InternetBankingSystem.APIApplication>> #444444 skinparam PackageFontColor<<InternetBankingSystem.APIApplication>> #444444 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 hide 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 hide 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 hide 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 hide 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 hide 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 hide 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>[JDBC]</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 title Internet Banking System - API Application - Components top to bottom direction skinparam { shadowing false arrowFontSize 10 defaultTextAlignment center wrapWidth 200 maxMessageSize 100 } hide stereotype skinparam rectangle<<InternetBankingSystem.APIApplication.AccountsSummaryController>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 } skinparam database<<InternetBankingSystem.Database>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam rectangle<<InternetBankingSystem.APIApplication.EmailComponent>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 } skinparam rectangle<<EmailSystem>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } skinparam rectangle<<MainframeBankingSystem>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } skinparam rectangle<<InternetBankingSystem.APIApplication.MainframeBankingSystemFacade>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 } skinparam rectangle<<InternetBankingSystem.MobileApp>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam rectangle<<InternetBankingSystem.APIApplication.ResetPasswordController>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 } skinparam rectangle<<InternetBankingSystem.APIApplication.SecurityComponent>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 } skinparam rectangle<<InternetBankingSystem.APIApplication.SignInController>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 } skinparam rectangle<<InternetBankingSystem.SinglePageApplication>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } 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 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 package "API Application\n[Container: Java and Spring MVC]" <<InternetBankingSystem.APIApplication>> { skinparam PackageBorderColor<<InternetBankingSystem.APIApplication>> #444444 skinparam PackageFontColor<<InternetBankingSystem.APIApplication>> #444444 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 hide 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 hide 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 hide 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 hide 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>[JDBC]</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 title Internet Banking System - API Application - Components top to bottom direction skinparam { shadowing false arrowFontSize 10 defaultTextAlignment center wrapWidth 200 maxMessageSize 100 } hide stereotype skinparam rectangle<<InternetBankingSystem.APIApplication.AccountsSummaryController>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 } skinparam database<<InternetBankingSystem.Database>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam rectangle<<InternetBankingSystem.APIApplication.EmailComponent>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 } skinparam rectangle<<EmailSystem>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } skinparam rectangle<<MainframeBankingSystem>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } skinparam rectangle<<InternetBankingSystem.APIApplication.MainframeBankingSystemFacade>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 } skinparam rectangle<<InternetBankingSystem.MobileApp>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam rectangle<<InternetBankingSystem.APIApplication.ResetPasswordController>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 } skinparam rectangle<<InternetBankingSystem.APIApplication.SecurityComponent>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 } skinparam rectangle<<InternetBankingSystem.APIApplication.SignInController>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 } skinparam rectangle<<InternetBankingSystem.SinglePageApplication>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } 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 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 package "API Application\n[Container: Java and Spring MVC]" <<InternetBankingSystem.APIApplication>> { skinparam PackageBorderColor<<InternetBankingSystem.APIApplication>> #444444 skinparam PackageFontColor<<InternetBankingSystem.APIApplication>> #444444 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 hide 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 hide 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>[JDBC]</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 title Internet Banking System - API Application - Components top to bottom direction skinparam { shadowing false arrowFontSize 10 defaultTextAlignment center wrapWidth 200 maxMessageSize 100 } hide stereotype skinparam rectangle<<InternetBankingSystem.APIApplication.AccountsSummaryController>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 } skinparam database<<InternetBankingSystem.Database>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam rectangle<<InternetBankingSystem.APIApplication.EmailComponent>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 } skinparam rectangle<<EmailSystem>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } skinparam rectangle<<MainframeBankingSystem>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } skinparam rectangle<<InternetBankingSystem.APIApplication.MainframeBankingSystemFacade>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 } skinparam rectangle<<InternetBankingSystem.MobileApp>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam rectangle<<InternetBankingSystem.APIApplication.ResetPasswordController>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 } skinparam rectangle<<InternetBankingSystem.APIApplication.SecurityComponent>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 } skinparam rectangle<<InternetBankingSystem.APIApplication.SignInController>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 } skinparam rectangle<<InternetBankingSystem.SinglePageApplication>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } 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 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 package "API Application\n[Container: Java and Spring MVC]" <<InternetBankingSystem.APIApplication>> { skinparam PackageBorderColor<<InternetBankingSystem.APIApplication>> #444444 skinparam PackageFontColor<<InternetBankingSystem.APIApplication>> #444444 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>[JDBC]</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 title Internet Banking System - Containers top to bottom direction skinparam { shadowing false arrowFontSize 10 defaultTextAlignment center wrapWidth 200 maxMessageSize 100 } hide stereotype skinparam rectangle<<InternetBankingSystem.APIApplication>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam database<<InternetBankingSystem.Database>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam rectangle<<EmailSystem>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } skinparam rectangle<<MainframeBankingSystem>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } skinparam rectangle<<InternetBankingSystem.MobileApp>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam person<<PersonalBankingCustomer>> { BackgroundColor #08427b FontColor #ffffff BorderColor #052e56 } skinparam rectangle<<InternetBankingSystem.SinglePageApplication>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam rectangle<<InternetBankingSystem.WebApplication>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } 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 package "Internet Banking System\n[Software System]" <<InternetBankingSystem>> { skinparam PackageBorderColor<<InternetBankingSystem>> #444444 skinparam PackageFontColor<<InternetBankingSystem>> #444444 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>[JDBC]</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 title Internet Banking System - Containers top to bottom direction skinparam { shadowing false arrowFontSize 10 defaultTextAlignment center wrapWidth 200 maxMessageSize 100 } hide stereotype skinparam rectangle<<InternetBankingSystem.APIApplication>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam database<<InternetBankingSystem.Database>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam rectangle<<EmailSystem>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } skinparam rectangle<<MainframeBankingSystem>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } skinparam rectangle<<InternetBankingSystem.MobileApp>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam person<<PersonalBankingCustomer>> { BackgroundColor #08427b FontColor #ffffff BorderColor #052e56 } skinparam rectangle<<InternetBankingSystem.SinglePageApplication>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam rectangle<<InternetBankingSystem.WebApplication>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } 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 package "Internet Banking System\n[Software System]" <<InternetBankingSystem>> { skinparam PackageBorderColor<<InternetBankingSystem>> #444444 skinparam PackageFontColor<<InternetBankingSystem>> #444444 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 hide 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 hide 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 hide 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 hide 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 hide 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>[JDBC]</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 title Internet Banking System - Containers top to bottom direction skinparam { shadowing false arrowFontSize 10 defaultTextAlignment center wrapWidth 200 maxMessageSize 100 } hide stereotype skinparam rectangle<<InternetBankingSystem.APIApplication>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam database<<InternetBankingSystem.Database>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam rectangle<<EmailSystem>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } skinparam rectangle<<MainframeBankingSystem>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } skinparam rectangle<<InternetBankingSystem.MobileApp>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam person<<PersonalBankingCustomer>> { BackgroundColor #08427b FontColor #ffffff BorderColor #052e56 } skinparam rectangle<<InternetBankingSystem.SinglePageApplication>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam rectangle<<InternetBankingSystem.WebApplication>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } 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 package "Internet Banking System\n[Software System]" <<InternetBankingSystem>> { skinparam PackageBorderColor<<InternetBankingSystem>> #444444 skinparam PackageFontColor<<InternetBankingSystem>> #444444 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 hide 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 hide 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 hide 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 hide 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>[JDBC]</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 title Internet Banking System - Containers top to bottom direction skinparam { shadowing false arrowFontSize 10 defaultTextAlignment center wrapWidth 200 maxMessageSize 100 } hide stereotype skinparam rectangle<<InternetBankingSystem.APIApplication>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam database<<InternetBankingSystem.Database>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam rectangle<<EmailSystem>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } skinparam rectangle<<MainframeBankingSystem>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } skinparam rectangle<<InternetBankingSystem.MobileApp>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam person<<PersonalBankingCustomer>> { BackgroundColor #08427b FontColor #ffffff BorderColor #052e56 } skinparam rectangle<<InternetBankingSystem.SinglePageApplication>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam rectangle<<InternetBankingSystem.WebApplication>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } 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 package "Internet Banking System\n[Software System]" <<InternetBankingSystem>> { skinparam PackageBorderColor<<InternetBankingSystem>> #444444 skinparam PackageFontColor<<InternetBankingSystem>> #444444 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 hide 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 hide 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 hide 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>[JDBC]</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 title Internet Banking System - Containers top to bottom direction skinparam { shadowing false arrowFontSize 10 defaultTextAlignment center wrapWidth 200 maxMessageSize 100 } hide stereotype skinparam rectangle<<InternetBankingSystem.APIApplication>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam database<<InternetBankingSystem.Database>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam rectangle<<EmailSystem>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } skinparam rectangle<<MainframeBankingSystem>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } skinparam rectangle<<InternetBankingSystem.MobileApp>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam person<<PersonalBankingCustomer>> { BackgroundColor #08427b FontColor #ffffff BorderColor #052e56 } skinparam rectangle<<InternetBankingSystem.SinglePageApplication>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam rectangle<<InternetBankingSystem.WebApplication>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } 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 package "Internet Banking System\n[Software System]" <<InternetBankingSystem>> { skinparam PackageBorderColor<<InternetBankingSystem>> #444444 skinparam PackageFontColor<<InternetBankingSystem>> #444444 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 hide 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 hide 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>[JDBC]</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 title Internet Banking System - Containers top to bottom direction skinparam { shadowing false arrowFontSize 10 defaultTextAlignment center wrapWidth 200 maxMessageSize 100 } hide stereotype skinparam rectangle<<InternetBankingSystem.APIApplication>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam database<<InternetBankingSystem.Database>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam rectangle<<EmailSystem>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } skinparam rectangle<<MainframeBankingSystem>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } skinparam rectangle<<InternetBankingSystem.MobileApp>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam person<<PersonalBankingCustomer>> { BackgroundColor #08427b FontColor #ffffff BorderColor #052e56 } skinparam rectangle<<InternetBankingSystem.SinglePageApplication>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam rectangle<<InternetBankingSystem.WebApplication>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } 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 package "Internet Banking System\n[Software System]" <<InternetBankingSystem>> { skinparam PackageBorderColor<<InternetBankingSystem>> #444444 skinparam PackageFontColor<<InternetBankingSystem>> #444444 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 hide 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>[JDBC]</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 title Internet Banking System - Containers top to bottom direction skinparam { shadowing false arrowFontSize 10 defaultTextAlignment center wrapWidth 200 maxMessageSize 100 } hide stereotype skinparam rectangle<<InternetBankingSystem.APIApplication>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam database<<InternetBankingSystem.Database>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam rectangle<<EmailSystem>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } skinparam rectangle<<MainframeBankingSystem>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } skinparam rectangle<<InternetBankingSystem.MobileApp>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam person<<PersonalBankingCustomer>> { BackgroundColor #08427b FontColor #ffffff BorderColor #052e56 } skinparam rectangle<<InternetBankingSystem.SinglePageApplication>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam rectangle<<InternetBankingSystem.WebApplication>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } 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 package "Internet Banking System\n[Software System]" <<InternetBankingSystem>> { skinparam PackageBorderColor<<InternetBankingSystem>> #444444 skinparam PackageFontColor<<InternetBankingSystem>> #444444 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>[JDBC]</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 title Internet Banking System - Deployment - Development top to bottom direction skinparam { shadowing false arrowFontSize 10 defaultTextAlignment center wrapWidth 200 maxMessageSize 100 } hide stereotype skinparam rectangle<<Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.APIApplication_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam node<<Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Development.BigBankplc>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam database<<Development.DeveloperLaptop.DockerContainerDatabaseServer.DatabaseServer.Database_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam node<<Development.DeveloperLaptop.DockerContainerDatabaseServer.DatabaseServer>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Development.DeveloperLaptop>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Development.DeveloperLaptop.DockerContainerDatabaseServer>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Development.DeveloperLaptop.DockerContainerWebServer>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam rectangle<<Development.BigBankplc.bigbankdev001.MainframeBankingSystem_1>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } skinparam rectangle<<Development.DeveloperLaptop.WebBrowser.SinglePageApplication_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam rectangle<<Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.WebApplication_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam node<<Development.DeveloperLaptop.WebBrowser>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Development.BigBankplc.bigbankdev001>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } node "Developer Laptop\n[Deployment Node: Microsoft Windows 10 or Apple macOS]" <<Development.DeveloperLaptop>> as Development.DeveloperLaptop { node "Docker Container - Database Server\n[Deployment Node: Docker]" <<Development.DeveloperLaptop.DockerContainerDatabaseServer>> as Development.DeveloperLaptop.DockerContainerDatabaseServer { node "Database Server\n[Deployment Node: Oracle 12c]" <<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 } } node "Docker Container - Web Server\n[Deployment Node: Docker]" <<Development.DeveloperLaptop.DockerContainerWebServer>> as Development.DeveloperLaptop.DockerContainerWebServer { node "Apache Tomcat\n[Deployment Node: Apache Tomcat 8.x]" <<Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat>> as Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat { 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 "==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 } } node "Web Browser\n[Deployment Node: Chrome, Firefox, Safari, or Edge]" <<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 } } node "Big Bank plc\n[Deployment Node: Big Bank plc data center]" <<Development.BigBankplc>> as Development.BigBankplc { node "bigbank-dev001\n[Deployment Node]" <<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>[JDBC]</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 title Internet Banking System - Deployment - Development top to bottom direction skinparam { shadowing false arrowFontSize 10 defaultTextAlignment center wrapWidth 200 maxMessageSize 100 } hide stereotype skinparam rectangle<<Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.APIApplication_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam node<<Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Development.BigBankplc>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam database<<Development.DeveloperLaptop.DockerContainerDatabaseServer.DatabaseServer.Database_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam node<<Development.DeveloperLaptop.DockerContainerDatabaseServer.DatabaseServer>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Development.DeveloperLaptop>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Development.DeveloperLaptop.DockerContainerDatabaseServer>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Development.DeveloperLaptop.DockerContainerWebServer>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam rectangle<<Development.BigBankplc.bigbankdev001.MainframeBankingSystem_1>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } skinparam rectangle<<Development.DeveloperLaptop.WebBrowser.SinglePageApplication_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam rectangle<<Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.WebApplication_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam node<<Development.DeveloperLaptop.WebBrowser>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Development.BigBankplc.bigbankdev001>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } node "Developer Laptop\n[Deployment Node: Microsoft Windows 10 or Apple macOS]" <<Development.DeveloperLaptop>> as Development.DeveloperLaptop { node "Docker Container - Database Server\n[Deployment Node: Docker]" <<Development.DeveloperLaptop.DockerContainerDatabaseServer>> as Development.DeveloperLaptop.DockerContainerDatabaseServer { hide Development.DeveloperLaptop.DockerContainerDatabaseServer node "Database Server\n[Deployment Node: Oracle 12c]" <<Development.DeveloperLaptop.DockerContainerDatabaseServer.DatabaseServer>> as Development.DeveloperLaptop.DockerContainerDatabaseServer.DatabaseServer { hide 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 hide Development.DeveloperLaptop.DockerContainerDatabaseServer.DatabaseServer.Database_1 } } node "Docker Container - Web Server\n[Deployment Node: Docker]" <<Development.DeveloperLaptop.DockerContainerWebServer>> as Development.DeveloperLaptop.DockerContainerWebServer { hide Development.DeveloperLaptop.DockerContainerWebServer node "Apache Tomcat\n[Deployment Node: Apache Tomcat 8.x]" <<Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat>> as Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat { hide Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat 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 hide Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.APIApplication_1 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 hide Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.WebApplication_1 } } node "Web Browser\n[Deployment Node: Chrome, Firefox, Safari, or Edge]" <<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 } } node "Big Bank plc\n[Deployment Node: Big Bank plc data center]" <<Development.BigBankplc>> as Development.BigBankplc { hide Development.BigBankplc node "bigbank-dev001\n[Deployment Node]" <<Development.BigBankplc.bigbankdev001>> as Development.BigBankplc.bigbankdev001 { hide 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 hide 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>[JDBC]</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 title Internet Banking System - Deployment - Development top to bottom direction skinparam { shadowing false arrowFontSize 10 defaultTextAlignment center wrapWidth 200 maxMessageSize 100 } hide stereotype skinparam rectangle<<Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.APIApplication_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam node<<Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Development.BigBankplc>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam database<<Development.DeveloperLaptop.DockerContainerDatabaseServer.DatabaseServer.Database_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam node<<Development.DeveloperLaptop.DockerContainerDatabaseServer.DatabaseServer>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Development.DeveloperLaptop>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Development.DeveloperLaptop.DockerContainerDatabaseServer>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Development.DeveloperLaptop.DockerContainerWebServer>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam rectangle<<Development.BigBankplc.bigbankdev001.MainframeBankingSystem_1>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } skinparam rectangle<<Development.DeveloperLaptop.WebBrowser.SinglePageApplication_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam rectangle<<Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.WebApplication_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam node<<Development.DeveloperLaptop.WebBrowser>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Development.BigBankplc.bigbankdev001>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } node "Developer Laptop\n[Deployment Node: Microsoft Windows 10 or Apple macOS]" <<Development.DeveloperLaptop>> as Development.DeveloperLaptop { node "Docker Container - Database Server\n[Deployment Node: Docker]" <<Development.DeveloperLaptop.DockerContainerDatabaseServer>> as Development.DeveloperLaptop.DockerContainerDatabaseServer { hide Development.DeveloperLaptop.DockerContainerDatabaseServer node "Database Server\n[Deployment Node: Oracle 12c]" <<Development.DeveloperLaptop.DockerContainerDatabaseServer.DatabaseServer>> as Development.DeveloperLaptop.DockerContainerDatabaseServer.DatabaseServer { hide 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 hide Development.DeveloperLaptop.DockerContainerDatabaseServer.DatabaseServer.Database_1 } } node "Docker Container - Web Server\n[Deployment Node: Docker]" <<Development.DeveloperLaptop.DockerContainerWebServer>> as Development.DeveloperLaptop.DockerContainerWebServer { node "Apache Tomcat\n[Deployment Node: Apache Tomcat 8.x]" <<Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat>> as Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat { 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 "==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 } } node "Web Browser\n[Deployment Node: Chrome, Firefox, Safari, or Edge]" <<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 } } node "Big Bank plc\n[Deployment Node: Big Bank plc data center]" <<Development.BigBankplc>> as Development.BigBankplc { hide Development.BigBankplc node "bigbank-dev001\n[Deployment Node]" <<Development.BigBankplc.bigbankdev001>> as Development.BigBankplc.bigbankdev001 { hide 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 hide 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>[JDBC]</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 title Internet Banking System - Deployment - Development top to bottom direction skinparam { shadowing false arrowFontSize 10 defaultTextAlignment center wrapWidth 200 maxMessageSize 100 } hide stereotype skinparam rectangle<<Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.APIApplication_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam node<<Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Development.BigBankplc>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam database<<Development.DeveloperLaptop.DockerContainerDatabaseServer.DatabaseServer.Database_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam node<<Development.DeveloperLaptop.DockerContainerDatabaseServer.DatabaseServer>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Development.DeveloperLaptop>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Development.DeveloperLaptop.DockerContainerDatabaseServer>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Development.DeveloperLaptop.DockerContainerWebServer>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam rectangle<<Development.BigBankplc.bigbankdev001.MainframeBankingSystem_1>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } skinparam rectangle<<Development.DeveloperLaptop.WebBrowser.SinglePageApplication_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam rectangle<<Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.WebApplication_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam node<<Development.DeveloperLaptop.WebBrowser>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Development.BigBankplc.bigbankdev001>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } node "Developer Laptop\n[Deployment Node: Microsoft Windows 10 or Apple macOS]" <<Development.DeveloperLaptop>> as Development.DeveloperLaptop { node "Docker Container - Database Server\n[Deployment Node: Docker]" <<Development.DeveloperLaptop.DockerContainerDatabaseServer>> as Development.DeveloperLaptop.DockerContainerDatabaseServer { node "Database Server\n[Deployment Node: Oracle 12c]" <<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 } } node "Docker Container - Web Server\n[Deployment Node: Docker]" <<Development.DeveloperLaptop.DockerContainerWebServer>> as Development.DeveloperLaptop.DockerContainerWebServer { node "Apache Tomcat\n[Deployment Node: Apache Tomcat 8.x]" <<Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat>> as Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat { 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 "==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 } } node "Web Browser\n[Deployment Node: Chrome, Firefox, Safari, or Edge]" <<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 } } node "Big Bank plc\n[Deployment Node: Big Bank plc data center]" <<Development.BigBankplc>> as Development.BigBankplc { hide Development.BigBankplc node "bigbank-dev001\n[Deployment Node]" <<Development.BigBankplc.bigbankdev001>> as Development.BigBankplc.bigbankdev001 { hide 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 hide 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>[JDBC]</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 title Internet Banking System - Deployment - Live top to bottom direction skinparam { shadowing false arrowFontSize 10 defaultTextAlignment center wrapWidth 200 maxMessageSize 100 } hide stereotype skinparam rectangle<<Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam node<<Live.BigBankplc.bigbankapi.ApacheTomcat>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.BigBankplc.bigbankweb.ApacheTomcat>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.BigBankplc>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.Customerscomputer>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.Customersmobiledevice>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam database<<Live.BigBankplc.bigbankdb02.OracleSecondary.Database_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam database<<Live.BigBankplc.bigbankdb01.OraclePrimary.Database_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam rectangle<<Live.BigBankplc.bigbankprod001.MainframeBankingSystem_1>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } skinparam rectangle<<Live.Customersmobiledevice.MobileApp_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam node<<Live.BigBankplc.bigbankdb01.OraclePrimary>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.BigBankplc.bigbankdb02.OracleSecondary>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam rectangle<<Live.Customerscomputer.WebBrowser.SinglePageApplication_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam rectangle<<Live.BigBankplc.bigbankweb.ApacheTomcat.WebApplication_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam node<<Live.Customerscomputer.WebBrowser>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.BigBankplc.bigbankapi>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.BigBankplc.bigbankdb01>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.BigBankplc.bigbankdb02>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.BigBankplc.bigbankprod001>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.BigBankplc.bigbankweb>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } node "Customer's mobile device\n[Deployment Node: Apple iOS or Android]" <<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 } node "Customer's computer\n[Deployment Node: Microsoft Windows or Apple macOS]" <<Live.Customerscomputer>> as Live.Customerscomputer { node "Web Browser\n[Deployment Node: Chrome, Firefox, Safari, or Edge]" <<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 } } node "Big Bank plc\n[Deployment Node: Big Bank plc data center]" <<Live.BigBankplc>> as Live.BigBankplc { node "bigbank-api*** (x8)\n[Deployment Node: Ubuntu 16.04 LTS]" <<Live.BigBankplc.bigbankapi>> as Live.BigBankplc.bigbankapi { node "Apache Tomcat\n[Deployment Node: Apache Tomcat 8.x]" <<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 } } node "bigbank-db01\n[Deployment Node: Ubuntu 16.04 LTS]" <<Live.BigBankplc.bigbankdb01>> as Live.BigBankplc.bigbankdb01 { node "Oracle - Primary\n[Deployment Node: Oracle 12c]" <<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 } } node "bigbank-db02\n[Deployment Node: Ubuntu 16.04 LTS]" <<Live.BigBankplc.bigbankdb02>> as Live.BigBankplc.bigbankdb02 { node "Oracle - Secondary\n[Deployment Node: Oracle 12c]" <<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 } } node "bigbank-prod001\n[Deployment Node]" <<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 } node "bigbank-web*** (x4)\n[Deployment Node: Ubuntu 16.04 LTS]" <<Live.BigBankplc.bigbankweb>> as Live.BigBankplc.bigbankweb { node "Apache Tomcat\n[Deployment Node: Apache Tomcat 8.x]" <<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 } } } Live.BigBankplc.bigbankweb.ApacheTomcat.WebApplication_1 .[#707070,thickness=2].> Live.Customerscomputer.WebBrowser.SinglePageApplication_1 : "<color:#707070>Delivers to the customer's web browser" 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.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.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>[JDBC]</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>[JDBC]</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 title Internet Banking System - Deployment - Live top to bottom direction skinparam { shadowing false arrowFontSize 10 defaultTextAlignment center wrapWidth 200 maxMessageSize 100 } hide stereotype skinparam rectangle<<Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam node<<Live.BigBankplc.bigbankapi.ApacheTomcat>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.BigBankplc.bigbankweb.ApacheTomcat>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.BigBankplc>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.Customerscomputer>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.Customersmobiledevice>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam database<<Live.BigBankplc.bigbankdb02.OracleSecondary.Database_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam database<<Live.BigBankplc.bigbankdb01.OraclePrimary.Database_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam rectangle<<Live.BigBankplc.bigbankprod001.MainframeBankingSystem_1>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } skinparam rectangle<<Live.Customersmobiledevice.MobileApp_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam node<<Live.BigBankplc.bigbankdb01.OraclePrimary>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.BigBankplc.bigbankdb02.OracleSecondary>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam rectangle<<Live.Customerscomputer.WebBrowser.SinglePageApplication_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam rectangle<<Live.BigBankplc.bigbankweb.ApacheTomcat.WebApplication_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam node<<Live.Customerscomputer.WebBrowser>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.BigBankplc.bigbankapi>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.BigBankplc.bigbankdb01>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.BigBankplc.bigbankdb02>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.BigBankplc.bigbankprod001>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.BigBankplc.bigbankweb>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } node "Customer's mobile device\n[Deployment Node: Apple iOS or Android]" <<Live.Customersmobiledevice>> as Live.Customersmobiledevice { hide 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 hide Live.Customersmobiledevice.MobileApp_1 } node "Customer's computer\n[Deployment Node: Microsoft Windows or Apple macOS]" <<Live.Customerscomputer>> as Live.Customerscomputer { node "Web Browser\n[Deployment Node: Chrome, Firefox, Safari, or Edge]" <<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 } } node "Big Bank plc\n[Deployment Node: Big Bank plc data center]" <<Live.BigBankplc>> as Live.BigBankplc { hide Live.BigBankplc node "bigbank-api*** (x8)\n[Deployment Node: Ubuntu 16.04 LTS]" <<Live.BigBankplc.bigbankapi>> as Live.BigBankplc.bigbankapi { hide Live.BigBankplc.bigbankapi node "Apache Tomcat\n[Deployment Node: Apache Tomcat 8.x]" <<Live.BigBankplc.bigbankapi.ApacheTomcat>> as Live.BigBankplc.bigbankapi.ApacheTomcat { hide 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 hide Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1 } } node "bigbank-db01\n[Deployment Node: Ubuntu 16.04 LTS]" <<Live.BigBankplc.bigbankdb01>> as Live.BigBankplc.bigbankdb01 { hide Live.BigBankplc.bigbankdb01 node "Oracle - Primary\n[Deployment Node: Oracle 12c]" <<Live.BigBankplc.bigbankdb01.OraclePrimary>> as Live.BigBankplc.bigbankdb01.OraclePrimary { hide 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 hide Live.BigBankplc.bigbankdb01.OraclePrimary.Database_1 } } node "bigbank-db02\n[Deployment Node: Ubuntu 16.04 LTS]" <<Live.BigBankplc.bigbankdb02>> as Live.BigBankplc.bigbankdb02 { hide Live.BigBankplc.bigbankdb02 node "Oracle - Secondary\n[Deployment Node: Oracle 12c]" <<Live.BigBankplc.bigbankdb02.OracleSecondary>> as Live.BigBankplc.bigbankdb02.OracleSecondary { hide 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 hide Live.BigBankplc.bigbankdb02.OracleSecondary.Database_1 } } node "bigbank-prod001\n[Deployment Node]" <<Live.BigBankplc.bigbankprod001>> as Live.BigBankplc.bigbankprod001 { hide 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 hide Live.BigBankplc.bigbankprod001.MainframeBankingSystem_1 } node "bigbank-web*** (x4)\n[Deployment Node: Ubuntu 16.04 LTS]" <<Live.BigBankplc.bigbankweb>> as Live.BigBankplc.bigbankweb { hide Live.BigBankplc.bigbankweb node "Apache Tomcat\n[Deployment Node: Apache Tomcat 8.x]" <<Live.BigBankplc.bigbankweb.ApacheTomcat>> as Live.BigBankplc.bigbankweb.ApacheTomcat { hide 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 hide Live.BigBankplc.bigbankweb.ApacheTomcat.WebApplication_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.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.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.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>[JDBC]</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>[JDBC]</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 title Internet Banking System - Deployment - Live top to bottom direction skinparam { shadowing false arrowFontSize 10 defaultTextAlignment center wrapWidth 200 maxMessageSize 100 } hide stereotype skinparam rectangle<<Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam node<<Live.BigBankplc.bigbankapi.ApacheTomcat>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.BigBankplc.bigbankweb.ApacheTomcat>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.BigBankplc>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.Customerscomputer>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.Customersmobiledevice>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam database<<Live.BigBankplc.bigbankdb02.OracleSecondary.Database_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam database<<Live.BigBankplc.bigbankdb01.OraclePrimary.Database_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam rectangle<<Live.BigBankplc.bigbankprod001.MainframeBankingSystem_1>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } skinparam rectangle<<Live.Customersmobiledevice.MobileApp_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam node<<Live.BigBankplc.bigbankdb01.OraclePrimary>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.BigBankplc.bigbankdb02.OracleSecondary>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam rectangle<<Live.Customerscomputer.WebBrowser.SinglePageApplication_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam rectangle<<Live.BigBankplc.bigbankweb.ApacheTomcat.WebApplication_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam node<<Live.Customerscomputer.WebBrowser>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.BigBankplc.bigbankapi>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.BigBankplc.bigbankdb01>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.BigBankplc.bigbankdb02>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.BigBankplc.bigbankprod001>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.BigBankplc.bigbankweb>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } node "Customer's mobile device\n[Deployment Node: Apple iOS or Android]" <<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 } node "Customer's computer\n[Deployment Node: Microsoft Windows or Apple macOS]" <<Live.Customerscomputer>> as Live.Customerscomputer { node "Web Browser\n[Deployment Node: Chrome, Firefox, Safari, or Edge]" <<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 } } node "Big Bank plc\n[Deployment Node: Big Bank plc data center]" <<Live.BigBankplc>> as Live.BigBankplc { hide Live.BigBankplc node "bigbank-api*** (x8)\n[Deployment Node: Ubuntu 16.04 LTS]" <<Live.BigBankplc.bigbankapi>> as Live.BigBankplc.bigbankapi { hide Live.BigBankplc.bigbankapi node "Apache Tomcat\n[Deployment Node: Apache Tomcat 8.x]" <<Live.BigBankplc.bigbankapi.ApacheTomcat>> as Live.BigBankplc.bigbankapi.ApacheTomcat { hide 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 hide Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1 } } node "bigbank-db01\n[Deployment Node: Ubuntu 16.04 LTS]" <<Live.BigBankplc.bigbankdb01>> as Live.BigBankplc.bigbankdb01 { hide Live.BigBankplc.bigbankdb01 node "Oracle - Primary\n[Deployment Node: Oracle 12c]" <<Live.BigBankplc.bigbankdb01.OraclePrimary>> as Live.BigBankplc.bigbankdb01.OraclePrimary { hide 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 hide Live.BigBankplc.bigbankdb01.OraclePrimary.Database_1 } } node "bigbank-db02\n[Deployment Node: Ubuntu 16.04 LTS]" <<Live.BigBankplc.bigbankdb02>> as Live.BigBankplc.bigbankdb02 { hide Live.BigBankplc.bigbankdb02 node "Oracle - Secondary\n[Deployment Node: Oracle 12c]" <<Live.BigBankplc.bigbankdb02.OracleSecondary>> as Live.BigBankplc.bigbankdb02.OracleSecondary { hide 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 hide Live.BigBankplc.bigbankdb02.OracleSecondary.Database_1 } } node "bigbank-prod001\n[Deployment Node]" <<Live.BigBankplc.bigbankprod001>> as Live.BigBankplc.bigbankprod001 { hide 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 hide Live.BigBankplc.bigbankprod001.MainframeBankingSystem_1 } node "bigbank-web*** (x4)\n[Deployment Node: Ubuntu 16.04 LTS]" <<Live.BigBankplc.bigbankweb>> as Live.BigBankplc.bigbankweb { hide Live.BigBankplc.bigbankweb node "Apache Tomcat\n[Deployment Node: Apache Tomcat 8.x]" <<Live.BigBankplc.bigbankweb.ApacheTomcat>> as Live.BigBankplc.bigbankweb.ApacheTomcat { hide 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 hide Live.BigBankplc.bigbankweb.ApacheTomcat.WebApplication_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.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.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.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>[JDBC]</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>[JDBC]</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 title Internet Banking System - Deployment - Live top to bottom direction skinparam { shadowing false arrowFontSize 10 defaultTextAlignment center wrapWidth 200 maxMessageSize 100 } hide stereotype skinparam rectangle<<Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam node<<Live.BigBankplc.bigbankapi.ApacheTomcat>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.BigBankplc.bigbankweb.ApacheTomcat>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.BigBankplc>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.Customerscomputer>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.Customersmobiledevice>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam database<<Live.BigBankplc.bigbankdb02.OracleSecondary.Database_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam database<<Live.BigBankplc.bigbankdb01.OraclePrimary.Database_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam rectangle<<Live.BigBankplc.bigbankprod001.MainframeBankingSystem_1>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } skinparam rectangle<<Live.Customersmobiledevice.MobileApp_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam node<<Live.BigBankplc.bigbankdb01.OraclePrimary>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.BigBankplc.bigbankdb02.OracleSecondary>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam rectangle<<Live.Customerscomputer.WebBrowser.SinglePageApplication_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam rectangle<<Live.BigBankplc.bigbankweb.ApacheTomcat.WebApplication_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam node<<Live.Customerscomputer.WebBrowser>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.BigBankplc.bigbankapi>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.BigBankplc.bigbankdb01>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.BigBankplc.bigbankdb02>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.BigBankplc.bigbankprod001>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.BigBankplc.bigbankweb>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } node "Customer's mobile device\n[Deployment Node: Apple iOS or Android]" <<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 } node "Customer's computer\n[Deployment Node: Microsoft Windows or Apple macOS]" <<Live.Customerscomputer>> as Live.Customerscomputer { node "Web Browser\n[Deployment Node: Chrome, Firefox, Safari, or Edge]" <<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 } } node "Big Bank plc\n[Deployment Node: Big Bank plc data center]" <<Live.BigBankplc>> as Live.BigBankplc { node "bigbank-api*** (x8)\n[Deployment Node: Ubuntu 16.04 LTS]" <<Live.BigBankplc.bigbankapi>> as Live.BigBankplc.bigbankapi { node "Apache Tomcat\n[Deployment Node: Apache Tomcat 8.x]" <<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 } } node "bigbank-db01\n[Deployment Node: Ubuntu 16.04 LTS]" <<Live.BigBankplc.bigbankdb01>> as Live.BigBankplc.bigbankdb01 { hide Live.BigBankplc.bigbankdb01 node "Oracle - Primary\n[Deployment Node: Oracle 12c]" <<Live.BigBankplc.bigbankdb01.OraclePrimary>> as Live.BigBankplc.bigbankdb01.OraclePrimary { hide 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 hide Live.BigBankplc.bigbankdb01.OraclePrimary.Database_1 } } node "bigbank-db02\n[Deployment Node: Ubuntu 16.04 LTS]" <<Live.BigBankplc.bigbankdb02>> as Live.BigBankplc.bigbankdb02 { hide Live.BigBankplc.bigbankdb02 node "Oracle - Secondary\n[Deployment Node: Oracle 12c]" <<Live.BigBankplc.bigbankdb02.OracleSecondary>> as Live.BigBankplc.bigbankdb02.OracleSecondary { hide 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 hide Live.BigBankplc.bigbankdb02.OracleSecondary.Database_1 } } node "bigbank-prod001\n[Deployment Node]" <<Live.BigBankplc.bigbankprod001>> as Live.BigBankplc.bigbankprod001 { hide 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 hide Live.BigBankplc.bigbankprod001.MainframeBankingSystem_1 } node "bigbank-web*** (x4)\n[Deployment Node: Ubuntu 16.04 LTS]" <<Live.BigBankplc.bigbankweb>> as Live.BigBankplc.bigbankweb { node "Apache Tomcat\n[Deployment Node: Apache Tomcat 8.x]" <<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 } } } Live.BigBankplc.bigbankweb.ApacheTomcat.WebApplication_1 .[#707070,thickness=2].> Live.Customerscomputer.WebBrowser.SinglePageApplication_1 : "<color:#707070>Delivers to the customer's web browser" 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.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.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>[JDBC]</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>[JDBC]</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 title Internet Banking System - Deployment - Live top to bottom direction skinparam { shadowing false arrowFontSize 10 defaultTextAlignment center wrapWidth 200 maxMessageSize 100 } hide stereotype skinparam rectangle<<Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam node<<Live.BigBankplc.bigbankapi.ApacheTomcat>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.BigBankplc.bigbankweb.ApacheTomcat>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.BigBankplc>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.Customerscomputer>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.Customersmobiledevice>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam database<<Live.BigBankplc.bigbankdb02.OracleSecondary.Database_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam database<<Live.BigBankplc.bigbankdb01.OraclePrimary.Database_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam rectangle<<Live.BigBankplc.bigbankprod001.MainframeBankingSystem_1>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } skinparam rectangle<<Live.Customersmobiledevice.MobileApp_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam node<<Live.BigBankplc.bigbankdb01.OraclePrimary>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.BigBankplc.bigbankdb02.OracleSecondary>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam rectangle<<Live.Customerscomputer.WebBrowser.SinglePageApplication_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam rectangle<<Live.BigBankplc.bigbankweb.ApacheTomcat.WebApplication_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam node<<Live.Customerscomputer.WebBrowser>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.BigBankplc.bigbankapi>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.BigBankplc.bigbankdb01>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.BigBankplc.bigbankdb02>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.BigBankplc.bigbankprod001>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.BigBankplc.bigbankweb>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } node "Customer's mobile device\n[Deployment Node: Apple iOS or Android]" <<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 } node "Customer's computer\n[Deployment Node: Microsoft Windows or Apple macOS]" <<Live.Customerscomputer>> as Live.Customerscomputer { node "Web Browser\n[Deployment Node: Chrome, Firefox, Safari, or Edge]" <<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 } } node "Big Bank plc\n[Deployment Node: Big Bank plc data center]" <<Live.BigBankplc>> as Live.BigBankplc { node "bigbank-api*** (x8)\n[Deployment Node: Ubuntu 16.04 LTS]" <<Live.BigBankplc.bigbankapi>> as Live.BigBankplc.bigbankapi { node "Apache Tomcat\n[Deployment Node: Apache Tomcat 8.x]" <<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 } } node "bigbank-db01\n[Deployment Node: Ubuntu 16.04 LTS]" <<Live.BigBankplc.bigbankdb01>> as Live.BigBankplc.bigbankdb01 { node "Oracle - Primary\n[Deployment Node: Oracle 12c]" <<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 } } node "bigbank-db02\n[Deployment Node: Ubuntu 16.04 LTS]" <<Live.BigBankplc.bigbankdb02>> as Live.BigBankplc.bigbankdb02 { hide Live.BigBankplc.bigbankdb02 node "Oracle - Secondary\n[Deployment Node: Oracle 12c]" <<Live.BigBankplc.bigbankdb02.OracleSecondary>> as Live.BigBankplc.bigbankdb02.OracleSecondary { hide 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 hide Live.BigBankplc.bigbankdb02.OracleSecondary.Database_1 } } node "bigbank-prod001\n[Deployment Node]" <<Live.BigBankplc.bigbankprod001>> as Live.BigBankplc.bigbankprod001 { hide 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 hide Live.BigBankplc.bigbankprod001.MainframeBankingSystem_1 } node "bigbank-web*** (x4)\n[Deployment Node: Ubuntu 16.04 LTS]" <<Live.BigBankplc.bigbankweb>> as Live.BigBankplc.bigbankweb { node "Apache Tomcat\n[Deployment Node: Apache Tomcat 8.x]" <<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 } } } Live.BigBankplc.bigbankweb.ApacheTomcat.WebApplication_1 .[#707070,thickness=2].> Live.Customerscomputer.WebBrowser.SinglePageApplication_1 : "<color:#707070>Delivers to the customer's web browser" 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.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.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>[JDBC]</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>[JDBC]</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 title Internet Banking System - Deployment - Live top to bottom direction skinparam { shadowing false arrowFontSize 10 defaultTextAlignment center wrapWidth 200 maxMessageSize 100 } hide stereotype skinparam rectangle<<Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam node<<Live.BigBankplc.bigbankapi.ApacheTomcat>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.BigBankplc.bigbankweb.ApacheTomcat>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.BigBankplc>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.Customerscomputer>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.Customersmobiledevice>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam database<<Live.BigBankplc.bigbankdb02.OracleSecondary.Database_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam database<<Live.BigBankplc.bigbankdb01.OraclePrimary.Database_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam rectangle<<Live.BigBankplc.bigbankprod001.MainframeBankingSystem_1>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } skinparam rectangle<<Live.Customersmobiledevice.MobileApp_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam node<<Live.BigBankplc.bigbankdb01.OraclePrimary>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.BigBankplc.bigbankdb02.OracleSecondary>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam rectangle<<Live.Customerscomputer.WebBrowser.SinglePageApplication_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam rectangle<<Live.BigBankplc.bigbankweb.ApacheTomcat.WebApplication_1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam node<<Live.Customerscomputer.WebBrowser>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.BigBankplc.bigbankapi>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.BigBankplc.bigbankdb01>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.BigBankplc.bigbankdb02>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.BigBankplc.bigbankprod001>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } skinparam node<<Live.BigBankplc.bigbankweb>> { BackgroundColor #ffffff FontColor #000000 BorderColor #888888 } node "Customer's mobile device\n[Deployment Node: Apple iOS or Android]" <<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 } node "Customer's computer\n[Deployment Node: Microsoft Windows or Apple macOS]" <<Live.Customerscomputer>> as Live.Customerscomputer { node "Web Browser\n[Deployment Node: Chrome, Firefox, Safari, or Edge]" <<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 } } node "Big Bank plc\n[Deployment Node: Big Bank plc data center]" <<Live.BigBankplc>> as Live.BigBankplc { node "bigbank-api*** (x8)\n[Deployment Node: Ubuntu 16.04 LTS]" <<Live.BigBankplc.bigbankapi>> as Live.BigBankplc.bigbankapi { node "Apache Tomcat\n[Deployment Node: Apache Tomcat 8.x]" <<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 } } node "bigbank-db01\n[Deployment Node: Ubuntu 16.04 LTS]" <<Live.BigBankplc.bigbankdb01>> as Live.BigBankplc.bigbankdb01 { node "Oracle - Primary\n[Deployment Node: Oracle 12c]" <<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 } } node "bigbank-db02\n[Deployment Node: Ubuntu 16.04 LTS]" <<Live.BigBankplc.bigbankdb02>> as Live.BigBankplc.bigbankdb02 { node "Oracle - Secondary\n[Deployment Node: Oracle 12c]" <<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 } } node "bigbank-prod001\n[Deployment Node]" <<Live.BigBankplc.bigbankprod001>> as Live.BigBankplc.bigbankprod001 { hide 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 hide Live.BigBankplc.bigbankprod001.MainframeBankingSystem_1 } node "bigbank-web*** (x4)\n[Deployment Node: Ubuntu 16.04 LTS]" <<Live.BigBankplc.bigbankweb>> as Live.BigBankplc.bigbankweb { node "Apache Tomcat\n[Deployment Node: Apache Tomcat 8.x]" <<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 } } } Live.BigBankplc.bigbankweb.ApacheTomcat.WebApplication_1 .[#707070,thickness=2].> Live.Customerscomputer.WebBrowser.SinglePageApplication_1 : "<color:#707070>Delivers to the customer's web browser" 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.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.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>[JDBC]</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>[JDBC]</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 title API Application - Dynamic top to bottom direction skinparam { shadowing false arrowFontSize 10 defaultTextAlignment center wrapWidth 200 maxMessageSize 100 } hide stereotype skinparam database<<InternetBankingSystem.Database>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam rectangle<<InternetBankingSystem.APIApplication.SecurityComponent>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 } skinparam rectangle<<InternetBankingSystem.APIApplication.SignInController>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 } skinparam rectangle<<InternetBankingSystem.SinglePageApplication>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } package "API Application\n[Container: Java and Spring MVC]" <<InternetBankingSystem.APIApplication>> { skinparam PackageBorderColor<<InternetBankingSystem.APIApplication>> #444444 skinparam PackageFontColor<<InternetBankingSystem.APIApplication>> #444444 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 } 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 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>[JDBC]</size>" InternetBankingSystem.APIApplication.SecurityComponent <.[#707070,thickness=2]. InternetBankingSystem.Database : "<color:#707070>4. Returns user data to\n<color:#707070><size:8>[JDBC]</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 title API Application - Dynamic top to bottom direction skinparam { shadowing false arrowFontSize 10 defaultTextAlignment center wrapWidth 200 maxMessageSize 100 } hide stereotype skinparam database<<InternetBankingSystem.Database>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam rectangle<<InternetBankingSystem.APIApplication.SecurityComponent>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 } skinparam rectangle<<InternetBankingSystem.APIApplication.SignInController>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 } skinparam rectangle<<InternetBankingSystem.SinglePageApplication>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } package "API Application\n[Container: Java and Spring MVC]" <<InternetBankingSystem.APIApplication>> { skinparam PackageBorderColor<<InternetBankingSystem.APIApplication>> #444444 skinparam PackageFontColor<<InternetBankingSystem.APIApplication>> #444444 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 hide InternetBankingSystem.APIApplication.SecurityComponent } 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 hide 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 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 .[hidden].> InternetBankingSystem.APIApplication.SecurityComponent : "<color:#707070>2. Validates credentials using" InternetBankingSystem.APIApplication.SecurityComponent .[hidden].> InternetBankingSystem.Database : "<color:#707070>3. select * from users where username = ?\n<color:#707070><size:8>[JDBC]</size>" InternetBankingSystem.APIApplication.SecurityComponent <.[hidden]. InternetBankingSystem.Database : "<color:#707070>4. Returns user data to\n<color:#707070><size:8>[JDBC]</size>" InternetBankingSystem.APIApplication.SignInController <.[hidden]. InternetBankingSystem.APIApplication.SecurityComponent : "<color:#707070>5. Returns true if the hashed password matches" InternetBankingSystem.SinglePageApplication <.[hidden]. 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 title API Application - Dynamic top to bottom direction skinparam { shadowing false arrowFontSize 10 defaultTextAlignment center wrapWidth 200 maxMessageSize 100 } hide stereotype skinparam database<<InternetBankingSystem.Database>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam rectangle<<InternetBankingSystem.APIApplication.SecurityComponent>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 } skinparam rectangle<<InternetBankingSystem.APIApplication.SignInController>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 } skinparam rectangle<<InternetBankingSystem.SinglePageApplication>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } package "API Application\n[Container: Java and Spring MVC]" <<InternetBankingSystem.APIApplication>> { skinparam PackageBorderColor<<InternetBankingSystem.APIApplication>> #444444 skinparam PackageFontColor<<InternetBankingSystem.APIApplication>> #444444 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 } 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 hide 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 hide InternetBankingSystem.SinglePageApplication InternetBankingSystem.SinglePageApplication .[hidden].> 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 .[hidden].> InternetBankingSystem.Database : "<color:#707070>3. select * from users where username = ?\n<color:#707070><size:8>[JDBC]</size>" InternetBankingSystem.APIApplication.SecurityComponent <.[hidden]. InternetBankingSystem.Database : "<color:#707070>4. Returns user data to\n<color:#707070><size:8>[JDBC]</size>" InternetBankingSystem.APIApplication.SignInController <.[hidden]. InternetBankingSystem.APIApplication.SecurityComponent : "<color:#707070>5. Returns true if the hashed password matches" InternetBankingSystem.SinglePageApplication <.[hidden]. 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 title API Application - Dynamic top to bottom direction skinparam { shadowing false arrowFontSize 10 defaultTextAlignment center wrapWidth 200 maxMessageSize 100 } hide stereotype skinparam database<<InternetBankingSystem.Database>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam rectangle<<InternetBankingSystem.APIApplication.SecurityComponent>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 } skinparam rectangle<<InternetBankingSystem.APIApplication.SignInController>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 } skinparam rectangle<<InternetBankingSystem.SinglePageApplication>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } package "API Application\n[Container: Java and Spring MVC]" <<InternetBankingSystem.APIApplication>> { skinparam PackageBorderColor<<InternetBankingSystem.APIApplication>> #444444 skinparam PackageFontColor<<InternetBankingSystem.APIApplication>> #444444 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 hide 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 } 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 hide InternetBankingSystem.SinglePageApplication InternetBankingSystem.SinglePageApplication .[hidden].> InternetBankingSystem.APIApplication.SignInController : "<color:#707070>1. Submits credentials to\n<color:#707070><size:8>[JSON/HTTPS]</size>" InternetBankingSystem.APIApplication.SignInController .[hidden].> 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>[JDBC]</size>" InternetBankingSystem.APIApplication.SecurityComponent <.[hidden]. InternetBankingSystem.Database : "<color:#707070>4. Returns user data to\n<color:#707070><size:8>[JDBC]</size>" InternetBankingSystem.APIApplication.SignInController <.[hidden]. InternetBankingSystem.APIApplication.SecurityComponent : "<color:#707070>5. Returns true if the hashed password matches" InternetBankingSystem.SinglePageApplication <.[hidden]. 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 title API Application - Dynamic top to bottom direction skinparam { shadowing false arrowFontSize 10 defaultTextAlignment center wrapWidth 200 maxMessageSize 100 } hide stereotype skinparam database<<InternetBankingSystem.Database>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam rectangle<<InternetBankingSystem.APIApplication.SecurityComponent>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 } skinparam rectangle<<InternetBankingSystem.APIApplication.SignInController>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 } skinparam rectangle<<InternetBankingSystem.SinglePageApplication>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } package "API Application\n[Container: Java and Spring MVC]" <<InternetBankingSystem.APIApplication>> { skinparam PackageBorderColor<<InternetBankingSystem.APIApplication>> #444444 skinparam PackageFontColor<<InternetBankingSystem.APIApplication>> #444444 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 hide 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 } 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 hide InternetBankingSystem.SinglePageApplication InternetBankingSystem.SinglePageApplication .[hidden].> InternetBankingSystem.APIApplication.SignInController : "<color:#707070>1. Submits credentials to\n<color:#707070><size:8>[JSON/HTTPS]</size>" InternetBankingSystem.APIApplication.SignInController .[hidden].> InternetBankingSystem.APIApplication.SecurityComponent : "<color:#707070>2. Validates credentials using" InternetBankingSystem.APIApplication.SecurityComponent .[hidden].> InternetBankingSystem.Database : "<color:#707070>3. select * from users where username = ?\n<color:#707070><size:8>[JDBC]</size>" InternetBankingSystem.APIApplication.SecurityComponent <.[#707070,thickness=2]. InternetBankingSystem.Database : "<color:#707070>4. Returns user data to\n<color:#707070><size:8>[JDBC]</size>" InternetBankingSystem.APIApplication.SignInController <.[hidden]. InternetBankingSystem.APIApplication.SecurityComponent : "<color:#707070>5. Returns true if the hashed password matches" InternetBankingSystem.SinglePageApplication <.[hidden]. 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 title API Application - Dynamic top to bottom direction skinparam { shadowing false arrowFontSize 10 defaultTextAlignment center wrapWidth 200 maxMessageSize 100 } hide stereotype skinparam database<<InternetBankingSystem.Database>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam rectangle<<InternetBankingSystem.APIApplication.SecurityComponent>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 } skinparam rectangle<<InternetBankingSystem.APIApplication.SignInController>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 } skinparam rectangle<<InternetBankingSystem.SinglePageApplication>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } package "API Application\n[Container: Java and Spring MVC]" <<InternetBankingSystem.APIApplication>> { skinparam PackageBorderColor<<InternetBankingSystem.APIApplication>> #444444 skinparam PackageFontColor<<InternetBankingSystem.APIApplication>> #444444 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 } 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 hide 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 hide InternetBankingSystem.SinglePageApplication InternetBankingSystem.SinglePageApplication .[hidden].> InternetBankingSystem.APIApplication.SignInController : "<color:#707070>1. Submits credentials to\n<color:#707070><size:8>[JSON/HTTPS]</size>" InternetBankingSystem.APIApplication.SignInController .[hidden].> InternetBankingSystem.APIApplication.SecurityComponent : "<color:#707070>2. Validates credentials using" InternetBankingSystem.APIApplication.SecurityComponent .[hidden].> InternetBankingSystem.Database : "<color:#707070>3. select * from users where username = ?\n<color:#707070><size:8>[JDBC]</size>" InternetBankingSystem.APIApplication.SecurityComponent <.[hidden]. InternetBankingSystem.Database : "<color:#707070>4. Returns user data to\n<color:#707070><size:8>[JDBC]</size>" InternetBankingSystem.APIApplication.SignInController <.[#707070,thickness=2]. InternetBankingSystem.APIApplication.SecurityComponent : "<color:#707070>5. Returns true if the hashed password matches" InternetBankingSystem.SinglePageApplication <.[hidden]. 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 title API Application - Dynamic top to bottom direction skinparam { shadowing false arrowFontSize 10 defaultTextAlignment center wrapWidth 200 maxMessageSize 100 } hide stereotype skinparam database<<InternetBankingSystem.Database>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam rectangle<<InternetBankingSystem.APIApplication.SecurityComponent>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 } skinparam rectangle<<InternetBankingSystem.APIApplication.SignInController>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 } skinparam rectangle<<InternetBankingSystem.SinglePageApplication>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } package "API Application\n[Container: Java and Spring MVC]" <<InternetBankingSystem.APIApplication>> { skinparam PackageBorderColor<<InternetBankingSystem.APIApplication>> #444444 skinparam PackageFontColor<<InternetBankingSystem.APIApplication>> #444444 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 hide InternetBankingSystem.APIApplication.SecurityComponent } 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 hide 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 InternetBankingSystem.SinglePageApplication .[hidden].> InternetBankingSystem.APIApplication.SignInController : "<color:#707070>1. Submits credentials to\n<color:#707070><size:8>[JSON/HTTPS]</size>" InternetBankingSystem.APIApplication.SignInController .[hidden].> InternetBankingSystem.APIApplication.SecurityComponent : "<color:#707070>2. Validates credentials using" InternetBankingSystem.APIApplication.SecurityComponent .[hidden].> InternetBankingSystem.Database : "<color:#707070>3. select * from users where username = ?\n<color:#707070><size:8>[JDBC]</size>" InternetBankingSystem.APIApplication.SecurityComponent <.[hidden]. InternetBankingSystem.Database : "<color:#707070>4. Returns user data to\n<color:#707070><size:8>[JDBC]</size>" InternetBankingSystem.APIApplication.SignInController <.[hidden]. 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 title API Application - Dynamic skinparam { shadowing false arrowFontSize 10 defaultTextAlignment center wrapWidth 200 maxMessageSize 100 } hide stereotype skinparam sequenceParticipant<<InternetBankingSystem.Database>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } skinparam sequenceParticipant<<InternetBankingSystem.APIApplication.SecurityComponent>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 } skinparam sequenceParticipant<<InternetBankingSystem.APIApplication.SignInController>> { BackgroundColor #85bbf0 FontColor #000000 BorderColor #5d82a8 } skinparam sequenceParticipant<<InternetBankingSystem.SinglePageApplication>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } participant "Single-Page Application\n<size:10>[Container: JavaScript and Angular]</size>" as InternetBankingSystem.SinglePageApplication <<InternetBankingSystem.SinglePageApplication>> #438dd5 participant "Sign In Controller\n<size:10>[Component: Spring MVC Rest Controller]</size>" as InternetBankingSystem.APIApplication.SignInController <<InternetBankingSystem.APIApplication.SignInController>> #85bbf0 participant "Security Component\n<size:10>[Component: Spring Bean]</size>" as InternetBankingSystem.APIApplication.SecurityComponent <<InternetBankingSystem.APIApplication.SecurityComponent>> #85bbf0 database "Database\n<size:10>[Container: Oracle Database Schema]</size>" as InternetBankingSystem.Database <<InternetBankingSystem.Database>> #438dd5 InternetBankingSystem.SinglePageApplication -[#707070]> InternetBankingSystem.APIApplication.SignInController : Submits credentials to InternetBankingSystem.APIApplication.SignInController -[#707070]> InternetBankingSystem.APIApplication.SecurityComponent : Validates credentials using InternetBankingSystem.APIApplication.SecurityComponent -[#707070]> InternetBankingSystem.Database : select * from users where username = ? InternetBankingSystem.APIApplication.SecurityComponent <-[#707070]- InternetBankingSystem.Database : Returns user data to InternetBankingSystem.APIApplication.SignInController <-[#707070]- InternetBankingSystem.APIApplication.SecurityComponent : Returns true if the hashed password matches InternetBankingSystem.SinglePageApplication <-[#707070]- InternetBankingSystem.APIApplication.SignInController : Sends back an authentication token to @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml title Internet Banking System - System Context top to bottom direction skinparam { shadowing false arrowFontSize 10 defaultTextAlignment center wrapWidth 200 maxMessageSize 100 } hide stereotype skinparam rectangle<<EmailSystem>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } skinparam rectangle<<InternetBankingSystem>> { BackgroundColor #1168bd FontColor #ffffff BorderColor #0b4884 } skinparam rectangle<<MainframeBankingSystem>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } skinparam person<<PersonalBankingCustomer>> { BackgroundColor #08427b FontColor #ffffff BorderColor #052e56 } package "Big Bank plc" <<enterprise>> { skinparam PackageBorderColor<<enterprise>> #444444 skinparam PackageFontColor<<enterprise>> #444444 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 title Internet Banking System - System Context top to bottom direction skinparam { shadowing false arrowFontSize 10 defaultTextAlignment center wrapWidth 200 maxMessageSize 100 } hide stereotype skinparam rectangle<<EmailSystem>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } skinparam rectangle<<InternetBankingSystem>> { BackgroundColor #1168bd FontColor #ffffff BorderColor #0b4884 } skinparam rectangle<<MainframeBankingSystem>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } skinparam person<<PersonalBankingCustomer>> { BackgroundColor #08427b FontColor #ffffff BorderColor #052e56 } package "Big Bank plc" <<enterprise>> { skinparam PackageBorderColor<<enterprise>> #444444 skinparam PackageFontColor<<enterprise>> #444444 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 hide MainframeBankingSystem rectangle "==E-mail System\n<size:10>[Software System]</size>\n\nThe internal Microsoft Exchange e-mail system." <<EmailSystem>> as EmailSystem hide 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 hide 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 title Internet Banking System - System Context top to bottom direction skinparam { shadowing false arrowFontSize 10 defaultTextAlignment center wrapWidth 200 maxMessageSize 100 } hide stereotype skinparam rectangle<<EmailSystem>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } skinparam rectangle<<InternetBankingSystem>> { BackgroundColor #1168bd FontColor #ffffff BorderColor #0b4884 } skinparam rectangle<<MainframeBankingSystem>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } skinparam person<<PersonalBankingCustomer>> { BackgroundColor #08427b FontColor #ffffff BorderColor #052e56 } package "Big Bank plc" <<enterprise>> { skinparam PackageBorderColor<<enterprise>> #444444 skinparam PackageFontColor<<enterprise>> #444444 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 hide MainframeBankingSystem rectangle "==E-mail System\n<size:10>[Software System]</size>\n\nThe internal Microsoft Exchange e-mail system." <<EmailSystem>> as EmailSystem hide 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 title Internet Banking System - System Context top to bottom direction skinparam { shadowing false arrowFontSize 10 defaultTextAlignment center wrapWidth 200 maxMessageSize 100 } hide stereotype skinparam rectangle<<EmailSystem>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } skinparam rectangle<<InternetBankingSystem>> { BackgroundColor #1168bd FontColor #ffffff BorderColor #0b4884 } skinparam rectangle<<MainframeBankingSystem>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } skinparam person<<PersonalBankingCustomer>> { BackgroundColor #08427b FontColor #ffffff BorderColor #052e56 } package "Big Bank plc" <<enterprise>> { skinparam PackageBorderColor<<enterprise>> #444444 skinparam PackageFontColor<<enterprise>> #444444 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 hide 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 title Internet Banking System - System Context top to bottom direction skinparam { shadowing false arrowFontSize 10 defaultTextAlignment center wrapWidth 200 maxMessageSize 100 } hide stereotype skinparam rectangle<<EmailSystem>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } skinparam rectangle<<InternetBankingSystem>> { BackgroundColor #1168bd FontColor #ffffff BorderColor #0b4884 } skinparam rectangle<<MainframeBankingSystem>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } skinparam person<<PersonalBankingCustomer>> { BackgroundColor #08427b FontColor #ffffff BorderColor #052e56 } package "Big Bank plc" <<enterprise>> { skinparam PackageBorderColor<<enterprise>> #444444 skinparam PackageFontColor<<enterprise>> #444444 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 title System Landscape for Big Bank plc top to bottom direction skinparam { shadowing false arrowFontSize 10 defaultTextAlignment center wrapWidth 200 maxMessageSize 100 } hide stereotype skinparam rectangle<<ATM>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } skinparam person<<BackOfficeStaff>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } skinparam person<<CustomerServiceStaff>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } skinparam rectangle<<EmailSystem>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } skinparam rectangle<<InternetBankingSystem>> { BackgroundColor #1168bd FontColor #ffffff BorderColor #0b4884 } skinparam rectangle<<MainframeBankingSystem>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } skinparam person<<PersonalBankingCustomer>> { BackgroundColor #08427b FontColor #ffffff BorderColor #052e56 } package "Big Bank plc" <<enterprise>> { skinparam PackageBorderColor<<enterprise>> #444444 skinparam PackageFontColor<<enterprise>> #444444 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)
C4-PlantUML definitions are available via the Structurizr CLI export command,
using the -format plantuml/c4plantuml
parameter.
@startuml title Internet Banking System - API Application - Components top to bottom direction !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml System(MainframeBankingSystem, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.", $tags="Element+Software System+Existing System") System(EmailSystem, "E-mail System", "The internal Microsoft Exchange e-mail system.", $tags="Element+Software System+Existing System") ContainerDb(InternetBankingSystem.Database, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="Element+Container+Database") Container(InternetBankingSystem.SinglePageApplication, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.", $tags="Element+Container+Web Browser") Container(InternetBankingSystem.MobileApp, "Mobile App", "Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device.", $tags="Element+Container+Mobile App") Container_Boundary("InternetBankingSystem.APIApplication_boundary", "API Application") { Component(InternetBankingSystem.APIApplication.SignInController, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System.", $tags="Element+Component") Component(InternetBankingSystem.APIApplication.AccountsSummaryController, "Accounts Summary Controller", "Spring MVC Rest Controller", "Provides customers with a summary of their bank accounts.", $tags="Element+Component") Component(InternetBankingSystem.APIApplication.ResetPasswordController, "Reset Password Controller", "Spring MVC Rest Controller", "Allows users to reset their passwords with a single use URL.", $tags="Element+Component") Component(InternetBankingSystem.APIApplication.SecurityComponent, "Security Component", "Spring Bean", "Provides functionality related to signing in, changing passwords, etc.", $tags="Element+Component") Component(InternetBankingSystem.APIApplication.MainframeBankingSystemFacade, "Mainframe Banking System Facade", "Spring Bean", "A facade onto the mainframe banking system.", $tags="Element+Component") Component(InternetBankingSystem.APIApplication.EmailComponent, "E-mail Component", "Spring Bean", "Sends e-mails to users.", $tags="Element+Component") } Rel_D(InternetBankingSystem.SinglePageApplication, InternetBankingSystem.APIApplication.SignInController, "Makes API calls to", "JSON/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.SinglePageApplication, InternetBankingSystem.APIApplication.AccountsSummaryController, "Makes API calls to", "JSON/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.SinglePageApplication, InternetBankingSystem.APIApplication.ResetPasswordController, "Makes API calls to", "JSON/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.MobileApp, InternetBankingSystem.APIApplication.SignInController, "Makes API calls to", "JSON/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.MobileApp, InternetBankingSystem.APIApplication.AccountsSummaryController, "Makes API calls to", "JSON/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.MobileApp, InternetBankingSystem.APIApplication.ResetPasswordController, "Makes API calls to", "JSON/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication.SignInController, InternetBankingSystem.APIApplication.SecurityComponent, "Uses", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication.AccountsSummaryController, InternetBankingSystem.APIApplication.MainframeBankingSystemFacade, "Uses", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication.ResetPasswordController, InternetBankingSystem.APIApplication.SecurityComponent, "Uses", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication.ResetPasswordController, InternetBankingSystem.APIApplication.EmailComponent, "Uses", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication.SecurityComponent, InternetBankingSystem.Database, "Reads from and writes to", "JDBC", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication.MainframeBankingSystemFacade, MainframeBankingSystem, "Makes API calls to", "XML/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication.EmailComponent, EmailSystem, "Sends e-mail using", $tags="Relationship") SHOW_LEGEND() @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml title Internet Banking System - API Application - Components top to bottom direction !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml System(MainframeBankingSystem, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.", $tags="Element+Software System+Existing System") System(EmailSystem, "E-mail System", "The internal Microsoft Exchange e-mail system.", $tags="Element+Software System+Existing System") ContainerDb(InternetBankingSystem.Database, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="Element+Container+Database") Container(InternetBankingSystem.SinglePageApplication, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.", $tags="Element+Container+Web Browser") Container(InternetBankingSystem.MobileApp, "Mobile App", "Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device.", $tags="Element+Container+Mobile App") Container_Boundary("InternetBankingSystem.APIApplication_boundary", "API Application") { Component(InternetBankingSystem.APIApplication.SignInController, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System.", $tags="Element+Component") hide InternetBankingSystem.APIApplication.SignInController Component(InternetBankingSystem.APIApplication.AccountsSummaryController, "Accounts Summary Controller", "Spring MVC Rest Controller", "Provides customers with a summary of their bank accounts.", $tags="Element+Component") hide InternetBankingSystem.APIApplication.AccountsSummaryController Component(InternetBankingSystem.APIApplication.ResetPasswordController, "Reset Password Controller", "Spring MVC Rest Controller", "Allows users to reset their passwords with a single use URL.", $tags="Element+Component") hide InternetBankingSystem.APIApplication.ResetPasswordController Component(InternetBankingSystem.APIApplication.SecurityComponent, "Security Component", "Spring Bean", "Provides functionality related to signing in, changing passwords, etc.", $tags="Element+Component") hide InternetBankingSystem.APIApplication.SecurityComponent Component(InternetBankingSystem.APIApplication.MainframeBankingSystemFacade, "Mainframe Banking System Facade", "Spring Bean", "A facade onto the mainframe banking system.", $tags="Element+Component") hide InternetBankingSystem.APIApplication.MainframeBankingSystemFacade Component(InternetBankingSystem.APIApplication.EmailComponent, "E-mail Component", "Spring Bean", "Sends e-mails to users.", $tags="Element+Component") hide InternetBankingSystem.APIApplication.EmailComponent } Rel_D(InternetBankingSystem.SinglePageApplication, InternetBankingSystem.APIApplication.SignInController, "Makes API calls to", "JSON/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.SinglePageApplication, InternetBankingSystem.APIApplication.AccountsSummaryController, "Makes API calls to", "JSON/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.SinglePageApplication, InternetBankingSystem.APIApplication.ResetPasswordController, "Makes API calls to", "JSON/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.MobileApp, InternetBankingSystem.APIApplication.SignInController, "Makes API calls to", "JSON/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.MobileApp, InternetBankingSystem.APIApplication.AccountsSummaryController, "Makes API calls to", "JSON/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.MobileApp, InternetBankingSystem.APIApplication.ResetPasswordController, "Makes API calls to", "JSON/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication.SignInController, InternetBankingSystem.APIApplication.SecurityComponent, "Uses", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication.AccountsSummaryController, InternetBankingSystem.APIApplication.MainframeBankingSystemFacade, "Uses", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication.ResetPasswordController, InternetBankingSystem.APIApplication.SecurityComponent, "Uses", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication.ResetPasswordController, InternetBankingSystem.APIApplication.EmailComponent, "Uses", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication.SecurityComponent, InternetBankingSystem.Database, "Reads from and writes to", "JDBC", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication.MainframeBankingSystemFacade, MainframeBankingSystem, "Makes API calls to", "XML/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication.EmailComponent, EmailSystem, "Sends e-mail using", $tags="Relationship") SHOW_LEGEND() @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml title Internet Banking System - API Application - Components top to bottom direction !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml System(MainframeBankingSystem, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.", $tags="Element+Software System+Existing System") System(EmailSystem, "E-mail System", "The internal Microsoft Exchange e-mail system.", $tags="Element+Software System+Existing System") ContainerDb(InternetBankingSystem.Database, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="Element+Container+Database") Container(InternetBankingSystem.SinglePageApplication, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.", $tags="Element+Container+Web Browser") Container(InternetBankingSystem.MobileApp, "Mobile App", "Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device.", $tags="Element+Container+Mobile App") Container_Boundary("InternetBankingSystem.APIApplication_boundary", "API Application") { Component(InternetBankingSystem.APIApplication.SignInController, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System.", $tags="Element+Component") Component(InternetBankingSystem.APIApplication.AccountsSummaryController, "Accounts Summary Controller", "Spring MVC Rest Controller", "Provides customers with a summary of their bank accounts.", $tags="Element+Component") hide InternetBankingSystem.APIApplication.AccountsSummaryController Component(InternetBankingSystem.APIApplication.ResetPasswordController, "Reset Password Controller", "Spring MVC Rest Controller", "Allows users to reset their passwords with a single use URL.", $tags="Element+Component") hide InternetBankingSystem.APIApplication.ResetPasswordController Component(InternetBankingSystem.APIApplication.SecurityComponent, "Security Component", "Spring Bean", "Provides functionality related to signing in, changing passwords, etc.", $tags="Element+Component") Component(InternetBankingSystem.APIApplication.MainframeBankingSystemFacade, "Mainframe Banking System Facade", "Spring Bean", "A facade onto the mainframe banking system.", $tags="Element+Component") hide InternetBankingSystem.APIApplication.MainframeBankingSystemFacade Component(InternetBankingSystem.APIApplication.EmailComponent, "E-mail Component", "Spring Bean", "Sends e-mails to users.", $tags="Element+Component") hide InternetBankingSystem.APIApplication.EmailComponent } Rel_D(InternetBankingSystem.SinglePageApplication, InternetBankingSystem.APIApplication.SignInController, "Makes API calls to", "JSON/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.SinglePageApplication, InternetBankingSystem.APIApplication.AccountsSummaryController, "Makes API calls to", "JSON/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.SinglePageApplication, InternetBankingSystem.APIApplication.ResetPasswordController, "Makes API calls to", "JSON/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.MobileApp, InternetBankingSystem.APIApplication.SignInController, "Makes API calls to", "JSON/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.MobileApp, InternetBankingSystem.APIApplication.AccountsSummaryController, "Makes API calls to", "JSON/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.MobileApp, InternetBankingSystem.APIApplication.ResetPasswordController, "Makes API calls to", "JSON/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication.SignInController, InternetBankingSystem.APIApplication.SecurityComponent, "Uses", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication.AccountsSummaryController, InternetBankingSystem.APIApplication.MainframeBankingSystemFacade, "Uses", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication.ResetPasswordController, InternetBankingSystem.APIApplication.SecurityComponent, "Uses", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication.ResetPasswordController, InternetBankingSystem.APIApplication.EmailComponent, "Uses", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication.SecurityComponent, InternetBankingSystem.Database, "Reads from and writes to", "JDBC", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication.MainframeBankingSystemFacade, MainframeBankingSystem, "Makes API calls to", "XML/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication.EmailComponent, EmailSystem, "Sends e-mail using", $tags="Relationship") SHOW_LEGEND() @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml title Internet Banking System - API Application - Components top to bottom direction !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml System(MainframeBankingSystem, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.", $tags="Element+Software System+Existing System") System(EmailSystem, "E-mail System", "The internal Microsoft Exchange e-mail system.", $tags="Element+Software System+Existing System") ContainerDb(InternetBankingSystem.Database, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="Element+Container+Database") Container(InternetBankingSystem.SinglePageApplication, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.", $tags="Element+Container+Web Browser") Container(InternetBankingSystem.MobileApp, "Mobile App", "Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device.", $tags="Element+Container+Mobile App") Container_Boundary("InternetBankingSystem.APIApplication_boundary", "API Application") { Component(InternetBankingSystem.APIApplication.SignInController, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System.", $tags="Element+Component") Component(InternetBankingSystem.APIApplication.AccountsSummaryController, "Accounts Summary Controller", "Spring MVC Rest Controller", "Provides customers with a summary of their bank accounts.", $tags="Element+Component") Component(InternetBankingSystem.APIApplication.ResetPasswordController, "Reset Password Controller", "Spring MVC Rest Controller", "Allows users to reset their passwords with a single use URL.", $tags="Element+Component") hide InternetBankingSystem.APIApplication.ResetPasswordController Component(InternetBankingSystem.APIApplication.SecurityComponent, "Security Component", "Spring Bean", "Provides functionality related to signing in, changing passwords, etc.", $tags="Element+Component") Component(InternetBankingSystem.APIApplication.MainframeBankingSystemFacade, "Mainframe Banking System Facade", "Spring Bean", "A facade onto the mainframe banking system.", $tags="Element+Component") Component(InternetBankingSystem.APIApplication.EmailComponent, "E-mail Component", "Spring Bean", "Sends e-mails to users.", $tags="Element+Component") hide InternetBankingSystem.APIApplication.EmailComponent } Rel_D(InternetBankingSystem.SinglePageApplication, InternetBankingSystem.APIApplication.SignInController, "Makes API calls to", "JSON/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.SinglePageApplication, InternetBankingSystem.APIApplication.AccountsSummaryController, "Makes API calls to", "JSON/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.SinglePageApplication, InternetBankingSystem.APIApplication.ResetPasswordController, "Makes API calls to", "JSON/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.MobileApp, InternetBankingSystem.APIApplication.SignInController, "Makes API calls to", "JSON/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.MobileApp, InternetBankingSystem.APIApplication.AccountsSummaryController, "Makes API calls to", "JSON/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.MobileApp, InternetBankingSystem.APIApplication.ResetPasswordController, "Makes API calls to", "JSON/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication.SignInController, InternetBankingSystem.APIApplication.SecurityComponent, "Uses", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication.AccountsSummaryController, InternetBankingSystem.APIApplication.MainframeBankingSystemFacade, "Uses", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication.ResetPasswordController, InternetBankingSystem.APIApplication.SecurityComponent, "Uses", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication.ResetPasswordController, InternetBankingSystem.APIApplication.EmailComponent, "Uses", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication.SecurityComponent, InternetBankingSystem.Database, "Reads from and writes to", "JDBC", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication.MainframeBankingSystemFacade, MainframeBankingSystem, "Makes API calls to", "XML/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication.EmailComponent, EmailSystem, "Sends e-mail using", $tags="Relationship") SHOW_LEGEND() @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml title Internet Banking System - API Application - Components top to bottom direction !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml System(MainframeBankingSystem, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.", $tags="Element+Software System+Existing System") System(EmailSystem, "E-mail System", "The internal Microsoft Exchange e-mail system.", $tags="Element+Software System+Existing System") ContainerDb(InternetBankingSystem.Database, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="Element+Container+Database") Container(InternetBankingSystem.SinglePageApplication, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.", $tags="Element+Container+Web Browser") Container(InternetBankingSystem.MobileApp, "Mobile App", "Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device.", $tags="Element+Container+Mobile App") Container_Boundary("InternetBankingSystem.APIApplication_boundary", "API Application") { Component(InternetBankingSystem.APIApplication.SignInController, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System.", $tags="Element+Component") Component(InternetBankingSystem.APIApplication.AccountsSummaryController, "Accounts Summary Controller", "Spring MVC Rest Controller", "Provides customers with a summary of their bank accounts.", $tags="Element+Component") Component(InternetBankingSystem.APIApplication.ResetPasswordController, "Reset Password Controller", "Spring MVC Rest Controller", "Allows users to reset their passwords with a single use URL.", $tags="Element+Component") Component(InternetBankingSystem.APIApplication.SecurityComponent, "Security Component", "Spring Bean", "Provides functionality related to signing in, changing passwords, etc.", $tags="Element+Component") Component(InternetBankingSystem.APIApplication.MainframeBankingSystemFacade, "Mainframe Banking System Facade", "Spring Bean", "A facade onto the mainframe banking system.", $tags="Element+Component") Component(InternetBankingSystem.APIApplication.EmailComponent, "E-mail Component", "Spring Bean", "Sends e-mails to users.", $tags="Element+Component") } Rel_D(InternetBankingSystem.SinglePageApplication, InternetBankingSystem.APIApplication.SignInController, "Makes API calls to", "JSON/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.SinglePageApplication, InternetBankingSystem.APIApplication.AccountsSummaryController, "Makes API calls to", "JSON/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.SinglePageApplication, InternetBankingSystem.APIApplication.ResetPasswordController, "Makes API calls to", "JSON/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.MobileApp, InternetBankingSystem.APIApplication.SignInController, "Makes API calls to", "JSON/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.MobileApp, InternetBankingSystem.APIApplication.AccountsSummaryController, "Makes API calls to", "JSON/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.MobileApp, InternetBankingSystem.APIApplication.ResetPasswordController, "Makes API calls to", "JSON/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication.SignInController, InternetBankingSystem.APIApplication.SecurityComponent, "Uses", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication.AccountsSummaryController, InternetBankingSystem.APIApplication.MainframeBankingSystemFacade, "Uses", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication.ResetPasswordController, InternetBankingSystem.APIApplication.SecurityComponent, "Uses", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication.ResetPasswordController, InternetBankingSystem.APIApplication.EmailComponent, "Uses", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication.SecurityComponent, InternetBankingSystem.Database, "Reads from and writes to", "JDBC", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication.MainframeBankingSystemFacade, MainframeBankingSystem, "Makes API calls to", "XML/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication.EmailComponent, EmailSystem, "Sends e-mail using", $tags="Relationship") SHOW_LEGEND() @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml title Internet Banking System - Containers top to bottom direction !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml Person_Ext(PersonalBankingCustomer, "Personal Banking Customer", "A customer of the bank, with personal bank accounts.", $tags="Element+Person+Customer") System(MainframeBankingSystem, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.", $tags="Element+Software System+Existing System") System(EmailSystem, "E-mail System", "The internal Microsoft Exchange e-mail system.", $tags="Element+Software System+Existing System") System_Boundary("InternetBankingSystem_boundary", "Internet Banking System") { Container(InternetBankingSystem.WebApplication, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet banking single page application.", $tags="Element+Container") Container(InternetBankingSystem.APIApplication, "API Application", "Java and Spring MVC", "Provides Internet banking functionality via a JSON/HTTPS API.", $tags="Element+Container") ContainerDb(InternetBankingSystem.Database, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="Element+Container+Database") Container(InternetBankingSystem.SinglePageApplication, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.", $tags="Element+Container+Web Browser") Container(InternetBankingSystem.MobileApp, "Mobile App", "Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device.", $tags="Element+Container+Mobile App") } Rel_D(EmailSystem, PersonalBankingCustomer, "Sends e-mails to", $tags="Relationship") Rel_D(PersonalBankingCustomer, InternetBankingSystem.WebApplication, "Visits bigbank.com/ib using", "HTTPS", $tags="Relationship") Rel_D(PersonalBankingCustomer, InternetBankingSystem.SinglePageApplication, "Views account balances, and makes payments using", $tags="Relationship") Rel_D(PersonalBankingCustomer, InternetBankingSystem.MobileApp, "Views account balances, and makes payments using", $tags="Relationship") Rel_D(InternetBankingSystem.WebApplication, InternetBankingSystem.SinglePageApplication, "Delivers to the customer's web browser", $tags="Relationship") Rel_D(InternetBankingSystem.SinglePageApplication, InternetBankingSystem.APIApplication, "Makes API calls to", "JSON/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.MobileApp, InternetBankingSystem.APIApplication, "Makes API calls to", "JSON/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication, InternetBankingSystem.Database, "Reads from and writes to", "JDBC", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication, MainframeBankingSystem, "Makes API calls to", "XML/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication, EmailSystem, "Sends e-mail using", $tags="Relationship") SHOW_LEGEND() @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml title Internet Banking System - Containers top to bottom direction !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml Person_Ext(PersonalBankingCustomer, "Personal Banking Customer", "A customer of the bank, with personal bank accounts.", $tags="Element+Person+Customer") System(MainframeBankingSystem, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.", $tags="Element+Software System+Existing System") System(EmailSystem, "E-mail System", "The internal Microsoft Exchange e-mail system.", $tags="Element+Software System+Existing System") System_Boundary("InternetBankingSystem_boundary", "Internet Banking System") { Container(InternetBankingSystem.WebApplication, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet banking single page application.", $tags="Element+Container") hide InternetBankingSystem.WebApplication Container(InternetBankingSystem.APIApplication, "API Application", "Java and Spring MVC", "Provides Internet banking functionality via a JSON/HTTPS API.", $tags="Element+Container") hide InternetBankingSystem.APIApplication ContainerDb(InternetBankingSystem.Database, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="Element+Container+Database") hide InternetBankingSystem.Database Container(InternetBankingSystem.SinglePageApplication, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.", $tags="Element+Container+Web Browser") hide InternetBankingSystem.SinglePageApplication Container(InternetBankingSystem.MobileApp, "Mobile App", "Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device.", $tags="Element+Container+Mobile App") hide InternetBankingSystem.MobileApp } Rel_D(EmailSystem, PersonalBankingCustomer, "Sends e-mails to", $tags="Relationship") Rel_D(PersonalBankingCustomer, InternetBankingSystem.WebApplication, "Visits bigbank.com/ib using", "HTTPS", $tags="Relationship") Rel_D(PersonalBankingCustomer, InternetBankingSystem.SinglePageApplication, "Views account balances, and makes payments using", $tags="Relationship") Rel_D(PersonalBankingCustomer, InternetBankingSystem.MobileApp, "Views account balances, and makes payments using", $tags="Relationship") Rel_D(InternetBankingSystem.WebApplication, InternetBankingSystem.SinglePageApplication, "Delivers to the customer's web browser", $tags="Relationship") Rel_D(InternetBankingSystem.SinglePageApplication, InternetBankingSystem.APIApplication, "Makes API calls to", "JSON/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.MobileApp, InternetBankingSystem.APIApplication, "Makes API calls to", "JSON/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication, InternetBankingSystem.Database, "Reads from and writes to", "JDBC", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication, MainframeBankingSystem, "Makes API calls to", "XML/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication, EmailSystem, "Sends e-mail using", $tags="Relationship") SHOW_LEGEND() @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml title Internet Banking System - Containers top to bottom direction !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml Person_Ext(PersonalBankingCustomer, "Personal Banking Customer", "A customer of the bank, with personal bank accounts.", $tags="Element+Person+Customer") System(MainframeBankingSystem, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.", $tags="Element+Software System+Existing System") System(EmailSystem, "E-mail System", "The internal Microsoft Exchange e-mail system.", $tags="Element+Software System+Existing System") System_Boundary("InternetBankingSystem_boundary", "Internet Banking System") { Container(InternetBankingSystem.WebApplication, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet banking single page application.", $tags="Element+Container") Container(InternetBankingSystem.APIApplication, "API Application", "Java and Spring MVC", "Provides Internet banking functionality via a JSON/HTTPS API.", $tags="Element+Container") hide InternetBankingSystem.APIApplication ContainerDb(InternetBankingSystem.Database, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="Element+Container+Database") hide InternetBankingSystem.Database Container(InternetBankingSystem.SinglePageApplication, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.", $tags="Element+Container+Web Browser") hide InternetBankingSystem.SinglePageApplication Container(InternetBankingSystem.MobileApp, "Mobile App", "Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device.", $tags="Element+Container+Mobile App") hide InternetBankingSystem.MobileApp } Rel_D(EmailSystem, PersonalBankingCustomer, "Sends e-mails to", $tags="Relationship") Rel_D(PersonalBankingCustomer, InternetBankingSystem.WebApplication, "Visits bigbank.com/ib using", "HTTPS", $tags="Relationship") Rel_D(PersonalBankingCustomer, InternetBankingSystem.SinglePageApplication, "Views account balances, and makes payments using", $tags="Relationship") Rel_D(PersonalBankingCustomer, InternetBankingSystem.MobileApp, "Views account balances, and makes payments using", $tags="Relationship") Rel_D(InternetBankingSystem.WebApplication, InternetBankingSystem.SinglePageApplication, "Delivers to the customer's web browser", $tags="Relationship") Rel_D(InternetBankingSystem.SinglePageApplication, InternetBankingSystem.APIApplication, "Makes API calls to", "JSON/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.MobileApp, InternetBankingSystem.APIApplication, "Makes API calls to", "JSON/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication, InternetBankingSystem.Database, "Reads from and writes to", "JDBC", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication, MainframeBankingSystem, "Makes API calls to", "XML/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication, EmailSystem, "Sends e-mail using", $tags="Relationship") SHOW_LEGEND() @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml title Internet Banking System - Containers top to bottom direction !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml Person_Ext(PersonalBankingCustomer, "Personal Banking Customer", "A customer of the bank, with personal bank accounts.", $tags="Element+Person+Customer") System(MainframeBankingSystem, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.", $tags="Element+Software System+Existing System") System(EmailSystem, "E-mail System", "The internal Microsoft Exchange e-mail system.", $tags="Element+Software System+Existing System") System_Boundary("InternetBankingSystem_boundary", "Internet Banking System") { Container(InternetBankingSystem.WebApplication, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet banking single page application.", $tags="Element+Container") Container(InternetBankingSystem.APIApplication, "API Application", "Java and Spring MVC", "Provides Internet banking functionality via a JSON/HTTPS API.", $tags="Element+Container") hide InternetBankingSystem.APIApplication ContainerDb(InternetBankingSystem.Database, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="Element+Container+Database") hide InternetBankingSystem.Database Container(InternetBankingSystem.SinglePageApplication, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.", $tags="Element+Container+Web Browser") Container(InternetBankingSystem.MobileApp, "Mobile App", "Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device.", $tags="Element+Container+Mobile App") hide InternetBankingSystem.MobileApp } Rel_D(EmailSystem, PersonalBankingCustomer, "Sends e-mails to", $tags="Relationship") Rel_D(PersonalBankingCustomer, InternetBankingSystem.WebApplication, "Visits bigbank.com/ib using", "HTTPS", $tags="Relationship") Rel_D(PersonalBankingCustomer, InternetBankingSystem.SinglePageApplication, "Views account balances, and makes payments using", $tags="Relationship") Rel_D(PersonalBankingCustomer, InternetBankingSystem.MobileApp, "Views account balances, and makes payments using", $tags="Relationship") Rel_D(InternetBankingSystem.WebApplication, InternetBankingSystem.SinglePageApplication, "Delivers to the customer's web browser", $tags="Relationship") Rel_D(InternetBankingSystem.SinglePageApplication, InternetBankingSystem.APIApplication, "Makes API calls to", "JSON/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.MobileApp, InternetBankingSystem.APIApplication, "Makes API calls to", "JSON/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication, InternetBankingSystem.Database, "Reads from and writes to", "JDBC", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication, MainframeBankingSystem, "Makes API calls to", "XML/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication, EmailSystem, "Sends e-mail using", $tags="Relationship") SHOW_LEGEND() @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml title Internet Banking System - Containers top to bottom direction !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml Person_Ext(PersonalBankingCustomer, "Personal Banking Customer", "A customer of the bank, with personal bank accounts.", $tags="Element+Person+Customer") System(MainframeBankingSystem, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.", $tags="Element+Software System+Existing System") System(EmailSystem, "E-mail System", "The internal Microsoft Exchange e-mail system.", $tags="Element+Software System+Existing System") System_Boundary("InternetBankingSystem_boundary", "Internet Banking System") { Container(InternetBankingSystem.WebApplication, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet banking single page application.", $tags="Element+Container") Container(InternetBankingSystem.APIApplication, "API Application", "Java and Spring MVC", "Provides Internet banking functionality via a JSON/HTTPS API.", $tags="Element+Container") hide InternetBankingSystem.APIApplication ContainerDb(InternetBankingSystem.Database, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="Element+Container+Database") hide InternetBankingSystem.Database Container(InternetBankingSystem.SinglePageApplication, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.", $tags="Element+Container+Web Browser") Container(InternetBankingSystem.MobileApp, "Mobile App", "Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device.", $tags="Element+Container+Mobile App") } Rel_D(EmailSystem, PersonalBankingCustomer, "Sends e-mails to", $tags="Relationship") Rel_D(PersonalBankingCustomer, InternetBankingSystem.WebApplication, "Visits bigbank.com/ib using", "HTTPS", $tags="Relationship") Rel_D(PersonalBankingCustomer, InternetBankingSystem.SinglePageApplication, "Views account balances, and makes payments using", $tags="Relationship") Rel_D(PersonalBankingCustomer, InternetBankingSystem.MobileApp, "Views account balances, and makes payments using", $tags="Relationship") Rel_D(InternetBankingSystem.WebApplication, InternetBankingSystem.SinglePageApplication, "Delivers to the customer's web browser", $tags="Relationship") Rel_D(InternetBankingSystem.SinglePageApplication, InternetBankingSystem.APIApplication, "Makes API calls to", "JSON/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.MobileApp, InternetBankingSystem.APIApplication, "Makes API calls to", "JSON/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication, InternetBankingSystem.Database, "Reads from and writes to", "JDBC", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication, MainframeBankingSystem, "Makes API calls to", "XML/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication, EmailSystem, "Sends e-mail using", $tags="Relationship") SHOW_LEGEND() @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml title Internet Banking System - Containers top to bottom direction !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml Person_Ext(PersonalBankingCustomer, "Personal Banking Customer", "A customer of the bank, with personal bank accounts.", $tags="Element+Person+Customer") System(MainframeBankingSystem, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.", $tags="Element+Software System+Existing System") System(EmailSystem, "E-mail System", "The internal Microsoft Exchange e-mail system.", $tags="Element+Software System+Existing System") System_Boundary("InternetBankingSystem_boundary", "Internet Banking System") { Container(InternetBankingSystem.WebApplication, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet banking single page application.", $tags="Element+Container") Container(InternetBankingSystem.APIApplication, "API Application", "Java and Spring MVC", "Provides Internet banking functionality via a JSON/HTTPS API.", $tags="Element+Container") ContainerDb(InternetBankingSystem.Database, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="Element+Container+Database") hide InternetBankingSystem.Database Container(InternetBankingSystem.SinglePageApplication, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.", $tags="Element+Container+Web Browser") Container(InternetBankingSystem.MobileApp, "Mobile App", "Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device.", $tags="Element+Container+Mobile App") } Rel_D(EmailSystem, PersonalBankingCustomer, "Sends e-mails to", $tags="Relationship") Rel_D(PersonalBankingCustomer, InternetBankingSystem.WebApplication, "Visits bigbank.com/ib using", "HTTPS", $tags="Relationship") Rel_D(PersonalBankingCustomer, InternetBankingSystem.SinglePageApplication, "Views account balances, and makes payments using", $tags="Relationship") Rel_D(PersonalBankingCustomer, InternetBankingSystem.MobileApp, "Views account balances, and makes payments using", $tags="Relationship") Rel_D(InternetBankingSystem.WebApplication, InternetBankingSystem.SinglePageApplication, "Delivers to the customer's web browser", $tags="Relationship") Rel_D(InternetBankingSystem.SinglePageApplication, InternetBankingSystem.APIApplication, "Makes API calls to", "JSON/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.MobileApp, InternetBankingSystem.APIApplication, "Makes API calls to", "JSON/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication, InternetBankingSystem.Database, "Reads from and writes to", "JDBC", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication, MainframeBankingSystem, "Makes API calls to", "XML/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication, EmailSystem, "Sends e-mail using", $tags="Relationship") SHOW_LEGEND() @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml title Internet Banking System - Containers top to bottom direction !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml Person_Ext(PersonalBankingCustomer, "Personal Banking Customer", "A customer of the bank, with personal bank accounts.", $tags="Element+Person+Customer") System(MainframeBankingSystem, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.", $tags="Element+Software System+Existing System") System(EmailSystem, "E-mail System", "The internal Microsoft Exchange e-mail system.", $tags="Element+Software System+Existing System") System_Boundary("InternetBankingSystem_boundary", "Internet Banking System") { Container(InternetBankingSystem.WebApplication, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet banking single page application.", $tags="Element+Container") Container(InternetBankingSystem.APIApplication, "API Application", "Java and Spring MVC", "Provides Internet banking functionality via a JSON/HTTPS API.", $tags="Element+Container") ContainerDb(InternetBankingSystem.Database, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="Element+Container+Database") Container(InternetBankingSystem.SinglePageApplication, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.", $tags="Element+Container+Web Browser") Container(InternetBankingSystem.MobileApp, "Mobile App", "Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device.", $tags="Element+Container+Mobile App") } Rel_D(EmailSystem, PersonalBankingCustomer, "Sends e-mails to", $tags="Relationship") Rel_D(PersonalBankingCustomer, InternetBankingSystem.WebApplication, "Visits bigbank.com/ib using", "HTTPS", $tags="Relationship") Rel_D(PersonalBankingCustomer, InternetBankingSystem.SinglePageApplication, "Views account balances, and makes payments using", $tags="Relationship") Rel_D(PersonalBankingCustomer, InternetBankingSystem.MobileApp, "Views account balances, and makes payments using", $tags="Relationship") Rel_D(InternetBankingSystem.WebApplication, InternetBankingSystem.SinglePageApplication, "Delivers to the customer's web browser", $tags="Relationship") Rel_D(InternetBankingSystem.SinglePageApplication, InternetBankingSystem.APIApplication, "Makes API calls to", "JSON/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.MobileApp, InternetBankingSystem.APIApplication, "Makes API calls to", "JSON/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication, InternetBankingSystem.Database, "Reads from and writes to", "JDBC", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication, MainframeBankingSystem, "Makes API calls to", "XML/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication, EmailSystem, "Sends e-mail using", $tags="Relationship") SHOW_LEGEND() @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml title Internet Banking System - Deployment - Development top to bottom direction !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml Deployment_Node(Development.DeveloperLaptop, "Developer Laptop", "Microsoft Windows 10 or Apple macOS", $tags="Element+Deployment Node") { Deployment_Node(Development.DeveloperLaptop.DockerContainerDatabaseServer, "Docker Container - Database Server", "Docker", $tags="Element+Deployment Node") { Deployment_Node(Development.DeveloperLaptop.DockerContainerDatabaseServer.DatabaseServer, "Database Server", "Oracle 12c", $tags="Element+Deployment Node") { ContainerDb(Development.DeveloperLaptop.DockerContainerDatabaseServer.DatabaseServer.Database_1, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="Element+Container+Database+Container Instance") } } Deployment_Node(Development.DeveloperLaptop.DockerContainerWebServer, "Docker Container - Web Server", "Docker", $tags="Element+Deployment Node") { Deployment_Node(Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat, "Apache Tomcat", "Apache Tomcat 8.x", $tags="Element+Deployment Node") { Container(Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.APIApplication_1, "API Application", "Java and Spring MVC", "Provides Internet banking functionality via a JSON/HTTPS API.", $tags="Element+Container+Container Instance") Container(Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.WebApplication_1, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet banking single page application.", $tags="Element+Container+Container Instance") } } Deployment_Node(Development.DeveloperLaptop.WebBrowser, "Web Browser", "Chrome, Firefox, Safari, or Edge", $tags="Element+Deployment Node") { Container(Development.DeveloperLaptop.WebBrowser.SinglePageApplication_1, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.", $tags="Element+Container+Web Browser+Container Instance") } } Deployment_Node(Development.BigBankplc, "Big Bank plc", "Big Bank plc data center", $tags="Element+Deployment Node+") { Deployment_Node(Development.BigBankplc.bigbankdev001, "bigbank-dev001", $tags="Element+Deployment Node+") { System(Development.BigBankplc.bigbankdev001.MainframeBankingSystem_1, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.", $tags="Element+Software System+Existing System+Software System Instance") } } Rel_D(Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.WebApplication_1, Development.DeveloperLaptop.WebBrowser.SinglePageApplication_1, "Delivers to the customer's web browser", $tags="Relationship") Rel_D(Development.DeveloperLaptop.WebBrowser.SinglePageApplication_1, Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.APIApplication_1, "Makes API calls to", "JSON/HTTPS", $tags="") Rel_D(Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.APIApplication_1, Development.DeveloperLaptop.DockerContainerDatabaseServer.DatabaseServer.Database_1, "Reads from and writes to", "JDBC", $tags="") Rel_D(Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.APIApplication_1, Development.BigBankplc.bigbankdev001.MainframeBankingSystem_1, "Makes API calls to", "XML/HTTPS", $tags="") SHOW_LEGEND() @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml title Internet Banking System - Deployment - Development top to bottom direction !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml Deployment_Node(Development.DeveloperLaptop, "Developer Laptop", "Microsoft Windows 10 or Apple macOS", $tags="Element+Deployment Node") { Deployment_Node(Development.DeveloperLaptop.DockerContainerDatabaseServer, "Docker Container - Database Server", "Docker", $tags="Element+Deployment Node") { hide Development.DeveloperLaptop.DockerContainerDatabaseServer Deployment_Node(Development.DeveloperLaptop.DockerContainerDatabaseServer.DatabaseServer, "Database Server", "Oracle 12c", $tags="Element+Deployment Node") { hide Development.DeveloperLaptop.DockerContainerDatabaseServer.DatabaseServer ContainerDb(Development.DeveloperLaptop.DockerContainerDatabaseServer.DatabaseServer.Database_1, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="Element+Container+Database+Container Instance") hide Development.DeveloperLaptop.DockerContainerDatabaseServer.DatabaseServer.Database_1 } } Deployment_Node(Development.DeveloperLaptop.DockerContainerWebServer, "Docker Container - Web Server", "Docker", $tags="Element+Deployment Node") { hide Development.DeveloperLaptop.DockerContainerWebServer Deployment_Node(Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat, "Apache Tomcat", "Apache Tomcat 8.x", $tags="Element+Deployment Node") { hide Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat Container(Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.APIApplication_1, "API Application", "Java and Spring MVC", "Provides Internet banking functionality via a JSON/HTTPS API.", $tags="Element+Container+Container Instance") hide Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.APIApplication_1 Container(Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.WebApplication_1, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet banking single page application.", $tags="Element+Container+Container Instance") hide Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.WebApplication_1 } } Deployment_Node(Development.DeveloperLaptop.WebBrowser, "Web Browser", "Chrome, Firefox, Safari, or Edge", $tags="Element+Deployment Node") { Container(Development.DeveloperLaptop.WebBrowser.SinglePageApplication_1, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.", $tags="Element+Container+Web Browser+Container Instance") } } Deployment_Node(Development.BigBankplc, "Big Bank plc", "Big Bank plc data center", $tags="Element+Deployment Node+") { hide Development.BigBankplc Deployment_Node(Development.BigBankplc.bigbankdev001, "bigbank-dev001", $tags="Element+Deployment Node+") { hide Development.BigBankplc.bigbankdev001 System(Development.BigBankplc.bigbankdev001.MainframeBankingSystem_1, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.", $tags="Element+Software System+Existing System+Software System Instance") hide Development.BigBankplc.bigbankdev001.MainframeBankingSystem_1 } } Rel_D(Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.WebApplication_1, Development.DeveloperLaptop.WebBrowser.SinglePageApplication_1, "Delivers to the customer's web browser", $tags="Relationship") Rel_D(Development.DeveloperLaptop.WebBrowser.SinglePageApplication_1, Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.APIApplication_1, "Makes API calls to", "JSON/HTTPS", $tags="") Rel_D(Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.APIApplication_1, Development.DeveloperLaptop.DockerContainerDatabaseServer.DatabaseServer.Database_1, "Reads from and writes to", "JDBC", $tags="") Rel_D(Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.APIApplication_1, Development.BigBankplc.bigbankdev001.MainframeBankingSystem_1, "Makes API calls to", "XML/HTTPS", $tags="") SHOW_LEGEND() @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml title Internet Banking System - Deployment - Development top to bottom direction !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml Deployment_Node(Development.DeveloperLaptop, "Developer Laptop", "Microsoft Windows 10 or Apple macOS", $tags="Element+Deployment Node") { Deployment_Node(Development.DeveloperLaptop.DockerContainerDatabaseServer, "Docker Container - Database Server", "Docker", $tags="Element+Deployment Node") { hide Development.DeveloperLaptop.DockerContainerDatabaseServer Deployment_Node(Development.DeveloperLaptop.DockerContainerDatabaseServer.DatabaseServer, "Database Server", "Oracle 12c", $tags="Element+Deployment Node") { hide Development.DeveloperLaptop.DockerContainerDatabaseServer.DatabaseServer ContainerDb(Development.DeveloperLaptop.DockerContainerDatabaseServer.DatabaseServer.Database_1, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="Element+Container+Database+Container Instance") hide Development.DeveloperLaptop.DockerContainerDatabaseServer.DatabaseServer.Database_1 } } Deployment_Node(Development.DeveloperLaptop.DockerContainerWebServer, "Docker Container - Web Server", "Docker", $tags="Element+Deployment Node") { Deployment_Node(Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat, "Apache Tomcat", "Apache Tomcat 8.x", $tags="Element+Deployment Node") { Container(Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.APIApplication_1, "API Application", "Java and Spring MVC", "Provides Internet banking functionality via a JSON/HTTPS API.", $tags="Element+Container+Container Instance") Container(Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.WebApplication_1, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet banking single page application.", $tags="Element+Container+Container Instance") } } Deployment_Node(Development.DeveloperLaptop.WebBrowser, "Web Browser", "Chrome, Firefox, Safari, or Edge", $tags="Element+Deployment Node") { Container(Development.DeveloperLaptop.WebBrowser.SinglePageApplication_1, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.", $tags="Element+Container+Web Browser+Container Instance") } } Deployment_Node(Development.BigBankplc, "Big Bank plc", "Big Bank plc data center", $tags="Element+Deployment Node+") { hide Development.BigBankplc Deployment_Node(Development.BigBankplc.bigbankdev001, "bigbank-dev001", $tags="Element+Deployment Node+") { hide Development.BigBankplc.bigbankdev001 System(Development.BigBankplc.bigbankdev001.MainframeBankingSystem_1, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.", $tags="Element+Software System+Existing System+Software System Instance") hide Development.BigBankplc.bigbankdev001.MainframeBankingSystem_1 } } Rel_D(Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.WebApplication_1, Development.DeveloperLaptop.WebBrowser.SinglePageApplication_1, "Delivers to the customer's web browser", $tags="Relationship") Rel_D(Development.DeveloperLaptop.WebBrowser.SinglePageApplication_1, Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.APIApplication_1, "Makes API calls to", "JSON/HTTPS", $tags="") Rel_D(Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.APIApplication_1, Development.DeveloperLaptop.DockerContainerDatabaseServer.DatabaseServer.Database_1, "Reads from and writes to", "JDBC", $tags="") Rel_D(Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.APIApplication_1, Development.BigBankplc.bigbankdev001.MainframeBankingSystem_1, "Makes API calls to", "XML/HTTPS", $tags="") SHOW_LEGEND() @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml title Internet Banking System - Deployment - Development top to bottom direction !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml Deployment_Node(Development.DeveloperLaptop, "Developer Laptop", "Microsoft Windows 10 or Apple macOS", $tags="Element+Deployment Node") { Deployment_Node(Development.DeveloperLaptop.DockerContainerDatabaseServer, "Docker Container - Database Server", "Docker", $tags="Element+Deployment Node") { Deployment_Node(Development.DeveloperLaptop.DockerContainerDatabaseServer.DatabaseServer, "Database Server", "Oracle 12c", $tags="Element+Deployment Node") { ContainerDb(Development.DeveloperLaptop.DockerContainerDatabaseServer.DatabaseServer.Database_1, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="Element+Container+Database+Container Instance") } } Deployment_Node(Development.DeveloperLaptop.DockerContainerWebServer, "Docker Container - Web Server", "Docker", $tags="Element+Deployment Node") { Deployment_Node(Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat, "Apache Tomcat", "Apache Tomcat 8.x", $tags="Element+Deployment Node") { Container(Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.APIApplication_1, "API Application", "Java and Spring MVC", "Provides Internet banking functionality via a JSON/HTTPS API.", $tags="Element+Container+Container Instance") Container(Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.WebApplication_1, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet banking single page application.", $tags="Element+Container+Container Instance") } } Deployment_Node(Development.DeveloperLaptop.WebBrowser, "Web Browser", "Chrome, Firefox, Safari, or Edge", $tags="Element+Deployment Node") { Container(Development.DeveloperLaptop.WebBrowser.SinglePageApplication_1, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.", $tags="Element+Container+Web Browser+Container Instance") } } Deployment_Node(Development.BigBankplc, "Big Bank plc", "Big Bank plc data center", $tags="Element+Deployment Node+") { hide Development.BigBankplc Deployment_Node(Development.BigBankplc.bigbankdev001, "bigbank-dev001", $tags="Element+Deployment Node+") { hide Development.BigBankplc.bigbankdev001 System(Development.BigBankplc.bigbankdev001.MainframeBankingSystem_1, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.", $tags="Element+Software System+Existing System+Software System Instance") hide Development.BigBankplc.bigbankdev001.MainframeBankingSystem_1 } } Rel_D(Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.WebApplication_1, Development.DeveloperLaptop.WebBrowser.SinglePageApplication_1, "Delivers to the customer's web browser", $tags="Relationship") Rel_D(Development.DeveloperLaptop.WebBrowser.SinglePageApplication_1, Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.APIApplication_1, "Makes API calls to", "JSON/HTTPS", $tags="") Rel_D(Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.APIApplication_1, Development.DeveloperLaptop.DockerContainerDatabaseServer.DatabaseServer.Database_1, "Reads from and writes to", "JDBC", $tags="") Rel_D(Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.APIApplication_1, Development.BigBankplc.bigbankdev001.MainframeBankingSystem_1, "Makes API calls to", "XML/HTTPS", $tags="") SHOW_LEGEND() @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml title Internet Banking System - Deployment - Live top to bottom direction !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml Deployment_Node(Live.Customersmobiledevice, "Customer's mobile device", "Apple iOS or Android", $tags="Element+Deployment Node") { Container(Live.Customersmobiledevice.MobileApp_1, "Mobile App", "Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device.", $tags="Element+Container+Mobile App+Container Instance") } Deployment_Node(Live.Customerscomputer, "Customer's computer", "Microsoft Windows or Apple macOS", $tags="Element+Deployment Node") { Deployment_Node(Live.Customerscomputer.WebBrowser, "Web Browser", "Chrome, Firefox, Safari, or Edge", $tags="Element+Deployment Node") { Container(Live.Customerscomputer.WebBrowser.SinglePageApplication_1, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.", $tags="Element+Container+Web Browser+Container Instance") } } Deployment_Node(Live.BigBankplc, "Big Bank plc", "Big Bank plc data center", $tags="Element+Deployment Node") { Deployment_Node(Live.BigBankplc.bigbankapi, "bigbank-api*** (x8)", "Ubuntu 16.04 LTS", $tags="Element+Deployment Node+") { Deployment_Node(Live.BigBankplc.bigbankapi.ApacheTomcat, "Apache Tomcat", "Apache Tomcat 8.x", $tags="Element+Deployment Node") { Container(Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1, "API Application", "Java and Spring MVC", "Provides Internet banking functionality via a JSON/HTTPS API.", $tags="Element+Container+Container Instance") } } Deployment_Node(Live.BigBankplc.bigbankdb01, "bigbank-db01", "Ubuntu 16.04 LTS", $tags="Element+Deployment Node") { Deployment_Node(Live.BigBankplc.bigbankdb01.OraclePrimary, "Oracle - Primary", "Oracle 12c", $tags="Element+Deployment Node") { ContainerDb(Live.BigBankplc.bigbankdb01.OraclePrimary.Database_1, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="Element+Container+Database+Container Instance") } } Deployment_Node(Live.BigBankplc.bigbankdb02, "bigbank-db02", "Ubuntu 16.04 LTS", $tags="Element+Deployment Node+Failover") { Deployment_Node(Live.BigBankplc.bigbankdb02.OracleSecondary, "Oracle - Secondary", "Oracle 12c", $tags="Element+Deployment Node+Failover") { ContainerDb(Live.BigBankplc.bigbankdb02.OracleSecondary.Database_1, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="Element+Container+Database+Container Instance") } } Deployment_Node(Live.BigBankplc.bigbankprod001, "bigbank-prod001", $tags="Element+Deployment Node+") { System(Live.BigBankplc.bigbankprod001.MainframeBankingSystem_1, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.", $tags="Element+Software System+Existing System+Software System Instance") } Deployment_Node(Live.BigBankplc.bigbankweb, "bigbank-web*** (x4)", "Ubuntu 16.04 LTS", $tags="Element+Deployment Node+") { Deployment_Node(Live.BigBankplc.bigbankweb.ApacheTomcat, "Apache Tomcat", "Apache Tomcat 8.x", $tags="Element+Deployment Node") { Container(Live.BigBankplc.bigbankweb.ApacheTomcat.WebApplication_1, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet banking single page application.", $tags="Element+Container+Container Instance") } } } Rel_D(Live.BigBankplc.bigbankweb.ApacheTomcat.WebApplication_1, Live.Customerscomputer.WebBrowser.SinglePageApplication_1, "Delivers to the customer's web browser", $tags="Relationship") Rel_D(Live.Customersmobiledevice.MobileApp_1, Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1, "Makes API calls to", "JSON/HTTPS", $tags="") Rel_D(Live.Customerscomputer.WebBrowser.SinglePageApplication_1, Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1, "Makes API calls to", "JSON/HTTPS", $tags="") Rel_D(Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1, Live.BigBankplc.bigbankdb01.OraclePrimary.Database_1, "Reads from and writes to", "JDBC", $tags="") Rel_D(Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1, Live.BigBankplc.bigbankdb02.OracleSecondary.Database_1, "Reads from and writes to", "JDBC", $tags="") Rel_D(Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1, Live.BigBankplc.bigbankprod001.MainframeBankingSystem_1, "Makes API calls to", "XML/HTTPS", $tags="") Rel_D(Live.BigBankplc.bigbankdb01.OraclePrimary, Live.BigBankplc.bigbankdb02.OracleSecondary, "Replicates data to", $tags="Relationship") SHOW_LEGEND() @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml title Internet Banking System - Deployment - Live top to bottom direction !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml Deployment_Node(Live.Customersmobiledevice, "Customer's mobile device", "Apple iOS or Android", $tags="Element+Deployment Node") { hide Live.Customersmobiledevice Container(Live.Customersmobiledevice.MobileApp_1, "Mobile App", "Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device.", $tags="Element+Container+Mobile App+Container Instance") hide Live.Customersmobiledevice.MobileApp_1 } Deployment_Node(Live.Customerscomputer, "Customer's computer", "Microsoft Windows or Apple macOS", $tags="Element+Deployment Node") { Deployment_Node(Live.Customerscomputer.WebBrowser, "Web Browser", "Chrome, Firefox, Safari, or Edge", $tags="Element+Deployment Node") { Container(Live.Customerscomputer.WebBrowser.SinglePageApplication_1, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.", $tags="Element+Container+Web Browser+Container Instance") } } Deployment_Node(Live.BigBankplc, "Big Bank plc", "Big Bank plc data center", $tags="Element+Deployment Node") { hide Live.BigBankplc Deployment_Node(Live.BigBankplc.bigbankapi, "bigbank-api*** (x8)", "Ubuntu 16.04 LTS", $tags="Element+Deployment Node+") { hide Live.BigBankplc.bigbankapi Deployment_Node(Live.BigBankplc.bigbankapi.ApacheTomcat, "Apache Tomcat", "Apache Tomcat 8.x", $tags="Element+Deployment Node") { hide Live.BigBankplc.bigbankapi.ApacheTomcat Container(Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1, "API Application", "Java and Spring MVC", "Provides Internet banking functionality via a JSON/HTTPS API.", $tags="Element+Container+Container Instance") hide Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1 } } Deployment_Node(Live.BigBankplc.bigbankdb01, "bigbank-db01", "Ubuntu 16.04 LTS", $tags="Element+Deployment Node") { hide Live.BigBankplc.bigbankdb01 Deployment_Node(Live.BigBankplc.bigbankdb01.OraclePrimary, "Oracle - Primary", "Oracle 12c", $tags="Element+Deployment Node") { hide Live.BigBankplc.bigbankdb01.OraclePrimary ContainerDb(Live.BigBankplc.bigbankdb01.OraclePrimary.Database_1, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="Element+Container+Database+Container Instance") hide Live.BigBankplc.bigbankdb01.OraclePrimary.Database_1 } } Deployment_Node(Live.BigBankplc.bigbankdb02, "bigbank-db02", "Ubuntu 16.04 LTS", $tags="Element+Deployment Node+Failover") { hide Live.BigBankplc.bigbankdb02 Deployment_Node(Live.BigBankplc.bigbankdb02.OracleSecondary, "Oracle - Secondary", "Oracle 12c", $tags="Element+Deployment Node+Failover") { hide Live.BigBankplc.bigbankdb02.OracleSecondary ContainerDb(Live.BigBankplc.bigbankdb02.OracleSecondary.Database_1, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="Element+Container+Database+Container Instance") hide Live.BigBankplc.bigbankdb02.OracleSecondary.Database_1 } } Deployment_Node(Live.BigBankplc.bigbankprod001, "bigbank-prod001", $tags="Element+Deployment Node+") { hide Live.BigBankplc.bigbankprod001 System(Live.BigBankplc.bigbankprod001.MainframeBankingSystem_1, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.", $tags="Element+Software System+Existing System+Software System Instance") hide Live.BigBankplc.bigbankprod001.MainframeBankingSystem_1 } Deployment_Node(Live.BigBankplc.bigbankweb, "bigbank-web*** (x4)", "Ubuntu 16.04 LTS", $tags="Element+Deployment Node+") { hide Live.BigBankplc.bigbankweb Deployment_Node(Live.BigBankplc.bigbankweb.ApacheTomcat, "Apache Tomcat", "Apache Tomcat 8.x", $tags="Element+Deployment Node") { hide Live.BigBankplc.bigbankweb.ApacheTomcat Container(Live.BigBankplc.bigbankweb.ApacheTomcat.WebApplication_1, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet banking single page application.", $tags="Element+Container+Container Instance") hide Live.BigBankplc.bigbankweb.ApacheTomcat.WebApplication_1 } } } Rel_D(Live.BigBankplc.bigbankweb.ApacheTomcat.WebApplication_1, Live.Customerscomputer.WebBrowser.SinglePageApplication_1, "Delivers to the customer's web browser", $tags="Relationship") Rel_D(Live.Customersmobiledevice.MobileApp_1, Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1, "Makes API calls to", "JSON/HTTPS", $tags="") Rel_D(Live.Customerscomputer.WebBrowser.SinglePageApplication_1, Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1, "Makes API calls to", "JSON/HTTPS", $tags="") Rel_D(Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1, Live.BigBankplc.bigbankdb01.OraclePrimary.Database_1, "Reads from and writes to", "JDBC", $tags="") Rel_D(Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1, Live.BigBankplc.bigbankdb02.OracleSecondary.Database_1, "Reads from and writes to", "JDBC", $tags="") Rel_D(Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1, Live.BigBankplc.bigbankprod001.MainframeBankingSystem_1, "Makes API calls to", "XML/HTTPS", $tags="") Rel_D(Live.BigBankplc.bigbankdb01.OraclePrimary, Live.BigBankplc.bigbankdb02.OracleSecondary, "Replicates data to", $tags="Relationship") SHOW_LEGEND() @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml title Internet Banking System - Deployment - Live top to bottom direction !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml Deployment_Node(Live.Customersmobiledevice, "Customer's mobile device", "Apple iOS or Android", $tags="Element+Deployment Node") { Container(Live.Customersmobiledevice.MobileApp_1, "Mobile App", "Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device.", $tags="Element+Container+Mobile App+Container Instance") } Deployment_Node(Live.Customerscomputer, "Customer's computer", "Microsoft Windows or Apple macOS", $tags="Element+Deployment Node") { Deployment_Node(Live.Customerscomputer.WebBrowser, "Web Browser", "Chrome, Firefox, Safari, or Edge", $tags="Element+Deployment Node") { Container(Live.Customerscomputer.WebBrowser.SinglePageApplication_1, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.", $tags="Element+Container+Web Browser+Container Instance") } } Deployment_Node(Live.BigBankplc, "Big Bank plc", "Big Bank plc data center", $tags="Element+Deployment Node") { hide Live.BigBankplc Deployment_Node(Live.BigBankplc.bigbankapi, "bigbank-api*** (x8)", "Ubuntu 16.04 LTS", $tags="Element+Deployment Node+") { hide Live.BigBankplc.bigbankapi Deployment_Node(Live.BigBankplc.bigbankapi.ApacheTomcat, "Apache Tomcat", "Apache Tomcat 8.x", $tags="Element+Deployment Node") { hide Live.BigBankplc.bigbankapi.ApacheTomcat Container(Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1, "API Application", "Java and Spring MVC", "Provides Internet banking functionality via a JSON/HTTPS API.", $tags="Element+Container+Container Instance") hide Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1 } } Deployment_Node(Live.BigBankplc.bigbankdb01, "bigbank-db01", "Ubuntu 16.04 LTS", $tags="Element+Deployment Node") { hide Live.BigBankplc.bigbankdb01 Deployment_Node(Live.BigBankplc.bigbankdb01.OraclePrimary, "Oracle - Primary", "Oracle 12c", $tags="Element+Deployment Node") { hide Live.BigBankplc.bigbankdb01.OraclePrimary ContainerDb(Live.BigBankplc.bigbankdb01.OraclePrimary.Database_1, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="Element+Container+Database+Container Instance") hide Live.BigBankplc.bigbankdb01.OraclePrimary.Database_1 } } Deployment_Node(Live.BigBankplc.bigbankdb02, "bigbank-db02", "Ubuntu 16.04 LTS", $tags="Element+Deployment Node+Failover") { hide Live.BigBankplc.bigbankdb02 Deployment_Node(Live.BigBankplc.bigbankdb02.OracleSecondary, "Oracle - Secondary", "Oracle 12c", $tags="Element+Deployment Node+Failover") { hide Live.BigBankplc.bigbankdb02.OracleSecondary ContainerDb(Live.BigBankplc.bigbankdb02.OracleSecondary.Database_1, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="Element+Container+Database+Container Instance") hide Live.BigBankplc.bigbankdb02.OracleSecondary.Database_1 } } Deployment_Node(Live.BigBankplc.bigbankprod001, "bigbank-prod001", $tags="Element+Deployment Node+") { hide Live.BigBankplc.bigbankprod001 System(Live.BigBankplc.bigbankprod001.MainframeBankingSystem_1, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.", $tags="Element+Software System+Existing System+Software System Instance") hide Live.BigBankplc.bigbankprod001.MainframeBankingSystem_1 } Deployment_Node(Live.BigBankplc.bigbankweb, "bigbank-web*** (x4)", "Ubuntu 16.04 LTS", $tags="Element+Deployment Node+") { hide Live.BigBankplc.bigbankweb Deployment_Node(Live.BigBankplc.bigbankweb.ApacheTomcat, "Apache Tomcat", "Apache Tomcat 8.x", $tags="Element+Deployment Node") { hide Live.BigBankplc.bigbankweb.ApacheTomcat Container(Live.BigBankplc.bigbankweb.ApacheTomcat.WebApplication_1, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet banking single page application.", $tags="Element+Container+Container Instance") hide Live.BigBankplc.bigbankweb.ApacheTomcat.WebApplication_1 } } } Rel_D(Live.BigBankplc.bigbankweb.ApacheTomcat.WebApplication_1, Live.Customerscomputer.WebBrowser.SinglePageApplication_1, "Delivers to the customer's web browser", $tags="Relationship") Rel_D(Live.Customersmobiledevice.MobileApp_1, Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1, "Makes API calls to", "JSON/HTTPS", $tags="") Rel_D(Live.Customerscomputer.WebBrowser.SinglePageApplication_1, Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1, "Makes API calls to", "JSON/HTTPS", $tags="") Rel_D(Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1, Live.BigBankplc.bigbankdb01.OraclePrimary.Database_1, "Reads from and writes to", "JDBC", $tags="") Rel_D(Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1, Live.BigBankplc.bigbankdb02.OracleSecondary.Database_1, "Reads from and writes to", "JDBC", $tags="") Rel_D(Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1, Live.BigBankplc.bigbankprod001.MainframeBankingSystem_1, "Makes API calls to", "XML/HTTPS", $tags="") Rel_D(Live.BigBankplc.bigbankdb01.OraclePrimary, Live.BigBankplc.bigbankdb02.OracleSecondary, "Replicates data to", $tags="Relationship") SHOW_LEGEND() @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml title Internet Banking System - Deployment - Live top to bottom direction !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml Deployment_Node(Live.Customersmobiledevice, "Customer's mobile device", "Apple iOS or Android", $tags="Element+Deployment Node") { Container(Live.Customersmobiledevice.MobileApp_1, "Mobile App", "Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device.", $tags="Element+Container+Mobile App+Container Instance") } Deployment_Node(Live.Customerscomputer, "Customer's computer", "Microsoft Windows or Apple macOS", $tags="Element+Deployment Node") { Deployment_Node(Live.Customerscomputer.WebBrowser, "Web Browser", "Chrome, Firefox, Safari, or Edge", $tags="Element+Deployment Node") { Container(Live.Customerscomputer.WebBrowser.SinglePageApplication_1, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.", $tags="Element+Container+Web Browser+Container Instance") } } Deployment_Node(Live.BigBankplc, "Big Bank plc", "Big Bank plc data center", $tags="Element+Deployment Node") { Deployment_Node(Live.BigBankplc.bigbankapi, "bigbank-api*** (x8)", "Ubuntu 16.04 LTS", $tags="Element+Deployment Node+") { Deployment_Node(Live.BigBankplc.bigbankapi.ApacheTomcat, "Apache Tomcat", "Apache Tomcat 8.x", $tags="Element+Deployment Node") { Container(Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1, "API Application", "Java and Spring MVC", "Provides Internet banking functionality via a JSON/HTTPS API.", $tags="Element+Container+Container Instance") } } Deployment_Node(Live.BigBankplc.bigbankdb01, "bigbank-db01", "Ubuntu 16.04 LTS", $tags="Element+Deployment Node") { hide Live.BigBankplc.bigbankdb01 Deployment_Node(Live.BigBankplc.bigbankdb01.OraclePrimary, "Oracle - Primary", "Oracle 12c", $tags="Element+Deployment Node") { hide Live.BigBankplc.bigbankdb01.OraclePrimary ContainerDb(Live.BigBankplc.bigbankdb01.OraclePrimary.Database_1, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="Element+Container+Database+Container Instance") hide Live.BigBankplc.bigbankdb01.OraclePrimary.Database_1 } } Deployment_Node(Live.BigBankplc.bigbankdb02, "bigbank-db02", "Ubuntu 16.04 LTS", $tags="Element+Deployment Node+Failover") { hide Live.BigBankplc.bigbankdb02 Deployment_Node(Live.BigBankplc.bigbankdb02.OracleSecondary, "Oracle - Secondary", "Oracle 12c", $tags="Element+Deployment Node+Failover") { hide Live.BigBankplc.bigbankdb02.OracleSecondary ContainerDb(Live.BigBankplc.bigbankdb02.OracleSecondary.Database_1, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="Element+Container+Database+Container Instance") hide Live.BigBankplc.bigbankdb02.OracleSecondary.Database_1 } } Deployment_Node(Live.BigBankplc.bigbankprod001, "bigbank-prod001", $tags="Element+Deployment Node+") { hide Live.BigBankplc.bigbankprod001 System(Live.BigBankplc.bigbankprod001.MainframeBankingSystem_1, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.", $tags="Element+Software System+Existing System+Software System Instance") hide Live.BigBankplc.bigbankprod001.MainframeBankingSystem_1 } Deployment_Node(Live.BigBankplc.bigbankweb, "bigbank-web*** (x4)", "Ubuntu 16.04 LTS", $tags="Element+Deployment Node+") { Deployment_Node(Live.BigBankplc.bigbankweb.ApacheTomcat, "Apache Tomcat", "Apache Tomcat 8.x", $tags="Element+Deployment Node") { Container(Live.BigBankplc.bigbankweb.ApacheTomcat.WebApplication_1, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet banking single page application.", $tags="Element+Container+Container Instance") } } } Rel_D(Live.BigBankplc.bigbankweb.ApacheTomcat.WebApplication_1, Live.Customerscomputer.WebBrowser.SinglePageApplication_1, "Delivers to the customer's web browser", $tags="Relationship") Rel_D(Live.Customersmobiledevice.MobileApp_1, Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1, "Makes API calls to", "JSON/HTTPS", $tags="") Rel_D(Live.Customerscomputer.WebBrowser.SinglePageApplication_1, Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1, "Makes API calls to", "JSON/HTTPS", $tags="") Rel_D(Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1, Live.BigBankplc.bigbankdb01.OraclePrimary.Database_1, "Reads from and writes to", "JDBC", $tags="") Rel_D(Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1, Live.BigBankplc.bigbankdb02.OracleSecondary.Database_1, "Reads from and writes to", "JDBC", $tags="") Rel_D(Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1, Live.BigBankplc.bigbankprod001.MainframeBankingSystem_1, "Makes API calls to", "XML/HTTPS", $tags="") Rel_D(Live.BigBankplc.bigbankdb01.OraclePrimary, Live.BigBankplc.bigbankdb02.OracleSecondary, "Replicates data to", $tags="Relationship") SHOW_LEGEND() @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml title Internet Banking System - Deployment - Live top to bottom direction !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml Deployment_Node(Live.Customersmobiledevice, "Customer's mobile device", "Apple iOS or Android", $tags="Element+Deployment Node") { Container(Live.Customersmobiledevice.MobileApp_1, "Mobile App", "Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device.", $tags="Element+Container+Mobile App+Container Instance") } Deployment_Node(Live.Customerscomputer, "Customer's computer", "Microsoft Windows or Apple macOS", $tags="Element+Deployment Node") { Deployment_Node(Live.Customerscomputer.WebBrowser, "Web Browser", "Chrome, Firefox, Safari, or Edge", $tags="Element+Deployment Node") { Container(Live.Customerscomputer.WebBrowser.SinglePageApplication_1, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.", $tags="Element+Container+Web Browser+Container Instance") } } Deployment_Node(Live.BigBankplc, "Big Bank plc", "Big Bank plc data center", $tags="Element+Deployment Node") { Deployment_Node(Live.BigBankplc.bigbankapi, "bigbank-api*** (x8)", "Ubuntu 16.04 LTS", $tags="Element+Deployment Node+") { Deployment_Node(Live.BigBankplc.bigbankapi.ApacheTomcat, "Apache Tomcat", "Apache Tomcat 8.x", $tags="Element+Deployment Node") { Container(Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1, "API Application", "Java and Spring MVC", "Provides Internet banking functionality via a JSON/HTTPS API.", $tags="Element+Container+Container Instance") } } Deployment_Node(Live.BigBankplc.bigbankdb01, "bigbank-db01", "Ubuntu 16.04 LTS", $tags="Element+Deployment Node") { Deployment_Node(Live.BigBankplc.bigbankdb01.OraclePrimary, "Oracle - Primary", "Oracle 12c", $tags="Element+Deployment Node") { ContainerDb(Live.BigBankplc.bigbankdb01.OraclePrimary.Database_1, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="Element+Container+Database+Container Instance") } } Deployment_Node(Live.BigBankplc.bigbankdb02, "bigbank-db02", "Ubuntu 16.04 LTS", $tags="Element+Deployment Node+Failover") { hide Live.BigBankplc.bigbankdb02 Deployment_Node(Live.BigBankplc.bigbankdb02.OracleSecondary, "Oracle - Secondary", "Oracle 12c", $tags="Element+Deployment Node+Failover") { hide Live.BigBankplc.bigbankdb02.OracleSecondary ContainerDb(Live.BigBankplc.bigbankdb02.OracleSecondary.Database_1, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="Element+Container+Database+Container Instance") hide Live.BigBankplc.bigbankdb02.OracleSecondary.Database_1 } } Deployment_Node(Live.BigBankplc.bigbankprod001, "bigbank-prod001", $tags="Element+Deployment Node+") { hide Live.BigBankplc.bigbankprod001 System(Live.BigBankplc.bigbankprod001.MainframeBankingSystem_1, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.", $tags="Element+Software System+Existing System+Software System Instance") hide Live.BigBankplc.bigbankprod001.MainframeBankingSystem_1 } Deployment_Node(Live.BigBankplc.bigbankweb, "bigbank-web*** (x4)", "Ubuntu 16.04 LTS", $tags="Element+Deployment Node+") { Deployment_Node(Live.BigBankplc.bigbankweb.ApacheTomcat, "Apache Tomcat", "Apache Tomcat 8.x", $tags="Element+Deployment Node") { Container(Live.BigBankplc.bigbankweb.ApacheTomcat.WebApplication_1, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet banking single page application.", $tags="Element+Container+Container Instance") } } } Rel_D(Live.BigBankplc.bigbankweb.ApacheTomcat.WebApplication_1, Live.Customerscomputer.WebBrowser.SinglePageApplication_1, "Delivers to the customer's web browser", $tags="Relationship") Rel_D(Live.Customersmobiledevice.MobileApp_1, Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1, "Makes API calls to", "JSON/HTTPS", $tags="") Rel_D(Live.Customerscomputer.WebBrowser.SinglePageApplication_1, Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1, "Makes API calls to", "JSON/HTTPS", $tags="") Rel_D(Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1, Live.BigBankplc.bigbankdb01.OraclePrimary.Database_1, "Reads from and writes to", "JDBC", $tags="") Rel_D(Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1, Live.BigBankplc.bigbankdb02.OracleSecondary.Database_1, "Reads from and writes to", "JDBC", $tags="") Rel_D(Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1, Live.BigBankplc.bigbankprod001.MainframeBankingSystem_1, "Makes API calls to", "XML/HTTPS", $tags="") Rel_D(Live.BigBankplc.bigbankdb01.OraclePrimary, Live.BigBankplc.bigbankdb02.OracleSecondary, "Replicates data to", $tags="Relationship") SHOW_LEGEND() @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml title Internet Banking System - Deployment - Live top to bottom direction !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml Deployment_Node(Live.Customersmobiledevice, "Customer's mobile device", "Apple iOS or Android", $tags="Element+Deployment Node") { Container(Live.Customersmobiledevice.MobileApp_1, "Mobile App", "Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device.", $tags="Element+Container+Mobile App+Container Instance") } Deployment_Node(Live.Customerscomputer, "Customer's computer", "Microsoft Windows or Apple macOS", $tags="Element+Deployment Node") { Deployment_Node(Live.Customerscomputer.WebBrowser, "Web Browser", "Chrome, Firefox, Safari, or Edge", $tags="Element+Deployment Node") { Container(Live.Customerscomputer.WebBrowser.SinglePageApplication_1, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.", $tags="Element+Container+Web Browser+Container Instance") } } Deployment_Node(Live.BigBankplc, "Big Bank plc", "Big Bank plc data center", $tags="Element+Deployment Node") { Deployment_Node(Live.BigBankplc.bigbankapi, "bigbank-api*** (x8)", "Ubuntu 16.04 LTS", $tags="Element+Deployment Node+") { Deployment_Node(Live.BigBankplc.bigbankapi.ApacheTomcat, "Apache Tomcat", "Apache Tomcat 8.x", $tags="Element+Deployment Node") { Container(Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1, "API Application", "Java and Spring MVC", "Provides Internet banking functionality via a JSON/HTTPS API.", $tags="Element+Container+Container Instance") } } Deployment_Node(Live.BigBankplc.bigbankdb01, "bigbank-db01", "Ubuntu 16.04 LTS", $tags="Element+Deployment Node") { Deployment_Node(Live.BigBankplc.bigbankdb01.OraclePrimary, "Oracle - Primary", "Oracle 12c", $tags="Element+Deployment Node") { ContainerDb(Live.BigBankplc.bigbankdb01.OraclePrimary.Database_1, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="Element+Container+Database+Container Instance") } } Deployment_Node(Live.BigBankplc.bigbankdb02, "bigbank-db02", "Ubuntu 16.04 LTS", $tags="Element+Deployment Node+Failover") { Deployment_Node(Live.BigBankplc.bigbankdb02.OracleSecondary, "Oracle - Secondary", "Oracle 12c", $tags="Element+Deployment Node+Failover") { ContainerDb(Live.BigBankplc.bigbankdb02.OracleSecondary.Database_1, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="Element+Container+Database+Container Instance") } } Deployment_Node(Live.BigBankplc.bigbankprod001, "bigbank-prod001", $tags="Element+Deployment Node+") { hide Live.BigBankplc.bigbankprod001 System(Live.BigBankplc.bigbankprod001.MainframeBankingSystem_1, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.", $tags="Element+Software System+Existing System+Software System Instance") hide Live.BigBankplc.bigbankprod001.MainframeBankingSystem_1 } Deployment_Node(Live.BigBankplc.bigbankweb, "bigbank-web*** (x4)", "Ubuntu 16.04 LTS", $tags="Element+Deployment Node+") { Deployment_Node(Live.BigBankplc.bigbankweb.ApacheTomcat, "Apache Tomcat", "Apache Tomcat 8.x", $tags="Element+Deployment Node") { Container(Live.BigBankplc.bigbankweb.ApacheTomcat.WebApplication_1, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet banking single page application.", $tags="Element+Container+Container Instance") } } } Rel_D(Live.BigBankplc.bigbankweb.ApacheTomcat.WebApplication_1, Live.Customerscomputer.WebBrowser.SinglePageApplication_1, "Delivers to the customer's web browser", $tags="Relationship") Rel_D(Live.Customersmobiledevice.MobileApp_1, Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1, "Makes API calls to", "JSON/HTTPS", $tags="") Rel_D(Live.Customerscomputer.WebBrowser.SinglePageApplication_1, Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1, "Makes API calls to", "JSON/HTTPS", $tags="") Rel_D(Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1, Live.BigBankplc.bigbankdb01.OraclePrimary.Database_1, "Reads from and writes to", "JDBC", $tags="") Rel_D(Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1, Live.BigBankplc.bigbankdb02.OracleSecondary.Database_1, "Reads from and writes to", "JDBC", $tags="") Rel_D(Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1, Live.BigBankplc.bigbankprod001.MainframeBankingSystem_1, "Makes API calls to", "XML/HTTPS", $tags="") Rel_D(Live.BigBankplc.bigbankdb01.OraclePrimary, Live.BigBankplc.bigbankdb02.OracleSecondary, "Replicates data to", $tags="Relationship") SHOW_LEGEND() @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml title API Application - Dynamic top to bottom direction !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml Container_Boundary("InternetBankingSystem.APIApplication_boundary", "API Application") { Component(InternetBankingSystem.APIApplication.SignInController, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System.", $tags="Element+Component") Component(InternetBankingSystem.APIApplication.SecurityComponent, "Security Component", "Spring Bean", "Provides functionality related to signing in, changing passwords, etc.", $tags="Element+Component") } ContainerDb(InternetBankingSystem.Database, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="Element+Container+Database") Container(InternetBankingSystem.SinglePageApplication, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.", $tags="Element+Container+Web Browser") Rel_D(InternetBankingSystem.SinglePageApplication, InternetBankingSystem.APIApplication.SignInController, "1. Submits credentials to", "JSON/HTTPS", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication.SignInController, InternetBankingSystem.APIApplication.SecurityComponent, "2. Validates credentials using", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication.SecurityComponent, InternetBankingSystem.Database, "3. select * from users where username = ?", "JDBC", $tags="Relationship") Rel_D(InternetBankingSystem.Database, InternetBankingSystem.APIApplication.SecurityComponent, "4. Returns user data to", "JDBC", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication.SecurityComponent, InternetBankingSystem.APIApplication.SignInController, "5. Returns true if the hashed password matches", $tags="Relationship") Rel_D(InternetBankingSystem.APIApplication.SignInController, InternetBankingSystem.SinglePageApplication, "6. Sends back an authentication token to", "JSON/HTTPS", $tags="Relationship") SHOW_LEGEND() @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml title Internet Banking System - System Context top to bottom direction !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml Enterprise_Boundary(enterprise, "Big Bank plc") { System(MainframeBankingSystem, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.", $tags="Element+Software System+Existing System") System(EmailSystem, "E-mail System", "The internal Microsoft Exchange e-mail system.", $tags="Element+Software System+Existing System") System(InternetBankingSystem, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.", $tags="Element+Software System") } Person_Ext(PersonalBankingCustomer, "Personal Banking Customer", "A customer of the bank, with personal bank accounts.", $tags="Element+Person+Customer") Rel_D(PersonalBankingCustomer, InternetBankingSystem, "Views account balances, and makes payments using", $tags="Relationship") Rel_D(InternetBankingSystem, MainframeBankingSystem, "Gets account information from, and makes payments using", $tags="Relationship") Rel_D(InternetBankingSystem, EmailSystem, "Sends e-mail using", $tags="Relationship") Rel_D(EmailSystem, PersonalBankingCustomer, "Sends e-mails to", $tags="Relationship") SHOW_LEGEND() @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml title Internet Banking System - System Context top to bottom direction !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml Enterprise_Boundary(enterprise, "Big Bank plc") { System(MainframeBankingSystem, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.", $tags="Element+Software System+Existing System") hide MainframeBankingSystem System(EmailSystem, "E-mail System", "The internal Microsoft Exchange e-mail system.", $tags="Element+Software System+Existing System") hide EmailSystem System(InternetBankingSystem, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.", $tags="Element+Software System") } Person_Ext(PersonalBankingCustomer, "Personal Banking Customer", "A customer of the bank, with personal bank accounts.", $tags="Element+Person+Customer") hide PersonalBankingCustomer Rel_D(PersonalBankingCustomer, InternetBankingSystem, "Views account balances, and makes payments using", $tags="Relationship") Rel_D(InternetBankingSystem, MainframeBankingSystem, "Gets account information from, and makes payments using", $tags="Relationship") Rel_D(InternetBankingSystem, EmailSystem, "Sends e-mail using", $tags="Relationship") Rel_D(EmailSystem, PersonalBankingCustomer, "Sends e-mails to", $tags="Relationship") SHOW_LEGEND() @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml title Internet Banking System - System Context top to bottom direction !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml Enterprise_Boundary(enterprise, "Big Bank plc") { System(MainframeBankingSystem, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.", $tags="Element+Software System+Existing System") hide MainframeBankingSystem System(EmailSystem, "E-mail System", "The internal Microsoft Exchange e-mail system.", $tags="Element+Software System+Existing System") hide EmailSystem System(InternetBankingSystem, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.", $tags="Element+Software System") } Person_Ext(PersonalBankingCustomer, "Personal Banking Customer", "A customer of the bank, with personal bank accounts.", $tags="Element+Person+Customer") Rel_D(PersonalBankingCustomer, InternetBankingSystem, "Views account balances, and makes payments using", $tags="Relationship") Rel_D(InternetBankingSystem, MainframeBankingSystem, "Gets account information from, and makes payments using", $tags="Relationship") Rel_D(InternetBankingSystem, EmailSystem, "Sends e-mail using", $tags="Relationship") Rel_D(EmailSystem, PersonalBankingCustomer, "Sends e-mails to", $tags="Relationship") SHOW_LEGEND() @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml title Internet Banking System - System Context top to bottom direction !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml Enterprise_Boundary(enterprise, "Big Bank plc") { System(MainframeBankingSystem, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.", $tags="Element+Software System+Existing System") System(EmailSystem, "E-mail System", "The internal Microsoft Exchange e-mail system.", $tags="Element+Software System+Existing System") hide EmailSystem System(InternetBankingSystem, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.", $tags="Element+Software System") } Person_Ext(PersonalBankingCustomer, "Personal Banking Customer", "A customer of the bank, with personal bank accounts.", $tags="Element+Person+Customer") Rel_D(PersonalBankingCustomer, InternetBankingSystem, "Views account balances, and makes payments using", $tags="Relationship") Rel_D(InternetBankingSystem, MainframeBankingSystem, "Gets account information from, and makes payments using", $tags="Relationship") Rel_D(InternetBankingSystem, EmailSystem, "Sends e-mail using", $tags="Relationship") Rel_D(EmailSystem, PersonalBankingCustomer, "Sends e-mails to", $tags="Relationship") SHOW_LEGEND() @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml title Internet Banking System - System Context top to bottom direction !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml Enterprise_Boundary(enterprise, "Big Bank plc") { System(MainframeBankingSystem, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.", $tags="Element+Software System+Existing System") System(EmailSystem, "E-mail System", "The internal Microsoft Exchange e-mail system.", $tags="Element+Software System+Existing System") System(InternetBankingSystem, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.", $tags="Element+Software System") } Person_Ext(PersonalBankingCustomer, "Personal Banking Customer", "A customer of the bank, with personal bank accounts.", $tags="Element+Person+Customer") Rel_D(PersonalBankingCustomer, InternetBankingSystem, "Views account balances, and makes payments using", $tags="Relationship") Rel_D(InternetBankingSystem, MainframeBankingSystem, "Gets account information from, and makes payments using", $tags="Relationship") Rel_D(InternetBankingSystem, EmailSystem, "Sends e-mail using", $tags="Relationship") Rel_D(EmailSystem, PersonalBankingCustomer, "Sends e-mails to", $tags="Relationship") SHOW_LEGEND() @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml title System Landscape for Big Bank plc top to bottom direction !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml Enterprise_Boundary(enterprise, "Big Bank plc") { Person(CustomerServiceStaff, "Customer Service Staff", "Customer service staff within the bank.", $tags="Element+Person+Bank Staff") Person(BackOfficeStaff, "Back Office Staff", "Administration and support staff within the bank.", $tags="Element+Person+Bank Staff") System(MainframeBankingSystem, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.", $tags="Element+Software System+Existing System") System(EmailSystem, "E-mail System", "The internal Microsoft Exchange e-mail system.", $tags="Element+Software System+Existing System") System(ATM, "ATM", "Allows customers to withdraw cash.", $tags="Element+Software System+Existing System") System(InternetBankingSystem, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.", $tags="Element+Software System") } Person_Ext(PersonalBankingCustomer, "Personal Banking Customer", "A customer of the bank, with personal bank accounts.", $tags="Element+Person+Customer") Rel_D(PersonalBankingCustomer, InternetBankingSystem, "Views account balances, and makes payments using", $tags="Relationship") Rel_D(InternetBankingSystem, MainframeBankingSystem, "Gets account information from, and makes payments using", $tags="Relationship") Rel_D(InternetBankingSystem, EmailSystem, "Sends e-mail using", $tags="Relationship") Rel_D(EmailSystem, PersonalBankingCustomer, "Sends e-mails to", $tags="Relationship") Rel_D(PersonalBankingCustomer, CustomerServiceStaff, "Asks questions to", "Telephone", $tags="Relationship") Rel_D(CustomerServiceStaff, MainframeBankingSystem, "Uses", $tags="Relationship") Rel_D(PersonalBankingCustomer, ATM, "Withdraws cash using", $tags="Relationship") Rel_D(ATM, MainframeBankingSystem, "Uses", $tags="Relationship") Rel_D(BackOfficeStaff, MainframeBankingSystem, "Uses", $tags="Relationship") SHOW_LEGEND() @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 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 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 subgraph 11 [API Application] style 11 fill:#ffffff,stroke:#444444,color:#444444 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%'>[JDBC]</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
(this will send your diagram content to https://mermaid.ink)
graph TB linkStyle default fill:#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:#444444,color:#444444 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%'>[JDBC]</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
(this will send your diagram content to https://mermaid.ink)
graph TB linkStyle default fill:#ffffff subgraph 50 [Developer Laptop] style 50 fill:#ffffff,stroke:#888888,color:#000000 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 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 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 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 end end 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 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%'>[JDBC]</div>" .->61 57-. "<div>Makes API calls to</div><div style='font-size: 70%'>[XML/HTTPS]</div>" .->65
(this will send your diagram content to https://mermaid.ink)
graph TB linkStyle default fill:#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 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 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 end 75-. "<div>Delivers to the customer's<br />web browser</div><div style='font-size: 70%'></div>" .->71 68-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->79 71-. "<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%'>[JDBC]</div>" .->84 79-. "<div>Reads from and writes to</div><div style='font-size: 70%'>[JDBC]</div>" .->88 79-. "<div>Makes API calls to</div><div style='font-size: 70%'>[XML/HTTPS]</div>" .->91
(this will send your diagram content to https://mermaid.ink)
graph TB linkStyle default fill:#ffffff subgraph 11 [API Application] style 11 fill:#ffffff,stroke:#444444,color:#444444 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 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 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%'>[JDBC]</div>" .->18 18-. "<div>4. Returns user data to</div><div style='font-size: 70%'>[JDBC]</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
(this will send your diagram content to https://mermaid.ink)
sequenceDiagram participant 8 as Single-Page Application<br />[Container: JavaScript and Angular] participant 12 as Sign In Controller<br />[Component: Spring MVC Rest Controller] participant 15 as Security Component<br />[Component: Spring Bean] participant 18 as Database<br />[Container: Oracle Database Schema] 8->>12: Submits credentials to<br />[JSON/HTTPS] 12->>15: Validates credentials using 15->>18: select * from users where username = ?<br />[JDBC] 18-->>15: Returns user data to<br />[JDBC] 15-->>12: Returns true if the hashed password matches 12-->>8: Sends back an authentication token to<br />[JSON/HTTPS]
(this will send your diagram content to https://mermaid.ink)
graph TB linkStyle default fill:#ffffff subgraph enterprise [Big Bank plc] style enterprise fill:#ffffff,stroke:#444444,color:#444444 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
(this will send your diagram content to https://mermaid.ink)
graph TB linkStyle default fill:#ffffff subgraph enterprise [Big Bank plc] style enterprise fill:#ffffff,stroke:#444444,color:#444444 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
(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>> 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"] 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"] 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">[JDBC]</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>> 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">[JDBC]</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>> 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_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_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" 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"] 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"] } } 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_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">[JDBC]</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>> 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_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"] } 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"] } } } 75 -> 71 [id=76, label=<<font point-size="24">Delivers to the customer's<br />web browser</font>>, style="dashed", color="#707070", fontcolor="#707070"] 68 -> 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"] 71 -> 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">[JDBC]</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">[JDBC]</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"] } 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"] 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">[JDBC]</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">[JDBC]</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>> subgraph cluster_enterprise { margin=25 label=<<font point-size="24"><br />Big Bank plc</font><br /><font point-size="19">[Enterprise]</font>> labelloc=b color="#444444" fontcolor="#444444" fillcolor="#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"] 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 for Big Bank plc</font>> subgraph cluster_enterprise { margin=25 label=<<font point-size="24"><br />Big Bank plc</font><br /><font point-size="19">[Enterprise]</font>> labelloc=b color="#444444" fontcolor="#444444" fillcolor="#ffffff" 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: "JDBC" 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: "JDBC" 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: "JDBC" color: "#707070" - to: "15" label: "4. Returns user data to" description: "JDBC" 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: "JDBC" 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: "JDBC" color: "#707070" - from: "79" to: "88" label: "Reads from and writes to" description: "JDBC" color: "#707070" - from: "79" to: "91" label: "Makes API calls to" description: "XML/HTTPS" color: "#707070"
The Structurizr DSL (as mentioned on the ThoughtWorks Tech Radar - Techniques - Diagrams as code) allows you to create multiple diagrams based upon the C4 model, in multiple output formats, from a single DSL source file.