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