PlantUML definitions are available via the Structurizr CLI export command,
using the -format plantuml
parameter.
@startuml
title Internet Banking System - API Application - Components
skinparam {
shadowing false
arrowFontSize 10
defaultTextAlignment center
wrapWidth 200
maxMessageSize 100
PackageBorderColor<<group>> #cccccc
PackageFontColor<<group>> #cccccc
}
hide stereotype
top to bottom direction
skinparam rectangle<<13>> {
BackgroundColor #85bbf0
FontColor #000000
BorderColor #5d82a8
}
skinparam database<<18>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
}
skinparam rectangle<<17>> {
BackgroundColor #85bbf0
FontColor #000000
BorderColor #5d82a8
}
skinparam rectangle<<5>> {
BackgroundColor #999999
FontColor #ffffff
BorderColor #6b6b6b
}
skinparam rectangle<<4>> {
BackgroundColor #999999
FontColor #ffffff
BorderColor #6b6b6b
}
skinparam rectangle<<16>> {
BackgroundColor #85bbf0
FontColor #000000
BorderColor #5d82a8
}
skinparam rectangle<<9>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
}
skinparam rectangle<<14>> {
BackgroundColor #85bbf0
FontColor #000000
BorderColor #5d82a8
}
skinparam rectangle<<15>> {
BackgroundColor #85bbf0
FontColor #000000
BorderColor #5d82a8
}
skinparam rectangle<<12>> {
BackgroundColor #85bbf0
FontColor #000000
BorderColor #5d82a8
}
skinparam rectangle<<8>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
}
rectangle "==Mainframe Banking System\n<size:10>[Software System]</size>\n\nStores all of the core banking information about customers, accounts, transactions, etc." <<4>> as 4
rectangle "==E-mail System\n<size:10>[Software System]</size>\n\nThe internal Microsoft Exchange e-mail system." <<5>> as 5
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 "==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 "==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
package "API Application\n[Container: Java and Spring MVC]" <<11>> {
skinparam PackageBorderColor<<11>> #444444
skinparam PackageFontColor<<11>> #444444
rectangle "==Sign In Controller\n<size:10>[Component: Spring MVC Rest Controller]</size>\n\nAllows users to sign in to the Internet Banking System." <<12>> as 12
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 "==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 "==Mainframe Banking System Facade\n<size:10>[Component: Spring Bean]</size>\n\nA facade onto the mainframe banking system." <<16>> as 16
rectangle "==E-mail Component\n<size:10>[Component: Spring Bean]</size>\n\nSends e-mails to users." <<17>> as 17
}
8 .[#707070,thickness=2].> 12 : "Makes API calls to\n<size:8>[JSON/HTTPS]</size>"
8 .[#707070,thickness=2].> 13 : "Makes API calls to\n<size:8>[JSON/HTTPS]</size>"
8 .[#707070,thickness=2].> 14 : "Makes API calls to\n<size:8>[JSON/HTTPS]</size>"
9 .[#707070,thickness=2].> 12 : "Makes API calls to\n<size:8>[JSON/HTTPS]</size>"
9 .[#707070,thickness=2].> 13 : "Makes API calls to\n<size:8>[JSON/HTTPS]</size>"
9 .[#707070,thickness=2].> 14 : "Makes API calls to\n<size:8>[JSON/HTTPS]</size>"
12 .[#707070,thickness=2].> 15 : "Uses"
13 .[#707070,thickness=2].> 16 : "Uses"
14 .[#707070,thickness=2].> 15 : "Uses"
14 .[#707070,thickness=2].> 17 : "Uses"
15 .[#707070,thickness=2].> 18 : "Reads from and writes to\n<size:8>[JDBC]</size>"
16 .[#707070,thickness=2].> 4 : "Makes API calls to\n<size:8>[XML/HTTPS]</size>"
17 .[#707070,thickness=2].> 5 : "Sends e-mail using"
@enduml
@startuml
title Internet Banking System - Containers
skinparam {
shadowing false
arrowFontSize 10
defaultTextAlignment center
wrapWidth 200
maxMessageSize 100
PackageBorderColor<<group>> #cccccc
PackageFontColor<<group>> #cccccc
}
hide stereotype
top to bottom direction
skinparam rectangle<<11>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
}
skinparam database<<18>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
}
skinparam rectangle<<5>> {
BackgroundColor #999999
FontColor #ffffff
BorderColor #6b6b6b
}
skinparam rectangle<<4>> {
BackgroundColor #999999
FontColor #ffffff
BorderColor #6b6b6b
}
skinparam rectangle<<9>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
}
skinparam person<<1>> {
BackgroundColor #08427b
FontColor #ffffff
BorderColor #052e56
}
skinparam rectangle<<8>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
}
skinparam rectangle<<10>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
}
person "==Personal Banking Customer\n<size:10>[Person]</size>\n\nA customer of the bank, with personal bank accounts." <<1>> as 1
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 "==E-mail System\n<size:10>[Software System]</size>\n\nThe internal Microsoft Exchange e-mail system." <<5>> as 5
package "Internet Banking System\n[Software System]" <<7>> {
skinparam PackageBorderColor<<7>> #444444
skinparam PackageFontColor<<7>> #444444
rectangle "==Web Application\n<size:10>[Container: Java and Spring MVC]</size>\n\nDelivers the static content and the Internet banking single page application." <<10>> as 10
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 "==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 "==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
}
5 .[#707070,thickness=2].> 1 : "Sends e-mails to"
1 .[#707070,thickness=2].> 10 : "Visits bigbank.com/ib using\n<size:8>[HTTPS]</size>"
1 .[#707070,thickness=2].> 8 : "Views account balances, and makes payments using"
1 .[#707070,thickness=2].> 9 : "Views account balances, and makes payments using"
10 .[#707070,thickness=2].> 8 : "Delivers to the customer's web browser"
8 .[#707070,thickness=2].> 11 : "Makes API calls to\n<size:8>[JSON/HTTPS]</size>"
9 .[#707070,thickness=2].> 11 : "Makes API calls to\n<size:8>[JSON/HTTPS]</size>"
11 .[#707070,thickness=2].> 18 : "Reads from and writes to\n<size:8>[JDBC]</size>"
11 .[#707070,thickness=2].> 4 : "Makes API calls to\n<size:8>[XML/HTTPS]</size>"
11 .[#707070,thickness=2].> 5 : "Sends e-mail using"
@enduml
@startuml
title Internet Banking System - Deployment - Development
skinparam {
shadowing false
arrowFontSize 10
defaultTextAlignment center
wrapWidth 200
maxMessageSize 100
PackageBorderColor<<group>> #cccccc
PackageFontColor<<group>> #cccccc
}
hide stereotype
top to bottom direction
skinparam rectangle<<57>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
}
skinparam node<<54>> {
BackgroundColor #ffffff
FontColor #000000
BorderColor #888888
}
skinparam node<<63>> {
BackgroundColor #ffffff
FontColor #000000
BorderColor #888888
}
skinparam database<<61>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
}
skinparam node<<60>> {
BackgroundColor #ffffff
FontColor #000000
BorderColor #888888
}
skinparam node<<50>> {
BackgroundColor #ffffff
FontColor #000000
BorderColor #888888
}
skinparam node<<59>> {
BackgroundColor #ffffff
FontColor #000000
BorderColor #888888
}
skinparam node<<53>> {
BackgroundColor #ffffff
FontColor #000000
BorderColor #888888
}
skinparam rectangle<<65>> {
BackgroundColor #999999
FontColor #ffffff
BorderColor #6b6b6b
}
skinparam rectangle<<52>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
}
skinparam rectangle<<55>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
}
skinparam node<<51>> {
BackgroundColor #ffffff
FontColor #000000
BorderColor #888888
}
skinparam node<<64>> {
BackgroundColor #ffffff
FontColor #000000
BorderColor #888888
}
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
}
}
node "Big Bank plc\n[Deployment Node: Big Bank plc data center]" <<63>> as 63 {
node "bigbank-dev001\n[Deployment Node]" <<64>> as 64 {
rectangle "==Mainframe Banking System\n<size:10>[Software System]</size>\n\nStores all of the core banking information about customers, accounts, transactions, etc." <<65>> as 65
}
}
55 .[#707070,thickness=2].> 52 : "Delivers to the customer's web browser"
52 .[#707070,thickness=2].> 57 : "Makes API calls to\n<size:8>[JSON/HTTPS]</size>"
57 .[#707070,thickness=2].> 61 : "Reads from and writes to\n<size:8>[JDBC]</size>"
57 .[#707070,thickness=2].> 65 : "Makes API calls to\n<size:8>[XML/HTTPS]</size>"
@enduml
@startuml
title Internet Banking System - Deployment - Live
skinparam {
shadowing false
arrowFontSize 10
defaultTextAlignment center
wrapWidth 200
maxMessageSize 100
PackageBorderColor<<group>> #cccccc
PackageFontColor<<group>> #cccccc
}
hide stereotype
top to bottom direction
skinparam rectangle<<79>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
}
skinparam node<<78>> {
BackgroundColor #ffffff
FontColor #000000
BorderColor #888888
}
skinparam node<<74>> {
BackgroundColor #ffffff
FontColor #000000
BorderColor #888888
}
skinparam node<<72>> {
BackgroundColor #ffffff
FontColor #000000
BorderColor #888888
}
skinparam node<<69>> {
BackgroundColor #ffffff
FontColor #000000
BorderColor #888888
}
skinparam node<<67>> {
BackgroundColor #ffffff
FontColor #000000
BorderColor #888888
}
skinparam database<<88>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
}
skinparam database<<84>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
}
skinparam rectangle<<91>> {
BackgroundColor #999999
FontColor #ffffff
BorderColor #6b6b6b
}
skinparam rectangle<<68>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
}
skinparam node<<83>> {
BackgroundColor #ffffff
FontColor #000000
BorderColor #888888
}
skinparam node<<87>> {
BackgroundColor #ffffff
FontColor #000000
BorderColor #888888
}
skinparam rectangle<<71>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
}
skinparam rectangle<<75>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
}
skinparam node<<70>> {
BackgroundColor #ffffff
FontColor #000000
BorderColor #888888
}
skinparam node<<77>> {
BackgroundColor #ffffff
FontColor #000000
BorderColor #888888
}
skinparam node<<82>> {
BackgroundColor #ffffff
FontColor #000000
BorderColor #888888
}
skinparam node<<86>> {
BackgroundColor #ffffff
FontColor #000000
BorderColor #888888
}
skinparam node<<90>> {
BackgroundColor #ffffff
FontColor #000000
BorderColor #888888
}
skinparam node<<73>> {
BackgroundColor #ffffff
FontColor #000000
BorderColor #888888
}
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
}
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 "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]" <<77>> as 77 {
node "Apache Tomcat\n[Deployment Node: Apache Tomcat 8.x]" <<78>> as 78 {
rectangle "==API Application\n<size:10>[Container: Java and Spring MVC]</size>\n\nProvides Internet banking functionality via a JSON/HTTPS API." <<79>> as 79
}
}
node "bigbank-db01\n[Deployment Node: Ubuntu 16.04 LTS]" <<82>> as 82 {
node "Oracle - Primary\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-db02\n[Deployment Node: Ubuntu 16.04 LTS]" <<86>> as 86 {
node "Oracle - Secondary\n[Deployment Node: Oracle 12c]" <<87>> as 87 {
database "==Database\n<size:10>[Container: Oracle Database Schema]</size>\n\nStores user registration information, hashed authentication credentials, access logs, etc." <<88>> as 88
}
}
node "bigbank-prod001\n[Deployment Node]" <<90>> as 90 {
rectangle "==Mainframe Banking System\n<size:10>[Software System]</size>\n\nStores all of the core banking information about customers, accounts, transactions, etc." <<91>> as 91
}
node "bigbank-web*** (x4)\n[Deployment Node: Ubuntu 16.04 LTS]" <<73>> as 73 {
node "Apache Tomcat\n[Deployment Node: Apache Tomcat 8.x]" <<74>> as 74 {
rectangle "==Web Application\n<size:10>[Container: Java and Spring MVC]</size>\n\nDelivers the static content and the Internet banking single page application." <<75>> as 75
}
}
}
75 .[#707070,thickness=2].> 71 : "Delivers to the customer's web browser"
68 .[#707070,thickness=2].> 79 : "Makes API calls to\n<size:8>[JSON/HTTPS]</size>"
71 .[#707070,thickness=2].> 79 : "Makes API calls to\n<size:8>[JSON/HTTPS]</size>"
79 .[#707070,thickness=2].> 84 : "Reads from and writes to\n<size:8>[JDBC]</size>"
79 .[#707070,thickness=2].> 88 : "Reads from and writes to\n<size:8>[JDBC]</size>"
79 .[#707070,thickness=2].> 91 : "Makes API calls to\n<size:8>[XML/HTTPS]</size>"
83 .[#707070,thickness=2].> 87 : "Replicates data to"
@enduml
@startuml
title API Application - Dynamic
skinparam {
shadowing false
arrowFontSize 10
defaultTextAlignment center
wrapWidth 200
maxMessageSize 100
PackageBorderColor<<group>> #cccccc
PackageFontColor<<group>> #cccccc
}
hide stereotype
top to bottom direction
skinparam database<<18>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
}
skinparam rectangle<<15>> {
BackgroundColor #85bbf0
FontColor #000000
BorderColor #5d82a8
}
skinparam rectangle<<12>> {
BackgroundColor #85bbf0
FontColor #000000
BorderColor #5d82a8
}
skinparam rectangle<<8>> {
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 "==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]" <<11>> {
skinparam PackageBorderColor<<11>> #444444
skinparam PackageFontColor<<11>> #444444
rectangle "==Sign In Controller\n<size:10>[Component: Spring MVC Rest Controller]</size>\n\nAllows users to sign in to the Internet Banking System." <<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
}
8 .[#707070,thickness=2].> 12 : "1. Submits credentials to\n<size:8>[JSON/HTTPS]</size>"
12 .[#707070,thickness=2].> 15 : "2. Validates credentials using"
15 .[#707070,thickness=2].> 18 : "3. select * from users where username = ?\n<size:8>[JDBC]</size>"
15 <.[#707070,thickness=2]. 18 : "4. Returns user data to\n<size:8>[JDBC]</size>"
12 <.[#707070,thickness=2]. 15 : "5. Returns true if the hashed password matches"
8 <.[#707070,thickness=2]. 12 : "6. Sends back an authentication token to\n<size:8>[JSON/HTTPS]</size>"
@enduml
@startuml
title Internet Banking System - System Context
skinparam {
shadowing false
arrowFontSize 10
defaultTextAlignment center
wrapWidth 200
maxMessageSize 100
PackageBorderColor<<group>> #cccccc
PackageFontColor<<group>> #cccccc
}
hide stereotype
top to bottom direction
skinparam rectangle<<5>> {
BackgroundColor #999999
FontColor #ffffff
BorderColor #6b6b6b
}
skinparam rectangle<<7>> {
BackgroundColor #1168bd
FontColor #ffffff
BorderColor #0b4884
}
skinparam rectangle<<4>> {
BackgroundColor #999999
FontColor #ffffff
BorderColor #6b6b6b
}
skinparam person<<1>> {
BackgroundColor #08427b
FontColor #ffffff
BorderColor #052e56
}
package "Big Bank plc" <<enterprise>> {
skinparam PackageBorderColor<<enterprise>> #444444
skinparam PackageFontColor<<enterprise>> #444444
rectangle "==Mainframe Banking System\n<size:10>[Software System]</size>\n\nStores all of the core banking information about customers, accounts, transactions, etc." <<4>> as 4
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
}
person "==Personal Banking Customer\n<size:10>[Person]</size>\n\nA customer of the bank, with personal bank accounts." <<1>> as 1
1 .[#707070,thickness=2].> 7 : "Views account balances, and makes payments using"
7 .[#707070,thickness=2].> 4 : "Gets account information from, and makes payments using"
7 .[#707070,thickness=2].> 5 : "Sends e-mail using"
5 .[#707070,thickness=2].> 1 : "Sends e-mails to"
@enduml
@startuml
title System Landscape for Big Bank plc
skinparam {
shadowing false
arrowFontSize 10
defaultTextAlignment center
wrapWidth 200
maxMessageSize 100
PackageBorderColor<<group>> #cccccc
PackageFontColor<<group>> #cccccc
}
hide stereotype
top to bottom direction
skinparam rectangle<<6>> {
BackgroundColor #999999
FontColor #ffffff
BorderColor #6b6b6b
}
skinparam person<<3>> {
BackgroundColor #999999
FontColor #ffffff
BorderColor #6b6b6b
}
skinparam person<<2>> {
BackgroundColor #999999
FontColor #ffffff
BorderColor #6b6b6b
}
skinparam rectangle<<5>> {
BackgroundColor #999999
FontColor #ffffff
BorderColor #6b6b6b
}
skinparam rectangle<<7>> {
BackgroundColor #1168bd
FontColor #ffffff
BorderColor #0b4884
}
skinparam rectangle<<4>> {
BackgroundColor #999999
FontColor #ffffff
BorderColor #6b6b6b
}
skinparam person<<1>> {
BackgroundColor #08427b
FontColor #ffffff
BorderColor #052e56
}
package "Big Bank plc" <<enterprise>> {
skinparam PackageBorderColor<<enterprise>> #444444
skinparam PackageFontColor<<enterprise>> #444444
person "==Customer Service Staff\n<size:10>[Person]</size>\n\nCustomer service staff within the bank." <<2>> as 2
person "==Back Office Staff\n<size:10>[Person]</size>\n\nAdministration and support staff within the bank." <<3>> as 3
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 "==E-mail System\n<size:10>[Software System]</size>\n\nThe internal Microsoft Exchange e-mail system." <<5>> as 5
rectangle "==ATM\n<size:10>[Software System]</size>\n\nAllows customers to withdraw cash." <<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." <<7>> as 7
}
person "==Personal Banking Customer\n<size:10>[Person]</size>\n\nA customer of the bank, with personal bank accounts." <<1>> as 1
1 .[#707070,thickness=2].> 7 : "Views account balances, and makes payments using"
7 .[#707070,thickness=2].> 4 : "Gets account information from, and makes payments using"
7 .[#707070,thickness=2].> 5 : "Sends e-mail using"
5 .[#707070,thickness=2].> 1 : "Sends e-mails to"
1 .[#707070,thickness=2].> 2 : "Asks questions to\n<size:8>[Telephone]</size>"
2 .[#707070,thickness=2].> 4 : "Uses"
1 .[#707070,thickness=2].> 6 : "Withdraws cash using"
6 .[#707070,thickness=2].> 4 : "Uses"
3 .[#707070,thickness=2].> 4 : "Uses"
@enduml
C4-PlantUML definitions are available via the Structurizr CLI export command,
using the -format plantuml/c4plantuml
parameter.
@startuml
title Internet Banking System - API Application - Components
!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml
!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml
LAYOUT_WITH_LEGEND()
System(4, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
System(5, "E-mail System", "The internal Microsoft Exchange e-mail system.")
ContainerDb(18, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
Container(8, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.")
Container(9, "Mobile App", "Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device.")
Container_Boundary("11_boundary", "API Application") {
Component(12, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System.")
Component(13, "Accounts Summary Controller", "Spring MVC Rest Controller", "Provides customers with a summary of their bank accounts.")
Component(14, "Reset Password Controller", "Spring MVC Rest Controller", "Allows users to reset their passwords with a single use URL.")
Component(15, "Security Component", "Spring Bean", "Provides functionality related to signing in, changing passwords, etc.")
Component(16, "Mainframe Banking System Facade", "Spring Bean", "A facade onto the mainframe banking system.")
Component(17, "E-mail Component", "Spring Bean", "Sends e-mails to users.")
}
Rel_D(8, 12, "Makes API calls to", "JSON/HTTPS")
Rel_D(8, 13, "Makes API calls to", "JSON/HTTPS")
Rel_D(8, 14, "Makes API calls to", "JSON/HTTPS")
Rel_D(9, 12, "Makes API calls to", "JSON/HTTPS")
Rel_D(9, 13, "Makes API calls to", "JSON/HTTPS")
Rel_D(9, 14, "Makes API calls to", "JSON/HTTPS")
Rel_D(12, 15, "Uses")
Rel_D(13, 16, "Uses")
Rel_D(14, 15, "Uses")
Rel_D(14, 17, "Uses")
Rel_D(15, 18, "Reads from and writes to", "JDBC")
Rel_D(16, 4, "Makes API calls to", "XML/HTTPS")
Rel_D(17, 5, "Sends e-mail using")
@enduml
@startuml
title Internet Banking System - Containers
!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml
!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
LAYOUT_WITH_LEGEND()
Person_Ext(1, "Personal Banking Customer", "A customer of the bank, with personal bank accounts.")
System(4, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
System(5, "E-mail System", "The internal Microsoft Exchange e-mail system.")
System_Boundary("7_boundary", "Internet Banking System") {
Container(10, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet banking single page application.")
Container(11, "API Application", "Java and Spring MVC", "Provides Internet banking functionality via a JSON/HTTPS API.")
ContainerDb(18, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
Container(8, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.")
Container(9, "Mobile App", "Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device.")
}
Rel_D(5, 1, "Sends e-mails to")
Rel_D(1, 10, "Visits bigbank.com/ib using", "HTTPS")
Rel_D(1, 8, "Views account balances, and makes payments using")
Rel_D(1, 9, "Views account balances, and makes payments using")
Rel_D(10, 8, "Delivers to the customer's web browser")
Rel_D(8, 11, "Makes API calls to", "JSON/HTTPS")
Rel_D(9, 11, "Makes API calls to", "JSON/HTTPS")
Rel_D(11, 18, "Reads from and writes to", "JDBC")
Rel_D(11, 4, "Makes API calls to", "XML/HTTPS")
Rel_D(11, 5, "Sends e-mail using")
@enduml
@startuml
title Internet Banking System - Deployment - Development
!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml
!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml
LAYOUT_WITH_LEGEND()
Deployment_Node(50, "Developer Laptop", "Microsoft Windows 10 or Apple macOS") {
Deployment_Node(59, "Docker Container - Database Server", "Docker") {
Deployment_Node(60, "Database Server", "Oracle 12c") {
ContainerDb(61, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
}
}
Deployment_Node(53, "Docker Container - Web Server", "Docker") {
Deployment_Node(54, "Apache Tomcat", "Apache Tomcat 8.x") {
Container(57, "API Application", "Java and Spring MVC", "Provides Internet banking functionality via a JSON/HTTPS API.")
Container(55, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet banking single page application.")
}
}
Deployment_Node(51, "Web Browser", "Chrome, Firefox, Safari, or Edge") {
Container(52, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.")
}
}
Deployment_Node(63, "Big Bank plc", "Big Bank plc data center") {
Deployment_Node(64, "bigbank-dev001") {
System(65, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
}
}
Rel_D(55, 52, "Delivers to the customer's web browser")
Rel_D(52, 57, "Makes API calls to", "JSON/HTTPS")
Rel_D(57, 61, "Reads from and writes to", "JDBC")
Rel_D(57, 65, "Makes API calls to", "XML/HTTPS")
@enduml
@startuml
title Internet Banking System - Deployment - Live
!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml
!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml
LAYOUT_WITH_LEGEND()
Deployment_Node(67, "Customer's mobile device", "Apple iOS or Android") {
Container(68, "Mobile App", "Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device.")
}
Deployment_Node(69, "Customer's computer", "Microsoft Windows or Apple macOS") {
Deployment_Node(70, "Web Browser", "Chrome, Firefox, Safari, or Edge") {
Container(71, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.")
}
}
Deployment_Node(72, "Big Bank plc", "Big Bank plc data center") {
Deployment_Node(77, "bigbank-api*** (x8)", "Ubuntu 16.04 LTS") {
Deployment_Node(78, "Apache Tomcat", "Apache Tomcat 8.x") {
Container(79, "API Application", "Java and Spring MVC", "Provides Internet banking functionality via a JSON/HTTPS API.")
}
}
Deployment_Node(82, "bigbank-db01", "Ubuntu 16.04 LTS") {
Deployment_Node(83, "Oracle - Primary", "Oracle 12c") {
ContainerDb(84, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
}
}
Deployment_Node(86, "bigbank-db02", "Ubuntu 16.04 LTS") {
Deployment_Node(87, "Oracle - Secondary", "Oracle 12c") {
ContainerDb(88, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
}
}
Deployment_Node(90, "bigbank-prod001") {
System(91, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
}
Deployment_Node(73, "bigbank-web*** (x4)", "Ubuntu 16.04 LTS") {
Deployment_Node(74, "Apache Tomcat", "Apache Tomcat 8.x") {
Container(75, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet banking single page application.")
}
}
}
Rel_D(75, 71, "Delivers to the customer's web browser")
Rel_D(68, 79, "Makes API calls to", "JSON/HTTPS")
Rel_D(71, 79, "Makes API calls to", "JSON/HTTPS")
Rel_D(79, 84, "Reads from and writes to", "JDBC")
Rel_D(79, 88, "Reads from and writes to", "JDBC")
Rel_D(79, 91, "Makes API calls to", "XML/HTTPS")
Rel_D(83, 87, "Replicates data to")
@enduml
@startuml
title API Application - Dynamic
!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml
!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml
LAYOUT_WITH_LEGEND()
ContainerDb(18, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
Container(8, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.")
Container_Boundary("11_boundary", "API Application") {
Component(12, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System.")
Component(15, "Security Component", "Spring Bean", "Provides functionality related to signing in, changing passwords, etc.")
}
Rel_D(8, 12, "1. Submits credentials to", "JSON/HTTPS")
Rel_D(12, 15, "2. Validates credentials using")
Rel_D(15, 18, "3. select * from users where username = ?", "JDBC")
Rel_D(18, 15, "4. Returns user data to", "JDBC")
Rel_D(15, 12, "5. Returns true if the hashed password matches")
Rel_D(12, 8, "6. Sends back an authentication token to", "JSON/HTTPS")
@enduml
@startuml
title Internet Banking System - System Context
!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml
!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
LAYOUT_WITH_LEGEND()
Enterprise_Boundary(enterprise, "Big Bank plc") {
System(4, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
System(5, "E-mail System", "The internal Microsoft Exchange e-mail system.")
System(7, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
}
Person_Ext(1, "Personal Banking Customer", "A customer of the bank, with personal bank accounts.")
Rel_D(1, 7, "Views account balances, and makes payments using")
Rel_D(7, 4, "Gets account information from, and makes payments using")
Rel_D(7, 5, "Sends e-mail using")
Rel_D(5, 1, "Sends e-mails to")
@enduml
@startuml
title System Landscape for Big Bank plc
!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml
!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
LAYOUT_WITH_LEGEND()
Enterprise_Boundary(enterprise, "Big Bank plc") {
Person(2, "Customer Service Staff", "Customer service staff within the bank.")
Person(3, "Back Office Staff", "Administration and support staff within the bank.")
System(4, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
System(5, "E-mail System", "The internal Microsoft Exchange e-mail system.")
System(6, "ATM", "Allows customers to withdraw cash.")
System(7, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
}
Person_Ext(1, "Personal Banking Customer", "A customer of the bank, with personal bank accounts.")
Rel_D(1, 7, "Views account balances, and makes payments using")
Rel_D(7, 4, "Gets account information from, and makes payments using")
Rel_D(7, 5, "Sends e-mail using")
Rel_D(5, 1, "Sends e-mails to")
Rel_D(1, 2, "Asks questions to", "Telephone")
Rel_D(2, 4, "Uses")
Rel_D(1, 6, "Withdraws cash using")
Rel_D(6, 4, "Uses")
Rel_D(3, 4, "Uses")
@enduml
Mermaid definitions are available via the Structurizr CLI export command,
using the -format mermaid
parameter. Your Mermaid configuration will need to include "securityLevel": "loose"
to render this definition correctly.
graph TB
linkStyle default fill:#ffffff
4["<div style='font-weight: bold'>Mainframe Banking System</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>Stores all of the core<br />banking information about<br />customers, accounts,<br />transactions, etc.</div>"]
style 4 fill:#999999,stroke:#6b6b6b,color:#ffffff
5["<div style='font-weight: bold'>E-mail System</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>The internal Microsoft<br />Exchange e-mail system.</div>"]
style 5 fill:#999999,stroke:#6b6b6b,color:#ffffff
18[("<div style='font-weight: bold'>Database</div><div style='font-size: 70%; margin-top: 0px'>[Container: Oracle Database Schema]</div><div style='font-size: 80%; margin-top:10px'>Stores user registration<br />information, hashed<br />authentication credentials,<br />access logs, etc.</div>")]
style 18 fill:#438dd5,stroke:#2e6295,color:#ffffff
8["<div style='font-weight: bold'>Single-Page Application</div><div style='font-size: 70%; margin-top: 0px'>[Container: JavaScript and Angular]</div><div style='font-size: 80%; margin-top:10px'>Provides all of the Internet<br />banking functionality to<br />customers via their web<br />browser.</div>"]
style 8 fill:#438dd5,stroke:#2e6295,color:#ffffff
9["<div style='font-weight: bold'>Mobile App</div><div style='font-size: 70%; margin-top: 0px'>[Container: Xamarin]</div><div style='font-size: 80%; margin-top:10px'>Provides a limited subset of<br />the Internet banking<br />functionality to customers<br />via their mobile device.</div>"]
style 9 fill:#438dd5,stroke:#2e6295,color:#ffffff
subgraph 11 [API Application]
style 11 fill:#ffffff,stroke:#444444,color:#444444
12["<div style='font-weight: bold'>Sign In Controller</div><div style='font-size: 70%; margin-top: 0px'>[Component: Spring MVC Rest Controller]</div><div style='font-size: 80%; margin-top:10px'>Allows users to sign in to<br />the Internet Banking System.</div>"]
style 12 fill:#85bbf0,stroke:#5d82a8,color:#000000
13["<div style='font-weight: bold'>Accounts Summary Controller</div><div style='font-size: 70%; margin-top: 0px'>[Component: Spring MVC Rest Controller]</div><div style='font-size: 80%; margin-top:10px'>Provides customers with a<br />summary of their bank<br />accounts.</div>"]
style 13 fill:#85bbf0,stroke:#5d82a8,color:#000000
14["<div style='font-weight: bold'>Reset Password Controller</div><div style='font-size: 70%; margin-top: 0px'>[Component: Spring MVC Rest Controller]</div><div style='font-size: 80%; margin-top:10px'>Allows users to reset their<br />passwords with a single use<br />URL.</div>"]
style 14 fill:#85bbf0,stroke:#5d82a8,color:#000000
15["<div style='font-weight: bold'>Security Component</div><div style='font-size: 70%; margin-top: 0px'>[Component: Spring Bean]</div><div style='font-size: 80%; margin-top:10px'>Provides functionality<br />related to signing in,<br />changing passwords, etc.</div>"]
style 15 fill:#85bbf0,stroke:#5d82a8,color:#000000
16["<div style='font-weight: bold'>Mainframe Banking System Facade</div><div style='font-size: 70%; margin-top: 0px'>[Component: Spring Bean]</div><div style='font-size: 80%; margin-top:10px'>A facade onto the mainframe<br />banking system.</div>"]
style 16 fill:#85bbf0,stroke:#5d82a8,color:#000000
17["<div style='font-weight: bold'>E-mail Component</div><div style='font-size: 70%; margin-top: 0px'>[Component: Spring Bean]</div><div style='font-size: 80%; margin-top:10px'>Sends e-mails to users.</div>"]
style 17 fill:#85bbf0,stroke:#5d82a8,color:#000000
end
8-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->12
8-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->13
8-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->14
9-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->12
9-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->13
9-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->14
12-. "<div>Uses</div><div style='font-size: 70%'></div>" .->15
13-. "<div>Uses</div><div style='font-size: 70%'></div>" .->16
14-. "<div>Uses</div><div style='font-size: 70%'></div>" .->15
14-. "<div>Uses</div><div style='font-size: 70%'></div>" .->17
15-. "<div>Reads from and writes to</div><div style='font-size: 70%'>[JDBC]</div>" .->18
16-. "<div>Makes API calls to</div><div style='font-size: 70%'>[XML/HTTPS]</div>" .->4
17-. "<div>Sends e-mail using</div><div style='font-size: 70%'></div>" .->5
graph TB
linkStyle default fill:#ffffff
1["<div style='font-weight: bold'>Personal Banking Customer</div><div style='font-size: 70%; margin-top: 0px'>[Person]</div><div style='font-size: 80%; margin-top:10px'>A customer of the bank, with<br />personal bank accounts.</div>"]
style 1 fill:#08427b,stroke:#052e56,color:#ffffff
4["<div style='font-weight: bold'>Mainframe Banking System</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>Stores all of the core<br />banking information about<br />customers, accounts,<br />transactions, etc.</div>"]
style 4 fill:#999999,stroke:#6b6b6b,color:#ffffff
5["<div style='font-weight: bold'>E-mail System</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>The internal Microsoft<br />Exchange e-mail system.</div>"]
style 5 fill:#999999,stroke:#6b6b6b,color:#ffffff
subgraph 7 [Internet Banking System]
style 7 fill:#ffffff,stroke:#444444,color:#444444
10["<div style='font-weight: bold'>Web Application</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring MVC]</div><div style='font-size: 80%; margin-top:10px'>Delivers the static content<br />and the Internet banking<br />single page application.</div>"]
style 10 fill:#438dd5,stroke:#2e6295,color:#ffffff
11["<div style='font-weight: bold'>API Application</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring MVC]</div><div style='font-size: 80%; margin-top:10px'>Provides Internet banking<br />functionality via a<br />JSON/HTTPS API.</div>"]
style 11 fill:#438dd5,stroke:#2e6295,color:#ffffff
18[("<div style='font-weight: bold'>Database</div><div style='font-size: 70%; margin-top: 0px'>[Container: Oracle Database Schema]</div><div style='font-size: 80%; margin-top:10px'>Stores user registration<br />information, hashed<br />authentication credentials,<br />access logs, etc.</div>")]
style 18 fill:#438dd5,stroke:#2e6295,color:#ffffff
8["<div style='font-weight: bold'>Single-Page Application</div><div style='font-size: 70%; margin-top: 0px'>[Container: JavaScript and Angular]</div><div style='font-size: 80%; margin-top:10px'>Provides all of the Internet<br />banking functionality to<br />customers via their web<br />browser.</div>"]
style 8 fill:#438dd5,stroke:#2e6295,color:#ffffff
9["<div style='font-weight: bold'>Mobile App</div><div style='font-size: 70%; margin-top: 0px'>[Container: Xamarin]</div><div style='font-size: 80%; margin-top:10px'>Provides a limited subset of<br />the Internet banking<br />functionality to customers<br />via their mobile device.</div>"]
style 9 fill:#438dd5,stroke:#2e6295,color:#ffffff
end
5-. "<div>Sends e-mails to</div><div style='font-size: 70%'></div>" .->1
1-. "<div>Visits bigbank.com/ib using</div><div style='font-size: 70%'>[HTTPS]</div>" .->10
1-. "<div>Views account balances, and<br />makes payments using</div><div style='font-size: 70%'></div>" .->8
1-. "<div>Views account balances, and<br />makes payments using</div><div style='font-size: 70%'></div>" .->9
10-. "<div>Delivers to the customer's<br />web browser</div><div style='font-size: 70%'></div>" .->8
8-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->11
9-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->11
11-. "<div>Reads from and writes to</div><div style='font-size: 70%'>[JDBC]</div>" .->18
11-. "<div>Makes API calls to</div><div style='font-size: 70%'>[XML/HTTPS]</div>" .->4
11-. "<div>Sends e-mail using</div><div style='font-size: 70%'></div>" .->5
graph TB
linkStyle default fill:#ffffff
subgraph 50 [Developer Laptop]
style 50 fill:#ffffff,stroke:#888888,color:#000000
subgraph 59 [Docker Container - Database Server]
style 59 fill:#ffffff,stroke:#888888,color:#000000
subgraph 60 [Database Server]
style 60 fill:#ffffff,stroke:#888888,color:#000000
61[("<div style='font-weight: bold'>Database</div><div style='font-size: 70%; margin-top: 0px'>[Container: Oracle Database Schema]</div><div style='font-size: 80%; margin-top:10px'>Stores user registration<br />information, hashed<br />authentication credentials,<br />access logs, etc.</div>")]
style 61 fill:#438dd5,stroke:#2e6295,color:#ffffff
end
end
subgraph 53 [Docker Container - Web Server]
style 53 fill:#ffffff,stroke:#888888,color:#000000
subgraph 54 [Apache Tomcat]
style 54 fill:#ffffff,stroke:#888888,color:#000000
57["<div style='font-weight: bold'>API Application</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring MVC]</div><div style='font-size: 80%; margin-top:10px'>Provides Internet banking<br />functionality via a<br />JSON/HTTPS API.</div>"]
style 57 fill:#438dd5,stroke:#2e6295,color:#ffffff
55["<div style='font-weight: bold'>Web Application</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring MVC]</div><div style='font-size: 80%; margin-top:10px'>Delivers the static content<br />and the Internet banking<br />single page application.</div>"]
style 55 fill:#438dd5,stroke:#2e6295,color:#ffffff
end
end
subgraph 51 [Web Browser]
style 51 fill:#ffffff,stroke:#888888,color:#000000
52["<div style='font-weight: bold'>Single-Page Application</div><div style='font-size: 70%; margin-top: 0px'>[Container: JavaScript and Angular]</div><div style='font-size: 80%; margin-top:10px'>Provides all of the Internet<br />banking functionality to<br />customers via their web<br />browser.</div>"]
style 52 fill:#438dd5,stroke:#2e6295,color:#ffffff
end
end
subgraph 63 [Big Bank plc]
style 63 fill:#ffffff,stroke:#888888,color:#000000
subgraph 64 [bigbank-dev001]
style 64 fill:#ffffff,stroke:#888888,color:#000000
65["<div style='font-weight: bold'>Mainframe Banking System</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>Stores all of the core<br />banking information about<br />customers, accounts,<br />transactions, etc.</div>"]
style 65 fill:#999999,stroke:#6b6b6b,color:#ffffff
end
end
55-. "<div>Delivers to the customer's<br />web browser</div><div style='font-size: 70%'></div>" .->52
52-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->57
57-. "<div>Reads from and writes to</div><div style='font-size: 70%'>[JDBC]</div>" .->61
57-. "<div>Makes API calls to</div><div style='font-size: 70%'>[XML/HTTPS]</div>" .->65
graph TB
linkStyle default fill:#ffffff
subgraph 67 [Customer's mobile device]
style 67 fill:#ffffff,stroke:#888888,color:#000000
68["<div style='font-weight: bold'>Mobile App</div><div style='font-size: 70%; margin-top: 0px'>[Container: Xamarin]</div><div style='font-size: 80%; margin-top:10px'>Provides a limited subset of<br />the Internet banking<br />functionality to customers<br />via their mobile device.</div>"]
style 68 fill:#438dd5,stroke:#2e6295,color:#ffffff
end
subgraph 69 [Customer's computer]
style 69 fill:#ffffff,stroke:#888888,color:#000000
subgraph 70 [Web Browser]
style 70 fill:#ffffff,stroke:#888888,color:#000000
71["<div style='font-weight: bold'>Single-Page Application</div><div style='font-size: 70%; margin-top: 0px'>[Container: JavaScript and Angular]</div><div style='font-size: 80%; margin-top:10px'>Provides all of the Internet<br />banking functionality to<br />customers via their web<br />browser.</div>"]
style 71 fill:#438dd5,stroke:#2e6295,color:#ffffff
end
end
subgraph 72 [Big Bank plc]
style 72 fill:#ffffff,stroke:#888888,color:#000000
subgraph 77 [bigbank-api***]
style 77 fill:#ffffff,stroke:#888888,color:#000000
subgraph 78 [Apache Tomcat]
style 78 fill:#ffffff,stroke:#888888,color:#000000
79["<div style='font-weight: bold'>API Application</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring MVC]</div><div style='font-size: 80%; margin-top:10px'>Provides Internet banking<br />functionality via a<br />JSON/HTTPS API.</div>"]
style 79 fill:#438dd5,stroke:#2e6295,color:#ffffff
end
end
subgraph 82 [bigbank-db01]
style 82 fill:#ffffff,stroke:#888888,color:#000000
subgraph 83 [Oracle - Primary]
style 83 fill:#ffffff,stroke:#888888,color:#000000
84[("<div style='font-weight: bold'>Database</div><div style='font-size: 70%; margin-top: 0px'>[Container: Oracle Database Schema]</div><div style='font-size: 80%; margin-top:10px'>Stores user registration<br />information, hashed<br />authentication credentials,<br />access logs, etc.</div>")]
style 84 fill:#438dd5,stroke:#2e6295,color:#ffffff
end
end
subgraph 86 [bigbank-db02]
style 86 fill:#ffffff,stroke:#888888,color:#000000
subgraph 87 [Oracle - Secondary]
style 87 fill:#ffffff,stroke:#888888,color:#000000
88[("<div style='font-weight: bold'>Database</div><div style='font-size: 70%; margin-top: 0px'>[Container: Oracle Database Schema]</div><div style='font-size: 80%; margin-top:10px'>Stores user registration<br />information, hashed<br />authentication credentials,<br />access logs, etc.</div>")]
style 88 fill:#438dd5,stroke:#2e6295,color:#ffffff
end
end
subgraph 90 [bigbank-prod001]
style 90 fill:#ffffff,stroke:#888888,color:#000000
91["<div style='font-weight: bold'>Mainframe Banking System</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>Stores all of the core<br />banking information about<br />customers, accounts,<br />transactions, etc.</div>"]
style 91 fill:#999999,stroke:#6b6b6b,color:#ffffff
end
subgraph 73 [bigbank-web***]
style 73 fill:#ffffff,stroke:#888888,color:#000000
subgraph 74 [Apache Tomcat]
style 74 fill:#ffffff,stroke:#888888,color:#000000
75["<div style='font-weight: bold'>Web Application</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring MVC]</div><div style='font-size: 80%; margin-top:10px'>Delivers the static content<br />and the Internet banking<br />single page application.</div>"]
style 75 fill:#438dd5,stroke:#2e6295,color:#ffffff
end
end
end
75-. "<div>Delivers to the customer's<br />web browser</div><div style='font-size: 70%'></div>" .->71
68-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->79
71-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->79
79-. "<div>Reads from and writes to</div><div style='font-size: 70%'>[JDBC]</div>" .->84
79-. "<div>Reads from and writes to</div><div style='font-size: 70%'>[JDBC]</div>" .->88
79-. "<div>Makes API calls to</div><div style='font-size: 70%'>[XML/HTTPS]</div>" .->91
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
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 11 [API Application]
style 11 fill:#ffffff,stroke:#444444,color:#444444
12["<div style='font-weight: bold'>Sign In Controller</div><div style='font-size: 70%; margin-top: 0px'>[Component: Spring MVC Rest Controller]</div><div style='font-size: 80%; margin-top:10px'>Allows users to sign in to<br />the Internet Banking System.</div>"]
style 12 fill:#85bbf0,stroke:#5d82a8,color:#000000
15["<div style='font-weight: bold'>Security Component</div><div style='font-size: 70%; margin-top: 0px'>[Component: Spring Bean]</div><div style='font-size: 80%; margin-top:10px'>Provides functionality<br />related to signing in,<br />changing passwords, etc.</div>"]
style 15 fill:#85bbf0,stroke:#5d82a8,color:#000000
end
8-. "<div>1. Submits credentials to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->12
12-. "<div>2. Validates credentials<br />using</div><div style='font-size: 70%'></div>" .->15
15-. "<div>3. select * from users where<br />username = ?</div><div style='font-size: 70%'>[JDBC]</div>" .->18
18-. "<div>4. Returns user data to</div><div style='font-size: 70%'>[JDBC]</div>" .->15
15-. "<div>5. Returns true if the hashed<br />password matches</div><div style='font-size: 70%'></div>" .->12
12-. "<div>6. Sends back an<br />authentication token to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->8
graph TB
linkStyle default fill:#ffffff
subgraph enterprise [Big Bank plc]
style enterprise fill:#ffffff,stroke:#444444,color:#444444
4["<div style='font-weight: bold'>Mainframe Banking System</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>Stores all of the core<br />banking information about<br />customers, accounts,<br />transactions, etc.</div>"]
style 4 fill:#999999,stroke:#6b6b6b,color:#ffffff
5["<div style='font-weight: bold'>E-mail System</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>The internal Microsoft<br />Exchange e-mail system.</div>"]
style 5 fill:#999999,stroke:#6b6b6b,color:#ffffff
7["<div style='font-weight: bold'>Internet Banking System</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>Allows customers to view<br />information about their bank<br />accounts, and make payments.</div>"]
style 7 fill:#1168bd,stroke:#0b4884,color:#ffffff
end
1["<div style='font-weight: bold'>Personal Banking Customer</div><div style='font-size: 70%; margin-top: 0px'>[Person]</div><div style='font-size: 80%; margin-top:10px'>A customer of the bank, with<br />personal bank accounts.</div>"]
style 1 fill:#08427b,stroke:#052e56,color:#ffffff
1-. "<div>Views account balances, and<br />makes payments using</div><div style='font-size: 70%'></div>" .->7
7-. "<div>Gets account information<br />from, and makes payments<br />using</div><div style='font-size: 70%'></div>" .->4
7-. "<div>Sends e-mail using</div><div style='font-size: 70%'></div>" .->5
5-. "<div>Sends e-mails to</div><div style='font-size: 70%'></div>" .->1
graph TB
linkStyle default fill:#ffffff
subgraph enterprise [Big Bank plc]
style enterprise fill:#ffffff,stroke:#444444,color:#444444
2["<div style='font-weight: bold'>Customer Service Staff</div><div style='font-size: 70%; margin-top: 0px'>[Person]</div><div style='font-size: 80%; margin-top:10px'>Customer service staff within<br />the bank.</div>"]
style 2 fill:#999999,stroke:#6b6b6b,color:#ffffff
3["<div style='font-weight: bold'>Back Office Staff</div><div style='font-size: 70%; margin-top: 0px'>[Person]</div><div style='font-size: 80%; margin-top:10px'>Administration and support<br />staff within the bank.</div>"]
style 3 fill:#999999,stroke:#6b6b6b,color:#ffffff
4["<div style='font-weight: bold'>Mainframe Banking System</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>Stores all of the core<br />banking information about<br />customers, accounts,<br />transactions, etc.</div>"]
style 4 fill:#999999,stroke:#6b6b6b,color:#ffffff
5["<div style='font-weight: bold'>E-mail System</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>The internal Microsoft<br />Exchange e-mail system.</div>"]
style 5 fill:#999999,stroke:#6b6b6b,color:#ffffff
6["<div style='font-weight: bold'>ATM</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>Allows customers to withdraw<br />cash.</div>"]
style 6 fill:#999999,stroke:#6b6b6b,color:#ffffff
7["<div style='font-weight: bold'>Internet Banking System</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>Allows customers to view<br />information about their bank<br />accounts, and make payments.</div>"]
style 7 fill:#1168bd,stroke:#0b4884,color:#ffffff
end
1["<div style='font-weight: bold'>Personal Banking Customer</div><div style='font-size: 70%; margin-top: 0px'>[Person]</div><div style='font-size: 80%; margin-top:10px'>A customer of the bank, with<br />personal bank accounts.</div>"]
style 1 fill:#08427b,stroke:#052e56,color:#ffffff
1-. "<div>Views account balances, and<br />makes payments using</div><div style='font-size: 70%'></div>" .->7
7-. "<div>Gets account information<br />from, and makes payments<br />using</div><div style='font-size: 70%'></div>" .->4
7-. "<div>Sends e-mail using</div><div style='font-size: 70%'></div>" .->5
5-. "<div>Sends e-mails to</div><div style='font-size: 70%'></div>" .->1
1-. "<div>Asks questions to</div><div style='font-size: 70%'>[Telephone]</div>" .->2
2-. "<div>Uses</div><div style='font-size: 70%'></div>" .->4
1-. "<div>Withdraws cash using</div><div style='font-size: 70%'></div>" .->6
6-. "<div>Uses</div><div style='font-size: 70%'></div>" .->4
3-. "<div>Uses</div><div style='font-size: 70%'></div>" .->4
Coming soon: DOT definitions will be available via the Structurizr CLI export command,
using the -format dot
parameter.
digraph {
compound=true
graph [fontname="Arial", rankdir=TB, ranksep=1.0, nodesep=1.0]
node [fontname="Arial", shape=box, margin="0.4,0.3"]
edge [fontname="Arial"]
label=<<br /><font point-size="34">Internet Banking System - API Application - Components</font>>
4 [id=4,shape=rect, label=<<font point-size="34">Mainframe Banking<br />System</font><br /><font point-size="19">[Software System]</font><br /><br /><font point-size="24">Stores all of the core banking<br />information about customers,<br />accounts, transactions, etc.</font>>, style=filled, color="#6b6b6b", fillcolor="#999999", fontcolor="#ffffff"]
5 [id=5,shape=rect, label=<<font point-size="34">E-mail System</font><br /><font point-size="19">[Software System]</font><br /><br /><font point-size="24">The internal Microsoft<br />Exchange e-mail system.</font>>, style=filled, color="#6b6b6b", fillcolor="#999999", fontcolor="#ffffff"]
18 [id=18,shape=cylinder, label=<<font point-size="34">Database</font><br /><font point-size="19">[Container: Oracle Database Schema]</font><br /><br /><font point-size="24">Stores user registration<br />information, hashed<br />authentication credentials,<br />access logs, etc.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"]
8 [id=8,shape=rect, label=<<font point-size="34">Single-Page<br />Application</font><br /><font point-size="19">[Container: JavaScript and Angular]</font><br /><br /><font point-size="24">Provides all of the Internet<br />banking functionality to<br />customers via their web<br />browser.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"]
9 [id=9,shape=rect, label=<<font point-size="34">Mobile App</font><br /><font point-size="19">[Container: Xamarin]</font><br /><br /><font point-size="24">Provides a limited subset of<br />the Internet banking<br />functionality to customers via<br />their mobile device.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"]
subgraph cluster_11 {
margin=25
label=<<font point-size="24"><br />API Application</font><br /><font point-size="19">[Container: Java and Spring MVC]</font>>
labelloc=b
color="#444444"
fontcolor="#444444"
fillcolor="#444444"
12 [id=12,shape=rect, label=<<font point-size="34">Sign In Controller</font><br /><font point-size="19">[Component: Spring MVC Rest Controller]</font><br /><br /><font point-size="24">Allows users to sign in to the<br />Internet Banking System.</font>>, style=filled, color="#5d82a8", fillcolor="#85bbf0", fontcolor="#000000"]
13 [id=13,shape=rect, label=<<font point-size="34">Accounts Summary<br />Controller</font><br /><font point-size="19">[Component: Spring MVC Rest Controller]</font><br /><br /><font point-size="24">Provides customers with a<br />summary of their bank<br />accounts.</font>>, style=filled, color="#5d82a8", fillcolor="#85bbf0", fontcolor="#000000"]
14 [id=14,shape=rect, label=<<font point-size="34">Reset Password<br />Controller</font><br /><font point-size="19">[Component: Spring MVC Rest Controller]</font><br /><br /><font point-size="24">Allows users to reset their<br />passwords with a single use<br />URL.</font>>, style=filled, color="#5d82a8", fillcolor="#85bbf0", fontcolor="#000000"]
15 [id=15,shape=rect, label=<<font point-size="34">Security Component</font><br /><font point-size="19">[Component: Spring Bean]</font><br /><br /><font point-size="24">Provides functionality related<br />to signing in, changing<br />passwords, etc.</font>>, style=filled, color="#5d82a8", fillcolor="#85bbf0", fontcolor="#000000"]
16 [id=16,shape=rect, label=<<font point-size="34">Mainframe Banking<br />System Facade</font><br /><font point-size="19">[Component: Spring Bean]</font><br /><br /><font point-size="24">A facade onto the mainframe<br />banking system.</font>>, style=filled, color="#5d82a8", fillcolor="#85bbf0", fontcolor="#000000"]
17 [id=17,shape=rect, label=<<font point-size="34">E-mail Component</font><br /><font point-size="19">[Component: Spring Bean]</font><br /><br /><font point-size="24">Sends e-mails to users.</font>>, style=filled, color="#5d82a8", fillcolor="#85bbf0", fontcolor="#000000"]
}
8 -> 12 [id=32, label=<<font point-size="24">Makes API calls to</font><br /><font point-size="19">[JSON/HTTPS]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
8 -> 13 [id=34, label=<<font point-size="24">Makes API calls to</font><br /><font point-size="19">[JSON/HTTPS]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
8 -> 14 [id=35, label=<<font point-size="24">Makes API calls to</font><br /><font point-size="19">[JSON/HTTPS]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
9 -> 12 [id=36, label=<<font point-size="24">Makes API calls to</font><br /><font point-size="19">[JSON/HTTPS]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
9 -> 13 [id=38, label=<<font point-size="24">Makes API calls to</font><br /><font point-size="19">[JSON/HTTPS]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
9 -> 14 [id=39, label=<<font point-size="24">Makes API calls to</font><br /><font point-size="19">[JSON/HTTPS]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
12 -> 15 [id=40, label=<<font point-size="24">Uses</font>>, style="dashed", color="#707070", fontcolor="#707070"]
13 -> 16 [id=41, label=<<font point-size="24">Uses</font>>, style="dashed", color="#707070", fontcolor="#707070"]
14 -> 15 [id=42, label=<<font point-size="24">Uses</font>>, style="dashed", color="#707070", fontcolor="#707070"]
14 -> 17 [id=43, label=<<font point-size="24">Uses</font>>, style="dashed", color="#707070", fontcolor="#707070"]
15 -> 18 [id=44, label=<<font point-size="24">Reads from and writes to</font><br /><font point-size="19">[JDBC]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
16 -> 4 [id=46, label=<<font point-size="24">Makes API calls to</font><br /><font point-size="19">[XML/HTTPS]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
17 -> 5 [id=48, label=<<font point-size="24">Sends e-mail using</font>>, style="dashed", color="#707070", fontcolor="#707070"]
}
digraph {
compound=true
graph [fontname="Arial", rankdir=TB, ranksep=1.0, nodesep=1.0]
node [fontname="Arial", shape=box, margin="0.4,0.3"]
edge [fontname="Arial"]
label=<<br /><font point-size="34">Internet Banking System - Containers</font>>
1 [id=1,shape=rect, label=<<font point-size="32">Personal Banking<br />Customer</font><br /><font point-size="17">[Person]</font><br /><br /><font point-size="22">A customer of the bank, with<br />personal bank accounts.</font>>, style=filled, color="#052e56", fillcolor="#08427b", fontcolor="#ffffff"]
4 [id=4,shape=rect, label=<<font point-size="34">Mainframe Banking<br />System</font><br /><font point-size="19">[Software System]</font><br /><br /><font point-size="24">Stores all of the core banking<br />information about customers,<br />accounts, transactions, etc.</font>>, style=filled, color="#6b6b6b", fillcolor="#999999", fontcolor="#ffffff"]
5 [id=5,shape=rect, label=<<font point-size="34">E-mail System</font><br /><font point-size="19">[Software System]</font><br /><br /><font point-size="24">The internal Microsoft<br />Exchange e-mail system.</font>>, style=filled, color="#6b6b6b", fillcolor="#999999", fontcolor="#ffffff"]
subgraph cluster_7 {
margin=25
label=<<font point-size="24"><br />Internet Banking System</font><br /><font point-size="19">[Software System]</font>>
labelloc=b
color="#444444"
fontcolor="#444444"
fillcolor="#444444"
10 [id=10,shape=rect, label=<<font point-size="34">Web Application</font><br /><font point-size="19">[Container: Java and Spring MVC]</font><br /><br /><font point-size="24">Delivers the static content<br />and the Internet banking<br />single page application.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"]
11 [id=11,shape=rect, label=<<font point-size="34">API Application</font><br /><font point-size="19">[Container: Java and Spring MVC]</font><br /><br /><font point-size="24">Provides Internet banking<br />functionality via a JSON/HTTPS<br />API.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"]
18 [id=18,shape=cylinder, label=<<font point-size="34">Database</font><br /><font point-size="19">[Container: Oracle Database Schema]</font><br /><br /><font point-size="24">Stores user registration<br />information, hashed<br />authentication credentials,<br />access logs, etc.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"]
8 [id=8,shape=rect, label=<<font point-size="34">Single-Page<br />Application</font><br /><font point-size="19">[Container: JavaScript and Angular]</font><br /><br /><font point-size="24">Provides all of the Internet<br />banking functionality to<br />customers via their web<br />browser.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"]
9 [id=9,shape=rect, label=<<font point-size="34">Mobile App</font><br /><font point-size="19">[Container: Xamarin]</font><br /><br /><font point-size="24">Provides a limited subset of<br />the Internet banking<br />functionality to customers via<br />their mobile device.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"]
}
5 -> 1 [id=22, label=<<font point-size="24">Sends e-mails to</font>>, style="dashed", color="#707070", fontcolor="#707070"]
1 -> 10 [id=28, label=<<font point-size="24">Visits bigbank.com/ib<br />using</font><br /><font point-size="19">[HTTPS]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
1 -> 8 [id=29, label=<<font point-size="24">Views account balances,<br />and makes payments using</font>>, style="dashed", color="#707070", fontcolor="#707070"]
1 -> 9 [id=30, label=<<font point-size="24">Views account balances,<br />and makes payments using</font>>, style="dashed", color="#707070", fontcolor="#707070"]
10 -> 8 [id=31, label=<<font point-size="24">Delivers to the customer's<br />web browser</font>>, style="dashed", color="#707070", fontcolor="#707070"]
8 -> 11 [id=33, label=<<font point-size="24">Makes API calls to</font><br /><font point-size="19">[JSON/HTTPS]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
9 -> 11 [id=37, label=<<font point-size="24">Makes API calls to</font><br /><font point-size="19">[JSON/HTTPS]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
11 -> 18 [id=45, label=<<font point-size="24">Reads from and writes to</font><br /><font point-size="19">[JDBC]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
11 -> 4 [id=47, label=<<font point-size="24">Makes API calls to</font><br /><font point-size="19">[XML/HTTPS]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
11 -> 5 [id=49, label=<<font point-size="24">Sends e-mail using</font>>, style="dashed", color="#707070", fontcolor="#707070"]
}
digraph {
compound=true
graph [fontname="Arial", rankdir=TB, ranksep=1.0, nodesep=1.0]
node [fontname="Arial", shape=box, margin="0.4,0.3"]
edge [fontname="Arial"]
label=<<br /><font point-size="34">Internet Banking System - Deployment - Development</font>>
subgraph cluster_50 {
margin=25
label=<<font point-size="24">Developer Laptop</font><br /><font point-size="19">[Deployment Node: Microsoft Windows 10 or Apple macOS]</font>>
labelloc=b
color="#888888"
fontcolor="#000000"
fillcolor="#ffffff"
subgraph cluster_59 {
margin=25
label=<<font point-size="24">Docker Container - Database Server</font><br /><font point-size="19">[Deployment Node: Docker]</font>>
labelloc=b
color="#888888"
fontcolor="#000000"
fillcolor="#ffffff"
subgraph cluster_60 {
margin=25
label=<<font point-size="24">Database Server</font><br /><font point-size="19">[Deployment Node: Oracle 12c]</font>>
labelloc=b
color="#888888"
fontcolor="#000000"
fillcolor="#ffffff"
61 [id=61,shape=cylinder, label=<<font point-size="34">Database</font><br /><font point-size="19">[Container: Oracle Database Schema]</font><br /><br /><font point-size="24">Stores user registration<br />information, hashed<br />authentication credentials,<br />access logs, etc.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"]
}
}
subgraph cluster_53 {
margin=25
label=<<font point-size="24">Docker Container - Web Server</font><br /><font point-size="19">[Deployment Node: Docker]</font>>
labelloc=b
color="#888888"
fontcolor="#000000"
fillcolor="#ffffff"
subgraph cluster_54 {
margin=25
label=<<font point-size="24">Apache Tomcat</font><br /><font point-size="19">[Deployment Node: Apache Tomcat 8.x]</font>>
labelloc=b
color="#888888"
fontcolor="#000000"
fillcolor="#ffffff"
57 [id=57,shape=rect, label=<<font point-size="34">API Application</font><br /><font point-size="19">[Container: Java and Spring MVC]</font><br /><br /><font point-size="24">Provides Internet banking<br />functionality via a JSON/HTTPS<br />API.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"]
55 [id=55,shape=rect, label=<<font point-size="34">Web Application</font><br /><font point-size="19">[Container: Java and Spring MVC]</font><br /><br /><font point-size="24">Delivers the static content<br />and the Internet banking<br />single page application.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"]
}
}
subgraph cluster_51 {
margin=25
label=<<font point-size="24">Web Browser</font><br /><font point-size="19">[Deployment Node: Chrome, Firefox, Safari, or Edge]</font>>
labelloc=b
color="#888888"
fontcolor="#000000"
fillcolor="#ffffff"
52 [id=52,shape=rect, label=<<font point-size="34">Single-Page<br />Application</font><br /><font point-size="19">[Container: JavaScript and Angular]</font><br /><br /><font point-size="24">Provides all of the Internet<br />banking functionality to<br />customers via their web<br />browser.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"]
}
}
subgraph cluster_63 {
margin=25
label=<<font point-size="24">Big Bank plc</font><br /><font point-size="19">[Deployment Node: Big Bank plc data center]</font>>
labelloc=b
color="#888888"
fontcolor="#000000"
fillcolor="#ffffff"
subgraph cluster_64 {
margin=25
label=<<font point-size="24">bigbank-dev001</font><br /><font point-size="19">[Deployment Node]</font>>
labelloc=b
color="#888888"
fontcolor="#000000"
fillcolor="#ffffff"
65 [id=65,shape=rect, label=<<font point-size="34">Mainframe Banking<br />System</font><br /><font point-size="19">[Software System]</font><br /><br /><font point-size="24">Stores all of the core banking<br />information about customers,<br />accounts, transactions, etc.</font>>, style=filled, color="#6b6b6b", fillcolor="#999999", fontcolor="#ffffff"]
}
}
55 -> 52 [id=56, label=<<font point-size="24">Delivers to the customer's<br />web browser</font>>, style="dashed", color="#707070", fontcolor="#707070"]
52 -> 57 [id=58, label=<<font point-size="24">Makes API calls to</font><br /><font point-size="19">[JSON/HTTPS]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
57 -> 61 [id=62, label=<<font point-size="24">Reads from and writes to</font><br /><font point-size="19">[JDBC]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
57 -> 65 [id=66, label=<<font point-size="24">Makes API calls to</font><br /><font point-size="19">[XML/HTTPS]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
}
digraph {
compound=true
graph [fontname="Arial", rankdir=TB, ranksep=1.0, nodesep=1.0]
node [fontname="Arial", shape=box, margin="0.4,0.3"]
edge [fontname="Arial"]
label=<<br /><font point-size="34">Internet Banking System - Deployment - Live</font>>
subgraph cluster_67 {
margin=25
label=<<font point-size="24">Customer's mobile device</font><br /><font point-size="19">[Deployment Node: Apple iOS or Android]</font>>
labelloc=b
color="#888888"
fontcolor="#000000"
fillcolor="#ffffff"
68 [id=68,shape=rect, label=<<font point-size="34">Mobile App</font><br /><font point-size="19">[Container: Xamarin]</font><br /><br /><font point-size="24">Provides a limited subset of<br />the Internet banking<br />functionality to customers via<br />their mobile device.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"]
}
subgraph cluster_69 {
margin=25
label=<<font point-size="24">Customer's computer</font><br /><font point-size="19">[Deployment Node: Microsoft Windows or Apple macOS]</font>>
labelloc=b
color="#888888"
fontcolor="#000000"
fillcolor="#ffffff"
subgraph cluster_70 {
margin=25
label=<<font point-size="24">Web Browser</font><br /><font point-size="19">[Deployment Node: Chrome, Firefox, Safari, or Edge]</font>>
labelloc=b
color="#888888"
fontcolor="#000000"
fillcolor="#ffffff"
71 [id=71,shape=rect, label=<<font point-size="34">Single-Page<br />Application</font><br /><font point-size="19">[Container: JavaScript and Angular]</font><br /><br /><font point-size="24">Provides all of the Internet<br />banking functionality to<br />customers via their web<br />browser.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"]
}
}
subgraph cluster_72 {
margin=25
label=<<font point-size="24">Big Bank plc</font><br /><font point-size="19">[Deployment Node: Big Bank plc data center]</font>>
labelloc=b
color="#888888"
fontcolor="#000000"
fillcolor="#ffffff"
subgraph cluster_77 {
margin=25
label=<<font point-size="24">bigbank-api***</font><br /><font point-size="19">[Deployment Node: Ubuntu 16.04 LTS]</font>>
labelloc=b
color="#888888"
fontcolor="#000000"
fillcolor="#ffffff"
subgraph cluster_78 {
margin=25
label=<<font point-size="24">Apache Tomcat</font><br /><font point-size="19">[Deployment Node: Apache Tomcat 8.x]</font>>
labelloc=b
color="#888888"
fontcolor="#000000"
fillcolor="#ffffff"
79 [id=79,shape=rect, label=<<font point-size="34">API Application</font><br /><font point-size="19">[Container: Java and Spring MVC]</font><br /><br /><font point-size="24">Provides Internet banking<br />functionality via a JSON/HTTPS<br />API.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"]
}
}
subgraph cluster_82 {
margin=25
label=<<font point-size="24">bigbank-db01</font><br /><font point-size="19">[Deployment Node: Ubuntu 16.04 LTS]</font>>
labelloc=b
color="#888888"
fontcolor="#000000"
fillcolor="#ffffff"
subgraph cluster_83 {
margin=25
label=<<font point-size="24">Oracle - Primary</font><br /><font point-size="19">[Deployment Node: Oracle 12c]</font>>
labelloc=b
color="#888888"
fontcolor="#000000"
fillcolor="#ffffff"
84 [id=84,shape=cylinder, label=<<font point-size="34">Database</font><br /><font point-size="19">[Container: Oracle Database Schema]</font><br /><br /><font point-size="24">Stores user registration<br />information, hashed<br />authentication credentials,<br />access logs, etc.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"]
}
}
subgraph cluster_86 {
margin=25
label=<<font point-size="24">bigbank-db02</font><br /><font point-size="19">[Deployment Node: Ubuntu 16.04 LTS]</font>>
labelloc=b
color="#888888"
fontcolor="#000000"
fillcolor="#ffffff"
subgraph cluster_87 {
margin=25
label=<<font point-size="24">Oracle - Secondary</font><br /><font point-size="19">[Deployment Node: Oracle 12c]</font>>
labelloc=b
color="#888888"
fontcolor="#000000"
fillcolor="#ffffff"
88 [id=88,shape=cylinder, label=<<font point-size="34">Database</font><br /><font point-size="19">[Container: Oracle Database Schema]</font><br /><br /><font point-size="24">Stores user registration<br />information, hashed<br />authentication credentials,<br />access logs, etc.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"]
}
}
subgraph cluster_90 {
margin=25
label=<<font point-size="24">bigbank-prod001</font><br /><font point-size="19">[Deployment Node]</font>>
labelloc=b
color="#888888"
fontcolor="#000000"
fillcolor="#ffffff"
91 [id=91,shape=rect, label=<<font point-size="34">Mainframe Banking<br />System</font><br /><font point-size="19">[Software System]</font><br /><br /><font point-size="24">Stores all of the core banking<br />information about customers,<br />accounts, transactions, etc.</font>>, style=filled, color="#6b6b6b", fillcolor="#999999", fontcolor="#ffffff"]
}
subgraph cluster_73 {
margin=25
label=<<font point-size="24">bigbank-web***</font><br /><font point-size="19">[Deployment Node: Ubuntu 16.04 LTS]</font>>
labelloc=b
color="#888888"
fontcolor="#000000"
fillcolor="#ffffff"
subgraph cluster_74 {
margin=25
label=<<font point-size="24">Apache Tomcat</font><br /><font point-size="19">[Deployment Node: Apache Tomcat 8.x]</font>>
labelloc=b
color="#888888"
fontcolor="#000000"
fillcolor="#ffffff"
75 [id=75,shape=rect, label=<<font point-size="34">Web Application</font><br /><font point-size="19">[Container: Java and Spring MVC]</font><br /><br /><font point-size="24">Delivers the static content<br />and the Internet banking<br />single page application.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"]
}
}
}
75 -> 71 [id=76, label=<<font point-size="24">Delivers to the customer's<br />web browser</font>>, style="dashed", color="#707070", fontcolor="#707070"]
68 -> 79 [id=80, label=<<font point-size="24">Makes API calls to</font><br /><font point-size="19">[JSON/HTTPS]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
71 -> 79 [id=81, label=<<font point-size="24">Makes API calls to</font><br /><font point-size="19">[JSON/HTTPS]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
79 -> 84 [id=85, label=<<font point-size="24">Reads from and writes to</font><br /><font point-size="19">[JDBC]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
79 -> 88 [id=89, label=<<font point-size="24">Reads from and writes to</font><br /><font point-size="19">[JDBC]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
79 -> 91 [id=92, label=<<font point-size="24">Makes API calls to</font><br /><font point-size="19">[XML/HTTPS]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
84 -> 88 [id=93, label=<<font point-size="24">Replicates data to</font>>, style="dashed", color="#707070", fontcolor="#707070",ltail=cluster_83,lhead=cluster_87]
}
digraph {
compound=true
graph [fontname="Arial", rankdir=TB, ranksep=1.0, nodesep=1.0]
node [fontname="Arial", shape=box, margin="0.4,0.3"]
edge [fontname="Arial"]
label=<<br /><font point-size="34">API Application - Dynamic</font><br /><font point-size="24">Summarises how the sign in feature works in the single-page application.</font>>
18 [id=18,shape=cylinder, label=<<font point-size="34">Database</font><br /><font point-size="19">[Container: Oracle Database Schema]</font><br /><br /><font point-size="24">Stores user registration<br />information, hashed<br />authentication credentials,<br />access logs, etc.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"]
8 [id=8,shape=rect, label=<<font point-size="34">Single-Page<br />Application</font><br /><font point-size="19">[Container: JavaScript and Angular]</font><br /><br /><font point-size="24">Provides all of the Internet<br />banking functionality to<br />customers via their web<br />browser.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"]
subgraph cluster_11 {
margin=25
label=<<font point-size="24"><br />API Application</font><br /><font point-size="19">[Container: Java and Spring MVC]</font>>
labelloc=b
color="#444444"
fontcolor="#444444"
fillcolor="#444444"
12 [id=12,shape=rect, label=<<font point-size="34">Sign In Controller</font><br /><font point-size="19">[Component: Spring MVC Rest Controller]</font><br /><br /><font point-size="24">Allows users to sign in to the<br />Internet Banking System.</font>>, style=filled, color="#5d82a8", fillcolor="#85bbf0", fontcolor="#000000"]
15 [id=15,shape=rect, label=<<font point-size="34">Security Component</font><br /><font point-size="19">[Component: Spring Bean]</font><br /><br /><font point-size="24">Provides functionality related<br />to signing in, changing<br />passwords, etc.</font>>, style=filled, color="#5d82a8", fillcolor="#85bbf0", fontcolor="#000000"]
}
8 -> 12 [id=32, label=<<font point-size="24">1. Submits credentials to</font><br /><font point-size="19">[JSON/HTTPS]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
12 -> 15 [id=40, label=<<font point-size="24">2. Validates credentials<br />using</font>>, style="dashed", color="#707070", fontcolor="#707070"]
15 -> 18 [id=44, label=<<font point-size="24">3. select * from users<br />where username = ?</font><br /><font point-size="19">[JDBC]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
18 -> 15 [id=44, label=<<font point-size="24">4. Returns user data to</font><br /><font point-size="19">[JDBC]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
15 -> 12 [id=40, label=<<font point-size="24">5. Returns true if the<br />hashed password matches</font>>, style="dashed", color="#707070", fontcolor="#707070"]
12 -> 8 [id=32, label=<<font point-size="24">6. Sends back an<br />authentication token to</font><br /><font point-size="19">[JSON/HTTPS]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
}
digraph {
compound=true
graph [fontname="Arial", rankdir=TB, ranksep=1.0, nodesep=1.0]
node [fontname="Arial", shape=box, margin="0.4,0.3"]
edge [fontname="Arial"]
label=<<br /><font point-size="34">Internet Banking System - System Context</font>>
subgraph cluster_enterprise {
margin=25
label=<<font point-size="24"><br />Big Bank plc</font><br /><font point-size="19">[Enterprise]</font>>
labelloc=b
color="#444444"
fontcolor="#444444"
fillcolor="#ffffff"
4 [id=4,shape=rect, label=<<font point-size="34">Mainframe Banking<br />System</font><br /><font point-size="19">[Software System]</font><br /><br /><font point-size="24">Stores all of the core banking<br />information about customers,<br />accounts, transactions, etc.</font>>, style=filled, color="#6b6b6b", fillcolor="#999999", fontcolor="#ffffff"]
5 [id=5,shape=rect, label=<<font point-size="34">E-mail System</font><br /><font point-size="19">[Software System]</font><br /><br /><font point-size="24">The internal Microsoft<br />Exchange e-mail system.</font>>, style=filled, color="#6b6b6b", fillcolor="#999999", fontcolor="#ffffff"]
7 [id=7,shape=rect, label=<<font point-size="34">Internet Banking<br />System</font><br /><font point-size="19">[Software System]</font><br /><br /><font point-size="24">Allows customers to view<br />information about their bank<br />accounts, and make payments.</font>>, style=filled, color="#0b4884", fillcolor="#1168bd", fontcolor="#ffffff"]
}
1 [id=1,shape=rect, label=<<font point-size="32">Personal Banking<br />Customer</font><br /><font point-size="17">[Person]</font><br /><br /><font point-size="22">A customer of the bank, with<br />personal bank accounts.</font>>, style=filled, color="#052e56", fillcolor="#08427b", fontcolor="#ffffff"]
1 -> 7 [id=19, label=<<font point-size="24">Views account balances,<br />and makes payments using</font>>, style="dashed", color="#707070", fontcolor="#707070"]
7 -> 4 [id=20, label=<<font point-size="24">Gets account information<br />from, and makes payments<br />using</font>>, style="dashed", color="#707070", fontcolor="#707070"]
7 -> 5 [id=21, label=<<font point-size="24">Sends e-mail using</font>>, style="dashed", color="#707070", fontcolor="#707070"]
5 -> 1 [id=22, label=<<font point-size="24">Sends e-mails to</font>>, style="dashed", color="#707070", fontcolor="#707070"]
}
digraph {
compound=true
graph [fontname="Arial", rankdir=TB, ranksep=1.0, nodesep=1.0]
node [fontname="Arial", shape=box, margin="0.4,0.3"]
edge [fontname="Arial"]
label=<<br /><font point-size="34">System Landscape for Big Bank plc</font>>
subgraph cluster_enterprise {
margin=25
label=<<font point-size="24"><br />Big Bank plc</font><br /><font point-size="19">[Enterprise]</font>>
labelloc=b
color="#444444"
fontcolor="#444444"
fillcolor="#ffffff"
2 [id=2,shape=rect, label=<<font point-size="32">Customer Service<br />Staff</font><br /><font point-size="17">[Person]</font><br /><br /><font point-size="22">Customer service staff within<br />the bank.</font>>, style=filled, color="#6b6b6b", fillcolor="#999999", fontcolor="#ffffff"]
3 [id=3,shape=rect, label=<<font point-size="32">Back Office Staff</font><br /><font point-size="17">[Person]</font><br /><br /><font point-size="22">Administration and support<br />staff within the bank.</font>>, style=filled, color="#6b6b6b", fillcolor="#999999", fontcolor="#ffffff"]
4 [id=4,shape=rect, label=<<font point-size="34">Mainframe Banking<br />System</font><br /><font point-size="19">[Software System]</font><br /><br /><font point-size="24">Stores all of the core banking<br />information about customers,<br />accounts, transactions, etc.</font>>, style=filled, color="#6b6b6b", fillcolor="#999999", fontcolor="#ffffff"]
5 [id=5,shape=rect, label=<<font point-size="34">E-mail System</font><br /><font point-size="19">[Software System]</font><br /><br /><font point-size="24">The internal Microsoft<br />Exchange e-mail system.</font>>, style=filled, color="#6b6b6b", fillcolor="#999999", fontcolor="#ffffff"]
6 [id=6,shape=rect, label=<<font point-size="34">ATM</font><br /><font point-size="19">[Software System]</font><br /><br /><font point-size="24">Allows customers to withdraw<br />cash.</font>>, style=filled, color="#6b6b6b", fillcolor="#999999", fontcolor="#ffffff"]
7 [id=7,shape=rect, label=<<font point-size="34">Internet Banking<br />System</font><br /><font point-size="19">[Software System]</font><br /><br /><font point-size="24">Allows customers to view<br />information about their bank<br />accounts, and make payments.</font>>, style=filled, color="#0b4884", fillcolor="#1168bd", fontcolor="#ffffff"]
}
1 [id=1,shape=rect, label=<<font point-size="32">Personal Banking<br />Customer</font><br /><font point-size="17">[Person]</font><br /><br /><font point-size="22">A customer of the bank, with<br />personal bank accounts.</font>>, style=filled, color="#052e56", fillcolor="#08427b", fontcolor="#ffffff"]
1 -> 7 [id=19, label=<<font point-size="24">Views account balances,<br />and makes payments using</font>>, style="dashed", color="#707070", fontcolor="#707070"]
7 -> 4 [id=20, label=<<font point-size="24">Gets account information<br />from, and makes payments<br />using</font>>, style="dashed", color="#707070", fontcolor="#707070"]
7 -> 5 [id=21, label=<<font point-size="24">Sends e-mail using</font>>, style="dashed", color="#707070", fontcolor="#707070"]
5 -> 1 [id=22, label=<<font point-size="24">Sends e-mails to</font>>, style="dashed", color="#707070", fontcolor="#707070"]
1 -> 2 [id=23, label=<<font point-size="24">Asks questions to</font><br /><font point-size="19">[Telephone]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
2 -> 4 [id=24, label=<<font point-size="24">Uses</font>>, style="dashed", color="#707070", fontcolor="#707070"]
1 -> 6 [id=25, label=<<font point-size="24">Withdraws cash using</font>>, style="dashed", color="#707070", fontcolor="#707070"]
6 -> 4 [id=26, label=<<font point-size="24">Uses</font>>, style="dashed", color="#707070", fontcolor="#707070"]
3 -> 4 [id=27, label=<<font point-size="24">Uses</font>>, style="dashed", color="#707070", fontcolor="#707070"]
}