Client-side encrypted workspace
The workspace "" has been client-side encrypted, please enter the passphrase to decrypt it.
DSL editor
This browser-based DSL editor provides some rudimentary syntax highlighting and the ability to use the DSL without installing any tooling, but it does not provide access to the full feature set of the DSL. We recommend using the DSL in conjunction with Structurizr Lite or the Structurizr CLI instead. See Help - DSL for more details.
Structurizr Lite
Recommended
Structurizr Lite provides a way to quickly work with a single workspace. It's free to use, and allows you to view/edit diagrams, view documentation, and view architecture decision records defined in a DSL workspace.
The auto-sync feature provides the ability to sync your local changes with a workspace stored on the Structurizr cloud service or an on-premises installation.
Structurizr CLI
Recommended
The Structurizr CLI is a command line utility, designed to be used in conjunction with the Structurizr DSL. It provides the ability to push/pull workspaces to/from the Structurizr cloud service or an on-premises installation, in additional to exporting the views defined in a DSL file to other formats (PlantUML, Mermaid, WebSequenceDiagrams, and Ilograph).
See Getting started with the Structurizr CLI and DSL for more information.
DSL editor
Not recommended
If you'd rather not use Structurizr Lite or the Structurizr CLI, the Structurizr cloud service/on-premises installation provides a basic online DSL editor. The editor provides some rudimentary syntax highlighting and the ability to use the DSL without installing any tooling, but it does not provide access to the full feature set of the DSL.
PlantUML definitions are available via the Structurizr CLI export command,
using the -format plantuml parameter.
See StructurizrPlantUMLExporter for customisation options.
@startuml
set separator none
title Internet Banking System - API Application - Components
top to bottom direction
skinparam ranksep 60
skinparam nodesep 30
skinparam {
arrowFontSize 10
defaultTextAlignment center
wrapWidth 200
maxMessageSize 100
}
hide stereotype
skinparam rectangle<<InternetBankingSystem.APIApplication.AccountsSummaryController>> {
BackgroundColor #85bbf0
FontColor #000000
BorderColor #5d82a8
shadowing false
}
skinparam database<<InternetBankingSystem.Database>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
shadowing false
}
skinparam rectangle<<InternetBankingSystem.APIApplication.EmailComponent>> {
BackgroundColor #85bbf0
FontColor #000000
BorderColor #5d82a8
shadowing false
}
skinparam rectangle<<EmailSystem>> {
BackgroundColor #999999
FontColor #ffffff
BorderColor #6b6b6b
shadowing false
}
skinparam rectangle<<MainframeBankingSystem>> {
BackgroundColor #999999
FontColor #ffffff
BorderColor #6b6b6b
shadowing false
}
skinparam rectangle<<InternetBankingSystem.APIApplication.MainframeBankingSystemFacade>> {
BackgroundColor #85bbf0
FontColor #000000
BorderColor #5d82a8
shadowing false
}
skinparam rectangle<<InternetBankingSystem.MobileApp>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
shadowing false
}
skinparam rectangle<<InternetBankingSystem.APIApplication.ResetPasswordController>> {
BackgroundColor #85bbf0
FontColor #000000
BorderColor #5d82a8
shadowing false
}
skinparam rectangle<<InternetBankingSystem.APIApplication.SecurityComponent>> {
BackgroundColor #85bbf0
FontColor #000000
BorderColor #5d82a8
shadowing false
}
skinparam rectangle<<InternetBankingSystem.APIApplication.SignInController>> {
BackgroundColor #85bbf0
FontColor #000000
BorderColor #5d82a8
shadowing false
}
skinparam rectangle<<InternetBankingSystem.SinglePageApplication>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
shadowing false
}
skinparam rectangle<<InternetBankingSystem.APIApplication>> {
BorderColor #2e6295
FontColor #2e6295
shadowing false
}
rectangle "==Mainframe Banking System\n<size:10>[Software System]</size>\n\nStores all of the core banking information about customers, accounts, transactions, etc." <<MainframeBankingSystem>> as MainframeBankingSystem
rectangle "==E-mail System\n<size:10>[Software System]</size>\n\nThe internal Microsoft Exchange e-mail system." <<EmailSystem>> as EmailSystem
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." <<InternetBankingSystem.SinglePageApplication>> as InternetBankingSystem.SinglePageApplication
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." <<InternetBankingSystem.MobileApp>> as InternetBankingSystem.MobileApp
database "==Database\n<size:10>[Container: Oracle Database Schema]</size>\n\nStores user registration information, hashed authentication credentials, access logs, etc." <<InternetBankingSystem.Database>> as InternetBankingSystem.Database
rectangle "API Application\n<size:10>[Container: Java and Spring MVC]</size>" <<InternetBankingSystem.APIApplication>> {
rectangle "==Sign In Controller\n<size:10>[Component: Spring MVC Rest Controller]</size>\n\nAllows users to sign in to the Internet Banking System." <<InternetBankingSystem.APIApplication.SignInController>> as InternetBankingSystem.APIApplication.SignInController
rectangle "==Accounts Summary Controller\n<size:10>[Component: Spring MVC Rest Controller]</size>\n\nProvides customers with a summary of their bank accounts." <<InternetBankingSystem.APIApplication.AccountsSummaryController>> as InternetBankingSystem.APIApplication.AccountsSummaryController
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." <<InternetBankingSystem.APIApplication.ResetPasswordController>> as InternetBankingSystem.APIApplication.ResetPasswordController
rectangle "==Security Component\n<size:10>[Component: Spring Bean]</size>\n\nProvides functionality related to signing in, changing passwords, etc." <<InternetBankingSystem.APIApplication.SecurityComponent>> as InternetBankingSystem.APIApplication.SecurityComponent
rectangle "==Mainframe Banking System Facade\n<size:10>[Component: Spring Bean]</size>\n\nA facade onto the mainframe banking system." <<InternetBankingSystem.APIApplication.MainframeBankingSystemFacade>> as InternetBankingSystem.APIApplication.MainframeBankingSystemFacade
rectangle "==E-mail Component\n<size:10>[Component: Spring Bean]</size>\n\nSends e-mails to users." <<InternetBankingSystem.APIApplication.EmailComponent>> as InternetBankingSystem.APIApplication.EmailComponent
}
InternetBankingSystem.SinglePageApplication .[#707070,thickness=2].> InternetBankingSystem.APIApplication.SignInController : "<color:#707070>Makes API calls to\n<color:#707070><size:8>[JSON/HTTPS]</size>"
InternetBankingSystem.SinglePageApplication .[#707070,thickness=2].> InternetBankingSystem.APIApplication.AccountsSummaryController : "<color:#707070>Makes API calls to\n<color:#707070><size:8>[JSON/HTTPS]</size>"
InternetBankingSystem.SinglePageApplication .[#707070,thickness=2].> InternetBankingSystem.APIApplication.ResetPasswordController : "<color:#707070>Makes API calls to\n<color:#707070><size:8>[JSON/HTTPS]</size>"
InternetBankingSystem.MobileApp .[#707070,thickness=2].> InternetBankingSystem.APIApplication.SignInController : "<color:#707070>Makes API calls to\n<color:#707070><size:8>[JSON/HTTPS]</size>"
InternetBankingSystem.MobileApp .[#707070,thickness=2].> InternetBankingSystem.APIApplication.AccountsSummaryController : "<color:#707070>Makes API calls to\n<color:#707070><size:8>[JSON/HTTPS]</size>"
InternetBankingSystem.MobileApp .[#707070,thickness=2].> InternetBankingSystem.APIApplication.ResetPasswordController : "<color:#707070>Makes API calls to\n<color:#707070><size:8>[JSON/HTTPS]</size>"
InternetBankingSystem.APIApplication.SignInController .[#707070,thickness=2].> InternetBankingSystem.APIApplication.SecurityComponent : "<color:#707070>Uses"
InternetBankingSystem.APIApplication.AccountsSummaryController .[#707070,thickness=2].> InternetBankingSystem.APIApplication.MainframeBankingSystemFacade : "<color:#707070>Uses"
InternetBankingSystem.APIApplication.ResetPasswordController .[#707070,thickness=2].> InternetBankingSystem.APIApplication.SecurityComponent : "<color:#707070>Uses"
InternetBankingSystem.APIApplication.ResetPasswordController .[#707070,thickness=2].> InternetBankingSystem.APIApplication.EmailComponent : "<color:#707070>Uses"
InternetBankingSystem.APIApplication.SecurityComponent .[#707070,thickness=2].> InternetBankingSystem.Database : "<color:#707070>Reads from and writes to\n<color:#707070><size:8>[SQL/TCP]</size>"
InternetBankingSystem.APIApplication.MainframeBankingSystemFacade .[#707070,thickness=2].> MainframeBankingSystem : "<color:#707070>Makes API calls to\n<color:#707070><size:8>[XML/HTTPS]</size>"
InternetBankingSystem.APIApplication.EmailComponent .[#707070,thickness=2].> EmailSystem : "<color:#707070>Sends e-mail using"
@enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml
set separator none
skinparam {
shadowing false
arrowFontSize 15
defaultTextAlignment center
wrapWidth 100
maxMessageSize 100
}
hide stereotype
skinparam rectangle<<_transparent>> {
BorderColor transparent
BackgroundColor transparent
FontColor transparent
}
skinparam rectangle<<1>> {
BackgroundColor #85bbf0
FontColor #000000
BorderColor #5d82a8
}
rectangle "==Component" <<1>>
skinparam database<<2>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
}
database "==Container, Database" <<2>>
skinparam rectangle<<3>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
}
rectangle "==Container, Mobile App" <<3>>
skinparam rectangle<<4>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
}
rectangle "==Container, Web Browser" <<4>>
skinparam rectangle<<5>> {
BackgroundColor #999999
FontColor #ffffff
BorderColor #6b6b6b
}
rectangle "==Software System, Existing System" <<5>>
rectangle "." <<_transparent>> as 6
6 .[#707070,thickness=2].> 6 : "<color:#707070>Relationship"
@enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml
set separator none
title Internet Banking System - Containers
top to bottom direction
skinparam ranksep 60
skinparam nodesep 30
skinparam {
arrowFontSize 10
defaultTextAlignment center
wrapWidth 200
maxMessageSize 100
}
hide stereotype
skinparam rectangle<<InternetBankingSystem.APIApplication>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
shadowing false
}
skinparam database<<InternetBankingSystem.Database>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
shadowing false
}
skinparam rectangle<<EmailSystem>> {
BackgroundColor #999999
FontColor #ffffff
BorderColor #6b6b6b
shadowing false
}
skinparam rectangle<<MainframeBankingSystem>> {
BackgroundColor #999999
FontColor #ffffff
BorderColor #6b6b6b
shadowing false
}
skinparam rectangle<<InternetBankingSystem.MobileApp>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
shadowing false
}
skinparam person<<PersonalBankingCustomer>> {
BackgroundColor #08427b
FontColor #ffffff
BorderColor #052e56
shadowing false
}
skinparam rectangle<<InternetBankingSystem.SinglePageApplication>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
shadowing false
}
skinparam rectangle<<InternetBankingSystem.WebApplication>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
shadowing false
}
skinparam rectangle<<InternetBankingSystem>> {
BorderColor #0b4884
FontColor #0b4884
shadowing false
}
person "==Personal Banking Customer\n<size:10>[Person]</size>\n\nA customer of the bank, with personal bank accounts." <<PersonalBankingCustomer>> as PersonalBankingCustomer
rectangle "==Mainframe Banking System\n<size:10>[Software System]</size>\n\nStores all of the core banking information about customers, accounts, transactions, etc." <<MainframeBankingSystem>> as MainframeBankingSystem
rectangle "==E-mail System\n<size:10>[Software System]</size>\n\nThe internal Microsoft Exchange e-mail system." <<EmailSystem>> as EmailSystem
rectangle "Internet Banking System\n<size:10>[Software System]</size>" <<InternetBankingSystem>> {
rectangle "==Web Application\n<size:10>[Container: Java and Spring MVC]</size>\n\nDelivers the static content and the Internet banking single page application." <<InternetBankingSystem.WebApplication>> as InternetBankingSystem.WebApplication
rectangle "==API Application\n<size:10>[Container: Java and Spring MVC]</size>\n\nProvides Internet banking functionality via a JSON/HTTPS API." <<InternetBankingSystem.APIApplication>> as InternetBankingSystem.APIApplication
database "==Database\n<size:10>[Container: Oracle Database Schema]</size>\n\nStores user registration information, hashed authentication credentials, access logs, etc." <<InternetBankingSystem.Database>> as InternetBankingSystem.Database
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." <<InternetBankingSystem.SinglePageApplication>> as InternetBankingSystem.SinglePageApplication
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." <<InternetBankingSystem.MobileApp>> as InternetBankingSystem.MobileApp
}
EmailSystem .[#707070,thickness=2].> PersonalBankingCustomer : "<color:#707070>Sends e-mails to"
PersonalBankingCustomer .[#707070,thickness=2].> InternetBankingSystem.WebApplication : "<color:#707070>Visits bigbank.com/ib using\n<color:#707070><size:8>[HTTPS]</size>"
PersonalBankingCustomer .[#707070,thickness=2].> InternetBankingSystem.SinglePageApplication : "<color:#707070>Views account balances, and makes payments using"
PersonalBankingCustomer .[#707070,thickness=2].> InternetBankingSystem.MobileApp : "<color:#707070>Views account balances, and makes payments using"
InternetBankingSystem.WebApplication .[#707070,thickness=2].> InternetBankingSystem.SinglePageApplication : "<color:#707070>Delivers to the customer's web browser"
InternetBankingSystem.SinglePageApplication .[#707070,thickness=2].> InternetBankingSystem.APIApplication : "<color:#707070>Makes API calls to\n<color:#707070><size:8>[JSON/HTTPS]</size>"
InternetBankingSystem.MobileApp .[#707070,thickness=2].> InternetBankingSystem.APIApplication : "<color:#707070>Makes API calls to\n<color:#707070><size:8>[JSON/HTTPS]</size>"
InternetBankingSystem.APIApplication .[#707070,thickness=2].> InternetBankingSystem.Database : "<color:#707070>Reads from and writes to\n<color:#707070><size:8>[SQL/TCP]</size>"
InternetBankingSystem.APIApplication .[#707070,thickness=2].> MainframeBankingSystem : "<color:#707070>Makes API calls to\n<color:#707070><size:8>[XML/HTTPS]</size>"
InternetBankingSystem.APIApplication .[#707070,thickness=2].> EmailSystem : "<color:#707070>Sends e-mail using"
@enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml
set separator none
skinparam {
shadowing false
arrowFontSize 15
defaultTextAlignment center
wrapWidth 100
maxMessageSize 100
}
hide stereotype
skinparam rectangle<<_transparent>> {
BorderColor transparent
BackgroundColor transparent
FontColor transparent
}
skinparam rectangle<<1>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
}
rectangle "==Container" <<1>>
skinparam database<<2>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
}
database "==Container, Database" <<2>>
skinparam rectangle<<3>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
}
rectangle "==Container, Mobile App" <<3>>
skinparam rectangle<<4>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
}
rectangle "==Container, Web Browser" <<4>>
skinparam person<<5>> {
BackgroundColor #08427b
FontColor #ffffff
BorderColor #052e56
}
person "==Person, Customer" <<5>>
skinparam rectangle<<6>> {
BackgroundColor #999999
FontColor #ffffff
BorderColor #6b6b6b
}
rectangle "==Software System, Existing System" <<6>>
rectangle "." <<_transparent>> as 7
7 .[#707070,thickness=2].> 7 : "<color:#707070>Relationship"
@enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml
set separator none
title Internet Banking System - Deployment - Development
top to bottom direction
skinparam ranksep 60
skinparam nodesep 30
skinparam {
arrowFontSize 10
defaultTextAlignment center
wrapWidth 200
maxMessageSize 100
}
hide stereotype
skinparam rectangle<<Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.APIApplication_1>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
shadowing false
}
skinparam rectangle<<Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat>> {
BackgroundColor #ffffff
FontColor #000000
BorderColor #888888
shadowing false
}
skinparam rectangle<<Development.BigBankplc>> {
BackgroundColor #ffffff
FontColor #000000
BorderColor #888888
shadowing false
}
skinparam database<<Development.DeveloperLaptop.DockerContainerDatabaseServer.DatabaseServer.Database_1>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
shadowing false
}
skinparam rectangle<<Development.DeveloperLaptop.DockerContainerDatabaseServer.DatabaseServer>> {
BackgroundColor #ffffff
FontColor #000000
BorderColor #888888
shadowing false
}
skinparam rectangle<<Development.DeveloperLaptop>> {
BackgroundColor #ffffff
FontColor #000000
BorderColor #888888
shadowing false
}
skinparam rectangle<<Development.DeveloperLaptop.DockerContainerDatabaseServer>> {
BackgroundColor #ffffff
FontColor #000000
BorderColor #888888
shadowing false
}
skinparam rectangle<<Development.DeveloperLaptop.DockerContainerWebServer>> {
BackgroundColor #ffffff
FontColor #000000
BorderColor #888888
shadowing false
}
skinparam rectangle<<Development.BigBankplc.bigbankdev001.MainframeBankingSystem_1>> {
BackgroundColor #999999
FontColor #ffffff
BorderColor #6b6b6b
shadowing false
}
skinparam rectangle<<Development.DeveloperLaptop.WebBrowser.SinglePageApplication_1>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
shadowing false
}
skinparam rectangle<<Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.WebApplication_1>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
shadowing false
}
skinparam rectangle<<Development.DeveloperLaptop.WebBrowser>> {
BackgroundColor #ffffff
FontColor #000000
BorderColor #888888
shadowing false
}
skinparam rectangle<<Development.BigBankplc.bigbankdev001>> {
BackgroundColor #ffffff
FontColor #000000
BorderColor #888888
shadowing false
}
rectangle "Developer Laptop\n<size:10>[Deployment Node: Microsoft Windows 10 or Apple macOS]</size>" <<Development.DeveloperLaptop>> as Development.DeveloperLaptop {
rectangle "Web Browser\n<size:10>[Deployment Node: Chrome, Firefox, Safari, or Edge]</size>" <<Development.DeveloperLaptop.WebBrowser>> as Development.DeveloperLaptop.WebBrowser {
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." <<Development.DeveloperLaptop.WebBrowser.SinglePageApplication_1>> as Development.DeveloperLaptop.WebBrowser.SinglePageApplication_1
}
rectangle "Docker Container - Web Server\n<size:10>[Deployment Node: Docker]</size>" <<Development.DeveloperLaptop.DockerContainerWebServer>> as Development.DeveloperLaptop.DockerContainerWebServer {
rectangle "Apache Tomcat\n<size:10>[Deployment Node: Apache Tomcat 8.x]</size>" <<Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat>> as Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat {
rectangle "==Web Application\n<size:10>[Container: Java and Spring MVC]</size>\n\nDelivers the static content and the Internet banking single page application." <<Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.WebApplication_1>> as Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.WebApplication_1
rectangle "==API Application\n<size:10>[Container: Java and Spring MVC]</size>\n\nProvides Internet banking functionality via a JSON/HTTPS API." <<Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.APIApplication_1>> as Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.APIApplication_1
}
}
rectangle "Docker Container - Database Server\n<size:10>[Deployment Node: Docker]</size>" <<Development.DeveloperLaptop.DockerContainerDatabaseServer>> as Development.DeveloperLaptop.DockerContainerDatabaseServer {
rectangle "Database Server\n<size:10>[Deployment Node: Oracle 12c]</size>" <<Development.DeveloperLaptop.DockerContainerDatabaseServer.DatabaseServer>> as Development.DeveloperLaptop.DockerContainerDatabaseServer.DatabaseServer {
database "==Database\n<size:10>[Container: Oracle Database Schema]</size>\n\nStores user registration information, hashed authentication credentials, access logs, etc." <<Development.DeveloperLaptop.DockerContainerDatabaseServer.DatabaseServer.Database_1>> as Development.DeveloperLaptop.DockerContainerDatabaseServer.DatabaseServer.Database_1
}
}
}
rectangle "Big Bank plc\n<size:10>[Deployment Node: Big Bank plc data center]</size>" <<Development.BigBankplc>> as Development.BigBankplc {
rectangle "bigbank-dev001\n<size:10>[Deployment Node]</size>" <<Development.BigBankplc.bigbankdev001>> as Development.BigBankplc.bigbankdev001 {
rectangle "==Mainframe Banking System\n<size:10>[Software System]</size>\n\nStores all of the core banking information about customers, accounts, transactions, etc." <<Development.BigBankplc.bigbankdev001.MainframeBankingSystem_1>> as Development.BigBankplc.bigbankdev001.MainframeBankingSystem_1
}
}
Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.WebApplication_1 .[#707070,thickness=2].> Development.DeveloperLaptop.WebBrowser.SinglePageApplication_1 : "<color:#707070>Delivers to the customer's web browser"
Development.DeveloperLaptop.WebBrowser.SinglePageApplication_1 .[#707070,thickness=2].> Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.APIApplication_1 : "<color:#707070>Makes API calls to\n<color:#707070><size:8>[JSON/HTTPS]</size>"
Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.APIApplication_1 .[#707070,thickness=2].> Development.DeveloperLaptop.DockerContainerDatabaseServer.DatabaseServer.Database_1 : "<color:#707070>Reads from and writes to\n<color:#707070><size:8>[SQL/TCP]</size>"
Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.APIApplication_1 .[#707070,thickness=2].> Development.BigBankplc.bigbankdev001.MainframeBankingSystem_1 : "<color:#707070>Makes API calls to\n<color:#707070><size:8>[XML/HTTPS]</size>"
@enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml
set separator none
skinparam {
shadowing false
arrowFontSize 15
defaultTextAlignment center
wrapWidth 100
maxMessageSize 100
}
hide stereotype
skinparam rectangle<<_transparent>> {
BorderColor transparent
BackgroundColor transparent
FontColor transparent
}
skinparam rectangle<<1>> {
BackgroundColor #ffffff
FontColor #000000
BorderColor #888888
}
rectangle "==Element" <<1>>
skinparam rectangle<<2>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
}
rectangle "==Container" <<2>>
skinparam database<<3>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
}
database "==Container, Database" <<3>>
skinparam rectangle<<4>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
}
rectangle "==Container, Web Browser" <<4>>
skinparam rectangle<<5>> {
BackgroundColor #999999
FontColor #ffffff
BorderColor #6b6b6b
}
rectangle "==Software System, Existing System" <<5>>
rectangle "." <<_transparent>> as 6
6 .[#707070,thickness=2].> 6 : "<color:#707070>Relationship"
@enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml
set separator none
title Internet Banking System - Deployment - Live
top to bottom direction
skinparam ranksep 60
skinparam nodesep 30
skinparam {
arrowFontSize 10
defaultTextAlignment center
wrapWidth 200
maxMessageSize 100
}
hide stereotype
skinparam rectangle<<Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
shadowing false
}
skinparam rectangle<<Live.BigBankplc.bigbankweb.ApacheTomcat>> {
BackgroundColor #ffffff
FontColor #000000
BorderColor #888888
shadowing false
}
skinparam rectangle<<Live.BigBankplc.bigbankapi.ApacheTomcat>> {
BackgroundColor #ffffff
FontColor #000000
BorderColor #888888
shadowing false
}
skinparam rectangle<<Live.BigBankplc>> {
BackgroundColor #ffffff
FontColor #000000
BorderColor #888888
shadowing false
}
skinparam rectangle<<Live.Customerscomputer>> {
BackgroundColor #ffffff
FontColor #000000
BorderColor #888888
shadowing false
}
skinparam rectangle<<Live.Customersmobiledevice>> {
BackgroundColor #ffffff
FontColor #000000
BorderColor #888888
shadowing false
}
skinparam database<<Live.BigBankplc.bigbankdb01.OraclePrimary.Database_1>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
shadowing false
}
skinparam database<<Live.BigBankplc.bigbankdb02.OracleSecondary.Database_1>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
shadowing false
}
skinparam rectangle<<Live.BigBankplc.bigbankprod001.MainframeBankingSystem_1>> {
BackgroundColor #999999
FontColor #ffffff
BorderColor #6b6b6b
shadowing false
}
skinparam rectangle<<Live.Customersmobiledevice.MobileApp_1>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
shadowing false
}
skinparam rectangle<<Live.BigBankplc.bigbankdb01.OraclePrimary>> {
BackgroundColor #ffffff
FontColor #000000
BorderColor #888888
shadowing false
}
skinparam rectangle<<Live.BigBankplc.bigbankdb02.OracleSecondary>> {
BackgroundColor #ffffff
FontColor #000000
BorderColor #888888
shadowing false
}
skinparam rectangle<<Live.Customerscomputer.WebBrowser.SinglePageApplication_1>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
shadowing false
}
skinparam rectangle<<Live.BigBankplc.bigbankweb.ApacheTomcat.WebApplication_1>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
shadowing false
}
skinparam rectangle<<Live.Customerscomputer.WebBrowser>> {
BackgroundColor #ffffff
FontColor #000000
BorderColor #888888
shadowing false
}
skinparam rectangle<<Live.BigBankplc.bigbankapi>> {
BackgroundColor #ffffff
FontColor #000000
BorderColor #888888
shadowing false
}
skinparam rectangle<<Live.BigBankplc.bigbankdb01>> {
BackgroundColor #ffffff
FontColor #000000
BorderColor #888888
shadowing false
}
skinparam rectangle<<Live.BigBankplc.bigbankdb02>> {
BackgroundColor #ffffff
FontColor #000000
BorderColor #888888
shadowing false
}
skinparam rectangle<<Live.BigBankplc.bigbankprod001>> {
BackgroundColor #ffffff
FontColor #000000
BorderColor #888888
shadowing false
}
skinparam rectangle<<Live.BigBankplc.bigbankweb>> {
BackgroundColor #ffffff
FontColor #000000
BorderColor #888888
shadowing false
}
rectangle "Customer's mobile device\n<size:10>[Deployment Node: Apple iOS or Android]</size>" <<Live.Customersmobiledevice>> as Live.Customersmobiledevice {
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." <<Live.Customersmobiledevice.MobileApp_1>> as Live.Customersmobiledevice.MobileApp_1
}
rectangle "Customer's computer\n<size:10>[Deployment Node: Microsoft Windows or Apple macOS]</size>" <<Live.Customerscomputer>> as Live.Customerscomputer {
rectangle "Web Browser\n<size:10>[Deployment Node: Chrome, Firefox, Safari, or Edge]</size>" <<Live.Customerscomputer.WebBrowser>> as Live.Customerscomputer.WebBrowser {
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." <<Live.Customerscomputer.WebBrowser.SinglePageApplication_1>> as Live.Customerscomputer.WebBrowser.SinglePageApplication_1
}
}
rectangle "Big Bank plc\n<size:10>[Deployment Node: Big Bank plc data center]</size>" <<Live.BigBankplc>> as Live.BigBankplc {
rectangle "bigbank-web*** (x4)\n<size:10>[Deployment Node: Ubuntu 16.04 LTS]</size>" <<Live.BigBankplc.bigbankweb>> as Live.BigBankplc.bigbankweb {
rectangle "Apache Tomcat\n<size:10>[Deployment Node: Apache Tomcat 8.x]</size>" <<Live.BigBankplc.bigbankweb.ApacheTomcat>> as Live.BigBankplc.bigbankweb.ApacheTomcat {
rectangle "==Web Application\n<size:10>[Container: Java and Spring MVC]</size>\n\nDelivers the static content and the Internet banking single page application." <<Live.BigBankplc.bigbankweb.ApacheTomcat.WebApplication_1>> as Live.BigBankplc.bigbankweb.ApacheTomcat.WebApplication_1
}
}
rectangle "bigbank-api*** (x8)\n<size:10>[Deployment Node: Ubuntu 16.04 LTS]</size>" <<Live.BigBankplc.bigbankapi>> as Live.BigBankplc.bigbankapi {
rectangle "Apache Tomcat\n<size:10>[Deployment Node: Apache Tomcat 8.x]</size>" <<Live.BigBankplc.bigbankapi.ApacheTomcat>> as Live.BigBankplc.bigbankapi.ApacheTomcat {
rectangle "==API Application\n<size:10>[Container: Java and Spring MVC]</size>\n\nProvides Internet banking functionality via a JSON/HTTPS API." <<Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1>> as Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1
}
}
rectangle "bigbank-db01\n<size:10>[Deployment Node: Ubuntu 16.04 LTS]</size>" <<Live.BigBankplc.bigbankdb01>> as Live.BigBankplc.bigbankdb01 {
rectangle "Oracle - Primary\n<size:10>[Deployment Node: Oracle 12c]</size>" <<Live.BigBankplc.bigbankdb01.OraclePrimary>> as Live.BigBankplc.bigbankdb01.OraclePrimary {
database "==Database\n<size:10>[Container: Oracle Database Schema]</size>\n\nStores user registration information, hashed authentication credentials, access logs, etc." <<Live.BigBankplc.bigbankdb01.OraclePrimary.Database_1>> as Live.BigBankplc.bigbankdb01.OraclePrimary.Database_1
}
}
rectangle "bigbank-db02\n<size:10>[Deployment Node: Ubuntu 16.04 LTS]</size>" <<Live.BigBankplc.bigbankdb02>> as Live.BigBankplc.bigbankdb02 {
rectangle "Oracle - Secondary\n<size:10>[Deployment Node: Oracle 12c]</size>" <<Live.BigBankplc.bigbankdb02.OracleSecondary>> as Live.BigBankplc.bigbankdb02.OracleSecondary {
database "==Database\n<size:10>[Container: Oracle Database Schema]</size>\n\nStores user registration information, hashed authentication credentials, access logs, etc." <<Live.BigBankplc.bigbankdb02.OracleSecondary.Database_1>> as Live.BigBankplc.bigbankdb02.OracleSecondary.Database_1
}
}
rectangle "bigbank-prod001\n<size:10>[Deployment Node]</size>" <<Live.BigBankplc.bigbankprod001>> as Live.BigBankplc.bigbankprod001 {
rectangle "==Mainframe Banking System\n<size:10>[Software System]</size>\n\nStores all of the core banking information about customers, accounts, transactions, etc." <<Live.BigBankplc.bigbankprod001.MainframeBankingSystem_1>> as Live.BigBankplc.bigbankprod001.MainframeBankingSystem_1
}
}
Live.BigBankplc.bigbankweb.ApacheTomcat.WebApplication_1 .[#707070,thickness=2].> Live.Customerscomputer.WebBrowser.SinglePageApplication_1 : "<color:#707070>Delivers to the customer's web browser"
Live.Customersmobiledevice.MobileApp_1 .[#707070,thickness=2].> Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1 : "<color:#707070>Makes API calls to\n<color:#707070><size:8>[JSON/HTTPS]</size>"
Live.Customerscomputer.WebBrowser.SinglePageApplication_1 .[#707070,thickness=2].> Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1 : "<color:#707070>Makes API calls to\n<color:#707070><size:8>[JSON/HTTPS]</size>"
Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1 .[#707070,thickness=2].> Live.BigBankplc.bigbankdb01.OraclePrimary.Database_1 : "<color:#707070>Reads from and writes to\n<color:#707070><size:8>[SQL/TCP]</size>"
Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1 .[#707070,thickness=2].> Live.BigBankplc.bigbankdb02.OracleSecondary.Database_1 : "<color:#707070>Reads from and writes to\n<color:#707070><size:8>[SQL/TCP]</size>"
Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1 .[#707070,thickness=2].> Live.BigBankplc.bigbankprod001.MainframeBankingSystem_1 : "<color:#707070>Makes API calls to\n<color:#707070><size:8>[XML/HTTPS]</size>"
Live.BigBankplc.bigbankdb01.OraclePrimary .[#707070,thickness=2].> Live.BigBankplc.bigbankdb02.OracleSecondary : "<color:#707070>Replicates data to"
@enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml
set separator none
skinparam {
shadowing false
arrowFontSize 15
defaultTextAlignment center
wrapWidth 100
maxMessageSize 100
}
hide stereotype
skinparam rectangle<<_transparent>> {
BorderColor transparent
BackgroundColor transparent
FontColor transparent
}
skinparam rectangle<<1>> {
BackgroundColor #ffffff
FontColor #000000
BorderColor #888888
}
rectangle "==Element" <<1>>
skinparam rectangle<<2>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
}
rectangle "==Container" <<2>>
skinparam database<<3>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
}
database "==Container, Database" <<3>>
skinparam database<<4>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
}
database "==Container, Database, Failover" <<4>>
skinparam rectangle<<5>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
}
rectangle "==Container, Mobile App" <<5>>
skinparam rectangle<<6>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
}
rectangle "==Container, Web Browser" <<6>>
skinparam rectangle<<7>> {
BackgroundColor #ffffff
FontColor #000000
BorderColor #888888
}
rectangle "==Failover" <<7>>
skinparam rectangle<<8>> {
BackgroundColor #999999
FontColor #ffffff
BorderColor #6b6b6b
}
rectangle "==Software System, Existing System" <<8>>
rectangle "." <<_transparent>> as 9
9 .[#707070,thickness=2].> 9 : "<color:#707070>Relationship"
@enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml
set separator none
title API Application - Dynamic
top to bottom direction
skinparam ranksep 60
skinparam nodesep 30
skinparam {
arrowFontSize 10
defaultTextAlignment center
wrapWidth 200
maxMessageSize 100
}
hide stereotype
skinparam database<<InternetBankingSystem.Database>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
shadowing false
}
skinparam rectangle<<InternetBankingSystem.APIApplication.SecurityComponent>> {
BackgroundColor #85bbf0
FontColor #000000
BorderColor #5d82a8
shadowing false
}
skinparam rectangle<<InternetBankingSystem.APIApplication.SignInController>> {
BackgroundColor #85bbf0
FontColor #000000
BorderColor #5d82a8
shadowing false
}
skinparam rectangle<<InternetBankingSystem.SinglePageApplication>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
shadowing false
}
skinparam rectangle<<InternetBankingSystem.APIApplication>> {
BorderColor #2e6295
FontColor #2e6295
shadowing false
}
rectangle "API Application\n<size:10>[Container: Java and Spring MVC]</size>" <<InternetBankingSystem.APIApplication>> {
rectangle "==Sign In Controller\n<size:10>[Component: Spring MVC Rest Controller]</size>\n\nAllows users to sign in to the Internet Banking System." <<InternetBankingSystem.APIApplication.SignInController>> as InternetBankingSystem.APIApplication.SignInController
rectangle "==Security Component\n<size:10>[Component: Spring Bean]</size>\n\nProvides functionality related to signing in, changing passwords, etc." <<InternetBankingSystem.APIApplication.SecurityComponent>> as InternetBankingSystem.APIApplication.SecurityComponent
}
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." <<InternetBankingSystem.SinglePageApplication>> as InternetBankingSystem.SinglePageApplication
database "==Database\n<size:10>[Container: Oracle Database Schema]</size>\n\nStores user registration information, hashed authentication credentials, access logs, etc." <<InternetBankingSystem.Database>> as InternetBankingSystem.Database
InternetBankingSystem.SinglePageApplication .[#707070,thickness=2].> InternetBankingSystem.APIApplication.SignInController : "<color:#707070>1. Submits credentials to\n<color:#707070><size:8>[JSON/HTTPS]</size>"
InternetBankingSystem.APIApplication.SignInController .[#707070,thickness=2].> InternetBankingSystem.APIApplication.SecurityComponent : "<color:#707070>2. Validates credentials using"
InternetBankingSystem.APIApplication.SecurityComponent .[#707070,thickness=2].> InternetBankingSystem.Database : "<color:#707070>3. select * from users where username = ?\n<color:#707070><size:8>[SQL/TCP]</size>"
InternetBankingSystem.APIApplication.SecurityComponent <.[#707070,thickness=2]. InternetBankingSystem.Database : "<color:#707070>4. Returns user data to\n<color:#707070><size:8>[SQL/TCP]</size>"
InternetBankingSystem.APIApplication.SignInController <.[#707070,thickness=2]. InternetBankingSystem.APIApplication.SecurityComponent : "<color:#707070>5. Returns true if the hashed password matches"
InternetBankingSystem.SinglePageApplication <.[#707070,thickness=2]. InternetBankingSystem.APIApplication.SignInController : "<color:#707070>6. Sends back an authentication token to\n<color:#707070><size:8>[JSON/HTTPS]</size>"
@enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml
set separator none
skinparam {
shadowing false
arrowFontSize 15
defaultTextAlignment center
wrapWidth 100
maxMessageSize 100
}
hide stereotype
skinparam rectangle<<_transparent>> {
BorderColor transparent
BackgroundColor transparent
FontColor transparent
}
skinparam rectangle<<1>> {
BackgroundColor #85bbf0
FontColor #000000
BorderColor #5d82a8
}
rectangle "==Component" <<1>>
skinparam database<<2>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
}
database "==Container, Database" <<2>>
skinparam rectangle<<3>> {
BackgroundColor #438dd5
FontColor #ffffff
BorderColor #2e6295
}
rectangle "==Container, Web Browser" <<3>>
rectangle "." <<_transparent>> as 4
4 .[#707070,thickness=2].> 4 : "<color:#707070>Relationship"
@enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml
set separator none
title Internet Banking System - System Context
top to bottom direction
skinparam ranksep 60
skinparam nodesep 30
skinparam {
arrowFontSize 10
defaultTextAlignment center
wrapWidth 200
maxMessageSize 100
}
hide stereotype
skinparam rectangle<<EmailSystem>> {
BackgroundColor #999999
FontColor #ffffff
BorderColor #6b6b6b
shadowing false
}
skinparam rectangle<<InternetBankingSystem>> {
BackgroundColor #1168bd
FontColor #ffffff
BorderColor #0b4884
shadowing false
}
skinparam rectangle<<MainframeBankingSystem>> {
BackgroundColor #999999
FontColor #ffffff
BorderColor #6b6b6b
shadowing false
}
skinparam person<<PersonalBankingCustomer>> {
BackgroundColor #08427b
FontColor #ffffff
BorderColor #052e56
shadowing false
}
rectangle "Big Bank plc" <<group1>> as group1 {
skinparam RectangleBorderColor<<group1>> #cccccc
skinparam RectangleFontColor<<group1>> #cccccc
skinparam RectangleBorderStyle<<group1>> dashed
rectangle "==Mainframe Banking System\n<size:10>[Software System]</size>\n\nStores all of the core banking information about customers, accounts, transactions, etc." <<MainframeBankingSystem>> as MainframeBankingSystem
rectangle "==E-mail System\n<size:10>[Software System]</size>\n\nThe internal Microsoft Exchange e-mail system." <<EmailSystem>> as EmailSystem
rectangle "==Internet Banking System\n<size:10>[Software System]</size>\n\nAllows customers to view information about their bank accounts, and make payments." <<InternetBankingSystem>> as InternetBankingSystem
}
person "==Personal Banking Customer\n<size:10>[Person]</size>\n\nA customer of the bank, with personal bank accounts." <<PersonalBankingCustomer>> as PersonalBankingCustomer
PersonalBankingCustomer .[#707070,thickness=2].> InternetBankingSystem : "<color:#707070>Views account balances, and makes payments using"
InternetBankingSystem .[#707070,thickness=2].> MainframeBankingSystem : "<color:#707070>Gets account information from, and makes payments using"
InternetBankingSystem .[#707070,thickness=2].> EmailSystem : "<color:#707070>Sends e-mail using"
EmailSystem .[#707070,thickness=2].> PersonalBankingCustomer : "<color:#707070>Sends e-mails to"
@enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml
set separator none
skinparam {
shadowing false
arrowFontSize 15
defaultTextAlignment center
wrapWidth 100
maxMessageSize 100
}
hide stereotype
skinparam rectangle<<_transparent>> {
BorderColor transparent
BackgroundColor transparent
FontColor transparent
}
skinparam person<<1>> {
BackgroundColor #08427b
FontColor #ffffff
BorderColor #052e56
}
person "==Person, Customer" <<1>>
skinparam rectangle<<2>> {
BackgroundColor #1168bd
FontColor #ffffff
BorderColor #0b4884
}
rectangle "==Software System" <<2>>
skinparam rectangle<<3>> {
BackgroundColor #999999
FontColor #ffffff
BorderColor #6b6b6b
}
rectangle "==Software System, Existing System" <<3>>
rectangle "." <<_transparent>> as 4
4 .[#707070,thickness=2].> 4 : "<color:#707070>Relationship"
@enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml
set separator none
title System Landscape
top to bottom direction
skinparam ranksep 60
skinparam nodesep 30
skinparam {
arrowFontSize 10
defaultTextAlignment center
wrapWidth 200
maxMessageSize 100
}
hide stereotype
skinparam rectangle<<ATM>> {
BackgroundColor #999999
FontColor #ffffff
BorderColor #6b6b6b
shadowing false
}
skinparam person<<BackOfficeStaff>> {
BackgroundColor #999999
FontColor #ffffff
BorderColor #6b6b6b
shadowing false
}
skinparam person<<CustomerServiceStaff>> {
BackgroundColor #999999
FontColor #ffffff
BorderColor #6b6b6b
shadowing false
}
skinparam rectangle<<EmailSystem>> {
BackgroundColor #999999
FontColor #ffffff
BorderColor #6b6b6b
shadowing false
}
skinparam rectangle<<InternetBankingSystem>> {
BackgroundColor #1168bd
FontColor #ffffff
BorderColor #0b4884
shadowing false
}
skinparam rectangle<<MainframeBankingSystem>> {
BackgroundColor #999999
FontColor #ffffff
BorderColor #6b6b6b
shadowing false
}
skinparam person<<PersonalBankingCustomer>> {
BackgroundColor #08427b
FontColor #ffffff
BorderColor #052e56
shadowing false
}
rectangle "Big Bank plc" <<group1>> as group1 {
skinparam RectangleBorderColor<<group1>> #cccccc
skinparam RectangleFontColor<<group1>> #cccccc
skinparam RectangleBorderStyle<<group1>> dashed
person "==Customer Service Staff\n<size:10>[Person]</size>\n\nCustomer service staff within the bank." <<CustomerServiceStaff>> as CustomerServiceStaff
person "==Back Office Staff\n<size:10>[Person]</size>\n\nAdministration and support staff within the bank." <<BackOfficeStaff>> as BackOfficeStaff
rectangle "==Mainframe Banking System\n<size:10>[Software System]</size>\n\nStores all of the core banking information about customers, accounts, transactions, etc." <<MainframeBankingSystem>> as MainframeBankingSystem
rectangle "==E-mail System\n<size:10>[Software System]</size>\n\nThe internal Microsoft Exchange e-mail system." <<EmailSystem>> as EmailSystem
rectangle "==ATM\n<size:10>[Software System]</size>\n\nAllows customers to withdraw cash." <<ATM>> as ATM
rectangle "==Internet Banking System\n<size:10>[Software System]</size>\n\nAllows customers to view information about their bank accounts, and make payments." <<InternetBankingSystem>> as InternetBankingSystem
}
person "==Personal Banking Customer\n<size:10>[Person]</size>\n\nA customer of the bank, with personal bank accounts." <<PersonalBankingCustomer>> as PersonalBankingCustomer
PersonalBankingCustomer .[#707070,thickness=2].> InternetBankingSystem : "<color:#707070>Views account balances, and makes payments using"
InternetBankingSystem .[#707070,thickness=2].> MainframeBankingSystem : "<color:#707070>Gets account information from, and makes payments using"
InternetBankingSystem .[#707070,thickness=2].> EmailSystem : "<color:#707070>Sends e-mail using"
EmailSystem .[#707070,thickness=2].> PersonalBankingCustomer : "<color:#707070>Sends e-mails to"
PersonalBankingCustomer .[#707070,thickness=2].> CustomerServiceStaff : "<color:#707070>Asks questions to\n<color:#707070><size:8>[Telephone]</size>"
CustomerServiceStaff .[#707070,thickness=2].> MainframeBankingSystem : "<color:#707070>Uses"
PersonalBankingCustomer .[#707070,thickness=2].> ATM : "<color:#707070>Withdraws cash using"
ATM .[#707070,thickness=2].> MainframeBankingSystem : "<color:#707070>Uses"
BackOfficeStaff .[#707070,thickness=2].> MainframeBankingSystem : "<color:#707070>Uses"
@enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml
set separator none
skinparam {
shadowing false
arrowFontSize 15
defaultTextAlignment center
wrapWidth 100
maxMessageSize 100
}
hide stereotype
skinparam rectangle<<_transparent>> {
BorderColor transparent
BackgroundColor transparent
FontColor transparent
}
skinparam person<<1>> {
BackgroundColor #999999
FontColor #ffffff
BorderColor #6b6b6b
}
person "==Person, Bank Staff" <<1>>
skinparam person<<2>> {
BackgroundColor #08427b
FontColor #ffffff
BorderColor #052e56
}
person "==Person, Customer" <<2>>
skinparam rectangle<<3>> {
BackgroundColor #1168bd
FontColor #ffffff
BorderColor #0b4884
}
rectangle "==Software System" <<3>>
skinparam rectangle<<4>> {
BackgroundColor #999999
FontColor #ffffff
BorderColor #6b6b6b
}
rectangle "==Software System, Existing System" <<4>>
rectangle "." <<_transparent>> as 5
5 .[#707070,thickness=2].> 5 : "<color:#707070>Relationship"
@enduml
(this will send your diagram content to https://plantuml.com/plantuml)
C4-PlantUML definitions are available via the Structurizr CLI export command,
using the -format plantuml/c4plantuml parameter.
See C4PlantUMLExporter for customisation options.
@startuml
set separator none
title Internet Banking System - API Application - Components
top to bottom direction
!include <C4/C4>
!include <C4/C4_Context>
!include <C4/C4_Container>
!include <C4/C4_Component>
System(MainframeBankingSystem, "Mainframe Banking System", $descr="Stores all of the core banking information about customers, accounts, transactions, etc.", $tags="", $link="")
System(EmailSystem, "E-mail System", $descr="The internal Microsoft Exchange e-mail system.", $tags="", $link="")
Container(InternetBankingSystem.SinglePageApplication, "Single-Page Application", $techn="JavaScript and Angular", $descr="Provides all of the Internet banking functionality to customers via their web browser.", $tags="", $link="")
Container(InternetBankingSystem.MobileApp, "Mobile App", $techn="Xamarin", $descr="Provides a limited subset of the Internet banking functionality to customers via their mobile device.", $tags="", $link="")
ContainerDb(InternetBankingSystem.Database, "Database", $techn="Oracle Database Schema", $descr="Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="", $link="")
Container_Boundary("InternetBankingSystem.APIApplication_boundary", "API Application", $tags="") {
Component(InternetBankingSystem.APIApplication.SignInController, "Sign In Controller", $techn="Spring MVC Rest Controller", $descr="Allows users to sign in to the Internet Banking System.", $tags="", $link="")
Component(InternetBankingSystem.APIApplication.AccountsSummaryController, "Accounts Summary Controller", $techn="Spring MVC Rest Controller", $descr="Provides customers with a summary of their bank accounts.", $tags="", $link="")
Component(InternetBankingSystem.APIApplication.ResetPasswordController, "Reset Password Controller", $techn="Spring MVC Rest Controller", $descr="Allows users to reset their passwords with a single use URL.", $tags="", $link="")
Component(InternetBankingSystem.APIApplication.SecurityComponent, "Security Component", $techn="Spring Bean", $descr="Provides functionality related to signing in, changing passwords, etc.", $tags="", $link="")
Component(InternetBankingSystem.APIApplication.MainframeBankingSystemFacade, "Mainframe Banking System Facade", $techn="Spring Bean", $descr="A facade onto the mainframe banking system.", $tags="", $link="")
Component(InternetBankingSystem.APIApplication.EmailComponent, "E-mail Component", $techn="Spring Bean", $descr="Sends e-mails to users.", $tags="", $link="")
}
Rel(InternetBankingSystem.SinglePageApplication, InternetBankingSystem.APIApplication.SignInController, "Makes API calls to", $techn="JSON/HTTPS", $tags="", $link="")
Rel(InternetBankingSystem.SinglePageApplication, InternetBankingSystem.APIApplication.AccountsSummaryController, "Makes API calls to", $techn="JSON/HTTPS", $tags="", $link="")
Rel(InternetBankingSystem.SinglePageApplication, InternetBankingSystem.APIApplication.ResetPasswordController, "Makes API calls to", $techn="JSON/HTTPS", $tags="", $link="")
Rel(InternetBankingSystem.MobileApp, InternetBankingSystem.APIApplication.SignInController, "Makes API calls to", $techn="JSON/HTTPS", $tags="", $link="")
Rel(InternetBankingSystem.MobileApp, InternetBankingSystem.APIApplication.AccountsSummaryController, "Makes API calls to", $techn="JSON/HTTPS", $tags="", $link="")
Rel(InternetBankingSystem.MobileApp, InternetBankingSystem.APIApplication.ResetPasswordController, "Makes API calls to", $techn="JSON/HTTPS", $tags="", $link="")
Rel(InternetBankingSystem.APIApplication.SignInController, InternetBankingSystem.APIApplication.SecurityComponent, "Uses", $techn="", $tags="", $link="")
Rel(InternetBankingSystem.APIApplication.AccountsSummaryController, InternetBankingSystem.APIApplication.MainframeBankingSystemFacade, "Uses", $techn="", $tags="", $link="")
Rel(InternetBankingSystem.APIApplication.ResetPasswordController, InternetBankingSystem.APIApplication.SecurityComponent, "Uses", $techn="", $tags="", $link="")
Rel(InternetBankingSystem.APIApplication.ResetPasswordController, InternetBankingSystem.APIApplication.EmailComponent, "Uses", $techn="", $tags="", $link="")
Rel(InternetBankingSystem.APIApplication.SecurityComponent, InternetBankingSystem.Database, "Reads from and writes to", $techn="SQL/TCP", $tags="", $link="")
Rel(InternetBankingSystem.APIApplication.MainframeBankingSystemFacade, MainframeBankingSystem, "Makes API calls to", $techn="XML/HTTPS", $tags="", $link="")
Rel(InternetBankingSystem.APIApplication.EmailComponent, EmailSystem, "Sends e-mail using", $techn="", $tags="", $link="")
SHOW_LEGEND(true)
@enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml
set separator none
title Internet Banking System - Containers
top to bottom direction
!include <C4/C4>
!include <C4/C4_Context>
!include <C4/C4_Container>
Person(PersonalBankingCustomer, "Personal Banking Customer", $descr="A customer of the bank, with personal bank accounts.", $tags="", $link="")
System(MainframeBankingSystem, "Mainframe Banking System", $descr="Stores all of the core banking information about customers, accounts, transactions, etc.", $tags="", $link="")
System(EmailSystem, "E-mail System", $descr="The internal Microsoft Exchange e-mail system.", $tags="", $link="")
System_Boundary("InternetBankingSystem_boundary", "Internet Banking System", $tags="") {
Container(InternetBankingSystem.WebApplication, "Web Application", $techn="Java and Spring MVC", $descr="Delivers the static content and the Internet banking single page application.", $tags="", $link="")
Container(InternetBankingSystem.APIApplication, "API Application", $techn="Java and Spring MVC", $descr="Provides Internet banking functionality via a JSON/HTTPS API.", $tags="", $link="")
ContainerDb(InternetBankingSystem.Database, "Database", $techn="Oracle Database Schema", $descr="Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="", $link="")
Container(InternetBankingSystem.SinglePageApplication, "Single-Page Application", $techn="JavaScript and Angular", $descr="Provides all of the Internet banking functionality to customers via their web browser.", $tags="", $link="")
Container(InternetBankingSystem.MobileApp, "Mobile App", $techn="Xamarin", $descr="Provides a limited subset of the Internet banking functionality to customers via their mobile device.", $tags="", $link="")
}
Rel(EmailSystem, PersonalBankingCustomer, "Sends e-mails to", $techn="", $tags="", $link="")
Rel(PersonalBankingCustomer, InternetBankingSystem.WebApplication, "Visits bigbank.com/ib using", $techn="HTTPS", $tags="", $link="")
Rel(PersonalBankingCustomer, InternetBankingSystem.SinglePageApplication, "Views account balances, and makes payments using", $techn="", $tags="", $link="")
Rel(PersonalBankingCustomer, InternetBankingSystem.MobileApp, "Views account balances, and makes payments using", $techn="", $tags="", $link="")
Rel(InternetBankingSystem.WebApplication, InternetBankingSystem.SinglePageApplication, "Delivers to the customer's web browser", $techn="", $tags="", $link="")
Rel(InternetBankingSystem.SinglePageApplication, InternetBankingSystem.APIApplication, "Makes API calls to", $techn="JSON/HTTPS", $tags="", $link="")
Rel(InternetBankingSystem.MobileApp, InternetBankingSystem.APIApplication, "Makes API calls to", $techn="JSON/HTTPS", $tags="", $link="")
Rel(InternetBankingSystem.APIApplication, InternetBankingSystem.Database, "Reads from and writes to", $techn="SQL/TCP", $tags="", $link="")
Rel(InternetBankingSystem.APIApplication, MainframeBankingSystem, "Makes API calls to", $techn="XML/HTTPS", $tags="", $link="")
Rel(InternetBankingSystem.APIApplication, EmailSystem, "Sends e-mail using", $techn="", $tags="", $link="")
SHOW_LEGEND(true)
@enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml
set separator none
title Internet Banking System - Deployment - Development
top to bottom direction
!include <C4/C4>
!include <C4/C4_Context>
!include <C4/C4_Container>
!include <C4/C4_Deployment>
Deployment_Node(Development.DeveloperLaptop, "Developer Laptop", $type="Microsoft Windows 10 or Apple macOS", $descr="", $tags="", $link="") {
Deployment_Node(Development.DeveloperLaptop.WebBrowser, "Web Browser", $type="Chrome, Firefox, Safari, or Edge", $descr="", $tags="", $link="") {
Container(Development.DeveloperLaptop.WebBrowser.SinglePageApplication_1, "Single-Page Application", $techn="JavaScript and Angular", $descr="Provides all of the Internet banking functionality to customers via their web browser.", $tags="", $link="")
}
Deployment_Node(Development.DeveloperLaptop.DockerContainerWebServer, "Docker Container - Web Server", $type="Docker", $descr="", $tags="", $link="") {
Deployment_Node(Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat, "Apache Tomcat", $type="Apache Tomcat 8.x", $descr="", $tags="", $link="") {
Container(Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.WebApplication_1, "Web Application", $techn="Java and Spring MVC", $descr="Delivers the static content and the Internet banking single page application.", $tags="", $link="")
Container(Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.APIApplication_1, "API Application", $techn="Java and Spring MVC", $descr="Provides Internet banking functionality via a JSON/HTTPS API.", $tags="", $link="")
}
}
Deployment_Node(Development.DeveloperLaptop.DockerContainerDatabaseServer, "Docker Container - Database Server", $type="Docker", $descr="", $tags="", $link="") {
Deployment_Node(Development.DeveloperLaptop.DockerContainerDatabaseServer.DatabaseServer, "Database Server", $type="Oracle 12c", $descr="", $tags="", $link="") {
ContainerDb(Development.DeveloperLaptop.DockerContainerDatabaseServer.DatabaseServer.Database_1, "Database", $techn="Oracle Database Schema", $descr="Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="", $link="")
}
}
}
Deployment_Node(Development.BigBankplc, "Big Bank plc", $type="Big Bank plc data center", $descr="", $tags="", $link="") {
Deployment_Node(Development.BigBankplc.bigbankdev001, "bigbank-dev001", $type="", $descr="", $tags="", $link="") {
System(Development.BigBankplc.bigbankdev001.MainframeBankingSystem_1, "Mainframe Banking System", $descr="Stores all of the core banking information about customers, accounts, transactions, etc.", $tags="", $link="")
}
}
Rel(Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.WebApplication_1, Development.DeveloperLaptop.WebBrowser.SinglePageApplication_1, "Delivers to the customer's web browser", $techn="", $tags="", $link="")
Rel(Development.DeveloperLaptop.WebBrowser.SinglePageApplication_1, Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.APIApplication_1, "Makes API calls to", $techn="JSON/HTTPS", $tags="", $link="")
Rel(Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.APIApplication_1, Development.DeveloperLaptop.DockerContainerDatabaseServer.DatabaseServer.Database_1, "Reads from and writes to", $techn="SQL/TCP", $tags="", $link="")
Rel(Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.APIApplication_1, Development.BigBankplc.bigbankdev001.MainframeBankingSystem_1, "Makes API calls to", $techn="XML/HTTPS", $tags="", $link="")
SHOW_LEGEND(true)
@enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml
set separator none
title Internet Banking System - Deployment - Live
top to bottom direction
!include <C4/C4>
!include <C4/C4_Context>
!include <C4/C4_Container>
!include <C4/C4_Deployment>
Deployment_Node(Live.Customersmobiledevice, "Customer's mobile device", $type="Apple iOS or Android", $descr="", $tags="", $link="") {
Container(Live.Customersmobiledevice.MobileApp_1, "Mobile App", $techn="Xamarin", $descr="Provides a limited subset of the Internet banking functionality to customers via their mobile device.", $tags="", $link="")
}
Deployment_Node(Live.Customerscomputer, "Customer's computer", $type="Microsoft Windows or Apple macOS", $descr="", $tags="", $link="") {
Deployment_Node(Live.Customerscomputer.WebBrowser, "Web Browser", $type="Chrome, Firefox, Safari, or Edge", $descr="", $tags="", $link="") {
Container(Live.Customerscomputer.WebBrowser.SinglePageApplication_1, "Single-Page Application", $techn="JavaScript and Angular", $descr="Provides all of the Internet banking functionality to customers via their web browser.", $tags="", $link="")
}
}
Deployment_Node(Live.BigBankplc, "Big Bank plc", $type="Big Bank plc data center", $descr="", $tags="", $link="") {
Deployment_Node(Live.BigBankplc.bigbankweb, "bigbank-web*** (x4)", $type="Ubuntu 16.04 LTS", $descr="", $tags="", $link="") {
Deployment_Node(Live.BigBankplc.bigbankweb.ApacheTomcat, "Apache Tomcat", $type="Apache Tomcat 8.x", $descr="", $tags="", $link="") {
Container(Live.BigBankplc.bigbankweb.ApacheTomcat.WebApplication_1, "Web Application", $techn="Java and Spring MVC", $descr="Delivers the static content and the Internet banking single page application.", $tags="", $link="")
}
}
Deployment_Node(Live.BigBankplc.bigbankapi, "bigbank-api*** (x8)", $type="Ubuntu 16.04 LTS", $descr="", $tags="", $link="") {
Deployment_Node(Live.BigBankplc.bigbankapi.ApacheTomcat, "Apache Tomcat", $type="Apache Tomcat 8.x", $descr="", $tags="", $link="") {
Container(Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1, "API Application", $techn="Java and Spring MVC", $descr="Provides Internet banking functionality via a JSON/HTTPS API.", $tags="", $link="")
}
}
Deployment_Node(Live.BigBankplc.bigbankdb01, "bigbank-db01", $type="Ubuntu 16.04 LTS", $descr="", $tags="", $link="") {
Deployment_Node(Live.BigBankplc.bigbankdb01.OraclePrimary, "Oracle - Primary", $type="Oracle 12c", $descr="", $tags="", $link="") {
ContainerDb(Live.BigBankplc.bigbankdb01.OraclePrimary.Database_1, "Database", $techn="Oracle Database Schema", $descr="Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="", $link="")
}
}
Deployment_Node(Live.BigBankplc.bigbankdb02, "bigbank-db02", $type="Ubuntu 16.04 LTS", $descr="", $tags="", $link="") {
Deployment_Node(Live.BigBankplc.bigbankdb02.OracleSecondary, "Oracle - Secondary", $type="Oracle 12c", $descr="", $tags="", $link="") {
ContainerDb(Live.BigBankplc.bigbankdb02.OracleSecondary.Database_1, "Database", $techn="Oracle Database Schema", $descr="Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="", $link="")
}
}
Deployment_Node(Live.BigBankplc.bigbankprod001, "bigbank-prod001", $type="", $descr="", $tags="", $link="") {
System(Live.BigBankplc.bigbankprod001.MainframeBankingSystem_1, "Mainframe Banking System", $descr="Stores all of the core banking information about customers, accounts, transactions, etc.", $tags="", $link="")
}
}
Rel(Live.BigBankplc.bigbankweb.ApacheTomcat.WebApplication_1, Live.Customerscomputer.WebBrowser.SinglePageApplication_1, "Delivers to the customer's web browser", $techn="", $tags="", $link="")
Rel(Live.Customersmobiledevice.MobileApp_1, Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1, "Makes API calls to", $techn="JSON/HTTPS", $tags="", $link="")
Rel(Live.Customerscomputer.WebBrowser.SinglePageApplication_1, Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1, "Makes API calls to", $techn="JSON/HTTPS", $tags="", $link="")
Rel(Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1, Live.BigBankplc.bigbankdb01.OraclePrimary.Database_1, "Reads from and writes to", $techn="SQL/TCP", $tags="", $link="")
Rel(Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1, Live.BigBankplc.bigbankdb02.OracleSecondary.Database_1, "Reads from and writes to", $techn="SQL/TCP", $tags="", $link="")
Rel(Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1, Live.BigBankplc.bigbankprod001.MainframeBankingSystem_1, "Makes API calls to", $techn="XML/HTTPS", $tags="", $link="")
Rel(Live.BigBankplc.bigbankdb01.OraclePrimary, Live.BigBankplc.bigbankdb02.OracleSecondary, "Replicates data to", $techn="", $tags="", $link="")
SHOW_LEGEND(true)
@enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml
set separator none
title API Application - Dynamic
top to bottom direction
!include <C4/C4>
!include <C4/C4_Context>
!include <C4/C4_Container>
!include <C4/C4_Component>
Container_Boundary("InternetBankingSystem.APIApplication_boundary", "API Application", $tags="") {
Component(InternetBankingSystem.APIApplication.SignInController, "Sign In Controller", $techn="Spring MVC Rest Controller", $descr="Allows users to sign in to the Internet Banking System.", $tags="", $link="")
Component(InternetBankingSystem.APIApplication.SecurityComponent, "Security Component", $techn="Spring Bean", $descr="Provides functionality related to signing in, changing passwords, etc.", $tags="", $link="")
}
Container(InternetBankingSystem.SinglePageApplication, "Single-Page Application", $techn="JavaScript and Angular", $descr="Provides all of the Internet banking functionality to customers via their web browser.", $tags="", $link="")
ContainerDb(InternetBankingSystem.Database, "Database", $techn="Oracle Database Schema", $descr="Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="", $link="")
Rel(InternetBankingSystem.SinglePageApplication, InternetBankingSystem.APIApplication.SignInController, "1. Submits credentials to", $techn="JSON/HTTPS", $tags="", $link="")
Rel(InternetBankingSystem.APIApplication.SignInController, InternetBankingSystem.APIApplication.SecurityComponent, "2. Validates credentials using", $techn="", $tags="", $link="")
Rel(InternetBankingSystem.APIApplication.SecurityComponent, InternetBankingSystem.Database, "3. select * from users where username = ?", $techn="SQL/TCP", $tags="", $link="")
Rel(InternetBankingSystem.Database, InternetBankingSystem.APIApplication.SecurityComponent, "4. Returns user data to", $techn="SQL/TCP", $tags="", $link="")
Rel(InternetBankingSystem.APIApplication.SecurityComponent, InternetBankingSystem.APIApplication.SignInController, "5. Returns true if the hashed password matches", $techn="", $tags="", $link="")
Rel(InternetBankingSystem.APIApplication.SignInController, InternetBankingSystem.SinglePageApplication, "6. Sends back an authentication token to", $techn="JSON/HTTPS", $tags="", $link="")
SHOW_LEGEND(true)
@enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml
set separator none
title Internet Banking System - System Context
top to bottom direction
!include <C4/C4>
!include <C4/C4_Context>
AddBoundaryTag("Big Bank plc", $borderColor="#cccccc", $fontColor="#cccccc", $borderStyle="dashed")
Boundary(group_1, "Big Bank plc", $tags="Big Bank plc") {
System(MainframeBankingSystem, "Mainframe Banking System", $descr="Stores all of the core banking information about customers, accounts, transactions, etc.", $tags="", $link="")
System(EmailSystem, "E-mail System", $descr="The internal Microsoft Exchange e-mail system.", $tags="", $link="")
System(InternetBankingSystem, "Internet Banking System", $descr="Allows customers to view information about their bank accounts, and make payments.", $tags="", $link="")
}
Person(PersonalBankingCustomer, "Personal Banking Customer", $descr="A customer of the bank, with personal bank accounts.", $tags="", $link="")
Rel(PersonalBankingCustomer, InternetBankingSystem, "Views account balances, and makes payments using", $techn="", $tags="", $link="")
Rel(InternetBankingSystem, MainframeBankingSystem, "Gets account information from, and makes payments using", $techn="", $tags="", $link="")
Rel(InternetBankingSystem, EmailSystem, "Sends e-mail using", $techn="", $tags="", $link="")
Rel(EmailSystem, PersonalBankingCustomer, "Sends e-mails to", $techn="", $tags="", $link="")
SHOW_LEGEND(true)
@enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml
set separator none
title System Landscape
top to bottom direction
!include <C4/C4>
!include <C4/C4_Context>
AddBoundaryTag("Big Bank plc", $borderColor="#cccccc", $fontColor="#cccccc", $borderStyle="dashed")
Boundary(group_1, "Big Bank plc", $tags="Big Bank plc") {
Person(CustomerServiceStaff, "Customer Service Staff", $descr="Customer service staff within the bank.", $tags="", $link="")
Person(BackOfficeStaff, "Back Office Staff", $descr="Administration and support staff within the bank.", $tags="", $link="")
System(MainframeBankingSystem, "Mainframe Banking System", $descr="Stores all of the core banking information about customers, accounts, transactions, etc.", $tags="", $link="")
System(EmailSystem, "E-mail System", $descr="The internal Microsoft Exchange e-mail system.", $tags="", $link="")
System(ATM, "ATM", $descr="Allows customers to withdraw cash.", $tags="", $link="")
System(InternetBankingSystem, "Internet Banking System", $descr="Allows customers to view information about their bank accounts, and make payments.", $tags="", $link="")
}
Person(PersonalBankingCustomer, "Personal Banking Customer", $descr="A customer of the bank, with personal bank accounts.", $tags="", $link="")
Rel(PersonalBankingCustomer, InternetBankingSystem, "Views account balances, and makes payments using", $techn="", $tags="", $link="")
Rel(InternetBankingSystem, MainframeBankingSystem, "Gets account information from, and makes payments using", $techn="", $tags="", $link="")
Rel(InternetBankingSystem, EmailSystem, "Sends e-mail using", $techn="", $tags="", $link="")
Rel(EmailSystem, PersonalBankingCustomer, "Sends e-mails to", $techn="", $tags="", $link="")
Rel(PersonalBankingCustomer, CustomerServiceStaff, "Asks questions to", $techn="Telephone", $tags="", $link="")
Rel(CustomerServiceStaff, MainframeBankingSystem, "Uses", $techn="", $tags="", $link="")
Rel(PersonalBankingCustomer, ATM, "Withdraws cash using", $techn="", $tags="", $link="")
Rel(ATM, MainframeBankingSystem, "Uses", $techn="", $tags="", $link="")
Rel(BackOfficeStaff, MainframeBankingSystem, "Uses", $techn="", $tags="", $link="")
SHOW_LEGEND(true)
@enduml
(this will send your diagram content to https://plantuml.com/plantuml)
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
subgraph diagram ["Internet Banking System - API Application - Components"]
style diagram fill:#ffffff,stroke:#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
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
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
subgraph 11 ["API Application"]
style 11 fill:#ffffff,stroke:#2e6295,color:#2e6295
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%'>[SQL/TCP]</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
end
(this will send your diagram content to https://mermaid.ink)
graph TB
linkStyle default fill:#ffffff
subgraph diagram ["Internet Banking System - Containers"]
style diagram fill:#ffffff,stroke:#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:#0b4884,color:#0b4884
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%'>[SQL/TCP]</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
end
(this will send your diagram content to https://mermaid.ink)
graph TB
linkStyle default fill:#ffffff
subgraph diagram ["Internet Banking System - Deployment - Development"]
style diagram fill:#ffffff,stroke:#ffffff
subgraph 50 ["Developer Laptop"]
style 50 fill:#ffffff,stroke:#888888,color:#000000
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
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
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
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
end
end
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
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%'>[SQL/TCP]</div>" .->61
57-. "<div>Makes API calls to</div><div style='font-size: 70%'>[XML/HTTPS]</div>" .->65
end
(this will send your diagram content to https://mermaid.ink)
graph TB
linkStyle default fill:#ffffff
subgraph diagram ["Internet Banking System - Deployment - Live"]
style diagram fill:#ffffff,stroke:#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 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
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
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%'>[SQL/TCP]</div>" .->84
79-. "<div>Reads from and writes to</div><div style='font-size: 70%'>[SQL/TCP]</div>" .->88
79-. "<div>Makes API calls to</div><div style='font-size: 70%'>[XML/HTTPS]</div>" .->91
end
(this will send your diagram content to https://mermaid.ink)
graph TB
linkStyle default fill:#ffffff
subgraph diagram ["API Application - Dynamic"]
style diagram fill:#ffffff,stroke:#ffffff
subgraph 11 ["API Application"]
style 11 fill:#ffffff,stroke:#2e6295,color:#2e6295
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 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
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>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%'>[SQL/TCP]</div>" .->18
18-. "<div>4. Returns user data to</div><div style='font-size: 70%'>[SQL/TCP]</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
end
(this will send your diagram content to https://mermaid.ink)
graph TB
linkStyle default fill:#ffffff
subgraph diagram ["Internet Banking System - System Context"]
style diagram fill:#ffffff,stroke:#ffffff
subgraph group1 ["Big Bank plc"]
style group1 fill:#ffffff,stroke:#cccccc,color:#cccccc,stroke-dasharray:5
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
end
(this will send your diagram content to https://mermaid.ink)
graph TB
linkStyle default fill:#ffffff
subgraph diagram ["System Landscape"]
style diagram fill:#ffffff,stroke:#ffffff
subgraph group1 ["Big Bank plc"]
style group1 fill:#ffffff,stroke:#cccccc,color:#cccccc,stroke-dasharray:5
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
end
(this will send your diagram content to https://mermaid.ink)
WebSequenceDiagram definitions are available via the Structurizr CLI export command,
using the -format websequencediagrams parameter. Only dynamic views are supported.
title API Application - Dynamic - SignIn participant <<Container>>\nSingle-Page Application as Single-Page Application participant <<Component>>\nSign In Controller as Sign In Controller participant <<Component>>\nSecurity Component as Security Component participant <<Container>>\nDatabase as Database Single-Page Application->Sign In Controller: Submits credentials to Sign In Controller->Security Component: Validates credentials using Security Component->Database: select * from users where username = ? Database-->Security Component: Returns user data to Security Component-->Sign In Controller: Returns true if the hashed password matches Sign In Controller-->Single-Page Application: Sends back an authentication token to
DOT definitions are 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><br /><font point-size="24">The component diagram for the API Application.</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"]
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"]
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"]
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">[SQL/TCP]</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><br /><font point-size="24">The container diagram for the Internet Banking System.</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">[SQL/TCP]</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><br /><font point-size="24">An example development deployment scenario for the Internet Banking System.</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_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_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"
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"]
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"]
}
}
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_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">[SQL/TCP]</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><br /><font point-size="24">An example live deployment scenario for the Internet Banking System.</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_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"]
}
}
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"]
}
}
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">[SQL/TCP]</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">[SQL/TCP]</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>>
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 [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"]
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 -> 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">[SQL/TCP]</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">[SQL/TCP]</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><br /><font point-size="24">The system context diagram for the Internet Banking System.</font>>
subgraph "cluster_group_Big Bank plc" {
margin=25
label=<<font point-size="24"><br />Big Bank plc</font>>
labelloc=b
color="#cccccc"
fontcolor="#cccccc"
fillcolor="#ffffff"
style="dashed"
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</font>>
subgraph "cluster_group_Big Bank plc" {
margin=25
label=<<font point-size="24"><br />Big Bank plc</font>>
labelloc=b
color="#cccccc"
fontcolor="#cccccc"
fillcolor="#ffffff"
style="dashed"
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"]
}
Ilograph definitions are available via the Structurizr CLI export command,
using the -format ilograph parameter. A single Ilograph export contains the model and all views.
resources:
- id: "1"
name: "Personal Banking Customer"
subtitle: "[Person]"
description: "A customer of the bank, with personal bank accounts."
backgroundColor: "#08427b"
color: "#ffffff"
- id: "2"
name: "Customer Service Staff"
subtitle: "[Person]"
description: "Customer service staff within the bank."
backgroundColor: "#999999"
color: "#ffffff"
- id: "3"
name: "Back Office Staff"
subtitle: "[Person]"
description: "Administration and support staff within the bank."
backgroundColor: "#999999"
color: "#ffffff"
- id: "4"
name: "Mainframe Banking System"
subtitle: "[Software System]"
description: "Stores all of the core banking information about customers, accounts, transactions, etc."
backgroundColor: "#999999"
color: "#ffffff"
- id: "5"
name: "E-mail System"
subtitle: "[Software System]"
description: "The internal Microsoft Exchange e-mail system."
backgroundColor: "#999999"
color: "#ffffff"
- id: "6"
name: "ATM"
subtitle: "[Software System]"
description: "Allows customers to withdraw cash."
backgroundColor: "#999999"
color: "#ffffff"
- id: "7"
name: "Internet Banking System"
subtitle: "[Software System]"
description: "Allows customers to view information about their bank accounts, and make payments."
backgroundColor: "#1168bd"
color: "#ffffff"
children:
- id: "10"
name: "Web Application"
subtitle: "[Container: Java and Spring MVC]"
description: "Delivers the static content and the Internet banking single page application."
backgroundColor: "#438dd5"
color: "#ffffff"
- id: "11"
name: "API Application"
subtitle: "[Container: Java and Spring MVC]"
description: "Provides Internet banking functionality via a JSON/HTTPS API."
backgroundColor: "#438dd5"
color: "#ffffff"
children:
- id: "12"
name: "Sign In Controller"
subtitle: "[Component: Spring MVC Rest Controller]"
description: "Allows users to sign in to the Internet Banking System."
backgroundColor: "#85bbf0"
color: "#000000"
- id: "13"
name: "Accounts Summary Controller"
subtitle: "[Component: Spring MVC Rest Controller]"
description: "Provides customers with a summary of their bank accounts."
backgroundColor: "#85bbf0"
color: "#000000"
- id: "14"
name: "Reset Password Controller"
subtitle: "[Component: Spring MVC Rest Controller]"
description: "Allows users to reset their passwords with a single use URL."
backgroundColor: "#85bbf0"
color: "#000000"
- id: "15"
name: "Security Component"
subtitle: "[Component: Spring Bean]"
description: "Provides functionality related to signing in, changing passwords, etc."
backgroundColor: "#85bbf0"
color: "#000000"
- id: "16"
name: "Mainframe Banking System Facade"
subtitle: "[Component: Spring Bean]"
description: "A facade onto the mainframe banking system."
backgroundColor: "#85bbf0"
color: "#000000"
- id: "17"
name: "E-mail Component"
subtitle: "[Component: Spring Bean]"
description: "Sends e-mails to users."
backgroundColor: "#85bbf0"
color: "#000000"
- id: "18"
name: "Database"
subtitle: "[Container: Oracle Database Schema]"
description: "Stores user registration information, hashed authentication credentials, access logs, etc."
backgroundColor: "#438dd5"
color: "#ffffff"
- id: "8"
name: "Single-Page Application"
subtitle: "[Container: JavaScript and Angular]"
description: "Provides all of the Internet banking functionality to customers via their web browser."
backgroundColor: "#438dd5"
color: "#ffffff"
- id: "9"
name: "Mobile App"
subtitle: "[Container: Xamarin]"
description: "Provides a limited subset of the Internet banking functionality to customers via their mobile device."
backgroundColor: "#438dd5"
color: "#ffffff"
- id: "50"
name: "Developer Laptop"
subtitle: "[Deployment Node: Microsoft Windows 10 or Apple macOS]"
backgroundColor: "#ffffff"
color: "#000000"
children:
- id: "51"
name: "Web Browser"
subtitle: "[Deployment Node: Chrome, Firefox, Safari, or Edge]"
backgroundColor: "#ffffff"
color: "#000000"
children:
- id: "52"
name: "Single-Page Application"
subtitle: "[Container: JavaScript and Angular]"
description: "Provides all of the Internet banking functionality to customers via their web browser."
backgroundColor: "#438dd5"
color: "#ffffff"
- id: "53"
name: "Docker Container - Web Server"
subtitle: "[Deployment Node: Docker]"
backgroundColor: "#ffffff"
color: "#000000"
children:
- id: "54"
name: "Apache Tomcat"
subtitle: "[Deployment Node: Apache Tomcat 8.x]"
backgroundColor: "#ffffff"
color: "#000000"
children:
- id: "55"
name: "Web Application"
subtitle: "[Container: Java and Spring MVC]"
description: "Delivers the static content and the Internet banking single page application."
backgroundColor: "#438dd5"
color: "#ffffff"
- id: "57"
name: "API Application"
subtitle: "[Container: Java and Spring MVC]"
description: "Provides Internet banking functionality via a JSON/HTTPS API."
backgroundColor: "#438dd5"
color: "#ffffff"
- id: "59"
name: "Docker Container - Database Server"
subtitle: "[Deployment Node: Docker]"
backgroundColor: "#ffffff"
color: "#000000"
children:
- id: "60"
name: "Database Server"
subtitle: "[Deployment Node: Oracle 12c]"
backgroundColor: "#ffffff"
color: "#000000"
children:
- id: "61"
name: "Database"
subtitle: "[Container: Oracle Database Schema]"
description: "Stores user registration information, hashed authentication credentials, access logs, etc."
backgroundColor: "#438dd5"
color: "#ffffff"
- id: "63"
name: "Big Bank plc"
subtitle: "[Deployment Node: Big Bank plc data center]"
backgroundColor: "#ffffff"
color: "#000000"
children:
- id: "64"
name: "bigbank-dev001"
subtitle: "[Deployment Node]"
backgroundColor: "#ffffff"
color: "#000000"
children:
- id: "65"
name: "Mainframe Banking System"
subtitle: "[Software System]"
description: "Stores all of the core banking information about customers, accounts, transactions, etc."
backgroundColor: "#999999"
color: "#ffffff"
- id: "67"
name: "Customer's mobile device"
subtitle: "[Deployment Node: Apple iOS or Android]"
backgroundColor: "#ffffff"
color: "#000000"
children:
- id: "68"
name: "Mobile App"
subtitle: "[Container: Xamarin]"
description: "Provides a limited subset of the Internet banking functionality to customers via their mobile device."
backgroundColor: "#438dd5"
color: "#ffffff"
- id: "69"
name: "Customer's computer"
subtitle: "[Deployment Node: Microsoft Windows or Apple macOS]"
backgroundColor: "#ffffff"
color: "#000000"
children:
- id: "70"
name: "Web Browser"
subtitle: "[Deployment Node: Chrome, Firefox, Safari, or Edge]"
backgroundColor: "#ffffff"
color: "#000000"
children:
- id: "71"
name: "Single-Page Application"
subtitle: "[Container: JavaScript and Angular]"
description: "Provides all of the Internet banking functionality to customers via their web browser."
backgroundColor: "#438dd5"
color: "#ffffff"
- id: "72"
name: "Big Bank plc"
subtitle: "[Deployment Node: Big Bank plc data center]"
backgroundColor: "#ffffff"
color: "#000000"
children:
- id: "73"
name: "bigbank-web***"
subtitle: "[Deployment Node: Ubuntu 16.04 LTS]"
backgroundColor: "#ffffff"
color: "#000000"
children:
- id: "74"
name: "Apache Tomcat"
subtitle: "[Deployment Node: Apache Tomcat 8.x]"
backgroundColor: "#ffffff"
color: "#000000"
children:
- id: "75"
name: "Web Application"
subtitle: "[Container: Java and Spring MVC]"
description: "Delivers the static content and the Internet banking single page application."
backgroundColor: "#438dd5"
color: "#ffffff"
- id: "77"
name: "bigbank-api***"
subtitle: "[Deployment Node: Ubuntu 16.04 LTS]"
backgroundColor: "#ffffff"
color: "#000000"
children:
- id: "78"
name: "Apache Tomcat"
subtitle: "[Deployment Node: Apache Tomcat 8.x]"
backgroundColor: "#ffffff"
color: "#000000"
children:
- id: "79"
name: "API Application"
subtitle: "[Container: Java and Spring MVC]"
description: "Provides Internet banking functionality via a JSON/HTTPS API."
backgroundColor: "#438dd5"
color: "#ffffff"
- id: "82"
name: "bigbank-db01"
subtitle: "[Deployment Node: Ubuntu 16.04 LTS]"
backgroundColor: "#ffffff"
color: "#000000"
children:
- id: "83"
name: "Oracle - Primary"
subtitle: "[Deployment Node: Oracle 12c]"
backgroundColor: "#ffffff"
color: "#000000"
children:
- id: "84"
name: "Database"
subtitle: "[Container: Oracle Database Schema]"
description: "Stores user registration information, hashed authentication credentials, access logs, etc."
backgroundColor: "#438dd5"
color: "#ffffff"
- id: "86"
name: "bigbank-db02"
subtitle: "[Deployment Node: Ubuntu 16.04 LTS]"
backgroundColor: "#ffffff"
color: "#000000"
children:
- id: "87"
name: "Oracle - Secondary"
subtitle: "[Deployment Node: Oracle 12c]"
backgroundColor: "#ffffff"
color: "#000000"
children:
- id: "88"
name: "Database"
subtitle: "[Container: Oracle Database Schema]"
description: "Stores user registration information, hashed authentication credentials, access logs, etc."
backgroundColor: "#438dd5"
color: "#ffffff"
- id: "90"
name: "bigbank-prod001"
subtitle: "[Deployment Node]"
backgroundColor: "#ffffff"
color: "#000000"
children:
- id: "91"
name: "Mainframe Banking System"
subtitle: "[Software System]"
description: "Stores all of the core banking information about customers, accounts, transactions, etc."
backgroundColor: "#999999"
color: "#ffffff"
perspectives:
- name: Static Structure
relations:
- from: "1"
to: "7"
label: "Views account balances, and makes payments using"
color: "#707070"
- from: "1"
to: "2"
label: "Asks questions to"
description: "Telephone"
color: "#707070"
- from: "1"
to: "6"
label: "Withdraws cash using"
color: "#707070"
- from: "2"
to: "4"
label: "Uses"
color: "#707070"
- from: "3"
to: "4"
label: "Uses"
color: "#707070"
- from: "5"
to: "1"
label: "Sends e-mails to"
color: "#707070"
- from: "6"
to: "4"
label: "Uses"
color: "#707070"
- from: "7"
to: "4"
label: "Gets account information from, and makes payments using"
color: "#707070"
- from: "7"
to: "5"
label: "Sends e-mail using"
color: "#707070"
- from: "1"
to: "10"
label: "Visits bigbank.com/ib using"
description: "HTTPS"
color: "#707070"
- from: "1"
to: "8"
label: "Views account balances, and makes payments using"
color: "#707070"
- from: "1"
to: "9"
label: "Views account balances, and makes payments using"
color: "#707070"
- from: "10"
to: "8"
label: "Delivers to the customer's web browser"
color: "#707070"
- from: "11"
to: "18"
label: "Reads from and writes to"
description: "SQL/TCP"
color: "#707070"
- from: "11"
to: "4"
label: "Makes API calls to"
description: "XML/HTTPS"
color: "#707070"
- from: "11"
to: "5"
label: "Sends e-mail using"
color: "#707070"
- from: "8"
to: "11"
label: "Makes API calls to"
description: "JSON/HTTPS"
color: "#707070"
- from: "9"
to: "11"
label: "Makes API calls to"
description: "JSON/HTTPS"
color: "#707070"
- from: "12"
to: "15"
label: "Uses"
color: "#707070"
- from: "13"
to: "16"
label: "Uses"
color: "#707070"
- from: "14"
to: "15"
label: "Uses"
color: "#707070"
- from: "14"
to: "17"
label: "Uses"
color: "#707070"
- from: "15"
to: "18"
label: "Reads from and writes to"
description: "SQL/TCP"
color: "#707070"
- from: "16"
to: "4"
label: "Makes API calls to"
description: "XML/HTTPS"
color: "#707070"
- from: "17"
to: "5"
label: "Sends e-mail using"
color: "#707070"
- from: "8"
to: "12"
label: "Makes API calls to"
description: "JSON/HTTPS"
color: "#707070"
- from: "8"
to: "13"
label: "Makes API calls to"
description: "JSON/HTTPS"
color: "#707070"
- from: "8"
to: "14"
label: "Makes API calls to"
description: "JSON/HTTPS"
color: "#707070"
- from: "9"
to: "12"
label: "Makes API calls to"
description: "JSON/HTTPS"
color: "#707070"
- from: "9"
to: "13"
label: "Makes API calls to"
description: "JSON/HTTPS"
color: "#707070"
- from: "9"
to: "14"
label: "Makes API calls to"
description: "JSON/HTTPS"
color: "#707070"
- name: Dynamic - API Application - Dynamic
sequence:
start: "8"
steps:
- to: "12"
label: "1. Submits credentials to"
description: "JSON/HTTPS"
color: "#707070"
- to: "15"
label: "2. Validates credentials using"
color: "#707070"
- to: "18"
label: "3. select * from users where username = ?"
description: "SQL/TCP"
color: "#707070"
- to: "15"
label: "4. Returns user data to"
description: "SQL/TCP"
color: "#707070"
- to: "12"
label: "5. Returns true if the hashed password matches"
color: "#707070"
- to: "8"
label: "6. Sends back an authentication token to"
description: "JSON/HTTPS"
color: "#707070"
- name: Deployment - Development
relations:
- from: "52"
to: "57"
label: "Makes API calls to"
description: "JSON/HTTPS"
color: "#707070"
- from: "55"
to: "52"
label: "Delivers to the customer's web browser"
color: "#707070"
- from: "57"
to: "61"
label: "Reads from and writes to"
description: "SQL/TCP"
color: "#707070"
- from: "57"
to: "65"
label: "Makes API calls to"
description: "XML/HTTPS"
color: "#707070"
- name: Deployment - Live
relations:
- from: "68"
to: "79"
label: "Makes API calls to"
description: "JSON/HTTPS"
color: "#707070"
- from: "71"
to: "79"
label: "Makes API calls to"
description: "JSON/HTTPS"
color: "#707070"
- from: "75"
to: "71"
label: "Delivers to the customer's web browser"
color: "#707070"
- from: "79"
to: "84"
label: "Reads from and writes to"
description: "SQL/TCP"
color: "#707070"
- from: "79"
to: "88"
label: "Reads from and writes to"
description: "SQL/TCP"
color: "#707070"
- from: "79"
to: "91"
label: "Makes API calls to"
description: "XML/HTTPS"
color: "#707070"