PlantUML

Here are the diagrams in your workspace, converted to PlantUML format.

You can click the buttons to render individual diagrams, or render all diagrams. Please note that editing, viewing or rendering diagrams will send your diagram content to http://plantuml.com/plantuml.

System Landscape for Big Bank plc

The system landscape diagram for Big Bank plc.

Download Edit at http://plantuml.com/plantuml

@startuml(id=SystemLandscape)
title System Landscape for Big Bank plc
caption The system landscape diagram for Big Bank plc.

skinparam {
  shadowing false
  arrowFontSize 10
  defaultTextAlignment center
  wrapWidth 200
  maxMessageSize 100
}
hide stereotype
skinparam rectangle<<1>> {
  BackgroundColor #08427b
  FontColor #ffffff
  BorderColor #052E56
}
skinparam rectangle<<12>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6B6B6B
}
skinparam rectangle<<2>> {
  BackgroundColor #1168bd
  FontColor #ffffff
  BorderColor #0B4884
}
skinparam rectangle<<4>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6B6B6B
}
skinparam rectangle<<15>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6B6B6B
}
skinparam rectangle<<6>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6B6B6B
}
skinparam rectangle<<9>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6B6B6B
}
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." <<15>> as 15
  rectangle "==Customer Service Staff\n<size:10>[Person]</size>\n\nCustomer service staff within the bank." <<12>> as 12
  rectangle "==ATM\n<size:10>[Software System]</size>\n\nAllows customers to withdraw cash." <<9>> as 9
  rectangle "==E-mail System\n<size:10>[Software System]</size>\n\nThe internal Microsoft Exchange e-mail system." <<6>> as 6
  rectangle "==Internet Banking System\n<size:10>[Software System]</size>\n\nAllows customers to view information about their bank accounts, and make payments." <<2>> as 2
  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
}
9 .[#707070].> 4 : "Uses"
15 .[#707070].> 4 : "Uses"
12 .[#707070].> 4 : "Uses"
6 .[#707070].> 1 : "Sends e-mails to"
2 .[#707070].> 6 : "Sends e-mail using"
2 .[#707070].> 4 : "Gets account information from, and makes payments using"
1 .[#707070].> 9 : "Withdraws cash using"
1 .[#707070].> 12 : "Asks questions to\n<size:8>[Telephone]</size>"
1 .[#707070].> 2 : "Views account balances, and makes payments using"
@enduml

(please note that this will send your diagram content to http://plantuml.com/plantuml)

Internet Banking System - System Context

The system context diagram for the Internet Banking System.

Download Edit at http://plantuml.com/plantuml

@startuml(id=SystemContext)
title Internet Banking System - System Context
caption The system context diagram for the Internet Banking System.

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

(please note that this will send your diagram content to http://plantuml.com/plantuml)

Internet Banking System - Containers

The container diagram for the Internet Banking System.

Download Edit at http://plantuml.com/plantuml

@startuml(id=Containers)
title Internet Banking System - Containers
caption The container diagram for the Internet Banking System.

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

(please note that this will send your diagram content to http://plantuml.com/plantuml)

Internet Banking System - API Application - Components

The component diagram for the API Application.

Download Edit at http://plantuml.com/plantuml

@startuml(id=Components)
title Internet Banking System - API Application - Components
caption The component diagram for the API Application.

skinparam {
  shadowing false
  arrowFontSize 10
  defaultTextAlignment center
  wrapWidth 200
  maxMessageSize 100
}
hide stereotype
skinparam rectangle<<33>> {
  BackgroundColor #85bbf0
  FontColor #000000
  BorderColor #5D82A8
}
skinparam rectangle<<34>> {
  BackgroundColor #85bbf0
  FontColor #000000
  BorderColor #5D82A8
}
skinparam rectangle<<4>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6B6B6B
}
skinparam rectangle<<17>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2E6295
}
skinparam rectangle<<6>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6B6B6B
}
skinparam rectangle<<18>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2E6295
}
skinparam rectangle<<29>> {
  BackgroundColor #85bbf0
  FontColor #000000
  BorderColor #5D82A8
}
skinparam rectangle<<30>> {
  BackgroundColor #85bbf0
  FontColor #000000
  BorderColor #5D82A8
}
skinparam rectangle<<31>> {
  BackgroundColor #85bbf0
  FontColor #000000
  BorderColor #5D82A8
}
skinparam database<<21>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2E6295
}
skinparam rectangle<<32>> {
  BackgroundColor #85bbf0
  FontColor #000000
  BorderColor #5D82A8
}
database "==Database\n<size:10>[Container: Oracle Database Schema]</size>\n\nStores user registration information, hashed authentication credentials, access logs, etc." <<21>> as 21
rectangle "==E-mail System\n<size:10>[Software System]</size>\n\nThe internal Microsoft Exchange e-mail system." <<6>> as 6
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." <<18>> as 18
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." <<17>> as 17
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." <<30>> as 30
  rectangle "==E-mail Component\n<size:10>[Component: Spring Bean]</size>\n\nSends e-mails to users." <<34>> as 34
  rectangle "==Mainframe Banking System Facade\n<size:10>[Component: Spring Bean]</size>\n\nA facade onto the mainframe banking system." <<33>> as 33
  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." <<31>> as 31
  rectangle "==Security Component\n<size:10>[Component: Spring Bean]</size>\n\nProvides functionality related to signing in, changing passwords, etc." <<32>> as 32
  rectangle "==Sign In Controller\n<size:10>[Component: Spring MVC Rest Controller]</size>\n\nAllows users to sign in to the Internet Banking System." <<29>> as 29
}
30 .[#707070].> 33 : "Uses"
34 .[#707070].> 6 : "Sends e-mail using"
33 .[#707070].> 4 : "Uses\n<size:8>[XML/HTTPS]</size>"
18 .[#707070].> 30 : "Makes API calls to\n<size:8>[JSON/HTTPS]</size>"
18 .[#707070].> 31 : "Makes API calls to\n<size:8>[JSON/HTTPS]</size>"
18 .[#707070].> 29 : "Makes API calls to\n<size:8>[JSON/HTTPS]</size>"
31 .[#707070].> 34 : "Uses"
31 .[#707070].> 32 : "Uses"
32 .[#707070].> 21 : "Reads from and writes to\n<size:8>[JDBC]</size>"
29 .[#707070].> 32 : "Uses"
17 .[#707070].> 30 : "Makes API calls to\n<size:8>[JSON/HTTPS]</size>"
17 .[#707070].> 31 : "Makes API calls to\n<size:8>[JSON/HTTPS]</size>"
17 .[#707070].> 29 : "Makes API calls to\n<size:8>[JSON/HTTPS]</size>"
@enduml

(please note that this will send your diagram content to http://plantuml.com/plantuml)

API Application - Dynamic

Summarises how the sign in feature works in the single-page application.

Download Edit at http://plantuml.com/plantuml

@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
skinparam rectangle<<17>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2E6295
}
skinparam rectangle<<29>> {
  BackgroundColor #85bbf0
  FontColor #000000
  BorderColor #5D82A8
}
skinparam rectangle<<32>> {
  BackgroundColor #85bbf0
  FontColor #000000
  BorderColor #5D82A8
}
skinparam database<<21>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2E6295
}
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." <<17>> as 17
rectangle "==Sign In Controller\n<size:10>[Component: Spring MVC Rest Controller]</size>\n\nAllows users to sign in to the Internet Banking System." <<29>> as 29
rectangle "==Security Component\n<size:10>[Component: Spring Bean]</size>\n\nProvides functionality related to signing in, changing passwords, etc." <<32>> as 32
database "==Database\n<size:10>[Container: Oracle Database Schema]</size>\n\nStores user registration information, hashed authentication credentials, access logs, etc." <<21>> as 21
17 .[#707070].> 29 : "1. Submits credentials to\n<size:8>[JSON/HTTPS]</size>"
29 .[#707070].> 32 : "2. Validates credentials using"
32 .[#707070].> 21 : "3. select * from users where username = ?\n<size:8>[JDBC]</size>"
32 <.[#707070]. 21 : "4. Returns user data to\n<size:8>[JDBC]</size>"
29 <.[#707070]. 32 : "5. Returns true if the hashed password matches"
17 <.[#707070]. 29 : "6. Sends back an authentication token to\n<size:8>[JSON/HTTPS]</size>"
@enduml

(please note that this will send your diagram content to http://plantuml.com/plantuml)

Internet Banking System - Deployment - Development

An example development deployment scenario for the Internet Banking System.

Download Edit at http://plantuml.com/plantuml

@startuml(id=DevelopmentDeployment)
title Internet Banking System - Deployment - Development
caption An example development deployment scenario for the Internet Banking System.

skinparam {
  shadowing false
  arrowFontSize 10
  defaultTextAlignment center
  wrapWidth 200
  maxMessageSize 100
}
hide stereotype
skinparam node<<55>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #000000
}
skinparam node<<56>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #000000
}
skinparam rectangle<<57>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6B6B6B
}
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 node<<63>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #000000
}
skinparam node<<52>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #000000
}
skinparam rectangle<<64>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2E6295
}
skinparam rectangle<<53>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2E6295
}
skinparam rectangle<<54>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2E6295
}
node "Big Bank plc\n[Deployment Node: Big Bank plc data center]" <<55>> as 55 {
  node "bigbank-dev001\n[Deployment Node]" <<56>> as 56 {
    rectangle "==Mainframe Banking System\n<size:10>[Software System]</size>\n\nStores all of the core banking information about customers, accounts, transactions, etc." <<57>> as 57
  }
}
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]" <<51>> as 51 {
    node "Apache Tomcat\n[Deployment Node: Apache Tomcat 8.x]" <<52>> as 52 {
      rectangle "==API Application\n<size:10>[Container: Java and Spring MVC]</size>\n\nProvides Internet banking functionality via a JSON/HTTPS API." <<54>> as 54
      rectangle "==Web Application\n<size:10>[Container: Java and Spring MVC]</size>\n\nDelivers the static content and the Internet banking single page application." <<53>> as 53
    }
  }
  node "Web Browser\n[Deployment Node: Chrome, Firefox, Safari, or Edge]" <<63>> as 63 {
    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." <<64>> as 64
  }
}
54 .[#707070].> 61 : "Reads from and writes to\n<size:8>[JDBC]</size>"
54 .[#707070].> 57 : "Makes API calls to\n<size:8>[XML/HTTPS]</size>"
64 .[#707070].> 54 : "Makes API calls to\n<size:8>[JSON/HTTPS]</size>"
53 .[#707070].> 64 : "Delivers to the customer's web browser"
@enduml

(please note that this will send your diagram content to http://plantuml.com/plantuml)

Internet Banking System - Deployment - Live

An example live deployment scenario for the Internet Banking System.

Download Edit at http://plantuml.com/plantuml

@startuml(id=LiveDeployment)
title Internet Banking System - Deployment - Live
caption An example live deployment scenario for the Internet Banking System.

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

(please note that this will send your diagram content to http://plantuml.com/plantuml)