Structurizr

The Structurizr DSL (as mentioned on the ThoughtWorks Tech Radar - Techniques - Diagrams as code) allows you to create multiple diagrams based upon the C4 model, in multiple output formats, from a single DSL source file. Some features (!docs, !adrs, !script, etc) are unavailable on this demo page - see Help - DSL for details.

Upload

/* * This is a combined version of the following workspaces: * * - "Big Bank plc - System Landscape" (https://structurizr.com/share/28201/) * - "Big Bank plc - Internet Banking System" (https://structurizr.com/share/36141/) */ workspace "Big Bank plc" "This is an example workspace to illustrate the key features of Structurizr, via the DSL, based around a fictional online banking system." { model { customer = person "Personal Banking Customer" "A customer of the bank, with personal bank accounts." "Customer" enterprise "Big Bank plc" { supportStaff = person "Customer Service Staff" "Customer service staff within the bank." "Bank Staff" backoffice = person "Back Office Staff" "Administration and support staff within the bank." "Bank Staff" mainframe = softwaresystem "Mainframe Banking System" "Stores all of the core banking information about customers, accounts, transactions, etc." "Existing System" email = softwaresystem "E-mail System" "The internal Microsoft Exchange e-mail system." "Existing System" atm = softwaresystem "ATM" "Allows customers to withdraw cash." "Existing System" internetBankingSystem = softwaresystem "Internet Banking System" "Allows customers to view information about their bank accounts, and make payments." { singlePageApplication = container "Single-Page Application" "Provides all of the Internet banking functionality to customers via their web browser." "JavaScript and Angular" "Web Browser" mobileApp = container "Mobile App" "Provides a limited subset of the Internet banking functionality to customers via their mobile device." "Xamarin" "Mobile App" webApplication = container "Web Application" "Delivers the static content and the Internet banking single page application." "Java and Spring MVC" apiApplication = container "API Application" "Provides Internet banking functionality via a JSON/HTTPS API." "Java and Spring MVC" { signinController = component "Sign In Controller" "Allows users to sign in to the Internet Banking System." "Spring MVC Rest Controller" accountsSummaryController = component "Accounts Summary Controller" "Provides customers with a summary of their bank accounts." "Spring MVC Rest Controller" resetPasswordController = component "Reset Password Controller" "Allows users to reset their passwords with a single use URL." "Spring MVC Rest Controller" securityComponent = component "Security Component" "Provides functionality related to signing in, changing passwords, etc." "Spring Bean" mainframeBankingSystemFacade = component "Mainframe Banking System Facade" "A facade onto the mainframe banking system." "Spring Bean" emailComponent = component "E-mail Component" "Sends e-mails to users." "Spring Bean" } database = container "Database" "Stores user registration information, hashed authentication credentials, access logs, etc." "Oracle Database Schema" "Database" } } # relationships between people and software systems customer -> internetBankingSystem "Views account balances, and makes payments using" internetBankingSystem -> mainframe "Gets account information from, and makes payments using" internetBankingSystem -> email "Sends e-mail using" email -> customer "Sends e-mails to" customer -> supportStaff "Asks questions to" "Telephone" supportStaff -> mainframe "Uses" customer -> atm "Withdraws cash using" atm -> mainframe "Uses" backoffice -> mainframe "Uses" # relationships to/from containers customer -> webApplication "Visits bigbank.com/ib using" "HTTPS" customer -> singlePageApplication "Views account balances, and makes payments using" customer -> mobileApp "Views account balances, and makes payments using" webApplication -> singlePageApplication "Delivers to the customer's web browser" # relationships to/from components singlePageApplication -> signinController "Makes API calls to" "JSON/HTTPS" singlePageApplication -> accountsSummaryController "Makes API calls to" "JSON/HTTPS" singlePageApplication -> resetPasswordController "Makes API calls to" "JSON/HTTPS" mobileApp -> signinController "Makes API calls to" "JSON/HTTPS" mobileApp -> accountsSummaryController "Makes API calls to" "JSON/HTTPS" mobileApp -> resetPasswordController "Makes API calls to" "JSON/HTTPS" signinController -> securityComponent "Uses" accountsSummaryController -> mainframeBankingSystemFacade "Uses" resetPasswordController -> securityComponent "Uses" resetPasswordController -> emailComponent "Uses" securityComponent -> database "Reads from and writes to" "JDBC" mainframeBankingSystemFacade -> mainframe "Makes API calls to" "XML/HTTPS" emailComponent -> email "Sends e-mail using" deploymentEnvironment "Development" { deploymentNode "Developer Laptop" "" "Microsoft Windows 10 or Apple macOS" { deploymentNode "Web Browser" "" "Chrome, Firefox, Safari, or Edge" { developerSinglePageApplicationInstance = containerInstance singlePageApplication } deploymentNode "Docker Container - Web Server" "" "Docker" { deploymentNode "Apache Tomcat" "" "Apache Tomcat 8.x" { developerWebApplicationInstance = containerInstance webApplication developerApiApplicationInstance = containerInstance apiApplication } } deploymentNode "Docker Container - Database Server" "" "Docker" { deploymentNode "Database Server" "" "Oracle 12c" { developerDatabaseInstance = containerInstance database } } } deploymentNode "Big Bank plc" "" "Big Bank plc data center" "" { deploymentNode "bigbank-dev001" "" "" "" { softwareSystemInstance mainframe } } } deploymentEnvironment "Live" { deploymentNode "Customer's mobile device" "" "Apple iOS or Android" { liveMobileAppInstance = containerInstance mobileApp } deploymentNode "Customer's computer" "" "Microsoft Windows or Apple macOS" { deploymentNode "Web Browser" "" "Chrome, Firefox, Safari, or Edge" { liveSinglePageApplicationInstance = containerInstance singlePageApplication } } deploymentNode "Big Bank plc" "" "Big Bank plc data center" { deploymentNode "bigbank-web***" "" "Ubuntu 16.04 LTS" "" 4 { deploymentNode "Apache Tomcat" "" "Apache Tomcat 8.x" { liveWebApplicationInstance = containerInstance webApplication } } deploymentNode "bigbank-api***" "" "Ubuntu 16.04 LTS" "" 8 { deploymentNode "Apache Tomcat" "" "Apache Tomcat 8.x" { liveApiApplicationInstance = containerInstance apiApplication } } deploymentNode "bigbank-db01" "" "Ubuntu 16.04 LTS" { primaryDatabaseServer = deploymentNode "Oracle - Primary" "" "Oracle 12c" { livePrimaryDatabaseInstance = containerInstance database } } deploymentNode "bigbank-db02" "" "Ubuntu 16.04 LTS" "Failover" { secondaryDatabaseServer = deploymentNode "Oracle - Secondary" "" "Oracle 12c" "Failover" { liveSecondaryDatabaseInstance = containerInstance database "Failover" } } deploymentNode "bigbank-prod001" "" "" "" { softwareSystemInstance mainframe } } primaryDatabaseServer -> secondaryDatabaseServer "Replicates data to" } } views { systemlandscape "SystemLandscape" { include * autoLayout } systemcontext internetBankingSystem "SystemContext" { include * animation { internetBankingSystem customer mainframe email } autoLayout } container internetBankingSystem "Containers" { include * animation { customer mainframe email webApplication singlePageApplication mobileApp apiApplication database } autoLayout } component apiApplication "Components" { include * animation { singlePageApplication mobileApp database email mainframe signinController securityComponent accountsSummaryController mainframeBankingSystemFacade resetPasswordController emailComponent } autoLayout } dynamic apiApplication "SignIn" "Summarises how the sign in feature works in the single-page application." { singlePageApplication -> signinController "Submits credentials to" signinController -> securityComponent "Validates credentials using" securityComponent -> database "select * from users where username = ?" database -> securityComponent "Returns user data to" securityComponent -> signinController "Returns true if the hashed password matches" signinController -> singlePageApplication "Sends back an authentication token to" autoLayout } deployment internetBankingSystem "Development" "DevelopmentDeployment" { include * animation { developerSinglePageApplicationInstance developerWebApplicationInstance developerApiApplicationInstance developerDatabaseInstance } autoLayout } deployment internetBankingSystem "Live" "LiveDeployment" { include * animation { liveSinglePageApplicationInstance liveMobileAppInstance liveWebApplicationInstance liveApiApplicationInstance livePrimaryDatabaseInstance liveSecondaryDatabaseInstance } autoLayout } styles { element "Person" { color #ffffff fontSize 22 shape Person } element "Customer" { background #08427b } element "Bank Staff" { background #999999 } element "Software System" { background #1168bd color #ffffff } element "Existing System" { background #999999 color #ffffff } element "Container" { background #438dd5 color #ffffff } element "Web Browser" { shape WebBrowser } element "Mobile App" { shape MobileDeviceLandscape } element "Database" { shape Cylinder } element "Component" { background #85bbf0 color #000000 } element "Failover" { opacity 25 } } } }

Examples: Getting started | Big Bank plc | Amazon Web Services

Structurizr

Diagram

Structurizr

Graph

Export

PlantUML

Export

C4-PlantUML

Export

Mermaid

Export

DOT

Export

WebSequenceDiagrams

Export

Ilograph

PlantUML definitions are available via the Structurizr CLI export command, using the -format plantuml parameter.

@startuml
title Internet Banking System - API Application - Components

top to bottom direction

skinparam {
  shadowing false
  arrowFontSize 10
  defaultTextAlignment center
  wrapWidth 200
  maxMessageSize 100
}

hide stereotype

skinparam rectangle<<InternetBankingSystem.APIApplication.AccountsSummaryController>> {
  BackgroundColor #85bbf0
  FontColor #000000
  BorderColor #5d82a8
}
skinparam database<<InternetBankingSystem.Database>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2e6295
}
skinparam rectangle<<InternetBankingSystem.APIApplication.EmailComponent>> {
  BackgroundColor #85bbf0
  FontColor #000000
  BorderColor #5d82a8
}
skinparam rectangle<<EmailSystem>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6b6b6b
}
skinparam rectangle<<MainframeBankingSystem>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6b6b6b
}
skinparam rectangle<<InternetBankingSystem.APIApplication.MainframeBankingSystemFacade>> {
  BackgroundColor #85bbf0
  FontColor #000000
  BorderColor #5d82a8
}
skinparam rectangle<<InternetBankingSystem.MobileApp>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2e6295
}
skinparam rectangle<<InternetBankingSystem.APIApplication.ResetPasswordController>> {
  BackgroundColor #85bbf0
  FontColor #000000
  BorderColor #5d82a8
}
skinparam rectangle<<InternetBankingSystem.APIApplication.SecurityComponent>> {
  BackgroundColor #85bbf0
  FontColor #000000
  BorderColor #5d82a8
}
skinparam rectangle<<InternetBankingSystem.APIApplication.SignInController>> {
  BackgroundColor #85bbf0
  FontColor #000000
  BorderColor #5d82a8
}
skinparam rectangle<<InternetBankingSystem.SinglePageApplication>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2e6295
}

rectangle "==Mainframe Banking System\n<size:10>[Software System]</size>\n\nStores all of the core banking information about customers, accounts, transactions, etc." <<MainframeBankingSystem>> as MainframeBankingSystem
rectangle "==E-mail System\n<size:10>[Software System]</size>\n\nThe internal Microsoft Exchange e-mail system." <<EmailSystem>> as EmailSystem
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

package "API Application\n[Container: Java and Spring MVC]" <<InternetBankingSystem.APIApplication>> {
  skinparam PackageBorderColor<<InternetBankingSystem.APIApplication>> #444444
  skinparam PackageFontColor<<InternetBankingSystem.APIApplication>> #444444

  rectangle "==Sign In Controller\n<size:10>[Component: Spring MVC Rest Controller]</size>\n\nAllows users to sign in to the Internet Banking System." <<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>[JDBC]</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
title Internet Banking System - Containers

top to bottom direction

skinparam {
  shadowing false
  arrowFontSize 10
  defaultTextAlignment center
  wrapWidth 200
  maxMessageSize 100
}

hide stereotype

skinparam rectangle<<InternetBankingSystem.APIApplication>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2e6295
}
skinparam database<<InternetBankingSystem.Database>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2e6295
}
skinparam rectangle<<EmailSystem>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6b6b6b
}
skinparam rectangle<<MainframeBankingSystem>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6b6b6b
}
skinparam rectangle<<InternetBankingSystem.MobileApp>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2e6295
}
skinparam person<<PersonalBankingCustomer>> {
  BackgroundColor #08427b
  FontColor #ffffff
  BorderColor #052e56
}
skinparam rectangle<<InternetBankingSystem.SinglePageApplication>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2e6295
}
skinparam rectangle<<InternetBankingSystem.WebApplication>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2e6295
}

person "==Personal Banking Customer\n<size:10>[Person]</size>\n\nA customer of the bank, with personal bank accounts." <<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

package "Internet Banking System\n[Software System]" <<InternetBankingSystem>> {
  skinparam PackageBorderColor<<InternetBankingSystem>> #444444
  skinparam PackageFontColor<<InternetBankingSystem>> #444444

  rectangle "==Web Application\n<size:10>[Container: Java and Spring MVC]</size>\n\nDelivers the static content and the Internet banking single page application." <<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>[JDBC]</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
title Internet Banking System - Deployment - Development

top to bottom direction

skinparam {
  shadowing false
  arrowFontSize 10
  defaultTextAlignment center
  wrapWidth 200
  maxMessageSize 100
}

hide stereotype

skinparam rectangle<<Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.APIApplication_1>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2e6295
}
skinparam rectangle<<Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #888888
}
skinparam rectangle<<Development.BigBankplc>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #888888
}
skinparam database<<Development.DeveloperLaptop.DockerContainerDatabaseServer.DatabaseServer.Database_1>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2e6295
}
skinparam rectangle<<Development.DeveloperLaptop.DockerContainerDatabaseServer.DatabaseServer>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #888888
}
skinparam rectangle<<Development.DeveloperLaptop>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #888888
}
skinparam rectangle<<Development.DeveloperLaptop.DockerContainerDatabaseServer>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #888888
}
skinparam rectangle<<Development.DeveloperLaptop.DockerContainerWebServer>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #888888
}
skinparam rectangle<<Development.BigBankplc.bigbankdev001.MainframeBankingSystem_1>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6b6b6b
}
skinparam rectangle<<Development.DeveloperLaptop.WebBrowser.SinglePageApplication_1>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2e6295
}
skinparam rectangle<<Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.WebApplication_1>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2e6295
}
skinparam rectangle<<Development.DeveloperLaptop.WebBrowser>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #888888
}
skinparam rectangle<<Development.BigBankplc.bigbankdev001>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #888888
}

rectangle "Developer Laptop\n<size:10>[Deployment Node: Microsoft Windows 10 or Apple macOS]</size>" <<Development.DeveloperLaptop>> as Development.DeveloperLaptop {
  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 "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 "==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 "==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 "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 "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>[JDBC]</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
title Internet Banking System - Deployment - Live

top to bottom direction

skinparam {
  shadowing false
  arrowFontSize 10
  defaultTextAlignment center
  wrapWidth 200
  maxMessageSize 100
}

hide stereotype

skinparam rectangle<<Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2e6295
}
skinparam rectangle<<Live.BigBankplc.bigbankapi.ApacheTomcat>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #888888
}
skinparam rectangle<<Live.BigBankplc.bigbankweb.ApacheTomcat>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #888888
}
skinparam rectangle<<Live.BigBankplc>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #888888
}
skinparam rectangle<<Live.Customerscomputer>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #888888
}
skinparam rectangle<<Live.Customersmobiledevice>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #888888
}
skinparam database<<Live.BigBankplc.bigbankdb02.OracleSecondary.Database_1>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2e6295
}
skinparam database<<Live.BigBankplc.bigbankdb01.OraclePrimary.Database_1>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2e6295
}
skinparam rectangle<<Live.BigBankplc.bigbankprod001.MainframeBankingSystem_1>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6b6b6b
}
skinparam rectangle<<Live.Customersmobiledevice.MobileApp_1>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2e6295
}
skinparam rectangle<<Live.BigBankplc.bigbankdb01.OraclePrimary>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #888888
}
skinparam rectangle<<Live.BigBankplc.bigbankdb02.OracleSecondary>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #888888
}
skinparam rectangle<<Live.Customerscomputer.WebBrowser.SinglePageApplication_1>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2e6295
}
skinparam rectangle<<Live.BigBankplc.bigbankweb.ApacheTomcat.WebApplication_1>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2e6295
}
skinparam rectangle<<Live.Customerscomputer.WebBrowser>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #888888
}
skinparam rectangle<<Live.BigBankplc.bigbankapi>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #888888
}
skinparam rectangle<<Live.BigBankplc.bigbankdb01>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #888888
}
skinparam rectangle<<Live.BigBankplc.bigbankdb02>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #888888
}
skinparam rectangle<<Live.BigBankplc.bigbankprod001>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #888888
}
skinparam rectangle<<Live.BigBankplc.bigbankweb>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #888888
}

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-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
  }

  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
    }

  }

}

Live.BigBankplc.bigbankweb.ApacheTomcat.WebApplication_1 .[#707070,thickness=2].> Live.Customerscomputer.WebBrowser.SinglePageApplication_1 : "<color:#707070>Delivers to the customer's web browser"
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.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.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>[JDBC]</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>[JDBC]</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
title API Application - Dynamic

top to bottom direction

skinparam {
  shadowing false
  arrowFontSize 10
  defaultTextAlignment center
  wrapWidth 200
  maxMessageSize 100
}

hide stereotype

skinparam database<<InternetBankingSystem.Database>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2e6295
}
skinparam rectangle<<InternetBankingSystem.APIApplication.SecurityComponent>> {
  BackgroundColor #85bbf0
  FontColor #000000
  BorderColor #5d82a8
}
skinparam rectangle<<InternetBankingSystem.APIApplication.SignInController>> {
  BackgroundColor #85bbf0
  FontColor #000000
  BorderColor #5d82a8
}
skinparam rectangle<<InternetBankingSystem.SinglePageApplication>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2e6295
}

package "API Application\n[Container: Java and Spring MVC]" <<InternetBankingSystem.APIApplication>> {
  skinparam PackageBorderColor<<InternetBankingSystem.APIApplication>> #444444
  skinparam PackageFontColor<<InternetBankingSystem.APIApplication>> #444444

  rectangle "==Sign In Controller\n<size:10>[Component: Spring MVC Rest Controller]</size>\n\nAllows users to sign in to the Internet Banking System." <<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
}

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

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>[JDBC]</size>"
InternetBankingSystem.APIApplication.SecurityComponent <.[#707070,thickness=2]. InternetBankingSystem.Database : "<color:#707070>4. Returns user data to\n<color:#707070><size:8>[JDBC]</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
title API Application - Dynamic

skinparam {
  shadowing false
  arrowFontSize 10
  defaultTextAlignment center
  wrapWidth 200
  maxMessageSize 100
}

hide stereotype

skinparam sequenceParticipant<<InternetBankingSystem.Database>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2e6295
}
skinparam sequenceParticipant<<InternetBankingSystem.APIApplication.SecurityComponent>> {
  BackgroundColor #85bbf0
  FontColor #000000
  BorderColor #5d82a8
}
skinparam sequenceParticipant<<InternetBankingSystem.APIApplication.SignInController>> {
  BackgroundColor #85bbf0
  FontColor #000000
  BorderColor #5d82a8
}
skinparam sequenceParticipant<<InternetBankingSystem.SinglePageApplication>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2e6295
}

participant "Single-Page Application\n<size:10>[Container: JavaScript and Angular]</size>" as InternetBankingSystem.SinglePageApplication <<InternetBankingSystem.SinglePageApplication>> #438dd5
participant "Sign In Controller\n<size:10>[Component: Spring MVC Rest Controller]</size>" as InternetBankingSystem.APIApplication.SignInController <<InternetBankingSystem.APIApplication.SignInController>> #85bbf0
participant "Security Component\n<size:10>[Component: Spring Bean]</size>" as InternetBankingSystem.APIApplication.SecurityComponent <<InternetBankingSystem.APIApplication.SecurityComponent>> #85bbf0
database "Database\n<size:10>[Container: Oracle Database Schema]</size>" as InternetBankingSystem.Database <<InternetBankingSystem.Database>> #438dd5
InternetBankingSystem.SinglePageApplication -[#707070]> InternetBankingSystem.APIApplication.SignInController : Submits credentials to
InternetBankingSystem.APIApplication.SignInController -[#707070]> InternetBankingSystem.APIApplication.SecurityComponent : Validates credentials using
InternetBankingSystem.APIApplication.SecurityComponent -[#707070]> InternetBankingSystem.Database : select * from users where username = ?
InternetBankingSystem.APIApplication.SecurityComponent <-[#707070]- InternetBankingSystem.Database : Returns user data to
InternetBankingSystem.APIApplication.SignInController <-[#707070]- InternetBankingSystem.APIApplication.SecurityComponent : Returns true if the hashed password matches
InternetBankingSystem.SinglePageApplication <-[#707070]- InternetBankingSystem.APIApplication.SignInController : Sends back an authentication token to
@enduml

(this will send your diagram content to https://plantuml.com/plantuml)

@startuml
title Internet Banking System - System Context

top to bottom direction

skinparam {
  shadowing false
  arrowFontSize 10
  defaultTextAlignment center
  wrapWidth 200
  maxMessageSize 100
}

hide stereotype

skinparam rectangle<<EmailSystem>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6b6b6b
}
skinparam rectangle<<InternetBankingSystem>> {
  BackgroundColor #1168bd
  FontColor #ffffff
  BorderColor #0b4884
}
skinparam rectangle<<MainframeBankingSystem>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6b6b6b
}
skinparam person<<PersonalBankingCustomer>> {
  BackgroundColor #08427b
  FontColor #ffffff
  BorderColor #052e56
}

package "Big Bank plc" <<enterprise>> {
  skinparam PackageBorderColor<<enterprise>> #444444
  skinparam PackageFontColor<<enterprise>> #444444

  rectangle "==Mainframe Banking System\n<size:10>[Software System]</size>\n\nStores all of the core banking information about customers, accounts, transactions, etc." <<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
title System Landscape for Big Bank plc

top to bottom direction

skinparam {
  shadowing false
  arrowFontSize 10
  defaultTextAlignment center
  wrapWidth 200
  maxMessageSize 100
}

hide stereotype

skinparam rectangle<<ATM>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6b6b6b
}
skinparam person<<BackOfficeStaff>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6b6b6b
}
skinparam person<<CustomerServiceStaff>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6b6b6b
}
skinparam rectangle<<EmailSystem>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6b6b6b
}
skinparam rectangle<<InternetBankingSystem>> {
  BackgroundColor #1168bd
  FontColor #ffffff
  BorderColor #0b4884
}
skinparam rectangle<<MainframeBankingSystem>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6b6b6b
}
skinparam person<<PersonalBankingCustomer>> {
  BackgroundColor #08427b
  FontColor #ffffff
  BorderColor #052e56
}

package "Big Bank plc" <<enterprise>> {
  skinparam PackageBorderColor<<enterprise>> #444444
  skinparam PackageFontColor<<enterprise>> #444444

  person "==Customer Service Staff\n<size:10>[Person]</size>\n\nCustomer service staff within the bank." <<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)

C4-PlantUML definitions are available via the Structurizr CLI export command, using the -format plantuml/c4plantuml parameter.

@startuml
title Internet Banking System - API Application - Components

top to bottom direction

!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml

System(MainframeBankingSystem, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.", $tags="")
System(EmailSystem, "E-mail System", "The internal Microsoft Exchange e-mail system.", $tags="")
ContainerDb(InternetBankingSystem.Database, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="")
Container(InternetBankingSystem.SinglePageApplication, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.", $tags="")
Container(InternetBankingSystem.MobileApp, "Mobile App", "Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device.", $tags="")

Container_Boundary("InternetBankingSystem.APIApplication_boundary", "API Application") {
  Component(InternetBankingSystem.APIApplication.SignInController, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System.", $tags="")
  Component(InternetBankingSystem.APIApplication.AccountsSummaryController, "Accounts Summary Controller", "Spring MVC Rest Controller", "Provides customers with a summary of their bank accounts.", $tags="")
  Component(InternetBankingSystem.APIApplication.ResetPasswordController, "Reset Password Controller", "Spring MVC Rest Controller", "Allows users to reset their passwords with a single use URL.", $tags="")
  Component(InternetBankingSystem.APIApplication.SecurityComponent, "Security Component", "Spring Bean", "Provides functionality related to signing in, changing passwords, etc.", $tags="")
  Component(InternetBankingSystem.APIApplication.MainframeBankingSystemFacade, "Mainframe Banking System Facade", "Spring Bean", "A facade onto the mainframe banking system.", $tags="")
  Component(InternetBankingSystem.APIApplication.EmailComponent, "E-mail Component", "Spring Bean", "Sends e-mails to users.", $tags="")
}

Rel_D(InternetBankingSystem.SinglePageApplication, InternetBankingSystem.APIApplication.SignInController, "Makes API calls to", "JSON/HTTPS", $tags="")
Rel_D(InternetBankingSystem.SinglePageApplication, InternetBankingSystem.APIApplication.AccountsSummaryController, "Makes API calls to", "JSON/HTTPS", $tags="")
Rel_D(InternetBankingSystem.SinglePageApplication, InternetBankingSystem.APIApplication.ResetPasswordController, "Makes API calls to", "JSON/HTTPS", $tags="")
Rel_D(InternetBankingSystem.MobileApp, InternetBankingSystem.APIApplication.SignInController, "Makes API calls to", "JSON/HTTPS", $tags="")
Rel_D(InternetBankingSystem.MobileApp, InternetBankingSystem.APIApplication.AccountsSummaryController, "Makes API calls to", "JSON/HTTPS", $tags="")
Rel_D(InternetBankingSystem.MobileApp, InternetBankingSystem.APIApplication.ResetPasswordController, "Makes API calls to", "JSON/HTTPS", $tags="")
Rel_D(InternetBankingSystem.APIApplication.SignInController, InternetBankingSystem.APIApplication.SecurityComponent, "Uses", $tags="")
Rel_D(InternetBankingSystem.APIApplication.AccountsSummaryController, InternetBankingSystem.APIApplication.MainframeBankingSystemFacade, "Uses", $tags="")
Rel_D(InternetBankingSystem.APIApplication.ResetPasswordController, InternetBankingSystem.APIApplication.SecurityComponent, "Uses", $tags="")
Rel_D(InternetBankingSystem.APIApplication.ResetPasswordController, InternetBankingSystem.APIApplication.EmailComponent, "Uses", $tags="")
Rel_D(InternetBankingSystem.APIApplication.SecurityComponent, InternetBankingSystem.Database, "Reads from and writes to", "JDBC", $tags="")
Rel_D(InternetBankingSystem.APIApplication.MainframeBankingSystemFacade, MainframeBankingSystem, "Makes API calls to", "XML/HTTPS", $tags="")
Rel_D(InternetBankingSystem.APIApplication.EmailComponent, EmailSystem, "Sends e-mail using", $tags="")

SHOW_LEGEND()
@enduml

(this will send your diagram content to https://plantuml.com/plantuml)

@startuml
title Internet Banking System - Containers

top to bottom direction

!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

Person_Ext(PersonalBankingCustomer, "Personal Banking Customer", "A customer of the bank, with personal bank accounts.", $tags="")
System(MainframeBankingSystem, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.", $tags="")
System(EmailSystem, "E-mail System", "The internal Microsoft Exchange e-mail system.", $tags="")

System_Boundary("InternetBankingSystem_boundary", "Internet Banking System") {
  Container(InternetBankingSystem.WebApplication, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet banking single page application.", $tags="")
  Container(InternetBankingSystem.APIApplication, "API Application", "Java and Spring MVC", "Provides Internet banking functionality via a JSON/HTTPS API.", $tags="")
  ContainerDb(InternetBankingSystem.Database, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="")
  Container(InternetBankingSystem.SinglePageApplication, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.", $tags="")
  Container(InternetBankingSystem.MobileApp, "Mobile App", "Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device.", $tags="")
}

Rel_D(EmailSystem, PersonalBankingCustomer, "Sends e-mails to", $tags="")
Rel_D(PersonalBankingCustomer, InternetBankingSystem.WebApplication, "Visits bigbank.com/ib using", "HTTPS", $tags="")
Rel_D(PersonalBankingCustomer, InternetBankingSystem.SinglePageApplication, "Views account balances, and makes payments using", $tags="")
Rel_D(PersonalBankingCustomer, InternetBankingSystem.MobileApp, "Views account balances, and makes payments using", $tags="")
Rel_D(InternetBankingSystem.WebApplication, InternetBankingSystem.SinglePageApplication, "Delivers to the customer's web browser", $tags="")
Rel_D(InternetBankingSystem.SinglePageApplication, InternetBankingSystem.APIApplication, "Makes API calls to", "JSON/HTTPS", $tags="")
Rel_D(InternetBankingSystem.MobileApp, InternetBankingSystem.APIApplication, "Makes API calls to", "JSON/HTTPS", $tags="")
Rel_D(InternetBankingSystem.APIApplication, InternetBankingSystem.Database, "Reads from and writes to", "JDBC", $tags="")
Rel_D(InternetBankingSystem.APIApplication, MainframeBankingSystem, "Makes API calls to", "XML/HTTPS", $tags="")
Rel_D(InternetBankingSystem.APIApplication, EmailSystem, "Sends e-mail using", $tags="")

SHOW_LEGEND()
@enduml

(this will send your diagram content to https://plantuml.com/plantuml)

@startuml
title Internet Banking System - Deployment - Development

top to bottom direction

!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml

Deployment_Node(Development.DeveloperLaptop, "Developer Laptop", "Microsoft Windows 10 or Apple macOS", $tags="") {
  Deployment_Node(Development.DeveloperLaptop.DockerContainerDatabaseServer, "Docker Container - Database Server", "Docker", $tags="") {
    Deployment_Node(Development.DeveloperLaptop.DockerContainerDatabaseServer.DatabaseServer, "Database Server", "Oracle 12c", $tags="") {
      ContainerDb(Development.DeveloperLaptop.DockerContainerDatabaseServer.DatabaseServer.Database_1, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="")
    }

  }

  Deployment_Node(Development.DeveloperLaptop.DockerContainerWebServer, "Docker Container - Web Server", "Docker", $tags="") {
    Deployment_Node(Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat, "Apache Tomcat", "Apache Tomcat 8.x", $tags="") {
      Container(Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.APIApplication_1, "API Application", "Java and Spring MVC", "Provides Internet banking functionality via a JSON/HTTPS API.", $tags="")
      Container(Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.WebApplication_1, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet banking single page application.", $tags="")
    }

  }

  Deployment_Node(Development.DeveloperLaptop.WebBrowser, "Web Browser", "Chrome, Firefox, Safari, or Edge", $tags="") {
    Container(Development.DeveloperLaptop.WebBrowser.SinglePageApplication_1, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.", $tags="")
  }

}

Deployment_Node(Development.BigBankplc, "Big Bank plc", "Big Bank plc data center", $tags="") {
  Deployment_Node(Development.BigBankplc.bigbankdev001, "bigbank-dev001", $tags="") {
    System(Development.BigBankplc.bigbankdev001.MainframeBankingSystem_1, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.", $tags="")
  }

}

Rel_D(Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.WebApplication_1, Development.DeveloperLaptop.WebBrowser.SinglePageApplication_1, "Delivers to the customer's web browser", $tags="")
Rel_D(Development.DeveloperLaptop.WebBrowser.SinglePageApplication_1, Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.APIApplication_1, "Makes API calls to", "JSON/HTTPS", $tags="")
Rel_D(Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.APIApplication_1, Development.DeveloperLaptop.DockerContainerDatabaseServer.DatabaseServer.Database_1, "Reads from and writes to", "JDBC", $tags="")
Rel_D(Development.DeveloperLaptop.DockerContainerWebServer.ApacheTomcat.APIApplication_1, Development.BigBankplc.bigbankdev001.MainframeBankingSystem_1, "Makes API calls to", "XML/HTTPS", $tags="")

SHOW_LEGEND()
@enduml

(this will send your diagram content to https://plantuml.com/plantuml)

@startuml
title Internet Banking System - Deployment - Live

top to bottom direction

!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml

Deployment_Node(Live.Customersmobiledevice, "Customer's mobile device", "Apple iOS or Android", $tags="") {
  Container(Live.Customersmobiledevice.MobileApp_1, "Mobile App", "Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device.", $tags="")
}

Deployment_Node(Live.Customerscomputer, "Customer's computer", "Microsoft Windows or Apple macOS", $tags="") {
  Deployment_Node(Live.Customerscomputer.WebBrowser, "Web Browser", "Chrome, Firefox, Safari, or Edge", $tags="") {
    Container(Live.Customerscomputer.WebBrowser.SinglePageApplication_1, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.", $tags="")
  }

}

Deployment_Node(Live.BigBankplc, "Big Bank plc", "Big Bank plc data center", $tags="") {
  Deployment_Node(Live.BigBankplc.bigbankapi, "bigbank-api*** (x8)", "Ubuntu 16.04 LTS", $tags="") {
    Deployment_Node(Live.BigBankplc.bigbankapi.ApacheTomcat, "Apache Tomcat", "Apache Tomcat 8.x", $tags="") {
      Container(Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1, "API Application", "Java and Spring MVC", "Provides Internet banking functionality via a JSON/HTTPS API.", $tags="")
    }

  }

  Deployment_Node(Live.BigBankplc.bigbankdb01, "bigbank-db01", "Ubuntu 16.04 LTS", $tags="") {
    Deployment_Node(Live.BigBankplc.bigbankdb01.OraclePrimary, "Oracle - Primary", "Oracle 12c", $tags="") {
      ContainerDb(Live.BigBankplc.bigbankdb01.OraclePrimary.Database_1, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="")
    }

  }

  Deployment_Node(Live.BigBankplc.bigbankdb02, "bigbank-db02", "Ubuntu 16.04 LTS", $tags="") {
    Deployment_Node(Live.BigBankplc.bigbankdb02.OracleSecondary, "Oracle - Secondary", "Oracle 12c", $tags="") {
      ContainerDb(Live.BigBankplc.bigbankdb02.OracleSecondary.Database_1, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="")
    }

  }

  Deployment_Node(Live.BigBankplc.bigbankprod001, "bigbank-prod001", $tags="") {
    System(Live.BigBankplc.bigbankprod001.MainframeBankingSystem_1, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.", $tags="")
  }

  Deployment_Node(Live.BigBankplc.bigbankweb, "bigbank-web*** (x4)", "Ubuntu 16.04 LTS", $tags="") {
    Deployment_Node(Live.BigBankplc.bigbankweb.ApacheTomcat, "Apache Tomcat", "Apache Tomcat 8.x", $tags="") {
      Container(Live.BigBankplc.bigbankweb.ApacheTomcat.WebApplication_1, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet banking single page application.", $tags="")
    }

  }

}

Rel_D(Live.BigBankplc.bigbankweb.ApacheTomcat.WebApplication_1, Live.Customerscomputer.WebBrowser.SinglePageApplication_1, "Delivers to the customer's web browser", $tags="")
Rel_D(Live.Customerscomputer.WebBrowser.SinglePageApplication_1, Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1, "Makes API calls to", "JSON/HTTPS", $tags="")
Rel_D(Live.Customersmobiledevice.MobileApp_1, Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1, "Makes API calls to", "JSON/HTTPS", $tags="")
Rel_D(Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1, Live.BigBankplc.bigbankdb01.OraclePrimary.Database_1, "Reads from and writes to", "JDBC", $tags="")
Rel_D(Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1, Live.BigBankplc.bigbankdb02.OracleSecondary.Database_1, "Reads from and writes to", "JDBC", $tags="")
Rel_D(Live.BigBankplc.bigbankapi.ApacheTomcat.APIApplication_1, Live.BigBankplc.bigbankprod001.MainframeBankingSystem_1, "Makes API calls to", "XML/HTTPS", $tags="")
Rel_D(Live.BigBankplc.bigbankdb01.OraclePrimary, Live.BigBankplc.bigbankdb02.OracleSecondary, "Replicates data to", $tags="")

SHOW_LEGEND()
@enduml

(this will send your diagram content to https://plantuml.com/plantuml)

@startuml
title API Application - Dynamic

top to bottom direction

!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml

Container_Boundary("InternetBankingSystem.APIApplication_boundary", "API Application") {
  Component(InternetBankingSystem.APIApplication.SignInController, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System.", $tags="")
  Component(InternetBankingSystem.APIApplication.SecurityComponent, "Security Component", "Spring Bean", "Provides functionality related to signing in, changing passwords, etc.", $tags="")
}

ContainerDb(InternetBankingSystem.Database, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="")
Container(InternetBankingSystem.SinglePageApplication, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.", $tags="")

Rel_D(InternetBankingSystem.SinglePageApplication, InternetBankingSystem.APIApplication.SignInController, "1. Submits credentials to", "JSON/HTTPS", $tags="")
Rel_D(InternetBankingSystem.APIApplication.SignInController, InternetBankingSystem.APIApplication.SecurityComponent, "2. Validates credentials using", $tags="")
Rel_D(InternetBankingSystem.APIApplication.SecurityComponent, InternetBankingSystem.Database, "3. select * from users where username = ?", "JDBC", $tags="")
Rel_D(InternetBankingSystem.Database, InternetBankingSystem.APIApplication.SecurityComponent, "4. Returns user data to", "JDBC", $tags="")
Rel_D(InternetBankingSystem.APIApplication.SecurityComponent, InternetBankingSystem.APIApplication.SignInController, "5. Returns true if the hashed password matches", $tags="")
Rel_D(InternetBankingSystem.APIApplication.SignInController, InternetBankingSystem.SinglePageApplication, "6. Sends back an authentication token to", "JSON/HTTPS", $tags="")

SHOW_LEGEND()
@enduml

(this will send your diagram content to https://plantuml.com/plantuml)

@startuml
title System Landscape for Big Bank plc

top to bottom direction

!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml

Enterprise_Boundary(enterprise, "Big Bank plc") {
  Person(CustomerServiceStaff, "Customer Service Staff", "Customer service staff within the bank.", $tags="")
  Person(BackOfficeStaff, "Back Office Staff", "Administration and support staff within the bank.", $tags="")
  System(MainframeBankingSystem, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.", $tags="")
  System(EmailSystem, "E-mail System", "The internal Microsoft Exchange e-mail system.", $tags="")
  System(ATM, "ATM", "Allows customers to withdraw cash.", $tags="")
  System(InternetBankingSystem, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.", $tags="")
}

Person_Ext(PersonalBankingCustomer, "Personal Banking Customer", "A customer of the bank, with personal bank accounts.", $tags="")

Rel_D(PersonalBankingCustomer, InternetBankingSystem, "Views account balances, and makes payments using", $tags="")
Rel_D(InternetBankingSystem, MainframeBankingSystem, "Gets account information from, and makes payments using", $tags="")
Rel_D(InternetBankingSystem, EmailSystem, "Sends e-mail using", $tags="")
Rel_D(EmailSystem, PersonalBankingCustomer, "Sends e-mails to", $tags="")
Rel_D(PersonalBankingCustomer, CustomerServiceStaff, "Asks questions to", "Telephone", $tags="")
Rel_D(CustomerServiceStaff, MainframeBankingSystem, "Uses", $tags="")
Rel_D(PersonalBankingCustomer, ATM, "Withdraws cash using", $tags="")
Rel_D(ATM, MainframeBankingSystem, "Uses", $tags="")
Rel_D(BackOfficeStaff, MainframeBankingSystem, "Uses", $tags="")

SHOW_LEGEND()
@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

  4["<div style='font-weight: bold'>Mainframe Banking System</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>Stores all of the core<br />banking information about<br />customers, accounts,<br />transactions, etc.</div>"]
  style 4 fill:#999999,stroke:#6b6b6b,color:#ffffff
  5["<div style='font-weight: bold'>E-mail System</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>The internal Microsoft<br />Exchange e-mail system.</div>"]
  style 5 fill:#999999,stroke:#6b6b6b,color:#ffffff
  18[("<div style='font-weight: bold'>Database</div><div style='font-size: 70%; margin-top: 0px'>[Container: Oracle Database Schema]</div><div style='font-size: 80%; margin-top:10px'>Stores user registration<br />information, hashed<br />authentication credentials,<br />access logs, etc.</div>")]
  style 18 fill:#438dd5,stroke:#2e6295,color:#ffffff
  8["<div style='font-weight: bold'>Single-Page Application</div><div style='font-size: 70%; margin-top: 0px'>[Container: JavaScript and Angular]</div><div style='font-size: 80%; margin-top:10px'>Provides all of the Internet<br />banking functionality to<br />customers via their web<br />browser.</div>"]
  style 8 fill:#438dd5,stroke:#2e6295,color:#ffffff
  9["<div style='font-weight: bold'>Mobile App</div><div style='font-size: 70%; margin-top: 0px'>[Container: Xamarin]</div><div style='font-size: 80%; margin-top:10px'>Provides a limited subset of<br />the Internet banking<br />functionality to customers<br />via their mobile device.</div>"]
  style 9 fill:#438dd5,stroke:#2e6295,color:#ffffff

  subgraph 11 [API Application]
    style 11 fill:#ffffff,stroke:#444444,color:#444444

    12["<div style='font-weight: bold'>Sign In Controller</div><div style='font-size: 70%; margin-top: 0px'>[Component: Spring MVC Rest Controller]</div><div style='font-size: 80%; margin-top:10px'>Allows users to sign in to<br />the Internet Banking System.</div>"]
    style 12 fill:#85bbf0,stroke:#5d82a8,color:#000000
    13["<div style='font-weight: bold'>Accounts Summary Controller</div><div style='font-size: 70%; margin-top: 0px'>[Component: Spring MVC Rest Controller]</div><div style='font-size: 80%; margin-top:10px'>Provides customers with a<br />summary of their bank<br />accounts.</div>"]
    style 13 fill:#85bbf0,stroke:#5d82a8,color:#000000
    14["<div style='font-weight: bold'>Reset Password Controller</div><div style='font-size: 70%; margin-top: 0px'>[Component: Spring MVC Rest Controller]</div><div style='font-size: 80%; margin-top:10px'>Allows users to reset their<br />passwords with a single use<br />URL.</div>"]
    style 14 fill:#85bbf0,stroke:#5d82a8,color:#000000
    15["<div style='font-weight: bold'>Security Component</div><div style='font-size: 70%; margin-top: 0px'>[Component: Spring Bean]</div><div style='font-size: 80%; margin-top:10px'>Provides functionality<br />related to signing in,<br />changing passwords, etc.</div>"]
    style 15 fill:#85bbf0,stroke:#5d82a8,color:#000000
    16["<div style='font-weight: bold'>Mainframe Banking System Facade</div><div style='font-size: 70%; margin-top: 0px'>[Component: Spring Bean]</div><div style='font-size: 80%; margin-top:10px'>A facade onto the mainframe<br />banking system.</div>"]
    style 16 fill:#85bbf0,stroke:#5d82a8,color:#000000
    17["<div style='font-weight: bold'>E-mail Component</div><div style='font-size: 70%; margin-top: 0px'>[Component: Spring Bean]</div><div style='font-size: 80%; margin-top:10px'>Sends e-mails to users.</div>"]
    style 17 fill:#85bbf0,stroke:#5d82a8,color:#000000
  end

  8-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->12
  8-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->13
  8-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->14
  9-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->12
  9-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->13
  9-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->14
  12-. "<div>Uses</div><div style='font-size: 70%'></div>" .->15
  13-. "<div>Uses</div><div style='font-size: 70%'></div>" .->16
  14-. "<div>Uses</div><div style='font-size: 70%'></div>" .->15
  14-. "<div>Uses</div><div style='font-size: 70%'></div>" .->17
  15-. "<div>Reads from and writes to</div><div style='font-size: 70%'>[JDBC]</div>" .->18
  16-. "<div>Makes API calls to</div><div style='font-size: 70%'>[XML/HTTPS]</div>" .->4
  17-. "<div>Sends e-mail using</div><div style='font-size: 70%'></div>" .->5

(this will send your diagram content to https://mermaid.ink)

graph TB
  linkStyle default fill:#ffffff

  1["<div style='font-weight: bold'>Personal Banking Customer</div><div style='font-size: 70%; margin-top: 0px'>[Person]</div><div style='font-size: 80%; margin-top:10px'>A customer of the bank, with<br />personal bank accounts.</div>"]
  style 1 fill:#08427b,stroke:#052e56,color:#ffffff
  4["<div style='font-weight: bold'>Mainframe Banking System</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>Stores all of the core<br />banking information about<br />customers, accounts,<br />transactions, etc.</div>"]
  style 4 fill:#999999,stroke:#6b6b6b,color:#ffffff
  5["<div style='font-weight: bold'>E-mail System</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>The internal Microsoft<br />Exchange e-mail system.</div>"]
  style 5 fill:#999999,stroke:#6b6b6b,color:#ffffff

  subgraph 7 [Internet Banking System]
    style 7 fill:#ffffff,stroke:#444444,color:#444444

    10["<div style='font-weight: bold'>Web Application</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring MVC]</div><div style='font-size: 80%; margin-top:10px'>Delivers the static content<br />and the Internet banking<br />single page application.</div>"]
    style 10 fill:#438dd5,stroke:#2e6295,color:#ffffff
    11["<div style='font-weight: bold'>API Application</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring MVC]</div><div style='font-size: 80%; margin-top:10px'>Provides Internet banking<br />functionality via a<br />JSON/HTTPS API.</div>"]
    style 11 fill:#438dd5,stroke:#2e6295,color:#ffffff
    18[("<div style='font-weight: bold'>Database</div><div style='font-size: 70%; margin-top: 0px'>[Container: Oracle Database Schema]</div><div style='font-size: 80%; margin-top:10px'>Stores user registration<br />information, hashed<br />authentication credentials,<br />access logs, etc.</div>")]
    style 18 fill:#438dd5,stroke:#2e6295,color:#ffffff
    8["<div style='font-weight: bold'>Single-Page Application</div><div style='font-size: 70%; margin-top: 0px'>[Container: JavaScript and Angular]</div><div style='font-size: 80%; margin-top:10px'>Provides all of the Internet<br />banking functionality to<br />customers via their web<br />browser.</div>"]
    style 8 fill:#438dd5,stroke:#2e6295,color:#ffffff
    9["<div style='font-weight: bold'>Mobile App</div><div style='font-size: 70%; margin-top: 0px'>[Container: Xamarin]</div><div style='font-size: 80%; margin-top:10px'>Provides a limited subset of<br />the Internet banking<br />functionality to customers<br />via their mobile device.</div>"]
    style 9 fill:#438dd5,stroke:#2e6295,color:#ffffff
  end

  5-. "<div>Sends e-mails to</div><div style='font-size: 70%'></div>" .->1
  1-. "<div>Visits bigbank.com/ib using</div><div style='font-size: 70%'>[HTTPS]</div>" .->10
  1-. "<div>Views account balances, and<br />makes payments using</div><div style='font-size: 70%'></div>" .->8
  1-. "<div>Views account balances, and<br />makes payments using</div><div style='font-size: 70%'></div>" .->9
  10-. "<div>Delivers to the customer's<br />web browser</div><div style='font-size: 70%'></div>" .->8
  8-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->11
  9-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->11
  11-. "<div>Reads from and writes to</div><div style='font-size: 70%'>[JDBC]</div>" .->18
  11-. "<div>Makes API calls to</div><div style='font-size: 70%'>[XML/HTTPS]</div>" .->4
  11-. "<div>Sends e-mail using</div><div style='font-size: 70%'></div>" .->5

(this will send your diagram content to https://mermaid.ink)

graph TB
  linkStyle default fill:#ffffff

  subgraph 50 [Developer Laptop]
    style 50 fill:#ffffff,stroke:#888888,color:#000000

    subgraph 59 [Docker Container - Database Server]
      style 59 fill:#ffffff,stroke:#888888,color:#000000

      subgraph 60 [Database Server]
        style 60 fill:#ffffff,stroke:#888888,color:#000000

        61[("<div style='font-weight: bold'>Database</div><div style='font-size: 70%; margin-top: 0px'>[Container: Oracle Database Schema]</div><div style='font-size: 80%; margin-top:10px'>Stores user registration<br />information, hashed<br />authentication credentials,<br />access logs, etc.</div>")]
        style 61 fill:#438dd5,stroke:#2e6295,color:#ffffff
      end

    end

    subgraph 53 [Docker Container - Web Server]
      style 53 fill:#ffffff,stroke:#888888,color:#000000

      subgraph 54 [Apache Tomcat]
        style 54 fill:#ffffff,stroke:#888888,color:#000000

        57["<div style='font-weight: bold'>API Application</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring MVC]</div><div style='font-size: 80%; margin-top:10px'>Provides Internet banking<br />functionality via a<br />JSON/HTTPS API.</div>"]
        style 57 fill:#438dd5,stroke:#2e6295,color:#ffffff
        55["<div style='font-weight: bold'>Web Application</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring MVC]</div><div style='font-size: 80%; margin-top:10px'>Delivers the static content<br />and the Internet banking<br />single page application.</div>"]
        style 55 fill:#438dd5,stroke:#2e6295,color:#ffffff
      end

    end

    subgraph 51 [Web Browser]
      style 51 fill:#ffffff,stroke:#888888,color:#000000

      52["<div style='font-weight: bold'>Single-Page Application</div><div style='font-size: 70%; margin-top: 0px'>[Container: JavaScript and Angular]</div><div style='font-size: 80%; margin-top:10px'>Provides all of the Internet<br />banking functionality to<br />customers via their web<br />browser.</div>"]
      style 52 fill:#438dd5,stroke:#2e6295,color:#ffffff
    end

  end

  subgraph 63 [Big Bank plc]
    style 63 fill:#ffffff,stroke:#888888,color:#000000

    subgraph 64 [bigbank-dev001]
      style 64 fill:#ffffff,stroke:#888888,color:#000000

      65["<div style='font-weight: bold'>Mainframe Banking System</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>Stores all of the core<br />banking information about<br />customers, accounts,<br />transactions, etc.</div>"]
      style 65 fill:#999999,stroke:#6b6b6b,color:#ffffff
    end

  end

  55-. "<div>Delivers to the customer's<br />web browser</div><div style='font-size: 70%'></div>" .->52
  52-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->57
  57-. "<div>Reads from and writes to</div><div style='font-size: 70%'>[JDBC]</div>" .->61
  57-. "<div>Makes API calls to</div><div style='font-size: 70%'>[XML/HTTPS]</div>" .->65

(this will send your diagram content to https://mermaid.ink)

graph TB
  linkStyle default fill:#ffffff

  subgraph 67 [Customer's mobile device]
    style 67 fill:#ffffff,stroke:#888888,color:#000000

    68["<div style='font-weight: bold'>Mobile App</div><div style='font-size: 70%; margin-top: 0px'>[Container: Xamarin]</div><div style='font-size: 80%; margin-top:10px'>Provides a limited subset of<br />the Internet banking<br />functionality to customers<br />via their mobile device.</div>"]
    style 68 fill:#438dd5,stroke:#2e6295,color:#ffffff
  end

  subgraph 69 [Customer's computer]
    style 69 fill:#ffffff,stroke:#888888,color:#000000

    subgraph 70 [Web Browser]
      style 70 fill:#ffffff,stroke:#888888,color:#000000

      71["<div style='font-weight: bold'>Single-Page Application</div><div style='font-size: 70%; margin-top: 0px'>[Container: JavaScript and Angular]</div><div style='font-size: 80%; margin-top:10px'>Provides all of the Internet<br />banking functionality to<br />customers via their web<br />browser.</div>"]
      style 71 fill:#438dd5,stroke:#2e6295,color:#ffffff
    end

  end

  subgraph 72 [Big Bank plc]
    style 72 fill:#ffffff,stroke:#888888,color:#000000

    subgraph 77 [bigbank-api***]
      style 77 fill:#ffffff,stroke:#888888,color:#000000

      subgraph 78 [Apache Tomcat]
        style 78 fill:#ffffff,stroke:#888888,color:#000000

        79["<div style='font-weight: bold'>API Application</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring MVC]</div><div style='font-size: 80%; margin-top:10px'>Provides Internet banking<br />functionality via a<br />JSON/HTTPS API.</div>"]
        style 79 fill:#438dd5,stroke:#2e6295,color:#ffffff
      end

    end

    subgraph 82 [bigbank-db01]
      style 82 fill:#ffffff,stroke:#888888,color:#000000

      subgraph 83 [Oracle - Primary]
        style 83 fill:#ffffff,stroke:#888888,color:#000000

        84[("<div style='font-weight: bold'>Database</div><div style='font-size: 70%; margin-top: 0px'>[Container: Oracle Database Schema]</div><div style='font-size: 80%; margin-top:10px'>Stores user registration<br />information, hashed<br />authentication credentials,<br />access logs, etc.</div>")]
        style 84 fill:#438dd5,stroke:#2e6295,color:#ffffff
      end

    end

    subgraph 86 [bigbank-db02]
      style 86 fill:#ffffff,stroke:#888888,color:#000000

      subgraph 87 [Oracle - Secondary]
        style 87 fill:#ffffff,stroke:#888888,color:#000000

        88[("<div style='font-weight: bold'>Database</div><div style='font-size: 70%; margin-top: 0px'>[Container: Oracle Database Schema]</div><div style='font-size: 80%; margin-top:10px'>Stores user registration<br />information, hashed<br />authentication credentials,<br />access logs, etc.</div>")]
        style 88 fill:#438dd5,stroke:#2e6295,color:#ffffff
      end

    end

    subgraph 90 [bigbank-prod001]
      style 90 fill:#ffffff,stroke:#888888,color:#000000

      91["<div style='font-weight: bold'>Mainframe Banking System</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>Stores all of the core<br />banking information about<br />customers, accounts,<br />transactions, etc.</div>"]
      style 91 fill:#999999,stroke:#6b6b6b,color:#ffffff
    end

    subgraph 73 [bigbank-web***]
      style 73 fill:#ffffff,stroke:#888888,color:#000000

      subgraph 74 [Apache Tomcat]
        style 74 fill:#ffffff,stroke:#888888,color:#000000

        75["<div style='font-weight: bold'>Web Application</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring MVC]</div><div style='font-size: 80%; margin-top:10px'>Delivers the static content<br />and the Internet banking<br />single page application.</div>"]
        style 75 fill:#438dd5,stroke:#2e6295,color:#ffffff
      end

    end

  end

  75-. "<div>Delivers to the customer's<br />web browser</div><div style='font-size: 70%'></div>" .->71
  71-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->79
  68-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->79
  79-. "<div>Reads from and writes to</div><div style='font-size: 70%'>[JDBC]</div>" .->84
  79-. "<div>Reads from and writes to</div><div style='font-size: 70%'>[JDBC]</div>" .->88
  79-. "<div>Makes API calls to</div><div style='font-size: 70%'>[XML/HTTPS]</div>" .->91

(this will send your diagram content to https://mermaid.ink)

graph TB
  linkStyle default fill:#ffffff

  subgraph 11 [API Application]
    style 11 fill:#ffffff,stroke:#444444,color:#444444

    12["<div style='font-weight: bold'>Sign In Controller</div><div style='font-size: 70%; margin-top: 0px'>[Component: Spring MVC Rest Controller]</div><div style='font-size: 80%; margin-top:10px'>Allows users to sign in to<br />the Internet Banking System.</div>"]
    style 12 fill:#85bbf0,stroke:#5d82a8,color:#000000
    15["<div style='font-weight: bold'>Security Component</div><div style='font-size: 70%; margin-top: 0px'>[Component: Spring Bean]</div><div style='font-size: 80%; margin-top:10px'>Provides functionality<br />related to signing in,<br />changing passwords, etc.</div>"]
    style 15 fill:#85bbf0,stroke:#5d82a8,color:#000000
  end

  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

  8-. "<div>1. Submits credentials to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->12
  12-. "<div>2. Validates credentials<br />using</div><div style='font-size: 70%'></div>" .->15
  15-. "<div>3. select * from users where<br />username = ?</div><div style='font-size: 70%'>[JDBC]</div>" .->18
  18-. "<div>4. Returns user data to</div><div style='font-size: 70%'>[JDBC]</div>" .->15
  15-. "<div>5. Returns true if the hashed<br />password matches</div><div style='font-size: 70%'></div>" .->12
  12-. "<div>6. Sends back an<br />authentication token to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->8

(this will send your diagram content to https://mermaid.ink)

graph TB
  linkStyle default fill:#ffffff

  subgraph enterprise [Big Bank plc]
    style enterprise fill:#ffffff,stroke:#444444,color:#444444

    4["<div style='font-weight: bold'>Mainframe Banking System</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>Stores all of the core<br />banking information about<br />customers, accounts,<br />transactions, etc.</div>"]
    style 4 fill:#999999,stroke:#6b6b6b,color:#ffffff
    5["<div style='font-weight: bold'>E-mail System</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>The internal Microsoft<br />Exchange e-mail system.</div>"]
    style 5 fill:#999999,stroke:#6b6b6b,color:#ffffff
    7["<div style='font-weight: bold'>Internet Banking System</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>Allows customers to view<br />information about their bank<br />accounts, and make payments.</div>"]
    style 7 fill:#1168bd,stroke:#0b4884,color:#ffffff
  end

  1["<div style='font-weight: bold'>Personal Banking Customer</div><div style='font-size: 70%; margin-top: 0px'>[Person]</div><div style='font-size: 80%; margin-top:10px'>A customer of the bank, with<br />personal bank accounts.</div>"]
  style 1 fill:#08427b,stroke:#052e56,color:#ffffff

  1-. "<div>Views account balances, and<br />makes payments using</div><div style='font-size: 70%'></div>" .->7
  7-. "<div>Gets account information<br />from, and makes payments<br />using</div><div style='font-size: 70%'></div>" .->4
  7-. "<div>Sends e-mail using</div><div style='font-size: 70%'></div>" .->5
  5-. "<div>Sends e-mails to</div><div style='font-size: 70%'></div>" .->1

(this will send your diagram content to https://mermaid.ink)

graph TB
  linkStyle default fill:#ffffff

  subgraph enterprise [Big Bank plc]
    style enterprise fill:#ffffff,stroke:#444444,color:#444444

    2["<div style='font-weight: bold'>Customer Service Staff</div><div style='font-size: 70%; margin-top: 0px'>[Person]</div><div style='font-size: 80%; margin-top:10px'>Customer service staff within<br />the bank.</div>"]
    style 2 fill:#999999,stroke:#6b6b6b,color:#ffffff
    3["<div style='font-weight: bold'>Back Office Staff</div><div style='font-size: 70%; margin-top: 0px'>[Person]</div><div style='font-size: 80%; margin-top:10px'>Administration and support<br />staff within the bank.</div>"]
    style 3 fill:#999999,stroke:#6b6b6b,color:#ffffff
    4["<div style='font-weight: bold'>Mainframe Banking System</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>Stores all of the core<br />banking information about<br />customers, accounts,<br />transactions, etc.</div>"]
    style 4 fill:#999999,stroke:#6b6b6b,color:#ffffff
    5["<div style='font-weight: bold'>E-mail System</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>The internal Microsoft<br />Exchange e-mail system.</div>"]
    style 5 fill:#999999,stroke:#6b6b6b,color:#ffffff
    6["<div style='font-weight: bold'>ATM</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>Allows customers to withdraw<br />cash.</div>"]
    style 6 fill:#999999,stroke:#6b6b6b,color:#ffffff
    7["<div style='font-weight: bold'>Internet Banking System</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>Allows customers to view<br />information about their bank<br />accounts, and make payments.</div>"]
    style 7 fill:#1168bd,stroke:#0b4884,color:#ffffff
  end

  1["<div style='font-weight: bold'>Personal Banking Customer</div><div style='font-size: 70%; margin-top: 0px'>[Person]</div><div style='font-size: 80%; margin-top:10px'>A customer of the bank, with<br />personal bank accounts.</div>"]
  style 1 fill:#08427b,stroke:#052e56,color:#ffffff

  1-. "<div>Views account balances, and<br />makes payments using</div><div style='font-size: 70%'></div>" .->7
  7-. "<div>Gets account information<br />from, and makes payments<br />using</div><div style='font-size: 70%'></div>" .->4
  7-. "<div>Sends e-mail using</div><div style='font-size: 70%'></div>" .->5
  5-. "<div>Sends e-mails to</div><div style='font-size: 70%'></div>" .->1
  1-. "<div>Asks questions to</div><div style='font-size: 70%'>[Telephone]</div>" .->2
  2-. "<div>Uses</div><div style='font-size: 70%'></div>" .->4
  1-. "<div>Withdraws cash using</div><div style='font-size: 70%'></div>" .->6
  6-. "<div>Uses</div><div style='font-size: 70%'></div>" .->4
  3-. "<div>Uses</div><div style='font-size: 70%'></div>" .->4

(this will send your diagram content to https://mermaid.ink)

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>>

  4 [id=4,shape=rect, label=<<font point-size="34">Mainframe Banking<br />System</font><br /><font point-size="19">[Software System]</font><br /><br /><font point-size="24">Stores all of the core banking<br />information about customers,<br />accounts, transactions, etc.</font>>, style=filled, color="#6b6b6b", fillcolor="#999999", fontcolor="#ffffff"]
  5 [id=5,shape=rect, label=<<font point-size="34">E-mail System</font><br /><font point-size="19">[Software System]</font><br /><br /><font point-size="24">The internal Microsoft<br />Exchange e-mail system.</font>>, style=filled, color="#6b6b6b", fillcolor="#999999", fontcolor="#ffffff"]
  18 [id=18,shape=cylinder, label=<<font point-size="34">Database</font><br /><font point-size="19">[Container: Oracle Database Schema]</font><br /><br /><font point-size="24">Stores user registration<br />information, hashed<br />authentication credentials,<br />access logs, etc.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"]
  8 [id=8,shape=rect, label=<<font point-size="34">Single-Page<br />Application</font><br /><font point-size="19">[Container: JavaScript and Angular]</font><br /><br /><font point-size="24">Provides all of the Internet<br />banking functionality to<br />customers via their web<br />browser.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"]
  9 [id=9,shape=rect, label=<<font point-size="34">Mobile App</font><br /><font point-size="19">[Container: Xamarin]</font><br /><br /><font point-size="24">Provides a limited subset of<br />the Internet banking<br />functionality to customers via<br />their mobile device.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"]

  subgraph cluster_11 {
    margin=25
    label=<<font point-size="24"><br />API Application</font><br /><font point-size="19">[Container: Java and Spring MVC]</font>>
    labelloc=b
    color="#444444"
    fontcolor="#444444"
    fillcolor="#444444"

    12 [id=12,shape=rect, label=<<font point-size="34">Sign In Controller</font><br /><font point-size="19">[Component: Spring MVC Rest Controller]</font><br /><br /><font point-size="24">Allows users to sign in to the<br />Internet Banking System.</font>>, style=filled, color="#5d82a8", fillcolor="#85bbf0", fontcolor="#000000"]
    13 [id=13,shape=rect, label=<<font point-size="34">Accounts Summary<br />Controller</font><br /><font point-size="19">[Component: Spring MVC Rest Controller]</font><br /><br /><font point-size="24">Provides customers with a<br />summary of their bank<br />accounts.</font>>, style=filled, color="#5d82a8", fillcolor="#85bbf0", fontcolor="#000000"]
    14 [id=14,shape=rect, label=<<font point-size="34">Reset Password<br />Controller</font><br /><font point-size="19">[Component: Spring MVC Rest Controller]</font><br /><br /><font point-size="24">Allows users to reset their<br />passwords with a single use<br />URL.</font>>, style=filled, color="#5d82a8", fillcolor="#85bbf0", fontcolor="#000000"]
    15 [id=15,shape=rect, label=<<font point-size="34">Security Component</font><br /><font point-size="19">[Component: Spring Bean]</font><br /><br /><font point-size="24">Provides functionality related<br />to signing in, changing<br />passwords, etc.</font>>, style=filled, color="#5d82a8", fillcolor="#85bbf0", fontcolor="#000000"]
    16 [id=16,shape=rect, label=<<font point-size="34">Mainframe Banking<br />System Facade</font><br /><font point-size="19">[Component: Spring Bean]</font><br /><br /><font point-size="24">A facade onto the mainframe<br />banking system.</font>>, style=filled, color="#5d82a8", fillcolor="#85bbf0", fontcolor="#000000"]
    17 [id=17,shape=rect, label=<<font point-size="34">E-mail Component</font><br /><font point-size="19">[Component: Spring Bean]</font><br /><br /><font point-size="24">Sends e-mails to users.</font>>, style=filled, color="#5d82a8", fillcolor="#85bbf0", fontcolor="#000000"]
  }

  8 -> 12 [id=32, label=<<font point-size="24">Makes API calls to</font><br /><font point-size="19">[JSON/HTTPS]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  8 -> 13 [id=34, label=<<font point-size="24">Makes API calls to</font><br /><font point-size="19">[JSON/HTTPS]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  8 -> 14 [id=35, label=<<font point-size="24">Makes API calls to</font><br /><font point-size="19">[JSON/HTTPS]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  9 -> 12 [id=36, label=<<font point-size="24">Makes API calls to</font><br /><font point-size="19">[JSON/HTTPS]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  9 -> 13 [id=38, label=<<font point-size="24">Makes API calls to</font><br /><font point-size="19">[JSON/HTTPS]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  9 -> 14 [id=39, label=<<font point-size="24">Makes API calls to</font><br /><font point-size="19">[JSON/HTTPS]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  12 -> 15 [id=40, label=<<font point-size="24">Uses</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  13 -> 16 [id=41, label=<<font point-size="24">Uses</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  14 -> 15 [id=42, label=<<font point-size="24">Uses</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  14 -> 17 [id=43, label=<<font point-size="24">Uses</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  15 -> 18 [id=44, label=<<font point-size="24">Reads from and writes to</font><br /><font point-size="19">[JDBC]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  16 -> 4 [id=46, label=<<font point-size="24">Makes API calls to</font><br /><font point-size="19">[XML/HTTPS]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  17 -> 5 [id=48, label=<<font point-size="24">Sends e-mail using</font>>, style="dashed", color="#707070", fontcolor="#707070"]
}

digraph {
  compound=true
  graph [fontname="Arial", rankdir=TB, ranksep=1.0, nodesep=1.0]
  node [fontname="Arial", shape=box, margin="0.4,0.3"]
  edge [fontname="Arial"]
  label=<<br /><font point-size="34">Internet Banking System - Containers</font>>

  1 [id=1,shape=rect, label=<<font point-size="32">Personal Banking<br />Customer</font><br /><font point-size="17">[Person]</font><br /><br /><font point-size="22">A customer of the bank, with<br />personal bank accounts.</font>>, style=filled, color="#052e56", fillcolor="#08427b", fontcolor="#ffffff"]
  4 [id=4,shape=rect, label=<<font point-size="34">Mainframe Banking<br />System</font><br /><font point-size="19">[Software System]</font><br /><br /><font point-size="24">Stores all of the core banking<br />information about customers,<br />accounts, transactions, etc.</font>>, style=filled, color="#6b6b6b", fillcolor="#999999", fontcolor="#ffffff"]
  5 [id=5,shape=rect, label=<<font point-size="34">E-mail System</font><br /><font point-size="19">[Software System]</font><br /><br /><font point-size="24">The internal Microsoft<br />Exchange e-mail system.</font>>, style=filled, color="#6b6b6b", fillcolor="#999999", fontcolor="#ffffff"]

  subgraph cluster_7 {
    margin=25
    label=<<font point-size="24"><br />Internet Banking System</font><br /><font point-size="19">[Software System]</font>>
    labelloc=b
    color="#444444"
    fontcolor="#444444"
    fillcolor="#444444"

    10 [id=10,shape=rect, label=<<font point-size="34">Web Application</font><br /><font point-size="19">[Container: Java and Spring MVC]</font><br /><br /><font point-size="24">Delivers the static content<br />and the Internet banking<br />single page application.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"]
    11 [id=11,shape=rect, label=<<font point-size="34">API Application</font><br /><font point-size="19">[Container: Java and Spring MVC]</font><br /><br /><font point-size="24">Provides Internet banking<br />functionality via a JSON/HTTPS<br />API.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"]
    18 [id=18,shape=cylinder, label=<<font point-size="34">Database</font><br /><font point-size="19">[Container: Oracle Database Schema]</font><br /><br /><font point-size="24">Stores user registration<br />information, hashed<br />authentication credentials,<br />access logs, etc.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"]
    8 [id=8,shape=rect, label=<<font point-size="34">Single-Page<br />Application</font><br /><font point-size="19">[Container: JavaScript and Angular]</font><br /><br /><font point-size="24">Provides all of the Internet<br />banking functionality to<br />customers via their web<br />browser.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"]
    9 [id=9,shape=rect, label=<<font point-size="34">Mobile App</font><br /><font point-size="19">[Container: Xamarin]</font><br /><br /><font point-size="24">Provides a limited subset of<br />the Internet banking<br />functionality to customers via<br />their mobile device.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"]
  }

  5 -> 1 [id=22, label=<<font point-size="24">Sends e-mails to</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  1 -> 10 [id=28, label=<<font point-size="24">Visits bigbank.com/ib<br />using</font><br /><font point-size="19">[HTTPS]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  1 -> 8 [id=29, label=<<font point-size="24">Views account balances,<br />and makes payments using</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  1 -> 9 [id=30, label=<<font point-size="24">Views account balances,<br />and makes payments using</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  10 -> 8 [id=31, label=<<font point-size="24">Delivers to the customer's<br />web browser</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  8 -> 11 [id=33, label=<<font point-size="24">Makes API calls to</font><br /><font point-size="19">[JSON/HTTPS]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  9 -> 11 [id=37, label=<<font point-size="24">Makes API calls to</font><br /><font point-size="19">[JSON/HTTPS]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  11 -> 18 [id=45, label=<<font point-size="24">Reads from and writes to</font><br /><font point-size="19">[JDBC]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  11 -> 4 [id=47, label=<<font point-size="24">Makes API calls to</font><br /><font point-size="19">[XML/HTTPS]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  11 -> 5 [id=49, label=<<font point-size="24">Sends e-mail using</font>>, style="dashed", color="#707070", fontcolor="#707070"]
}

digraph {
  compound=true
  graph [fontname="Arial", rankdir=TB, ranksep=1.0, nodesep=1.0]
  node [fontname="Arial", shape=box, margin="0.4,0.3"]
  edge [fontname="Arial"]
  label=<<br /><font point-size="34">Internet Banking System - Deployment - Development</font>>

  subgraph cluster_50 {
    margin=25
    label=<<font point-size="24">Developer Laptop</font><br /><font point-size="19">[Deployment Node: Microsoft Windows 10 or Apple macOS]</font>>
    labelloc=b
    color="#888888"
    fontcolor="#000000"
    fillcolor="#ffffff"

    subgraph cluster_59 {
      margin=25
      label=<<font point-size="24">Docker Container - Database Server</font><br /><font point-size="19">[Deployment Node: Docker]</font>>
      labelloc=b
      color="#888888"
      fontcolor="#000000"
      fillcolor="#ffffff"

      subgraph cluster_60 {
        margin=25
        label=<<font point-size="24">Database Server</font><br /><font point-size="19">[Deployment Node: Oracle 12c]</font>>
        labelloc=b
        color="#888888"
        fontcolor="#000000"
        fillcolor="#ffffff"

        61 [id=61,shape=cylinder, label=<<font point-size="34">Database</font><br /><font point-size="19">[Container: Oracle Database Schema]</font><br /><br /><font point-size="24">Stores user registration<br />information, hashed<br />authentication credentials,<br />access logs, etc.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"]
      }

    }

    subgraph cluster_53 {
      margin=25
      label=<<font point-size="24">Docker Container - Web Server</font><br /><font point-size="19">[Deployment Node: Docker]</font>>
      labelloc=b
      color="#888888"
      fontcolor="#000000"
      fillcolor="#ffffff"

      subgraph cluster_54 {
        margin=25
        label=<<font point-size="24">Apache Tomcat</font><br /><font point-size="19">[Deployment Node: Apache Tomcat 8.x]</font>>
        labelloc=b
        color="#888888"
        fontcolor="#000000"
        fillcolor="#ffffff"

        57 [id=57,shape=rect, label=<<font point-size="34">API Application</font><br /><font point-size="19">[Container: Java and Spring MVC]</font><br /><br /><font point-size="24">Provides Internet banking<br />functionality via a JSON/HTTPS<br />API.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"]
        55 [id=55,shape=rect, label=<<font point-size="34">Web Application</font><br /><font point-size="19">[Container: Java and Spring MVC]</font><br /><br /><font point-size="24">Delivers the static content<br />and the Internet banking<br />single page application.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"]
      }

    }

    subgraph cluster_51 {
      margin=25
      label=<<font point-size="24">Web Browser</font><br /><font point-size="19">[Deployment Node: Chrome, Firefox, Safari, or Edge]</font>>
      labelloc=b
      color="#888888"
      fontcolor="#000000"
      fillcolor="#ffffff"

      52 [id=52,shape=rect, label=<<font point-size="34">Single-Page<br />Application</font><br /><font point-size="19">[Container: JavaScript and Angular]</font><br /><br /><font point-size="24">Provides all of the Internet<br />banking functionality to<br />customers via their web<br />browser.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"]
    }

  }

  subgraph cluster_63 {
    margin=25
    label=<<font point-size="24">Big Bank plc</font><br /><font point-size="19">[Deployment Node: Big Bank plc data center]</font>>
    labelloc=b
    color="#888888"
    fontcolor="#000000"
    fillcolor="#ffffff"

    subgraph cluster_64 {
      margin=25
      label=<<font point-size="24">bigbank-dev001</font><br /><font point-size="19">[Deployment Node]</font>>
      labelloc=b
      color="#888888"
      fontcolor="#000000"
      fillcolor="#ffffff"

      65 [id=65,shape=rect, label=<<font point-size="34">Mainframe Banking<br />System</font><br /><font point-size="19">[Software System]</font><br /><br /><font point-size="24">Stores all of the core banking<br />information about customers,<br />accounts, transactions, etc.</font>>, style=filled, color="#6b6b6b", fillcolor="#999999", fontcolor="#ffffff"]
    }

  }

  55 -> 52 [id=56, label=<<font point-size="24">Delivers to the customer's<br />web browser</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  52 -> 57 [id=58, label=<<font point-size="24">Makes API calls to</font><br /><font point-size="19">[JSON/HTTPS]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  57 -> 61 [id=62, label=<<font point-size="24">Reads from and writes to</font><br /><font point-size="19">[JDBC]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  57 -> 65 [id=66, label=<<font point-size="24">Makes API calls to</font><br /><font point-size="19">[XML/HTTPS]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
}

digraph {
  compound=true
  graph [fontname="Arial", rankdir=TB, ranksep=1.0, nodesep=1.0]
  node [fontname="Arial", shape=box, margin="0.4,0.3"]
  edge [fontname="Arial"]
  label=<<br /><font point-size="34">Internet Banking System - Deployment - Live</font>>

  subgraph cluster_67 {
    margin=25
    label=<<font point-size="24">Customer's mobile device</font><br /><font point-size="19">[Deployment Node: Apple iOS or Android]</font>>
    labelloc=b
    color="#888888"
    fontcolor="#000000"
    fillcolor="#ffffff"

    68 [id=68,shape=rect, label=<<font point-size="34">Mobile App</font><br /><font point-size="19">[Container: Xamarin]</font><br /><br /><font point-size="24">Provides a limited subset of<br />the Internet banking<br />functionality to customers via<br />their mobile device.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"]
  }

  subgraph cluster_69 {
    margin=25
    label=<<font point-size="24">Customer's computer</font><br /><font point-size="19">[Deployment Node: Microsoft Windows or Apple macOS]</font>>
    labelloc=b
    color="#888888"
    fontcolor="#000000"
    fillcolor="#ffffff"

    subgraph cluster_70 {
      margin=25
      label=<<font point-size="24">Web Browser</font><br /><font point-size="19">[Deployment Node: Chrome, Firefox, Safari, or Edge]</font>>
      labelloc=b
      color="#888888"
      fontcolor="#000000"
      fillcolor="#ffffff"

      71 [id=71,shape=rect, label=<<font point-size="34">Single-Page<br />Application</font><br /><font point-size="19">[Container: JavaScript and Angular]</font><br /><br /><font point-size="24">Provides all of the Internet<br />banking functionality to<br />customers via their web<br />browser.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"]
    }

  }

  subgraph cluster_72 {
    margin=25
    label=<<font point-size="24">Big Bank plc</font><br /><font point-size="19">[Deployment Node: Big Bank plc data center]</font>>
    labelloc=b
    color="#888888"
    fontcolor="#000000"
    fillcolor="#ffffff"

    subgraph cluster_77 {
      margin=25
      label=<<font point-size="24">bigbank-api***</font><br /><font point-size="19">[Deployment Node: Ubuntu 16.04 LTS]</font>>
      labelloc=b
      color="#888888"
      fontcolor="#000000"
      fillcolor="#ffffff"

      subgraph cluster_78 {
        margin=25
        label=<<font point-size="24">Apache Tomcat</font><br /><font point-size="19">[Deployment Node: Apache Tomcat 8.x]</font>>
        labelloc=b
        color="#888888"
        fontcolor="#000000"
        fillcolor="#ffffff"

        79 [id=79,shape=rect, label=<<font point-size="34">API Application</font><br /><font point-size="19">[Container: Java and Spring MVC]</font><br /><br /><font point-size="24">Provides Internet banking<br />functionality via a JSON/HTTPS<br />API.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"]
      }

    }

    subgraph cluster_82 {
      margin=25
      label=<<font point-size="24">bigbank-db01</font><br /><font point-size="19">[Deployment Node: Ubuntu 16.04 LTS]</font>>
      labelloc=b
      color="#888888"
      fontcolor="#000000"
      fillcolor="#ffffff"

      subgraph cluster_83 {
        margin=25
        label=<<font point-size="24">Oracle - Primary</font><br /><font point-size="19">[Deployment Node: Oracle 12c]</font>>
        labelloc=b
        color="#888888"
        fontcolor="#000000"
        fillcolor="#ffffff"

        84 [id=84,shape=cylinder, label=<<font point-size="34">Database</font><br /><font point-size="19">[Container: Oracle Database Schema]</font><br /><br /><font point-size="24">Stores user registration<br />information, hashed<br />authentication credentials,<br />access logs, etc.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"]
      }

    }

    subgraph cluster_86 {
      margin=25
      label=<<font point-size="24">bigbank-db02</font><br /><font point-size="19">[Deployment Node: Ubuntu 16.04 LTS]</font>>
      labelloc=b
      color="#888888"
      fontcolor="#000000"
      fillcolor="#ffffff"

      subgraph cluster_87 {
        margin=25
        label=<<font point-size="24">Oracle - Secondary</font><br /><font point-size="19">[Deployment Node: Oracle 12c]</font>>
        labelloc=b
        color="#888888"
        fontcolor="#000000"
        fillcolor="#ffffff"

        88 [id=88,shape=cylinder, label=<<font point-size="34">Database</font><br /><font point-size="19">[Container: Oracle Database Schema]</font><br /><br /><font point-size="24">Stores user registration<br />information, hashed<br />authentication credentials,<br />access logs, etc.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"]
      }

    }

    subgraph cluster_90 {
      margin=25
      label=<<font point-size="24">bigbank-prod001</font><br /><font point-size="19">[Deployment Node]</font>>
      labelloc=b
      color="#888888"
      fontcolor="#000000"
      fillcolor="#ffffff"

      91 [id=91,shape=rect, label=<<font point-size="34">Mainframe Banking<br />System</font><br /><font point-size="19">[Software System]</font><br /><br /><font point-size="24">Stores all of the core banking<br />information about customers,<br />accounts, transactions, etc.</font>>, style=filled, color="#6b6b6b", fillcolor="#999999", fontcolor="#ffffff"]
    }

    subgraph cluster_73 {
      margin=25
      label=<<font point-size="24">bigbank-web***</font><br /><font point-size="19">[Deployment Node: Ubuntu 16.04 LTS]</font>>
      labelloc=b
      color="#888888"
      fontcolor="#000000"
      fillcolor="#ffffff"

      subgraph cluster_74 {
        margin=25
        label=<<font point-size="24">Apache Tomcat</font><br /><font point-size="19">[Deployment Node: Apache Tomcat 8.x]</font>>
        labelloc=b
        color="#888888"
        fontcolor="#000000"
        fillcolor="#ffffff"

        75 [id=75,shape=rect, label=<<font point-size="34">Web Application</font><br /><font point-size="19">[Container: Java and Spring MVC]</font><br /><br /><font point-size="24">Delivers the static content<br />and the Internet banking<br />single page application.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"]
      }

    }

  }

  75 -> 71 [id=76, label=<<font point-size="24">Delivers to the customer's<br />web browser</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  71 -> 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"]
  68 -> 79 [id=81, label=<<font point-size="24">Makes API calls to</font><br /><font point-size="19">[JSON/HTTPS]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  79 -> 84 [id=85, label=<<font point-size="24">Reads from and writes to</font><br /><font point-size="19">[JDBC]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  79 -> 88 [id=89, label=<<font point-size="24">Reads from and writes to</font><br /><font point-size="19">[JDBC]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  79 -> 91 [id=92, label=<<font point-size="24">Makes API calls to</font><br /><font point-size="19">[XML/HTTPS]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  84 -> 88 [id=93, label=<<font point-size="24">Replicates data to</font>>, style="dashed", color="#707070", fontcolor="#707070",ltail=cluster_83,lhead=cluster_87]
}

digraph {
  compound=true
  graph [fontname="Arial", rankdir=TB, ranksep=1.0, nodesep=1.0]
  node [fontname="Arial", shape=box, margin="0.4,0.3"]
  edge [fontname="Arial"]
  label=<<br /><font point-size="34">API Application - Dynamic</font><br /><font point-size="24">Summarises how the sign in feature works in the single-page application.</font>>

  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"]
  }

  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"]

  8 -> 12 [id=32, label=<<font point-size="24">1. Submits credentials to</font><br /><font point-size="19">[JSON/HTTPS]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  12 -> 15 [id=40, label=<<font point-size="24">2. Validates credentials<br />using</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  15 -> 18 [id=44, label=<<font point-size="24">3. select * from users<br />where username = ?</font><br /><font point-size="19">[JDBC]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  18 -> 15 [id=44, label=<<font point-size="24">4. Returns user data to</font><br /><font point-size="19">[JDBC]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  15 -> 12 [id=40, label=<<font point-size="24">5. Returns true if the<br />hashed password matches</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  12 -> 8 [id=32, label=<<font point-size="24">6. Sends back an<br />authentication token to</font><br /><font point-size="19">[JSON/HTTPS]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
}

digraph {
  compound=true
  graph [fontname="Arial", rankdir=TB, ranksep=1.0, nodesep=1.0]
  node [fontname="Arial", shape=box, margin="0.4,0.3"]
  edge [fontname="Arial"]
  label=<<br /><font point-size="34">Internet Banking System - System Context</font>>

  subgraph cluster_enterprise {
    margin=25
    label=<<font point-size="24"><br />Big Bank plc</font><br /><font point-size="19">[Enterprise]</font>>
    labelloc=b
    color="#444444"
    fontcolor="#444444"
    fillcolor="#ffffff"

    4 [id=4,shape=rect, label=<<font point-size="34">Mainframe Banking<br />System</font><br /><font point-size="19">[Software System]</font><br /><br /><font point-size="24">Stores all of the core banking<br />information about customers,<br />accounts, transactions, etc.</font>>, style=filled, color="#6b6b6b", fillcolor="#999999", fontcolor="#ffffff"]
    5 [id=5,shape=rect, label=<<font point-size="34">E-mail System</font><br /><font point-size="19">[Software System]</font><br /><br /><font point-size="24">The internal Microsoft<br />Exchange e-mail system.</font>>, style=filled, color="#6b6b6b", fillcolor="#999999", fontcolor="#ffffff"]
    7 [id=7,shape=rect, label=<<font point-size="34">Internet Banking<br />System</font><br /><font point-size="19">[Software System]</font><br /><br /><font point-size="24">Allows customers to view<br />information about their bank<br />accounts, and make payments.</font>>, style=filled, color="#0b4884", fillcolor="#1168bd", fontcolor="#ffffff"]
  }

  1 [id=1,shape=rect, label=<<font point-size="32">Personal Banking<br />Customer</font><br /><font point-size="17">[Person]</font><br /><br /><font point-size="22">A customer of the bank, with<br />personal bank accounts.</font>>, style=filled, color="#052e56", fillcolor="#08427b", fontcolor="#ffffff"]

  1 -> 7 [id=19, label=<<font point-size="24">Views account balances,<br />and makes payments using</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  7 -> 4 [id=20, label=<<font point-size="24">Gets account information<br />from, and makes payments<br />using</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  7 -> 5 [id=21, label=<<font point-size="24">Sends e-mail using</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  5 -> 1 [id=22, label=<<font point-size="24">Sends e-mails to</font>>, style="dashed", color="#707070", fontcolor="#707070"]
}

digraph {
  compound=true
  graph [fontname="Arial", rankdir=TB, ranksep=1.0, nodesep=1.0]
  node [fontname="Arial", shape=box, margin="0.4,0.3"]
  edge [fontname="Arial"]
  label=<<br /><font point-size="34">System Landscape for Big Bank plc</font>>

  subgraph cluster_enterprise {
    margin=25
    label=<<font point-size="24"><br />Big Bank plc</font><br /><font point-size="19">[Enterprise]</font>>
    labelloc=b
    color="#444444"
    fontcolor="#444444"
    fillcolor="#ffffff"

    2 [id=2,shape=rect, label=<<font point-size="32">Customer Service<br />Staff</font><br /><font point-size="17">[Person]</font><br /><br /><font point-size="22">Customer service staff within<br />the bank.</font>>, style=filled, color="#6b6b6b", fillcolor="#999999", fontcolor="#ffffff"]
    3 [id=3,shape=rect, label=<<font point-size="32">Back Office Staff</font><br /><font point-size="17">[Person]</font><br /><br /><font point-size="22">Administration and support<br />staff within the bank.</font>>, style=filled, color="#6b6b6b", fillcolor="#999999", fontcolor="#ffffff"]
    4 [id=4,shape=rect, label=<<font point-size="34">Mainframe Banking<br />System</font><br /><font point-size="19">[Software System]</font><br /><br /><font point-size="24">Stores all of the core banking<br />information about customers,<br />accounts, transactions, etc.</font>>, style=filled, color="#6b6b6b", fillcolor="#999999", fontcolor="#ffffff"]
    5 [id=5,shape=rect, label=<<font point-size="34">E-mail System</font><br /><font point-size="19">[Software System]</font><br /><br /><font point-size="24">The internal Microsoft<br />Exchange e-mail system.</font>>, style=filled, color="#6b6b6b", fillcolor="#999999", fontcolor="#ffffff"]
    6 [id=6,shape=rect, label=<<font point-size="34">ATM</font><br /><font point-size="19">[Software System]</font><br /><br /><font point-size="24">Allows customers to withdraw<br />cash.</font>>, style=filled, color="#6b6b6b", fillcolor="#999999", fontcolor="#ffffff"]
    7 [id=7,shape=rect, label=<<font point-size="34">Internet Banking<br />System</font><br /><font point-size="19">[Software System]</font><br /><br /><font point-size="24">Allows customers to view<br />information about their bank<br />accounts, and make payments.</font>>, style=filled, color="#0b4884", fillcolor="#1168bd", fontcolor="#ffffff"]
  }

  1 [id=1,shape=rect, label=<<font point-size="32">Personal Banking<br />Customer</font><br /><font point-size="17">[Person]</font><br /><br /><font point-size="22">A customer of the bank, with<br />personal bank accounts.</font>>, style=filled, color="#052e56", fillcolor="#08427b", fontcolor="#ffffff"]

  1 -> 7 [id=19, label=<<font point-size="24">Views account balances,<br />and makes payments using</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  7 -> 4 [id=20, label=<<font point-size="24">Gets account information<br />from, and makes payments<br />using</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  7 -> 5 [id=21, label=<<font point-size="24">Sends e-mail using</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  5 -> 1 [id=22, label=<<font point-size="24">Sends e-mails to</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  1 -> 2 [id=23, label=<<font point-size="24">Asks questions to</font><br /><font point-size="19">[Telephone]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  2 -> 4 [id=24, label=<<font point-size="24">Uses</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  1 -> 6 [id=25, label=<<font point-size="24">Withdraws cash using</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  6 -> 4 [id=26, label=<<font point-size="24">Uses</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  3 -> 4 [id=27, label=<<font point-size="24">Uses</font>>, style="dashed", color="#707070", fontcolor="#707070"]
}

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: "JDBC"
        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: "JDBC"
        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: "JDBC"
        color: "#707070"

      - to: "15"
        label: "4. Returns user data to"
        description: "JDBC"
        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: "JDBC"
        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: "JDBC"
        color: "#707070"
      - from: "79"
        to: "88"
        label: "Reads from and writes to"
        description: "JDBC"
        color: "#707070"
      - from: "79"
        to: "91"
        label: "Makes API calls to"
        description: "XML/HTTPS"
        color: "#707070"