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 (raw) Download (encoded) Edit at http://plantuml.com/plantuml View at http://plantuml.com/plantuml

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

skinparam {
  shadowing false
  arrowColor #707070
  actorBorderColor #707070
  componentBorderColor #707070
  rectangleBorderColor #707070
  noteBackgroundColor #ffffff
  noteBorderColor #707070
}
actor "Personal Banking Customer" <<Person>> as 1 #08427b
note right of 1
  A customer of the bank, with
  personal bank accounts.
end note
package "Big Bank plc" {
  actor "Back Office Staff" <<Person>> as 15 #999999
  note right of 15
    Administration and support
    staff within the bank.
  end note
  actor "Customer Service Staff" <<Person>> as 12 #999999
  note right of 12
    Customer service staff within
    the bank.
  end note
  rectangle 9 <<Software System>> #999999 [
    ATM
    --
    Allows customers to withdraw
    cash.
  ]
  rectangle 6 <<Software System>> #999999 [
    E-mail System
    --
    The internal Microsoft
    Exchange e-mail system.
  ]
  rectangle 2 <<Software System>> #1168bd [
    Internet Banking System
    --
    Allows customers to view
    information about their bank
    accounts, and make payments.
  ]
  rectangle 4 <<Software System>> #999999 [
    Mainframe Banking System
    --
    Stores all of the core
    banking information about
    customers, accounts,
    transactions, etc.
  ]
}
9 .[#707070].> 4 : Uses
15 .[#707070].> 4 : Uses
12 .[#707070].> 4 : Uses
6 .[#707070].> 1 : Sends e-mails to
2 .[#707070].> 6 : Sends e-mail using
2 .[#707070].> 4 : Gets account information from, and makes payments using
1 .[#707070].> 9 : Withdraws cash using
1 .[#707070].> 12 : <<Telephone>>\nAsks questions to
1 .[#707070].> 2 : Views account balances, and makes payments using
@enduml

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

Internet Banking System - System Context

The system context diagram for the Internet Banking System.

Download (raw) Download (encoded) Edit at http://plantuml.com/plantuml View at http://plantuml.com/plantuml

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

skinparam {
  shadowing false
  arrowColor #707070
  actorBorderColor #707070
  componentBorderColor #707070
  rectangleBorderColor #707070
  noteBackgroundColor #ffffff
  noteBorderColor #707070
}
actor "Personal Banking Customer" <<Person>> as 1 #08427b
note right of 1
  A customer of the bank, with
  personal bank accounts.
end note
  rectangle 6 <<Software System>> #999999 [
    E-mail System
    --
    The internal Microsoft
    Exchange e-mail system.
  ]
  rectangle 2 <<Software System>> #1168bd [
    Internet Banking System
    --
    Allows customers to view
    information about their bank
    accounts, and make payments.
  ]
  rectangle 4 <<Software System>> #999999 [
    Mainframe Banking System
    --
    Stores all of the core
    banking information about
    customers, accounts,
    transactions, etc.
  ]
6 .[#707070].> 1 : Sends e-mails to
2 .[#707070].> 6 : Sends e-mail using
2 .[#707070].> 4 : Gets account information from, and makes payments using
1 .[#707070].> 2 : Views account balances, and makes payments using
@enduml

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

Internet Banking System - Containers

The container diagram for the Internet Banking System.

Download (raw) Download (encoded) Edit at http://plantuml.com/plantuml View at http://plantuml.com/plantuml

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

skinparam {
  shadowing false
  arrowColor #707070
  actorBorderColor #707070
  componentBorderColor #707070
  rectangleBorderColor #707070
  noteBackgroundColor #ffffff
  noteBorderColor #707070
}
rectangle 6 <<Software System>> #999999 [
  E-mail System
  --
  The internal Microsoft
  Exchange e-mail system.
]
rectangle 4 <<Software System>> #999999 [
  Mainframe Banking System
  --
  Stores all of the core
  banking information about
  customers, accounts,
  transactions, etc.
]
actor "Personal Banking Customer" <<Person>> as 1 #08427b
note right of 1
  A customer of the bank, with
  personal bank accounts.
end note
package "Internet Banking System" <<Software System>> {
  rectangle 20 <<Container>> #438dd5 [
    API Application
    --
    Provides Internet banking
    functionality via a
    JSON/HTTPS API.
  ]
  database 21 <<Container>> #438dd5 [
    Database
    --
    Stores user registration
    information, hashed
    authentication credentials,
    access logs, etc.
  ]
  rectangle 18 <<Container>> #438dd5 [
    Mobile App
    --
    Provides a limited subset of
    the Internet banking
    functionality to customers
    via their mobile device.
  ]
  rectangle 17 <<Container>> #438dd5 [
    Single-Page Application
    --
    Provides all of the Internet
    banking functionality to
    customers via their web
    browser.
  ]
  rectangle 19 <<Container>> #438dd5 [
    Web Application
    --
    Delivers the static content
    and the Internet banking
    single page application.
  ]
}
20 .[#707070].> 21 : <<JDBC>>\nReads from and writes to
20 .[#707070].> 6 : <<SMTP>>\nSends e-mail using
20 .[#707070].> 4 : <<XML/HTTPS>>\nMakes API calls to
6 .[#707070].> 1 : Sends e-mails to
18 .[#707070].> 20 : <<JSON/HTTPS>>\nMakes API calls to
1 .[#707070].> 18 : Views account balances, and makes payments using
1 .[#707070].> 17 : Views account balances, and makes payments using
1 .[#707070].> 19 : <<HTTPS>>\nVisits bigbank.com/ib using
17 .[#707070].> 20 : <<JSON/HTTPS>>\nMakes API calls to
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 (raw) Download (encoded) Edit at http://plantuml.com/plantuml View at http://plantuml.com/plantuml

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

skinparam {
  shadowing false
  arrowColor #707070
  actorBorderColor #707070
  componentBorderColor #707070
  rectangleBorderColor #707070
  noteBackgroundColor #ffffff
  noteBorderColor #707070
}
database 21 <<Container>> #438dd5 [
  Database
  --
  Stores user registration
  information, hashed
  authentication credentials,
  access logs, etc.
]
rectangle 6 <<Software System>> #999999 [
  E-mail System
  --
  The internal Microsoft
  Exchange e-mail system.
]
rectangle 4 <<Software System>> #999999 [
  Mainframe Banking System
  --
  Stores all of the core
  banking information about
  customers, accounts,
  transactions, etc.
]
rectangle 18 <<Container>> #438dd5 [
  Mobile App
  --
  Provides a limited subset of
  the Internet banking
  functionality to customers
  via their mobile device.
]
rectangle 17 <<Container>> #438dd5 [
  Single-Page Application
  --
  Provides all of the Internet
  banking functionality to
  customers via their web
  browser.
]
package "API Application" <<Container>> {
  component 30 <<Spring MVC Rest Controller>> #85bbf0 [
    Accounts Summary Controller
    --
    Provides customers with a
    summary of their bank
    accounts.
  ]
  component 34 <<Spring Bean>> #85bbf0 [
    E-mail Component
    --
    Sends e-mails to users.
  ]
  component 33 <<Spring Bean>> #85bbf0 [
    Mainframe Banking System Facade
    --
    A facade onto the mainframe
    banking system.
  ]
  component 31 <<Spring MVC Rest Controller>> #85bbf0 [
    Reset Password Controller
    --
    Allows users to reset their
    passwords with a single use
    URL.
  ]
  component 32 <<Spring Bean>> #85bbf0 [
    Security Component
    --
    Provides functionality
    related to signing in,
    changing passwords, etc.
  ]
  component 29 <<Spring MVC Rest Controller>> #85bbf0 [
    Sign In Controller
    --
    Allows users to sign in to
    the Internet Banking System.
  ]
}
30 .[#707070].> 33 : Uses
34 .[#707070].> 6 : Sends e-mail using
33 .[#707070].> 4 : <<XML/HTTPS>>\nUses
18 .[#707070].> 30 : <<JSON/HTTPS>>\nMakes API calls to
18 .[#707070].> 31 : <<JSON/HTTPS>>\nMakes API calls to
18 .[#707070].> 29 : <<JSON/HTTPS>>\nMakes API calls to
31 .[#707070].> 34 : Uses
31 .[#707070].> 32 : Uses
32 .[#707070].> 21 : <<JDBC>>\nReads from and writes to
29 .[#707070].> 32 : Uses
17 .[#707070].> 30 : <<JSON/HTTPS>>\nMakes API calls to
17 .[#707070].> 31 : <<JSON/HTTPS>>\nMakes API calls to
17 .[#707070].> 29 : <<JSON/HTTPS>>\nMakes API calls to
@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 (raw) Download (encoded) Edit at http://plantuml.com/plantuml View at http://plantuml.com/plantuml

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

skinparam {
  shadowing false
  arrowColor #707070
  actorBorderColor #707070
  componentBorderColor #707070
  rectangleBorderColor #707070
  noteBackgroundColor #ffffff
  noteBorderColor #707070
}
participant "Single-Page Application" as 17 <<Container>> #438dd5
database "Database" as 21 <<Container>> #438dd5
participant "Sign In Controller" as 29 <<Spring MVC Rest Controller>> #85bbf0
participant "Security Component" as 32 <<Spring Bean>> #85bbf0
17 -[#707070]> 29 : 1. Submits credentials to
29 -[#707070]> 32 : 2. Calls isAuthenticated() on
32 -[#707070]> 21 : 3. select * from users where username = ?
@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 (raw) Download (encoded) Edit at http://plantuml.com/plantuml View at http://plantuml.com/plantuml

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

skinparam {
  shadowing false
  arrowColor #707070
  actorBorderColor #707070
  componentBorderColor #707070
  rectangleBorderColor #707070
  noteBackgroundColor #ffffff
  noteBorderColor #707070
}
node "Developer Laptop" <<Microsoft Windows 10 or Apple macOS>> as 50 {
  node "Docker Container - Web Server" <<Docker>> as 51 {
    node "Apache Tomcat" <<Apache Tomcat 8.x>> as 52 {
      rectangle "Web Application" <<Container>> as 53 #438dd5
      rectangle "API Application" <<Container>> as 54 #438dd5
    }
  }
  node "Docker Container - Database Server" <<Docker>> as 55 {
    node "Database Server" <<Oracle 12c>> as 56 {
      database "Database" <<Container>> as 57 #438dd5
    }
  }
  node "Web Browser" <<Google Chrome, Mozilla Firefox, Apple Safari or Microsoft Edge>> as 59 {
    rectangle "Single-Page Application" <<Container>> as 60 #438dd5
  }
}
53 .[#707070].> 60 : Delivers to the customer's web browser
60 .[#707070].> 54 : <<JSON/HTTPS>>\nMakes API calls to
54 .[#707070].> 57 : <<JDBC>>\nReads from and writes to
@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 (raw) Download (encoded) Edit at http://plantuml.com/plantuml View at http://plantuml.com/plantuml

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

skinparam {
  shadowing false
  arrowColor #707070
  actorBorderColor #707070
  componentBorderColor #707070
  rectangleBorderColor #707070
  noteBackgroundColor #ffffff
  noteBorderColor #707070
}
node "Big Bank plc" <<Big Bank plc data center>> as 68 {
  node "bigbank-api*** (x8)" <<Ubuntu 16.04 LTS>> as 73 {
    node "Apache Tomcat" <<Apache Tomcat 8.x>> as 74 {
      rectangle "API Application" <<Container>> as 75 #438dd5
    }
  }
  node "bigbank-db01" <<Ubuntu 16.04 LTS>> as 78 {
    node "Oracle - Primary" <<Oracle 12c>> as 79 {
      database "Database" <<Container>> as 80 #438dd5
    }
  }
  node "bigbank-db02" <<Ubuntu 16.04 LTS>> as 82 {
    node "Oracle - Secondary" <<Oracle 12c>> as 83 {
      database "Database" <<Container>> as 84 #438dd5
    }
  }
  node "bigbank-web*** (x4)" <<Ubuntu 16.04 LTS>> as 69 {
    node "Apache Tomcat" <<Apache Tomcat 8.x>> as 70 {
      rectangle "Web Application" <<Container>> as 71 #438dd5
    }
  }
}
node "Customer's computer" <<Microsoft Windows or Apple macOS>> as 65 {
  node "Web Browser" <<Google Chrome, Mozilla Firefox, Apple Safari or Microsoft Edge>> as 66 {
    rectangle "Single-Page Application" <<Container>> as 67 #438dd5
  }
}
node "Customer's mobile device" <<Apple iOS or Android>> as 63 {
  rectangle "Mobile App" <<Container>> as 64 #438dd5
}
79 .[#707070].> 83 : Replicates data to
71 .[#707070].> 67 : Delivers to the customer's web browser
75 .[#707070].> 80 : <<JDBC>>\nReads from and writes to
67 .[#707070].> 75 : <<JSON/HTTPS>>\nMakes API calls to
75 .[#707070].> 84 : <<JDBC>>\nReads from and writes to
64 .[#707070].> 75 : <<JSON/HTTPS>>\nMakes API calls to
@enduml

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