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 are unavailable on this demo page - we recommend signing up for a free account and/or using the Structurizr CLI.

Structurizr CLI | VS Code extensions | Examples: Getting Started - Amazon Web Services - Big Bank plc | Help

!docs, !adrs, !include, logo, icon are only available via the CLI

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

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

skinparam {
  shadowing false
  arrowFontSize 10
  defaultTextAlignment center
  wrapWidth 200
  maxMessageSize 100
  PackageBorderColor<<group>> #cccccc
  PackageFontColor<<group>> #cccccc
}
hide stereotype
top to bottom direction

skinparam rectangle<<13>> {
  BackgroundColor #85bbf0
  FontColor #000000
  BorderColor #5d82a8
}
skinparam database<<18>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2e6295
}
skinparam rectangle<<17>> {
  BackgroundColor #85bbf0
  FontColor #000000
  BorderColor #5d82a8
}
skinparam rectangle<<5>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6b6b6b
}
skinparam rectangle<<4>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6b6b6b
}
skinparam rectangle<<16>> {
  BackgroundColor #85bbf0
  FontColor #000000
  BorderColor #5d82a8
}
skinparam rectangle<<9>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2e6295
}
skinparam rectangle<<14>> {
  BackgroundColor #85bbf0
  FontColor #000000
  BorderColor #5d82a8
}
skinparam rectangle<<15>> {
  BackgroundColor #85bbf0
  FontColor #000000
  BorderColor #5d82a8
}
skinparam rectangle<<12>> {
  BackgroundColor #85bbf0
  FontColor #000000
  BorderColor #5d82a8
}
skinparam rectangle<<8>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2e6295
}

rectangle "==Mainframe Banking System\n<size:10>[Software System]</size>\n\nStores all of the core banking information about customers, accounts, transactions, etc." <<4>> as 4
rectangle "==E-mail System\n<size:10>[Software System]</size>\n\nThe internal Microsoft Exchange e-mail system." <<5>> as 5
database "==Database\n<size:10>[Container: Oracle Database Schema]</size>\n\nStores user registration information, hashed authentication credentials, access logs, etc." <<18>> as 18
rectangle "==Single-Page Application\n<size:10>[Container: JavaScript and Angular]</size>\n\nProvides all of the Internet banking functionality to customers via their web browser." <<8>> as 8
rectangle "==Mobile App\n<size:10>[Container: Xamarin]</size>\n\nProvides a limited subset of the Internet banking functionality to customers via their mobile device." <<9>> as 9

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

  rectangle "==Sign In Controller\n<size:10>[Component: Spring MVC Rest Controller]</size>\n\nAllows users to sign in to the Internet Banking System." <<12>> as 12
  rectangle "==Accounts Summary Controller\n<size:10>[Component: Spring MVC Rest Controller]</size>\n\nProvides customers with a summary of their bank accounts." <<13>> as 13
  rectangle "==Reset Password Controller\n<size:10>[Component: Spring MVC Rest Controller]</size>\n\nAllows users to reset their passwords with a single use URL." <<14>> as 14
  rectangle "==Security Component\n<size:10>[Component: Spring Bean]</size>\n\nProvides functionality related to signing in, changing passwords, etc." <<15>> as 15
  rectangle "==Mainframe Banking System Facade\n<size:10>[Component: Spring Bean]</size>\n\nA facade onto the mainframe banking system." <<16>> as 16
  rectangle "==E-mail Component\n<size:10>[Component: Spring Bean]</size>\n\nSends e-mails to users." <<17>> as 17
}

8 .[#707070,thickness=2].> 12 : "Makes API calls to\n<size:8>[JSON/HTTPS]</size>"
8 .[#707070,thickness=2].> 13 : "Makes API calls to\n<size:8>[JSON/HTTPS]</size>"
8 .[#707070,thickness=2].> 14 : "Makes API calls to\n<size:8>[JSON/HTTPS]</size>"
9 .[#707070,thickness=2].> 12 : "Makes API calls to\n<size:8>[JSON/HTTPS]</size>"
9 .[#707070,thickness=2].> 13 : "Makes API calls to\n<size:8>[JSON/HTTPS]</size>"
9 .[#707070,thickness=2].> 14 : "Makes API calls to\n<size:8>[JSON/HTTPS]</size>"
12 .[#707070,thickness=2].> 15 : "Uses"
13 .[#707070,thickness=2].> 16 : "Uses"
14 .[#707070,thickness=2].> 15 : "Uses"
14 .[#707070,thickness=2].> 17 : "Uses"
15 .[#707070,thickness=2].> 18 : "Reads from and writes to\n<size:8>[JDBC]</size>"
16 .[#707070,thickness=2].> 4 : "Makes API calls to\n<size:8>[XML/HTTPS]</size>"
17 .[#707070,thickness=2].> 5 : "Sends e-mail using"
@enduml

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

@startuml
title Internet Banking System - Containers

skinparam {
  shadowing false
  arrowFontSize 10
  defaultTextAlignment center
  wrapWidth 200
  maxMessageSize 100
  PackageBorderColor<<group>> #cccccc
  PackageFontColor<<group>> #cccccc
}
hide stereotype
top to bottom direction

skinparam rectangle<<11>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2e6295
}
skinparam database<<18>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2e6295
}
skinparam rectangle<<5>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6b6b6b
}
skinparam rectangle<<4>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6b6b6b
}
skinparam rectangle<<9>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2e6295
}
skinparam person<<1>> {
  BackgroundColor #08427b
  FontColor #ffffff
  BorderColor #052e56
}
skinparam rectangle<<8>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2e6295
}
skinparam rectangle<<10>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2e6295
}

person "==Personal Banking Customer\n<size:10>[Person]</size>\n\nA customer of the bank, with personal bank accounts." <<1>> as 1
rectangle "==Mainframe Banking System\n<size:10>[Software System]</size>\n\nStores all of the core banking information about customers, accounts, transactions, etc." <<4>> as 4
rectangle "==E-mail System\n<size:10>[Software System]</size>\n\nThe internal Microsoft Exchange e-mail system." <<5>> as 5

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

  rectangle "==Web Application\n<size:10>[Container: Java and Spring MVC]</size>\n\nDelivers the static content and the Internet banking single page application." <<10>> as 10
  rectangle "==API Application\n<size:10>[Container: Java and Spring MVC]</size>\n\nProvides Internet banking functionality via a JSON/HTTPS API." <<11>> as 11
  database "==Database\n<size:10>[Container: Oracle Database Schema]</size>\n\nStores user registration information, hashed authentication credentials, access logs, etc." <<18>> as 18
  rectangle "==Single-Page Application\n<size:10>[Container: JavaScript and Angular]</size>\n\nProvides all of the Internet banking functionality to customers via their web browser." <<8>> as 8
  rectangle "==Mobile App\n<size:10>[Container: Xamarin]</size>\n\nProvides a limited subset of the Internet banking functionality to customers via their mobile device." <<9>> as 9
}

5 .[#707070,thickness=2].> 1 : "Sends e-mails to"
1 .[#707070,thickness=2].> 10 : "Visits bigbank.com/ib using\n<size:8>[HTTPS]</size>"
1 .[#707070,thickness=2].> 8 : "Views account balances, and makes payments using"
1 .[#707070,thickness=2].> 9 : "Views account balances, and makes payments using"
10 .[#707070,thickness=2].> 8 : "Delivers to the customer's web browser"
8 .[#707070,thickness=2].> 11 : "Makes API calls to\n<size:8>[JSON/HTTPS]</size>"
9 .[#707070,thickness=2].> 11 : "Makes API calls to\n<size:8>[JSON/HTTPS]</size>"
11 .[#707070,thickness=2].> 18 : "Reads from and writes to\n<size:8>[JDBC]</size>"
11 .[#707070,thickness=2].> 4 : "Makes API calls to\n<size:8>[XML/HTTPS]</size>"
11 .[#707070,thickness=2].> 5 : "Sends e-mail using"
@enduml

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

@startuml
title Internet Banking System - Deployment - Development

skinparam {
  shadowing false
  arrowFontSize 10
  defaultTextAlignment center
  wrapWidth 200
  maxMessageSize 100
  PackageBorderColor<<group>> #cccccc
  PackageFontColor<<group>> #cccccc
}
hide stereotype
top to bottom direction

skinparam rectangle<<57>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2e6295
}
skinparam node<<54>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #888888
}
skinparam node<<63>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #888888
}
skinparam database<<61>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2e6295
}
skinparam node<<60>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #888888
}
skinparam node<<50>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #888888
}
skinparam node<<59>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #888888
}
skinparam node<<53>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #888888
}
skinparam rectangle<<65>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6b6b6b
}
skinparam rectangle<<52>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2e6295
}
skinparam rectangle<<55>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2e6295
}
skinparam node<<51>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #888888
}
skinparam node<<64>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #888888
}

node "Developer Laptop\n[Deployment Node: Microsoft Windows 10 or Apple macOS]" <<50>> as 50 {
  node "Docker Container - Database Server\n[Deployment Node: Docker]" <<59>> as 59 {
    node "Database Server\n[Deployment Node: Oracle 12c]" <<60>> as 60 {
      database "==Database\n<size:10>[Container: Oracle Database Schema]</size>\n\nStores user registration information, hashed authentication credentials, access logs, etc." <<61>> as 61
    }

  }

  node "Docker Container - Web Server\n[Deployment Node: Docker]" <<53>> as 53 {
    node "Apache Tomcat\n[Deployment Node: Apache Tomcat 8.x]" <<54>> as 54 {
      rectangle "==API Application\n<size:10>[Container: Java and Spring MVC]</size>\n\nProvides Internet banking functionality via a JSON/HTTPS API." <<57>> as 57
      rectangle "==Web Application\n<size:10>[Container: Java and Spring MVC]</size>\n\nDelivers the static content and the Internet banking single page application." <<55>> as 55
    }

  }

  node "Web Browser\n[Deployment Node: Chrome, Firefox, Safari, or Edge]" <<51>> as 51 {
    rectangle "==Single-Page Application\n<size:10>[Container: JavaScript and Angular]</size>\n\nProvides all of the Internet banking functionality to customers via their web browser." <<52>> as 52
  }

}

node "Big Bank plc\n[Deployment Node: Big Bank plc data center]" <<63>> as 63 {
  node "bigbank-dev001\n[Deployment Node]" <<64>> as 64 {
    rectangle "==Mainframe Banking System\n<size:10>[Software System]</size>\n\nStores all of the core banking information about customers, accounts, transactions, etc." <<65>> as 65
  }

}

55 .[#707070,thickness=2].> 52 : "Delivers to the customer's web browser"
52 .[#707070,thickness=2].> 57 : "Makes API calls to\n<size:8>[JSON/HTTPS]</size>"
57 .[#707070,thickness=2].> 61 : "Reads from and writes to\n<size:8>[JDBC]</size>"
57 .[#707070,thickness=2].> 65 : "Makes API calls to\n<size:8>[XML/HTTPS]</size>"
@enduml

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

@startuml
title Internet Banking System - Deployment - Live

skinparam {
  shadowing false
  arrowFontSize 10
  defaultTextAlignment center
  wrapWidth 200
  maxMessageSize 100
  PackageBorderColor<<group>> #cccccc
  PackageFontColor<<group>> #cccccc
}
hide stereotype
top to bottom direction

skinparam rectangle<<79>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2e6295
}
skinparam node<<78>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #888888
}
skinparam node<<74>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #888888
}
skinparam node<<72>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #888888
}
skinparam node<<69>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #888888
}
skinparam node<<67>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #888888
}
skinparam database<<88>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2e6295
}
skinparam database<<84>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2e6295
}
skinparam rectangle<<91>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6b6b6b
}
skinparam rectangle<<68>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2e6295
}
skinparam node<<83>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #888888
}
skinparam node<<87>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #888888
}
skinparam rectangle<<71>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2e6295
}
skinparam rectangle<<75>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2e6295
}
skinparam node<<70>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #888888
}
skinparam node<<77>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #888888
}
skinparam node<<82>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #888888
}
skinparam node<<86>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #888888
}
skinparam node<<90>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #888888
}
skinparam node<<73>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #888888
}

node "Customer's mobile device\n[Deployment Node: Apple iOS or Android]" <<67>> as 67 {
  rectangle "==Mobile App\n<size:10>[Container: Xamarin]</size>\n\nProvides a limited subset of the Internet banking functionality to customers via their mobile device." <<68>> as 68
}

node "Customer's computer\n[Deployment Node: Microsoft Windows or Apple macOS]" <<69>> as 69 {
  node "Web Browser\n[Deployment Node: Chrome, Firefox, Safari, or Edge]" <<70>> as 70 {
    rectangle "==Single-Page Application\n<size:10>[Container: JavaScript and Angular]</size>\n\nProvides all of the Internet banking functionality to customers via their web browser." <<71>> as 71
  }

}

node "Big Bank plc\n[Deployment Node: Big Bank plc data center]" <<72>> as 72 {
  node "bigbank-api*** (x8)\n[Deployment Node: Ubuntu 16.04 LTS]" <<77>> as 77 {
    node "Apache Tomcat\n[Deployment Node: Apache Tomcat 8.x]" <<78>> as 78 {
      rectangle "==API Application\n<size:10>[Container: Java and Spring MVC]</size>\n\nProvides Internet banking functionality via a JSON/HTTPS API." <<79>> as 79
    }

  }

  node "bigbank-db01\n[Deployment Node: Ubuntu 16.04 LTS]" <<82>> as 82 {
    node "Oracle - Primary\n[Deployment Node: Oracle 12c]" <<83>> as 83 {
      database "==Database\n<size:10>[Container: Oracle Database Schema]</size>\n\nStores user registration information, hashed authentication credentials, access logs, etc." <<84>> as 84
    }

  }

  node "bigbank-db02\n[Deployment Node: Ubuntu 16.04 LTS]" <<86>> as 86 {
    node "Oracle - Secondary\n[Deployment Node: Oracle 12c]" <<87>> as 87 {
      database "==Database\n<size:10>[Container: Oracle Database Schema]</size>\n\nStores user registration information, hashed authentication credentials, access logs, etc." <<88>> as 88
    }

  }

  node "bigbank-prod001\n[Deployment Node]" <<90>> as 90 {
    rectangle "==Mainframe Banking System\n<size:10>[Software System]</size>\n\nStores all of the core banking information about customers, accounts, transactions, etc." <<91>> as 91
  }

  node "bigbank-web*** (x4)\n[Deployment Node: Ubuntu 16.04 LTS]" <<73>> as 73 {
    node "Apache Tomcat\n[Deployment Node: Apache Tomcat 8.x]" <<74>> as 74 {
      rectangle "==Web Application\n<size:10>[Container: Java and Spring MVC]</size>\n\nDelivers the static content and the Internet banking single page application." <<75>> as 75
    }

  }

}

75 .[#707070,thickness=2].> 71 : "Delivers to the customer's web browser"
68 .[#707070,thickness=2].> 79 : "Makes API calls to\n<size:8>[JSON/HTTPS]</size>"
71 .[#707070,thickness=2].> 79 : "Makes API calls to\n<size:8>[JSON/HTTPS]</size>"
79 .[#707070,thickness=2].> 84 : "Reads from and writes to\n<size:8>[JDBC]</size>"
79 .[#707070,thickness=2].> 88 : "Reads from and writes to\n<size:8>[JDBC]</size>"
79 .[#707070,thickness=2].> 91 : "Makes API calls to\n<size:8>[XML/HTTPS]</size>"
83 .[#707070,thickness=2].> 87 : "Replicates data to"
@enduml

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

@startuml
title API Application - Dynamic

skinparam {
  shadowing false
  arrowFontSize 10
  defaultTextAlignment center
  wrapWidth 200
  maxMessageSize 100
  PackageBorderColor<<group>> #cccccc
  PackageFontColor<<group>> #cccccc
}
hide stereotype
top to bottom direction

skinparam database<<18>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2e6295
}
skinparam rectangle<<15>> {
  BackgroundColor #85bbf0
  FontColor #000000
  BorderColor #5d82a8
}
skinparam rectangle<<12>> {
  BackgroundColor #85bbf0
  FontColor #000000
  BorderColor #5d82a8
}
skinparam rectangle<<8>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2e6295
}

database "==Database\n<size:10>[Container: Oracle Database Schema]</size>\n\nStores user registration information, hashed authentication credentials, access logs, etc." <<18>> as 18
rectangle "==Single-Page Application\n<size:10>[Container: JavaScript and Angular]</size>\n\nProvides all of the Internet banking functionality to customers via their web browser." <<8>> as 8

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

  rectangle "==Sign In Controller\n<size:10>[Component: Spring MVC Rest Controller]</size>\n\nAllows users to sign in to the Internet Banking System." <<12>> as 12
  rectangle "==Security Component\n<size:10>[Component: Spring Bean]</size>\n\nProvides functionality related to signing in, changing passwords, etc." <<15>> as 15
}

8 .[#707070,thickness=2].> 12 : "1. Submits credentials to\n<size:8>[JSON/HTTPS]</size>"
12 .[#707070,thickness=2].> 15 : "2. Validates credentials using"
15 .[#707070,thickness=2].> 18 : "3. select * from users where username = ?\n<size:8>[JDBC]</size>"
15 <.[#707070,thickness=2]. 18 : "4. Returns user data to\n<size:8>[JDBC]</size>"
12 <.[#707070,thickness=2]. 15 : "5. Returns true if the hashed password matches"
8 <.[#707070,thickness=2]. 12 : "6. Sends back an authentication token to\n<size:8>[JSON/HTTPS]</size>"
@enduml

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

@startuml
title Internet Banking System - System Context

skinparam {
  shadowing false
  arrowFontSize 10
  defaultTextAlignment center
  wrapWidth 200
  maxMessageSize 100
  PackageBorderColor<<group>> #cccccc
  PackageFontColor<<group>> #cccccc
}
hide stereotype
top to bottom direction

skinparam rectangle<<5>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6b6b6b
}
skinparam rectangle<<7>> {
  BackgroundColor #1168bd
  FontColor #ffffff
  BorderColor #0b4884
}
skinparam rectangle<<4>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6b6b6b
}
skinparam person<<1>> {
  BackgroundColor #08427b
  FontColor #ffffff
  BorderColor #052e56
}

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

  rectangle "==Mainframe Banking System\n<size:10>[Software System]</size>\n\nStores all of the core banking information about customers, accounts, transactions, etc." <<4>> as 4
  rectangle "==E-mail System\n<size:10>[Software System]</size>\n\nThe internal Microsoft Exchange e-mail system." <<5>> as 5
  rectangle "==Internet Banking System\n<size:10>[Software System]</size>\n\nAllows customers to view information about their bank accounts, and make payments." <<7>> as 7
}

person "==Personal Banking Customer\n<size:10>[Person]</size>\n\nA customer of the bank, with personal bank accounts." <<1>> as 1

1 .[#707070,thickness=2].> 7 : "Views account balances, and makes payments using"
7 .[#707070,thickness=2].> 4 : "Gets account information from, and makes payments using"
7 .[#707070,thickness=2].> 5 : "Sends e-mail using"
5 .[#707070,thickness=2].> 1 : "Sends e-mails to"
@enduml

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

@startuml
title System Landscape for Big Bank plc

skinparam {
  shadowing false
  arrowFontSize 10
  defaultTextAlignment center
  wrapWidth 200
  maxMessageSize 100
  PackageBorderColor<<group>> #cccccc
  PackageFontColor<<group>> #cccccc
}
hide stereotype
top to bottom direction

skinparam rectangle<<6>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6b6b6b
}
skinparam person<<3>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6b6b6b
}
skinparam person<<2>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6b6b6b
}
skinparam rectangle<<5>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6b6b6b
}
skinparam rectangle<<7>> {
  BackgroundColor #1168bd
  FontColor #ffffff
  BorderColor #0b4884
}
skinparam rectangle<<4>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6b6b6b
}
skinparam person<<1>> {
  BackgroundColor #08427b
  FontColor #ffffff
  BorderColor #052e56
}

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

  person "==Customer Service Staff\n<size:10>[Person]</size>\n\nCustomer service staff within the bank." <<2>> as 2
  person "==Back Office Staff\n<size:10>[Person]</size>\n\nAdministration and support staff within the bank." <<3>> as 3
  rectangle "==Mainframe Banking System\n<size:10>[Software System]</size>\n\nStores all of the core banking information about customers, accounts, transactions, etc." <<4>> as 4
  rectangle "==E-mail System\n<size:10>[Software System]</size>\n\nThe internal Microsoft Exchange e-mail system." <<5>> as 5
  rectangle "==ATM\n<size:10>[Software System]</size>\n\nAllows customers to withdraw cash." <<6>> as 6
  rectangle "==Internet Banking System\n<size:10>[Software System]</size>\n\nAllows customers to view information about their bank accounts, and make payments." <<7>> as 7
}

person "==Personal Banking Customer\n<size:10>[Person]</size>\n\nA customer of the bank, with personal bank accounts." <<1>> as 1

1 .[#707070,thickness=2].> 7 : "Views account balances, and makes payments using"
7 .[#707070,thickness=2].> 4 : "Gets account information from, and makes payments using"
7 .[#707070,thickness=2].> 5 : "Sends e-mail using"
5 .[#707070,thickness=2].> 1 : "Sends e-mails to"
1 .[#707070,thickness=2].> 2 : "Asks questions to\n<size:8>[Telephone]</size>"
2 .[#707070,thickness=2].> 4 : "Uses"
1 .[#707070,thickness=2].> 6 : "Withdraws cash using"
6 .[#707070,thickness=2].> 4 : "Uses"
3 .[#707070,thickness=2].> 4 : "Uses"
@enduml

(this will send your diagram content to http://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

!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml
!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml
LAYOUT_WITH_LEGEND()

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

Container_Boundary("11_boundary", "API Application") {
  Component(12, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System.")
  Component(13, "Accounts Summary Controller", "Spring MVC Rest Controller", "Provides customers with a summary of their bank accounts.")
  Component(14, "Reset Password Controller", "Spring MVC Rest Controller", "Allows users to reset their passwords with a single use URL.")
  Component(15, "Security Component", "Spring Bean", "Provides functionality related to signing in, changing passwords, etc.")
  Component(16, "Mainframe Banking System Facade", "Spring Bean", "A facade onto the mainframe banking system.")
  Component(17, "E-mail Component", "Spring Bean", "Sends e-mails to users.")
}

Rel_D(8, 12, "Makes API calls to", "JSON/HTTPS")
Rel_D(8, 13, "Makes API calls to", "JSON/HTTPS")
Rel_D(8, 14, "Makes API calls to", "JSON/HTTPS")
Rel_D(9, 12, "Makes API calls to", "JSON/HTTPS")
Rel_D(9, 13, "Makes API calls to", "JSON/HTTPS")
Rel_D(9, 14, "Makes API calls to", "JSON/HTTPS")
Rel_D(12, 15, "Uses")
Rel_D(13, 16, "Uses")
Rel_D(14, 15, "Uses")
Rel_D(14, 17, "Uses")
Rel_D(15, 18, "Reads from and writes to", "JDBC")
Rel_D(16, 4, "Makes API calls to", "XML/HTTPS")
Rel_D(17, 5, "Sends e-mail using")
@enduml

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

@startuml
title Internet Banking System - Containers

!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml
!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
LAYOUT_WITH_LEGEND()

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

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

Rel_D(5, 1, "Sends e-mails to")
Rel_D(1, 10, "Visits bigbank.com/ib using", "HTTPS")
Rel_D(1, 8, "Views account balances, and makes payments using")
Rel_D(1, 9, "Views account balances, and makes payments using")
Rel_D(10, 8, "Delivers to the customer's web browser")
Rel_D(8, 11, "Makes API calls to", "JSON/HTTPS")
Rel_D(9, 11, "Makes API calls to", "JSON/HTTPS")
Rel_D(11, 18, "Reads from and writes to", "JDBC")
Rel_D(11, 4, "Makes API calls to", "XML/HTTPS")
Rel_D(11, 5, "Sends e-mail using")
@enduml

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

@startuml
title Internet Banking System - Deployment - Development

!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml
!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml
LAYOUT_WITH_LEGEND()

Deployment_Node(50, "Developer Laptop", "Microsoft Windows 10 or Apple macOS") {
  Deployment_Node(59, "Docker Container - Database Server", "Docker") {
    Deployment_Node(60, "Database Server", "Oracle 12c") {
      ContainerDb(61, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
    }

  }

  Deployment_Node(53, "Docker Container - Web Server", "Docker") {
    Deployment_Node(54, "Apache Tomcat", "Apache Tomcat 8.x") {
      Container(57, "API Application", "Java and Spring MVC", "Provides Internet banking functionality via a JSON/HTTPS API.")
      Container(55, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet banking single page application.")
    }

  }

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

}

Deployment_Node(63, "Big Bank plc", "Big Bank plc data center") {
  Deployment_Node(64, "bigbank-dev001") {
    System(65, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
  }

}

Rel_D(55, 52, "Delivers to the customer's web browser")
Rel_D(52, 57, "Makes API calls to", "JSON/HTTPS")
Rel_D(57, 61, "Reads from and writes to", "JDBC")
Rel_D(57, 65, "Makes API calls to", "XML/HTTPS")
@enduml

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

@startuml
title Internet Banking System - Deployment - Live

!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml
!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml
LAYOUT_WITH_LEGEND()

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

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

}

Deployment_Node(72, "Big Bank plc", "Big Bank plc data center") {
  Deployment_Node(77, "bigbank-api*** (x8)", "Ubuntu 16.04 LTS") {
    Deployment_Node(78, "Apache Tomcat", "Apache Tomcat 8.x") {
      Container(79, "API Application", "Java and Spring MVC", "Provides Internet banking functionality via a JSON/HTTPS API.")
    }

  }

  Deployment_Node(82, "bigbank-db01", "Ubuntu 16.04 LTS") {
    Deployment_Node(83, "Oracle - Primary", "Oracle 12c") {
      ContainerDb(84, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
    }

  }

  Deployment_Node(86, "bigbank-db02", "Ubuntu 16.04 LTS") {
    Deployment_Node(87, "Oracle - Secondary", "Oracle 12c") {
      ContainerDb(88, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
    }

  }

  Deployment_Node(90, "bigbank-prod001") {
    System(91, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
  }

  Deployment_Node(73, "bigbank-web*** (x4)", "Ubuntu 16.04 LTS") {
    Deployment_Node(74, "Apache Tomcat", "Apache Tomcat 8.x") {
      Container(75, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet banking single page application.")
    }

  }

}

Rel_D(75, 71, "Delivers to the customer's web browser")
Rel_D(68, 79, "Makes API calls to", "JSON/HTTPS")
Rel_D(71, 79, "Makes API calls to", "JSON/HTTPS")
Rel_D(79, 84, "Reads from and writes to", "JDBC")
Rel_D(79, 88, "Reads from and writes to", "JDBC")
Rel_D(79, 91, "Makes API calls to", "XML/HTTPS")
Rel_D(83, 87, "Replicates data to")
@enduml

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

@startuml
title API Application - Dynamic

!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml
!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml
LAYOUT_WITH_LEGEND()

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

Container_Boundary("11_boundary", "API Application") {
  Component(12, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System.")
  Component(15, "Security Component", "Spring Bean", "Provides functionality related to signing in, changing passwords, etc.")
}

Rel_D(8, 12, "1. Submits credentials to", "JSON/HTTPS")
Rel_D(12, 15, "2. Validates credentials using")
Rel_D(15, 18, "3. select * from users where username = ?", "JDBC")
Rel_D(18, 15, "4. Returns user data to", "JDBC")
Rel_D(15, 12, "5. Returns true if the hashed password matches")
Rel_D(12, 8, "6. Sends back an authentication token to", "JSON/HTTPS")
@enduml

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

@startuml
title Internet Banking System - System Context

!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml
!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
LAYOUT_WITH_LEGEND()

Enterprise_Boundary(enterprise, "Big Bank plc") {
  System(4, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
  System(5, "E-mail System", "The internal Microsoft Exchange e-mail system.")
  System(7, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
}

Person_Ext(1, "Personal Banking Customer", "A customer of the bank, with personal bank accounts.")

Rel_D(1, 7, "Views account balances, and makes payments using")
Rel_D(7, 4, "Gets account information from, and makes payments using")
Rel_D(7, 5, "Sends e-mail using")
Rel_D(5, 1, "Sends e-mails to")
@enduml

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

@startuml
title System Landscape for Big Bank plc

!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml
!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
LAYOUT_WITH_LEGEND()

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

Person_Ext(1, "Personal Banking Customer", "A customer of the bank, with personal bank accounts.")

Rel_D(1, 7, "Views account balances, and makes payments using")
Rel_D(7, 4, "Gets account information from, and makes payments using")
Rel_D(7, 5, "Sends e-mail using")
Rel_D(5, 1, "Sends e-mails to")
Rel_D(1, 2, "Asks questions to", "Telephone")
Rel_D(2, 4, "Uses")
Rel_D(1, 6, "Withdraws cash using")
Rel_D(6, 4, "Uses")
Rel_D(3, 4, "Uses")
@enduml

(this will send your diagram content to http://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

graph TB
  linkStyle default fill:#ffffff

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

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

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

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

graph TB
  linkStyle default fill:#ffffff

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

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

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

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

    end

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

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

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

    end

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

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

  end

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

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

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

  end

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

graph TB
  linkStyle default fill:#ffffff

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

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

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

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

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

  end

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

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

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

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

    end

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

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

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

    end

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

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

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

    end

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

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

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

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

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

    end

  end

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

graph TB
  linkStyle default fill:#ffffff

  18[("<div style='font-weight: bold'>Database</div><div style='font-size: 70%; margin-top: 0px'>[Container: Oracle Database Schema]</div><div style='font-size: 80%; margin-top:10px'>Stores user registration<br />information, hashed<br />authentication credentials,<br />access logs, etc.</div>")]
  style 18 fill:#438dd5,stroke:#2e6295,color:#ffffff
  8["<div style='font-weight: bold'>Single-Page Application</div><div style='font-size: 70%; margin-top: 0px'>[Container: JavaScript and Angular]</div><div style='font-size: 80%; margin-top:10px'>Provides all of the Internet<br />banking functionality to<br />customers via their web<br />browser.</div>"]
  style 8 fill:#438dd5,stroke:#2e6295,color:#ffffff

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

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

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

graph TB
  linkStyle default fill:#ffffff

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

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

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

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

graph TB
  linkStyle default fill:#ffffff

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

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

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

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

Coming soon: DOT definitions will be available via the Structurizr CLI export command, using the -format dot parameter.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    }

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

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

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

    }

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

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

  }

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

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

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

  }

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

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

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

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

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

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

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

  }

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

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

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

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

    }

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

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

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

    }

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

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

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

    }

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

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

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

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

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

    }

  }

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

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

  18 [id=18,shape=cylinder, label=<<font point-size="34">Database</font><br /><font point-size="19">[Container: Oracle Database Schema]</font><br /><br /><font point-size="24">Stores user registration<br />information, hashed<br />authentication credentials,<br />access logs, etc.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"]
  8 [id=8,shape=rect, label=<<font point-size="34">Single-Page<br />Application</font><br /><font point-size="19">[Container: JavaScript and Angular]</font><br /><br /><font point-size="24">Provides all of the Internet<br />banking functionality to<br />customers via their web<br />browser.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"]

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

    12 [id=12,shape=rect, label=<<font point-size="34">Sign In Controller</font><br /><font point-size="19">[Component: Spring MVC Rest Controller]</font><br /><br /><font point-size="24">Allows users to sign in to the<br />Internet Banking System.</font>>, style=filled, color="#5d82a8", fillcolor="#85bbf0", fontcolor="#000000"]
    15 [id=15,shape=rect, label=<<font point-size="34">Security Component</font><br /><font point-size="19">[Component: Spring Bean]</font><br /><br /><font point-size="24">Provides functionality related<br />to signing in, changing<br />passwords, etc.</font>>, style=filled, color="#5d82a8", fillcolor="#85bbf0", fontcolor="#000000"]
  }

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

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

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

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

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

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

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

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

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

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

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

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"

      - from: "1"
        to: "2"
        label: "Asks questions to"
        description: "Telephone"

      - from: "1"
        to: "6"
        label: "Withdraws cash using"

      - from: "2"
        to: "4"
        label: "Uses"

      - from: "3"
        to: "4"
        label: "Uses"

      - from: "5"
        to: "1"
        label: "Sends e-mails to"

      - from: "6"
        to: "4"
        label: "Uses"

      - from: "7"
        to: "4"
        label: "Gets account information from, and makes payments using"

      - from: "7"
        to: "5"
        label: "Sends e-mail using"

      - from: "1"
        to: "10"
        label: "Visits bigbank.com/ib using"
        description: "HTTPS"

      - from: "1"
        to: "8"
        label: "Views account balances, and makes payments using"

      - from: "1"
        to: "9"
        label: "Views account balances, and makes payments using"

      - from: "10"
        to: "8"
        label: "Delivers to the customer's web browser"

      - from: "11"
        to: "18"
        label: "Reads from and writes to"
        description: "JDBC"

      - from: "11"
        to: "4"
        label: "Makes API calls to"
        description: "XML/HTTPS"

      - from: "11"
        to: "5"
        label: "Sends e-mail using"

      - from: "8"
        to: "11"
        label: "Makes API calls to"
        description: "JSON/HTTPS"

      - from: "9"
        to: "11"
        label: "Makes API calls to"
        description: "JSON/HTTPS"

      - from: "12"
        to: "15"
        label: "Uses"

      - from: "13"
        to: "16"
        label: "Uses"

      - from: "14"
        to: "15"
        label: "Uses"

      - from: "14"
        to: "17"
        label: "Uses"

      - from: "15"
        to: "18"
        label: "Reads from and writes to"
        description: "JDBC"

      - from: "16"
        to: "4"
        label: "Makes API calls to"
        description: "XML/HTTPS"

      - from: "17"
        to: "5"
        label: "Sends e-mail using"

      - from: "8"
        to: "12"
        label: "Makes API calls to"
        description: "JSON/HTTPS"

      - from: "8"
        to: "13"
        label: "Makes API calls to"
        description: "JSON/HTTPS"

      - from: "8"
        to: "14"
        label: "Makes API calls to"
        description: "JSON/HTTPS"

      - from: "9"
        to: "12"
        label: "Makes API calls to"
        description: "JSON/HTTPS"

      - from: "9"
        to: "13"
        label: "Makes API calls to"
        description: "JSON/HTTPS"

      - from: "9"
        to: "14"
        label: "Makes API calls to"
        description: "JSON/HTTPS"

  - name: Dynamic - API Application - Dynamic
    sequence:
      start: "8"
      steps:
      - to: "12"
        label: "1. Submits credentials to"
        description: "JSON/HTTPS"

      - to: "15"
        label: "2. Validates credentials using"

      - to: "18"
        label: "3. select * from users where username = ?"
        description: "JDBC"

      - to: "15"
        label: "4. Returns user data to"
        description: "JDBC"

      - to: "12"
        label: "5. Returns true if the hashed password matches"

      - to: "8"
        label: "6. Sends back an authentication token to"
        description: "JSON/HTTPS"

  - name: Deployment - Development
    relations:
      - from: "52"
        to: "57"
        label: "Makes API calls to"
        description: "JSON/HTTPS"
      - from: "55"
        to: "52"
        label: "Delivers to the customer's web browser"
      - from: "57"
        to: "61"
        label: "Reads from and writes to"
        description: "JDBC"
      - from: "57"
        to: "65"
        label: "Makes API calls to"
        description: "XML/HTTPS"
  - name: Deployment - Live
    relations:
      - from: "68"
        to: "79"
        label: "Makes API calls to"
        description: "JSON/HTTPS"
      - from: "71"
        to: "79"
        label: "Makes API calls to"
        description: "JSON/HTTPS"
      - from: "75"
        to: "71"
        label: "Delivers to the customer's web browser"
      - from: "79"
        to: "84"
        label: "Reads from and writes to"
        description: "JDBC"
      - from: "79"
        to: "88"
        label: "Reads from and writes to"
        description: "JDBC"
      - from: "79"
        to: "91"
        label: "Makes API calls to"
        description: "XML/HTTPS"