Structurizr

We recommend using the Structurizr CLI to create software architecture models with the DSL.

workspace "Big Bank plc" "This is an example workspace to illustrate the key features of Structurizr, via the DSL, based around a fictional online banking system." { model { customer = person "Personal Banking Customer" "A customer of the bank, with personal bank accounts." enterprise "Big Bank plc" { supportStaff = person "Customer Service Staff" "Customer service staff within the bank." "Bank Staff" backoffice = person "Back Office Staff" "Administration and support staff within the bank." mainframe = softwaresystem "Mainframe Banking System" "Stores all of the core banking information about customers, accounts, transactions, etc." "Existing System" email = softwaresystem "E-mail System" "The internal Microsoft Exchange e-mail system" "Existing System" atm = softwaresystem "ATM" "Allows customers to withdraw cash." "Existing System" internetBankingSystem = softwaresystem "Internet Banking System" "Allows customers to view information about their bank accounts, and make payments." { singlePageApplication = container "Single-Page Application" "Provides all of the Internet banking functionality to customers via their web browser." "JavaScript and Angular" "Web Browser" mobileApp = container "Mobile App" "Provides a limited subset of the Internet banking functionality to customers via their mobile device." "Xamarin" "Mobile App" webApplication = container "Web Application" "Delivers the static content and the Internet banking single page application." "Java and Spring MVC" apiApplication = container "API Application" "Provides Internet banking functionality via a JSON/HTTPS API." "Java and Spring MVC" { signinController = component "Sign In Controller" "Allows users to sign in to the Internet Banking System." "Spring MVC Rest Controller" accountsSummaryController = component "Accounts Summary Controller" "Provides customers with a summary of their bank accounts." "Spring MVC Rest Controller" resetPasswordController = component "Reset Password Controller" "Allows users to reset their passwords with a single use URL." "Spring MVC Rest Controller" securityComponent = component "Security Component" "Provides functionality related to signing in, changing passwords, etc." "Spring Bean" mainframeBankingSystemFacade = component "Mainframe Banking System Facade" "A facade onto the mainframe banking system." "Spring Bean" emailComponent = component "E-mail Component" "Sends e-mails to users." "Spring Bean" } database = container "Database" "Stores user registration information, hashed authentication credentials, access logs, etc." "Oracle Database Schema" "Database" } } # relationships between people and software systems uses = customer -> internetBankingSystem "Views account balances, and makes payments using" internetBankingSystem -> mainframe "Gets account information from, and makes payments using" internetBankingSystem -> email "Sends e-mail using" email -> customer "Sends e-mails to" customer -> supportStaff "Asks questions to" "Telephone" supportStaff -> mainframe "Uses" customer -> atm "Withdraws cash using" atm -> mainframe "Uses" backoffice -> mainframe "Uses" # relationships to/from containers customer -> webApplication "Visits bigbank.com/ib using" "HTTPS" customer -> singlePageApplication "Views account balances, and makes payments using" customer -> mobileApp "Views account balances, and makes payments using" webApplication -> singlePageApplication "Delivers to the customer's web browser" # relationships to/from components singlePageApplication -> signinController "Makes API calls to" "JSON/HTTPS" singlePageApplication -> accountsSummaryController "Makes API calls to" "JSON/HTTPS" singlePageApplication -> resetPasswordController "Makes API calls to" "JSON/HTTPS" mobileApp -> signinController "Makes API calls to" "JSON/HTTPS" mobileApp -> accountsSummaryController "Makes API calls to" "JSON/HTTPS" mobileApp -> resetPasswordController "Makes API calls to" "JSON/HTTPS" signinController -> securityComponent "Uses" accountsSummaryController -> mainframeBankingSystemFacade "Uses" resetPasswordController -> securityComponent "Uses" resetPasswordController -> emailComponent "Uses" securityComponent -> database "Reads from and writes to" "JDBC" mainframeBankingSystemFacade -> mainframe "Makes API calls to" "XML/HTTPS" emailComponent -> email "Sends e-mail using" deploymentEnvironment "Development" { deploymentNode "Developer Laptop" "" "Microsoft Windows 10 or Apple macOS" { deploymentNode "Web Browser" "" "Chrome, Firefox, Safari, or Edge" { developerSinglePageApplicationInstance = containerInstance singlePageApplication } deploymentNode "Docker Container - Web Server" "" "Docker" { deploymentNode "Apache Tomcat" "" "Apache Tomcat 8.x" { developerWebApplicationInstance = containerInstance webApplication developerApiApplicationInstance = containerInstance apiApplication } } deploymentNode "Docker Container - Database Server" "" "Docker" { deploymentNode "Database Server" "" "Oracle 12c" { developerDatabaseInstance = containerInstance database } } } } deploymentEnvironment "Live" { deploymentNode "Customer's mobile device" "" "Apple iOS or Android" { liveMobileAppInstance = containerInstance mobileApp } deploymentNode "Customer's computer" "" "Microsoft Windows or Apple macOS" { deploymentNode "Web Browser" "" "Chrome, Firefox, Safari, or Edge" { liveSinglePageApplicationInstance = containerInstance singlePageApplication } } deploymentNode "Big Bank plc" "" "Big Bank plc data center" { deploymentNode "bigbank-web***" "" "Ubuntu 16.04 LTS" "" 4 { deploymentNode "Apache Tomcat" "" "Apache Tomcat 8.x" { liveWebApplicationInstance = containerInstance webApplication } } deploymentNode "bigbank-api***" "" "Ubuntu 16.04 LTS" "" 8 { deploymentNode "Apache Tomcat" "" "Apache Tomcat 8.x" { liveApiApplicationInstance = containerInstance apiApplication } } deploymentNode "bigbank-db01" "" "Ubuntu 16.04 LTS" { primaryDatabaseServer = deploymentNode "Oracle - Primary" "" "Oracle 12c" { livePrimaryDatabaseInstance = containerInstance database } } deploymentNode "bigbank-db02" "" "Ubuntu 16.04 LTS" "Failover" { secondaryDatabaseServer = deploymentNode "Oracle - Secondary" "" "Oracle 12c" "Failover" { liveSecondaryDatabaseInstance = containerInstance database "Failover" } } } primaryDatabaseServer -> secondaryDatabaseServer "Replicates data to" } } views { systemlandscape "SystemLandscape" { include * autoLayout } systemcontext internetBankingSystem "SystemContext" { include * animationStep internetBankingSystem animationStep customer animationStep mainframe animationStep email autoLayout } container internetBankingSystem "Containers" { include * animationStep customer mainframe email animationStep webApplication animationStep singlePageApplication animationStep mobileApp animationStep apiApplication animationStep database autoLayout } component apiApplication "Components" { include * animationStep singlePageApplication mobileApp database email mainframe animationStep signinController securityComponent animationStep accountsSummaryController mainframeBankingSystemFacade animationStep resetPasswordController emailComponent autoLayout } dynamic apiApplication "SignIn" "Summarises how the sign in feature works in the single-page application." { singlePageApplication -> signinController "Submits credentials to" signinController -> securityComponent "Calls isAuthenticated() on" securityComponent -> database "select * from users where username = ?" autoLayout } deployment internetBankingSystem "Development" "DevelopmentDeployment" { include * animationStep developerSinglePageApplicationInstance animationStep developerWebApplicationInstance developerApiApplicationInstance animationStep developerDatabaseInstance autoLayout } deployment internetBankingSystem "Live" "LiveDeployment" { include * animationStep liveSinglePageApplicationInstance animationStep liveMobileAppInstance animationStep liveWebApplicationInstance liveApiApplicationInstance animationStep livePrimaryDatabaseInstance animationStep liveSecondaryDatabaseInstance autoLayout } styles { element "Person" { background #08427b color #ffffff fontSize 22 shape Person } element "Bank Staff" { background #999999 color #ffffff } element "Software System" { background #1168bd color #ffffff } element "Existing System" { background #999999 color #ffffff } element "Container" { background #438dd5 color #ffffff } element "Web Browser" { shape WebBrowser } element "Mobile App" { shape MobileDeviceLandscape } element "Database" { shape Cylinder } element "Component" { background #85bbf0 color #000000 } element "Failover" { opacity 25 } } } }

Language reference | Examples: Getting Started - Amazon Web Services - Big Bank plc

(features unavailable on this page: !include, element style icons, branding logo)

Structurizr PlantUML Mermaid WebSequenceDiagrams

(please note that clicking on any of the "Render" buttons below will send your diagram content to http://plantuml.com/plantuml)

#Components

@startuml(id=Components)
title Internet Banking System - API Application - Components

skinparam {
  shadowing false
  arrowFontSize 10
  defaultTextAlignment center
  wrapWidth 200
  maxMessageSize 100
}
hide stereotype
top to bottom direction
skinparam rectangle<<12>> {
  BackgroundColor #85bbf0
  FontColor #000000
  BorderColor #5D82A8
}
skinparam rectangle<<13>> {
  BackgroundColor #85bbf0
  FontColor #000000
  BorderColor #5D82A8
}
skinparam rectangle<<14>> {
  BackgroundColor #85bbf0
  FontColor #000000
  BorderColor #5D82A8
}
skinparam rectangle<<4>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6B6B6B
}
skinparam rectangle<<15>> {
  BackgroundColor #85bbf0
  FontColor #000000
  BorderColor #5D82A8
}
skinparam rectangle<<5>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6B6B6B
}
skinparam rectangle<<16>> {
  BackgroundColor #85bbf0
  FontColor #000000
  BorderColor #5D82A8
}
skinparam rectangle<<17>> {
  BackgroundColor #85bbf0
  FontColor #000000
  BorderColor #5D82A8
}
skinparam database<<18>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2E6295
}
skinparam rectangle<<8>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2E6295
}
skinparam rectangle<<9>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2E6295
}
database "==Database\n<size:10>[Container: Oracle Database Schema]</size>\n\nStores user registration information, hashed authentication credentials, access logs, etc." <<18>> as 18
rectangle "==E-mail System\n<size:10>[Software System]</size>\n\nThe internal Microsoft Exchange e-mail system" <<5>> as 5
rectangle "==Mainframe Banking System\n<size:10>[Software System]</size>\n\nStores all of the core banking information about customers, accounts, transactions, etc." <<4>> as 4
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." <<9>> as 9
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." <<8>> as 8
package "API Application\n[Container: Java and Spring MVC]" {
  rectangle "==Accounts Summary Controller\n<size:10>[Component: Spring MVC Rest Controller]</size>\n\nProvides customers with a summary of their bank accounts." <<13>> as 13
  rectangle "==E-mail Component\n<size:10>[Component: Spring Bean]</size>\n\nSends e-mails to users." <<17>> as 17
  rectangle "==Mainframe Banking System Facade\n<size:10>[Component: Spring Bean]</size>\n\nA facade onto the mainframe banking system." <<16>> as 16
  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." <<14>> as 14
  rectangle "==Security Component\n<size:10>[Component: Spring Bean]</size>\n\nProvides functionality related to signing in, changing passwords, etc." <<15>> as 15
  rectangle "==Sign In Controller\n<size:10>[Component: Spring MVC Rest Controller]</size>\n\nAllows users to sign in to the Internet Banking System." <<12>> as 12
}
13 .[#707070].> 16 : "Uses"
17 .[#707070].> 5 : "Sends e-mail using"
16 .[#707070].> 4 : "Makes API calls to\n<size:8>[XML/HTTPS]</size>"
9 .[#707070].> 13 : "Makes API calls to\n<size:8>[JSON/HTTPS]</size>"
9 .[#707070].> 14 : "Makes API calls to\n<size:8>[JSON/HTTPS]</size>"
9 .[#707070].> 12 : "Makes API calls to\n<size:8>[JSON/HTTPS]</size>"
14 .[#707070].> 17 : "Uses"
14 .[#707070].> 15 : "Uses"
15 .[#707070].> 18 : "Reads from and writes to\n<size:8>[JDBC]</size>"
12 .[#707070].> 15 : "Uses"
8 .[#707070].> 13 : "Makes API calls to\n<size:8>[JSON/HTTPS]</size>"
8 .[#707070].> 14 : "Makes API calls to\n<size:8>[JSON/HTTPS]</size>"
8 .[#707070].> 12 : "Makes API calls to\n<size:8>[JSON/HTTPS]</size>"
@enduml

#Containers

@startuml(id=Containers)
title Internet Banking System - Containers

skinparam {
  shadowing false
  arrowFontSize 10
  defaultTextAlignment center
  wrapWidth 200
  maxMessageSize 100
}
hide stereotype
top to bottom direction
skinparam rectangle<<11>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2E6295
}
skinparam rectangle<<1>> {
  BackgroundColor #08427b
  FontColor #ffffff
  BorderColor #052E56
}
skinparam rectangle<<4>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6B6B6B
}
skinparam rectangle<<5>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6B6B6B
}
skinparam database<<18>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2E6295
}
skinparam rectangle<<8>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2E6295
}
skinparam rectangle<<9>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2E6295
}
skinparam rectangle<<10>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2E6295
}
rectangle "==E-mail System\n<size:10>[Software System]</size>\n\nThe internal Microsoft Exchange e-mail system" <<5>> as 5
rectangle "==Mainframe Banking System\n<size:10>[Software System]</size>\n\nStores all of the core banking information about customers, accounts, transactions, etc." <<4>> as 4
rectangle "==Personal Banking Customer\n<size:10>[Person]</size>\n\nA customer of the bank, with personal bank accounts." <<1>> as 1
package "Internet Banking System\n[Software System]" {
  rectangle "==API Application\n<size:10>[Container: Java and Spring MVC]</size>\n\nProvides Internet banking functionality via a JSON/HTTPS API." <<11>> as 11
  database "==Database\n<size:10>[Container: Oracle Database Schema]</size>\n\nStores user registration information, hashed authentication credentials, access logs, etc." <<18>> as 18
  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." <<9>> as 9
  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." <<8>> as 8
  rectangle "==Web Application\n<size:10>[Container: Java and Spring MVC]</size>\n\nDelivers the static content and the Internet banking single page application." <<10>> as 10
}
11 .[#707070].> 18 : "Reads from and writes to\n<size:8>[JDBC]</size>"
11 .[#707070].> 5 : "Sends e-mail using"
11 .[#707070].> 4 : "Makes API calls to\n<size:8>[XML/HTTPS]</size>"
5 .[#707070].> 1 : "Sends e-mails to"
9 .[#707070].> 11 : "Makes API calls to\n<size:8>[JSON/HTTPS]</size>"
1 .[#707070].> 9 : "Views account balances, and makes payments using"
1 .[#707070].> 8 : "Views account balances, and makes payments using"
1 .[#707070].> 10 : "Visits bigbank.com/ib using\n<size:8>[HTTPS]</size>"
8 .[#707070].> 11 : "Makes API calls to\n<size:8>[JSON/HTTPS]</size>"
10 .[#707070].> 8 : "Delivers to the customer's web browser"
@enduml

#DevelopmentDeployment

@startuml(id=DevelopmentDeployment)
title Internet Banking System - Deployment - Development

skinparam {
  shadowing false
  arrowFontSize 10
  defaultTextAlignment center
  wrapWidth 200
  maxMessageSize 100
}
hide stereotype
top to bottom direction
skinparam rectangle<<55>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2E6295
}
skinparam rectangle<<57>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2E6295
}
skinparam node<<59>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #000000
}
skinparam node<<60>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #000000
}
skinparam database<<61>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2E6295
}
skinparam node<<50>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #000000
}
skinparam node<<51>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #000000
}
skinparam rectangle<<52>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2E6295
}
skinparam node<<53>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #000000
}
skinparam node<<54>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #000000
}
node "Developer Laptop\n[Deployment Node: Microsoft Windows 10 or Apple macOS]" <<50>> as 50 {
  node "Docker Container - Database Server\n[Deployment Node: Docker]" <<59>> as 59 {
    node "Database Server\n[Deployment Node: Oracle 12c]" <<60>> as 60 {
      database "==Database\n<size:10>[Container: Oracle Database Schema]</size>\n\nStores user registration information, hashed authentication credentials, access logs, etc." <<61>> as 61
    }
  }
  node "Docker Container - Web Server\n[Deployment Node: Docker]" <<53>> as 53 {
    node "Apache Tomcat\n[Deployment Node: Apache Tomcat 8.x]" <<54>> as 54 {
      rectangle "==API Application\n<size:10>[Container: Java and Spring MVC]</size>\n\nProvides Internet banking functionality via a JSON/HTTPS API." <<57>> as 57
      rectangle "==Web Application\n<size:10>[Container: Java and Spring MVC]</size>\n\nDelivers the static content and the Internet banking single page application." <<55>> as 55
    }
  }
  node "Web Browser\n[Deployment Node: Chrome, Firefox, Safari, or Edge]" <<51>> as 51 {
    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." <<52>> as 52
  }
}
57 .[#707070].> 61 : "Reads from and writes to\n<size:8>[JDBC]</size>"
52 .[#707070].> 57 : "Makes API calls to\n<size:8>[JSON/HTTPS]</size>"
55 .[#707070].> 52 : "Delivers to the customer's web browser"
@enduml

#LiveDeployment

@startuml(id=LiveDeployment)
title Internet Banking System - Deployment - Live

skinparam {
  shadowing false
  arrowFontSize 10
  defaultTextAlignment center
  wrapWidth 200
  maxMessageSize 100
}
hide stereotype
top to bottom direction
skinparam node<<66>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #000000
}
skinparam rectangle<<67>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2E6295
}
skinparam node<<78>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #000000
}
skinparam node<<79>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #000000
}
skinparam node<<68>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #000000
}
skinparam node<<69>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #000000
}
skinparam database<<80>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2E6295
}
skinparam node<<70>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #000000
}
skinparam rectangle<<71>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2E6295
}
skinparam node<<82>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #000000
}
skinparam node<<83>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #000000
}
skinparam node<<73>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #000000
}
skinparam database<<84>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2E6295
}
skinparam node<<63>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #000000
}
skinparam node<<74>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #000000
}
skinparam rectangle<<64>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2E6295
}
skinparam rectangle<<75>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2E6295
}
skinparam node<<65>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #000000
}
node "Big Bank plc\n[Deployment Node: Big Bank plc data center]" <<68>> as 68 {
  node "bigbank-api*** (x8)\n[Deployment Node: Ubuntu 16.04 LTS]" <<73>> as 73 {
    node "Apache Tomcat\n[Deployment Node: Apache Tomcat 8.x]" <<74>> as 74 {
      rectangle "==API Application\n<size:10>[Container: Java and Spring MVC]</size>\n\nProvides Internet banking functionality via a JSON/HTTPS API." <<75>> as 75
    }
  }
  node "bigbank-db01\n[Deployment Node: Ubuntu 16.04 LTS]" <<78>> as 78 {
    node "Oracle - Primary\n[Deployment Node: Oracle 12c]" <<79>> as 79 {
      database "==Database\n<size:10>[Container: Oracle Database Schema]</size>\n\nStores user registration information, hashed authentication credentials, access logs, etc." <<80>> as 80
    }
  }
  node "bigbank-db02\n[Deployment Node: Ubuntu 16.04 LTS]" <<82>> as 82 {
    node "Oracle - Secondary\n[Deployment Node: Oracle 12c]" <<83>> as 83 {
      database "==Database\n<size:10>[Container: Oracle Database Schema]</size>\n\nStores user registration information, hashed authentication credentials, access logs, etc." <<84>> as 84
    }
  }
  node "bigbank-web*** (x4)\n[Deployment Node: Ubuntu 16.04 LTS]" <<69>> as 69 {
    node "Apache Tomcat\n[Deployment Node: Apache Tomcat 8.x]" <<70>> as 70 {
      rectangle "==Web Application\n<size:10>[Container: Java and Spring MVC]</size>\n\nDelivers the static content and the Internet banking single page application." <<71>> as 71
    }
  }
}
node "Customer's computer\n[Deployment Node: Microsoft Windows or Apple macOS]" <<65>> as 65 {
  node "Web Browser\n[Deployment Node: Chrome, Firefox, Safari, or Edge]" <<66>> as 66 {
    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." <<67>> as 67
  }
}
node "Customer's mobile device\n[Deployment Node: Apple iOS or Android]" <<63>> as 63 {
  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." <<64>> as 64
}
75 .[#707070].> 80 : "Reads from and writes to\n<size:8>[JDBC]</size>"
75 .[#707070].> 84 : "Reads from and writes to\n<size:8>[JDBC]</size>"
64 .[#707070].> 75 : "Makes API calls to\n<size:8>[JSON/HTTPS]</size>"
79 .[#707070].> 83 : "Replicates data to"
67 .[#707070].> 75 : "Makes API calls to\n<size:8>[JSON/HTTPS]</size>"
71 .[#707070].> 67 : "Delivers to the customer's web browser"
@enduml

#SignIn

@startuml(id=SignIn)
title API Application - Dynamic
caption Summarises how the sign in feature works in the single-page application.

skinparam {
  shadowing false
  arrowFontSize 10
  defaultTextAlignment center
  wrapWidth 200
  maxMessageSize 100
}
hide stereotype
top to bottom direction
skinparam rectangle<<12>> {
  BackgroundColor #85bbf0
  FontColor #000000
  BorderColor #5D82A8
}
skinparam rectangle<<15>> {
  BackgroundColor #85bbf0
  FontColor #000000
  BorderColor #5D82A8
}
skinparam database<<18>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2E6295
}
skinparam rectangle<<8>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2E6295
}
left to right direction

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." <<8>> as 8
rectangle "==Sign In Controller\n<size:10>[Component: Spring MVC Rest Controller]</size>\n\nAllows users to sign in to the Internet Banking System." <<12>> as 12
rectangle "==Security Component\n<size:10>[Component: Spring Bean]</size>\n\nProvides functionality related to signing in, changing passwords, etc." <<15>> as 15
database "==Database\n<size:10>[Container: Oracle Database Schema]</size>\n\nStores user registration information, hashed authentication credentials, access logs, etc." <<18>> as 18
8 .[#707070].> 12 : "1. Submits credentials to\n<size:8>[JSON/HTTPS]</size>"
12 .[#707070].> 15 : "2. Calls isAuthenticated() on"
15 .[#707070].> 18 : "3. select * from users where username = ?\n<size:8>[JDBC]</size>"
@enduml

#SystemContext

@startuml(id=SystemContext)
title Internet Banking System - System Context

skinparam {
  shadowing false
  arrowFontSize 10
  defaultTextAlignment center
  wrapWidth 200
  maxMessageSize 100
}
hide stereotype
top to bottom direction
skinparam rectangle<<1>> {
  BackgroundColor #08427b
  FontColor #ffffff
  BorderColor #052E56
}
skinparam rectangle<<4>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6B6B6B
}
skinparam rectangle<<5>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6B6B6B
}
skinparam rectangle<<7>> {
  BackgroundColor #1168bd
  FontColor #ffffff
  BorderColor #0B4884
}
rectangle "==Personal Banking Customer\n<size:10>[Person]</size>\n\nA customer of the bank, with personal bank accounts." <<1>> as 1
package "Big Bank plc" {
  rectangle "==E-mail System\n<size:10>[Software System]</size>\n\nThe internal Microsoft Exchange e-mail system" <<5>> as 5
  rectangle "==Internet Banking System\n<size:10>[Software System]</size>\n\nAllows customers to view information about their bank accounts, and make payments." <<7>> as 7
  rectangle "==Mainframe Banking System\n<size:10>[Software System]</size>\n\nStores all of the core banking information about customers, accounts, transactions, etc." <<4>> as 4
}
5 .[#707070].> 1 : "Sends e-mails to"
7 .[#707070].> 5 : "Sends e-mail using"
7 .[#707070].> 4 : "Gets account information from, and makes payments using"
1 .[#707070].> 7 : "Views account balances, and makes payments using"
@enduml

#SystemLandscape

@startuml(id=SystemLandscape)
title System Landscape for Big Bank plc

skinparam {
  shadowing false
  arrowFontSize 10
  defaultTextAlignment center
  wrapWidth 200
  maxMessageSize 100
}
hide stereotype
top to bottom direction
skinparam rectangle<<1>> {
  BackgroundColor #08427b
  FontColor #ffffff
  BorderColor #052E56
}
skinparam rectangle<<2>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6B6B6B
}
skinparam rectangle<<3>> {
  BackgroundColor #08427b
  FontColor #ffffff
  BorderColor #052E56
}
skinparam rectangle<<4>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6B6B6B
}
skinparam rectangle<<5>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6B6B6B
}
skinparam rectangle<<6>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6B6B6B
}
skinparam rectangle<<7>> {
  BackgroundColor #1168bd
  FontColor #ffffff
  BorderColor #0B4884
}
rectangle "==Personal Banking Customer\n<size:10>[Person]</size>\n\nA customer of the bank, with personal bank accounts." <<1>> as 1
package "Big Bank plc" {
  rectangle "==Back Office Staff\n<size:10>[Person]</size>\n\nAdministration and support staff within the bank." <<3>> as 3
  rectangle "==Customer Service Staff\n<size:10>[Person]</size>\n\nCustomer service staff within the bank." <<2>> as 2
  rectangle "==ATM\n<size:10>[Software System]</size>\n\nAllows customers to withdraw cash." <<6>> as 6
  rectangle "==E-mail System\n<size:10>[Software System]</size>\n\nThe internal Microsoft Exchange e-mail system" <<5>> as 5
  rectangle "==Internet Banking System\n<size:10>[Software System]</size>\n\nAllows customers to view information about their bank accounts, and make payments." <<7>> as 7
  rectangle "==Mainframe Banking System\n<size:10>[Software System]</size>\n\nStores all of the core banking information about customers, accounts, transactions, etc." <<4>> as 4
}
6 .[#707070].> 4 : "Uses"
3 .[#707070].> 4 : "Uses"
2 .[#707070].> 4 : "Uses"
5 .[#707070].> 1 : "Sends e-mails to"
7 .[#707070].> 5 : "Sends e-mail using"
7 .[#707070].> 4 : "Gets account information from, and makes payments using"
1 .[#707070].> 6 : "Withdraws cash using"
1 .[#707070].> 2 : "Asks questions to\n<size:8>[Telephone]</size>"
1 .[#707070].> 7 : "Views account balances, and makes payments using"
@enduml

#Components

graph TB
  linkStyle default fill:#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
  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
  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
  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
  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
  subgraph boundary [API Application]
    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
    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
    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
    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
    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
  end
  style boundary fill:#ffffff,stroke:#000000,color:#000000
  13-. "<div>Uses</div><div style='font-size: 70%'></div>" .->16
  17-. "<div>Sends e-mail using</div><div style='font-size: 70%'></div>" .->5
  16-. "<div>Makes API calls to</div><div style='font-size: 70%'>[XML/HTTPS]</div>" .->4
  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
  9-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->12
  14-. "<div>Uses</div><div style='font-size: 70%'></div>" .->17
  14-. "<div>Uses</div><div style='font-size: 70%'></div>" .->15
  15-. "<div>Reads from and writes to</div><div style='font-size: 70%'>[JDBC]</div>" .->18
  12-. "<div>Uses</div><div style='font-size: 70%'></div>" .->15
  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
  8-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->12

#Containers

graph TB
  linkStyle default fill:#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
  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
  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
  subgraph boundary [Internet Banking System]
    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
    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
    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
    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
  end
  style boundary fill:#ffffff,stroke:#000000,color:#000000
  11-. "<div>Reads from and writes to</div><div style='font-size: 70%'>[JDBC]</div>" .->18
  11-. "<div>Sends e-mail using</div><div style='font-size: 70%'></div>" .->5
  11-. "<div>Makes API calls to</div><div style='font-size: 70%'>[XML/HTTPS]</div>" .->4
  5-. "<div>Sends e-mails to</div><div style='font-size: 70%'></div>" .->1
  9-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->11
  1-. "<div>Views account balances, and<br />makes payments using</div><div style='font-size: 70%'></div>" .->9
  1-. "<div>Views account balances, and<br />makes payments using</div><div style='font-size: 70%'></div>" .->8
  1-. "<div>Visits bigbank.com/ib using</div><div style='font-size: 70%'>[HTTPS]</div>" .->10
  8-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->11
  10-. "<div>Delivers to the customer's<br />web browser</div><div style='font-size: 70%'></div>" .->8

#DevelopmentDeployment

graph TB
  linkStyle default fill:#ffffff

  subgraph 50 [Developer Laptop]
    subgraph 59 [Docker Container - Database Server]
      subgraph 60 [Database Server]
          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
      style 60 fill:#ffffff,stroke:#000000,color:#000000
    end
    style 59 fill:#ffffff,stroke:#000000,color:#000000
    subgraph 53 [Docker Container - Web Server]
      subgraph 54 [Apache Tomcat]
          57["<div style='font-weight: bold'>API Application</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring MVC]</div><div style='font-size: 80%; margin-top:10px'>Provides Internet banking<br />functionality via a<br />JSON/HTTPS API.</div>"]
          style 57 fill:#438dd5,stroke:#2e6295,color:#ffffff
          55["<div style='font-weight: bold'>Web Application</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring MVC]</div><div style='font-size: 80%; margin-top:10px'>Delivers the static content<br />and the Internet banking<br />single page application.</div>"]
          style 55 fill:#438dd5,stroke:#2e6295,color:#ffffff
      end
      style 54 fill:#ffffff,stroke:#000000,color:#000000
    end
    style 53 fill:#ffffff,stroke:#000000,color:#000000
    subgraph 51 [Web Browser]
        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
    style 51 fill:#ffffff,stroke:#000000,color:#000000
  end
  style 50 fill:#ffffff,stroke:#000000,color:#000000
  57-. "<div>Reads from and writes to</div><div style='font-size: 70%'>[JDBC]</div>" .->61
  52-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->57
  55-. "<div>Delivers to the customer's<br />web browser</div><div style='font-size: 70%'></div>" .->52

#LiveDeployment

graph TB
  linkStyle default fill:#ffffff

  subgraph 68 [Big Bank plc]
    subgraph 73 [bigbank-api***]
      subgraph 74 [Apache Tomcat]
          75["<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 75 fill:#438dd5,stroke:#2e6295,color:#ffffff
      end
      style 74 fill:#ffffff,stroke:#000000,color:#000000
    end
    style 73 fill:#ffffff,stroke:#000000,color:#000000
    subgraph 78 [bigbank-db01]
      subgraph 79 [Oracle - Primary]
          80[("<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 80 fill:#438dd5,stroke:#2e6295,color:#ffffff
      end
      style 79 fill:#ffffff,stroke:#000000,color:#000000
    end
    style 78 fill:#ffffff,stroke:#000000,color:#000000
    subgraph 82 [bigbank-db02]
      subgraph 83 [Oracle - Secondary]
          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
      style 83 fill:#ffffff,stroke:#000000,color:#000000
    end
    style 82 fill:#ffffff,stroke:#000000,color:#000000
    subgraph 69 [bigbank-web***]
      subgraph 70 [Apache Tomcat]
          71["<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 71 fill:#438dd5,stroke:#2e6295,color:#ffffff
      end
      style 70 fill:#ffffff,stroke:#000000,color:#000000
    end
    style 69 fill:#ffffff,stroke:#000000,color:#000000
  end
  style 68 fill:#ffffff,stroke:#000000,color:#000000
  subgraph 65 [Customer's computer]
    subgraph 66 [Web Browser]
        67["<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 67 fill:#438dd5,stroke:#2e6295,color:#ffffff
    end
    style 66 fill:#ffffff,stroke:#000000,color:#000000
  end
  style 65 fill:#ffffff,stroke:#000000,color:#000000
  subgraph 63 [Customer's mobile device]
      64["<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 64 fill:#438dd5,stroke:#2e6295,color:#ffffff
  end
  style 63 fill:#ffffff,stroke:#000000,color:#000000
  75-. "<div>Reads from and writes to</div><div style='font-size: 70%'>[JDBC]</div>" .->80
  75-. "<div>Reads from and writes to</div><div style='font-size: 70%'>[JDBC]</div>" .->84
  64-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->75
  67-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->75
  71-. "<div>Delivers to the customer's<br />web browser</div><div style='font-size: 70%'></div>" .->67

#SignIn

graph LR
  linkStyle default fill:#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
  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
  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
  8["<div style='font-weight: bold'>Single-Page Application</div><div style='font-size: 70%; margin-top: 0px'>[Container: JavaScript and Angular]</div><div style='font-size: 80%; margin-top:10px'>Provides all of the Internet<br />banking functionality to<br />customers via their web<br />browser.</div>"]
  style 8 fill:#438dd5,stroke:#2e6295,color:#ffffff
  8-->|"<div style='font-weight: bold'>1. Submits credentials to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>"|12
  12-->|"<div style='font-weight: bold'>2. Calls isAuthenticated() on</div><div style='font-size: 70%'></div>"|15
  15-->|"<div style='font-weight: bold'>3. select * from users where<br />username = ?</div><div style='font-size: 70%'>[JDBC]</div>"|18

#SystemContext

graph TB
  linkStyle default fill:#ffffff
  1["<div style='font-weight: bold'>Personal Banking Customer</div><div style='font-size: 70%; margin-top: 0px'>[Person]</div><div style='font-size: 80%; margin-top:10px'>A customer of the bank, with<br />personal bank accounts.</div>"]
  style 1 fill:#08427b,stroke:#052e56,color:#ffffff
  subgraph boundary [Big Bank plc]
    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
    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
  end
  style boundary fill:#ffffff,stroke:#000000,color:#000000
  5-. "<div>Sends e-mails to</div><div style='font-size: 70%'></div>" .->1
  7-. "<div>Sends e-mail using</div><div style='font-size: 70%'></div>" .->5
  7-. "<div>Gets account information<br />from, and makes payments<br />using</div><div style='font-size: 70%'></div>" .->4
  1-. "<div>Views account balances, and<br />makes payments using</div><div style='font-size: 70%'></div>" .->7

#SystemLandscape

graph TB
  linkStyle default fill:#ffffff
  1["<div style='font-weight: bold'>Personal Banking Customer</div><div style='font-size: 70%; margin-top: 0px'>[Person]</div><div style='font-size: 80%; margin-top:10px'>A customer of the bank, with<br />personal bank accounts.</div>"]
  style 1 fill:#08427b,stroke:#052e56,color:#ffffff
  subgraph boundary [Big Bank plc]
    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:#08427b,stroke:#052e56,color:#ffffff
    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
    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
    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
    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
  end
  style boundary fill:#ffffff,stroke:#000000,color:#000000
  6-. "<div>Uses</div><div style='font-size: 70%'></div>" .->4
  3-. "<div>Uses</div><div style='font-size: 70%'></div>" .->4
  2-. "<div>Uses</div><div style='font-size: 70%'></div>" .->4
  5-. "<div>Sends e-mails to</div><div style='font-size: 70%'></div>" .->1
  7-. "<div>Sends e-mail using</div><div style='font-size: 70%'></div>" .->5
  7-. "<div>Gets account information<br />from, and makes payments<br />using</div><div style='font-size: 70%'></div>" .->4
  1-. "<div>Withdraws cash using</div><div style='font-size: 70%'></div>" .->6
  1-. "<div>Asks questions to</div><div style='font-size: 70%'>[Telephone]</div>" .->2
  1-. "<div>Views account balances, and<br />makes payments using</div><div style='font-size: 70%'></div>" .->7

#SignIn

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: Calls isAuthenticated() on
Security Component->>Database: select * from users where username = ?