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 #dddddd
  FontColor #000000
  BorderColor #9A9A9A
}
skinparam rectangle<<12>> {
  BackgroundColor #999999
  FontColor #000000
  BorderColor #6B6B6B
}
skinparam rectangle<<2>> {
  BackgroundColor #dddddd
  FontColor #000000
  BorderColor #9A9A9A
  roundCorner 20
}
skinparam rectangle<<4>> {
  BackgroundColor #dddddd
  FontColor #000000
  BorderColor #9A9A9A
  roundCorner 20
}
skinparam rectangle<<15>> {
  BackgroundColor #999999
  FontColor #000000
  BorderColor #6B6B6B
}
skinparam rectangle<<6>> {
  BackgroundColor #dddddd
  FontColor #000000
  BorderColor #9A9A9A
  roundCorner 20
}
skinparam rectangle<<9>> {
  BackgroundColor #dddddd
  FontColor #000000
  BorderColor #9A9A9A
  roundCorner 20
}
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 : "Uses"
1 .[#707070].> 9 : "Withdraws cash using"
1 .[#707070].> 12 : "Asks questions to\n<size:8>[Telephone]</size>"
1 .[#707070].> 2 : "Uses"
@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 #dddddd
  FontColor #000000
  BorderColor #9A9A9A
}
skinparam rectangle<<2>> {
  BackgroundColor #dddddd
  FontColor #000000
  BorderColor #9A9A9A
  roundCorner 20
}
skinparam rectangle<<4>> {
  BackgroundColor #dddddd
  FontColor #000000
  BorderColor #9A9A9A
  roundCorner 20
}
skinparam rectangle<<6>> {
  BackgroundColor #dddddd
  FontColor #000000
  BorderColor #9A9A9A
  roundCorner 20
}
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 : "Uses"
1 .[#707070].> 2 : "Uses"
@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 #dddddd
  FontColor #000000
  BorderColor #9A9A9A
}
skinparam rectangle<<4>> {
  BackgroundColor #dddddd
  FontColor #000000
  BorderColor #9A9A9A
  roundCorner 20
}
skinparam rectangle<<17>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #B2B2B2
}
skinparam rectangle<<6>> {
  BackgroundColor #dddddd
  FontColor #000000
  BorderColor #9A9A9A
  roundCorner 20
}
skinparam rectangle<<18>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #B2B2B2
}
skinparam rectangle<<19>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #B2B2B2
  roundCorner 20
}
skinparam rectangle<<20>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #B2B2B2
  roundCorner 20
}
skinparam database<<21>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #B2B2B2
}
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: Relational 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 : "Uses\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 : "Uses"
1 .[#707070].> 17 : "Uses"
1 .[#707070].> 19 : "Uses\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 #dddddd
  FontColor #000000
  BorderColor #9A9A9A
}
skinparam rectangle<<34>> {
  BackgroundColor #dddddd
  FontColor #000000
  BorderColor #9A9A9A
}
skinparam rectangle<<4>> {
  BackgroundColor #dddddd
  FontColor #000000
  BorderColor #9A9A9A
  roundCorner 20
}
skinparam rectangle<<17>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #B2B2B2
}
skinparam rectangle<<6>> {
  BackgroundColor #dddddd
  FontColor #000000
  BorderColor #9A9A9A
  roundCorner 20
}
skinparam rectangle<<18>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #B2B2B2
}
skinparam rectangle<<29>> {
  BackgroundColor #dddddd
  FontColor #000000
  BorderColor #9A9A9A
}
skinparam rectangle<<30>> {
  BackgroundColor #dddddd
  FontColor #000000
  BorderColor #9A9A9A
}
skinparam rectangle<<31>> {
  BackgroundColor #dddddd
  FontColor #000000
  BorderColor #9A9A9A
}
skinparam database<<21>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #B2B2B2
}
skinparam rectangle<<32>> {
  BackgroundColor #dddddd
  FontColor #000000
  BorderColor #9A9A9A
}
database "==Database\n<size:10>[Container: Relational 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 #ffffff
  FontColor #000000
  BorderColor #B2B2B2
}
skinparam rectangle<<29>> {
  BackgroundColor #dddddd
  FontColor #000000
  BorderColor #9A9A9A
}
skinparam rectangle<<32>> {
  BackgroundColor #dddddd
  FontColor #000000
  BorderColor #9A9A9A
}
skinparam database<<21>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #B2B2B2
}
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: Relational 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. Calls isAuthenticated() on"
32 .[#707070].> 21 : "3. select * from users where username = ?\n<size:8>[JDBC]</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 database<<57>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #B2B2B2
}
skinparam node<<59>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #000000
}
skinparam rectangle<<60>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #B2B2B2
}
skinparam node<<50>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #000000
}
skinparam node<<51>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #000000
}
skinparam node<<52>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #000000
}
skinparam rectangle<<53>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #B2B2B2
  roundCorner 20
}
skinparam rectangle<<54>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #B2B2B2
  roundCorner 20
}
node "Developer Laptop\n[Deployment Node: Microsoft Windows 10 or Apple macOS]" <<50>> as 50 {
  node "Docker Container - Database Server\n[Deployment Node: Docker]" <<55>> as 55 {
    node "Database Server\n[Deployment Node: Oracle 12c]" <<56>> as 56 {
      database "==Database\n<size:10>[Container: Relational Database Schema]</size>\n\nStores user registration information, hashed authentication credentials, access logs, etc." <<57>> as 57
    }
  }
  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]" <<59>> as 59 {
    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." <<60>> as 60
  }
}
54 .[#707070].> 57 : "Reads from and writes to\n<size:8>[JDBC]</size>"
60 .[#707070].> 54 : "Makes API calls to\n<size:8>[JSON/HTTPS]</size>"
53 .[#707070].> 60 : "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 node<<66>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #000000
}
skinparam node<<78>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #000000
}
skinparam rectangle<<67>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #B2B2B2
}
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 #ffffff
  FontColor #000000
  BorderColor #B2B2B2
}
skinparam node<<70>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #000000
}
skinparam rectangle<<71>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #B2B2B2
  roundCorner 20
}
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 #ffffff
  FontColor #000000
  BorderColor #B2B2B2
}
skinparam node<<74>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #000000
}
skinparam node<<63>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #000000
}
skinparam rectangle<<75>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #B2B2B2
  roundCorner 20
}
skinparam rectangle<<64>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #B2B2B2
}
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: Relational 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: Relational 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

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