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

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." 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 uses = 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" { background #08427b color #ffffff fontSize 22 shape Person } element "Bank Staff" { background #999999 color #ffffff } 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

WebSequenceDiagrams

Export

Ilograph

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

@startuml(id=Components)
title Internet Banking System - API Application - Components

skinparam {
  shadowing false
  arrowFontSize 10
  defaultTextAlignment center
  wrapWidth 200
  maxMessageSize 100
}
hide stereotype
top to bottom direction
skinparam rectangle<<12>> {
  BackgroundColor #85bbf0
  FontColor #000000
  BorderColor #5D82A8
}
skinparam rectangle<<13>> {
  BackgroundColor #85bbf0
  FontColor #000000
  BorderColor #5D82A8
}
skinparam rectangle<<14>> {
  BackgroundColor #85bbf0
  FontColor #000000
  BorderColor #5D82A8
}
skinparam rectangle<<4>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6B6B6B
}
skinparam rectangle<<15>> {
  BackgroundColor #85bbf0
  FontColor #000000
  BorderColor #5D82A8
}
skinparam rectangle<<16>> {
  BackgroundColor #85bbf0
  FontColor #000000
  BorderColor #5D82A8
}
skinparam rectangle<<5>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6B6B6B
}
skinparam rectangle<<17>> {
  BackgroundColor #85bbf0
  FontColor #000000
  BorderColor #5D82A8
}
skinparam database<<18>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2E6295
}
skinparam rectangle<<8>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2E6295
}
skinparam rectangle<<9>> {
  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 "==E-mail System\n<size:10>[Software System]</size>\n\nThe internal Microsoft Exchange e-mail system" <<5>> as 5
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 "==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
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]" {
  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 "==E-mail Component\n<size:10>[Component: Spring Bean]</size>\n\nSends e-mails to users." <<17>> as 17
  rectangle "==Mainframe Banking System Facade\n<size:10>[Component: Spring Bean]</size>\n\nA facade onto the mainframe banking system." <<16>> as 16
  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 "==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
}
13 .[#707070].> 16 : "Uses"
17 .[#707070].> 5 : "Sends e-mail using"
16 .[#707070].> 4 : "Makes API calls to\n<size:8>[XML/HTTPS]</size>"
9 .[#707070].> 13 : "Makes API calls to\n<size:8>[JSON/HTTPS]</size>"
9 .[#707070].> 14 : "Makes API calls to\n<size:8>[JSON/HTTPS]</size>"
9 .[#707070].> 12 : "Makes API calls to\n<size:8>[JSON/HTTPS]</size>"
14 .[#707070].> 17 : "Uses"
14 .[#707070].> 15 : "Uses"
15 .[#707070].> 18 : "Reads from and writes to\n<size:8>[JDBC]</size>"
12 .[#707070].> 15 : "Uses"
8 .[#707070].> 13 : "Makes API calls to\n<size:8>[JSON/HTTPS]</size>"
8 .[#707070].> 14 : "Makes API calls to\n<size:8>[JSON/HTTPS]</size>"
8 .[#707070].> 12 : "Makes API calls to\n<size:8>[JSON/HTTPS]</size>"
@enduml

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

@startuml(id=Containers)
title Internet Banking System - Containers

skinparam {
  shadowing false
  arrowFontSize 10
  defaultTextAlignment center
  wrapWidth 200
  maxMessageSize 100
}
hide stereotype
top to bottom direction
skinparam rectangle<<11>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2E6295
}
skinparam rectangle<<1>> {
  BackgroundColor #08427b
  FontColor #ffffff
  BorderColor #052E56
}
skinparam rectangle<<4>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6B6B6B
}
skinparam rectangle<<5>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6B6B6B
}
skinparam database<<18>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2E6295
}
skinparam rectangle<<8>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2E6295
}
skinparam rectangle<<9>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2E6295
}
skinparam rectangle<<10>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2E6295
}
rectangle "==E-mail System\n<size:10>[Software System]</size>\n\nThe internal Microsoft Exchange e-mail system" <<5>> as 5
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 "==Personal Banking Customer\n<size:10>[Person]</size>\n\nA customer of the bank, with personal bank accounts." <<1>> as 1
package "Internet Banking System\n[Software System]" {
  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 "==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
  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 "==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
}
11 .[#707070].> 18 : "Reads from and writes to\n<size:8>[JDBC]</size>"
11 .[#707070].> 5 : "Sends e-mail using"
11 .[#707070].> 4 : "Makes API calls to\n<size:8>[XML/HTTPS]</size>"
5 .[#707070].> 1 : "Sends e-mails to"
9 .[#707070].> 11 : "Makes API calls to\n<size:8>[JSON/HTTPS]</size>"
1 .[#707070].> 9 : "Views account balances, and makes payments using"
1 .[#707070].> 8 : "Views account balances, and makes payments using"
1 .[#707070].> 10 : "Visits bigbank.com/ib using\n<size:8>[HTTPS]</size>"
8 .[#707070].> 11 : "Makes API calls to\n<size:8>[JSON/HTTPS]</size>"
10 .[#707070].> 8 : "Delivers to the customer's web browser"
@enduml

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

@startuml(id=DevelopmentDeployment)
title Internet Banking System - Deployment - Development

skinparam {
  shadowing false
  arrowFontSize 10
  defaultTextAlignment center
  wrapWidth 200
  maxMessageSize 100
}
hide stereotype
top to bottom direction
skinparam rectangle<<55>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2E6295
}
skinparam rectangle<<57>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2E6295
}
skinparam node<<59>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #000000
}
skinparam node<<60>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #000000
}
skinparam database<<61>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2E6295
}
skinparam node<<50>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #000000
}
skinparam node<<51>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #000000
}
skinparam rectangle<<52>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2E6295
}
skinparam node<<63>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #000000
}
skinparam node<<53>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #000000
}
skinparam node<<64>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #000000
}
skinparam node<<54>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #000000
}
skinparam rectangle<<65>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6B6B6B
}
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
  }
}
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
  }
}
57 .[#707070].> 61 : "Reads from and writes to\n<size:8>[JDBC]</size>"
57 .[#707070].> 65 : "Makes API calls to\n<size:8>[XML/HTTPS]</size>"
52 .[#707070].> 57 : "Makes API calls to\n<size:8>[JSON/HTTPS]</size>"
55 .[#707070].> 52 : "Delivers to the customer's web browser"
@enduml

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

@startuml(id=LiveDeployment)
title Internet Banking System - Deployment - Live

skinparam {
  shadowing false
  arrowFontSize 10
  defaultTextAlignment center
  wrapWidth 200
  maxMessageSize 100
}
hide stereotype
top to bottom direction
skinparam node<<77>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #000000
}
skinparam database<<88>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2E6295
}
skinparam node<<67>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #000000
}
skinparam node<<78>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #000000
}
skinparam rectangle<<68>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2E6295
}
skinparam rectangle<<79>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2E6295
}
skinparam node<<69>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #000000
}
skinparam node<<90>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #000000
}
skinparam rectangle<<91>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6B6B6B
}
skinparam node<<70>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #000000
}
skinparam rectangle<<71>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2E6295
}
skinparam node<<82>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #000000
}
skinparam node<<83>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #000000
}
skinparam node<<72>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #000000
}
skinparam database<<84>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2E6295
}
skinparam node<<73>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #000000
}
skinparam node<<74>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #000000
}
skinparam node<<86>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #000000
}
skinparam rectangle<<75>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2E6295
}
skinparam node<<87>> {
  BackgroundColor #ffffff
  FontColor #000000
  BorderColor #000000
}
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
    }
  }
}
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 "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
}
79 .[#707070].> 84 : "Reads from and writes to\n<size:8>[JDBC]</size>"
79 .[#707070].> 88 : "Reads from and writes to\n<size:8>[JDBC]</size>"
79 .[#707070].> 91 : "Makes API calls to\n<size:8>[XML/HTTPS]</size>"
68 .[#707070].> 79 : "Makes API calls to\n<size:8>[JSON/HTTPS]</size>"
83 .[#707070].> 87 : "Replicates data to"
71 .[#707070].> 79 : "Makes API calls to\n<size:8>[JSON/HTTPS]</size>"
75 .[#707070].> 71 : "Delivers to the customer's web browser"
@enduml

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

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

skinparam {
  shadowing false
  arrowFontSize 10
  defaultTextAlignment center
  wrapWidth 200
  maxMessageSize 100
}
hide stereotype
top to bottom direction
skinparam rectangle<<12>> {
  BackgroundColor #85bbf0
  FontColor #000000
  BorderColor #5D82A8
}
skinparam rectangle<<15>> {
  BackgroundColor #85bbf0
  FontColor #000000
  BorderColor #5D82A8
}
skinparam database<<18>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2E6295
}
skinparam rectangle<<8>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2E6295
}
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 "==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
database "==Database\n<size:10>[Container: Oracle Database Schema]</size>\n\nStores user registration information, hashed authentication credentials, access logs, etc." <<18>> as 18
8 .[#707070].> 12 : "1. Submits credentials to\n<size:8>[JSON/HTTPS]</size>"
12 .[#707070].> 15 : "2. Validates credentials using"
15 .[#707070].> 18 : "3. select * from users where username = ?\n<size:8>[JDBC]</size>"
15 <.[#707070]. 18 : "4. Returns user data to\n<size:8>[JDBC]</size>"
12 <.[#707070]. 15 : "5. Returns true if the hashed password matches"
8 <.[#707070]. 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(id=SystemContext)
title Internet Banking System - System Context

skinparam {
  shadowing false
  arrowFontSize 10
  defaultTextAlignment center
  wrapWidth 200
  maxMessageSize 100
}
hide stereotype
top to bottom direction
skinparam rectangle<<1>> {
  BackgroundColor #08427b
  FontColor #ffffff
  BorderColor #052E56
}
skinparam rectangle<<4>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6B6B6B
}
skinparam rectangle<<5>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6B6B6B
}
skinparam rectangle<<7>> {
  BackgroundColor #1168bd
  FontColor #ffffff
  BorderColor #0B4884
}
rectangle "==Personal Banking Customer\n<size:10>[Person]</size>\n\nA customer of the bank, with personal bank accounts." <<1>> as 1
package "Big Bank plc" {
  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
  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
}
5 .[#707070].> 1 : "Sends e-mails to"
7 .[#707070].> 5 : "Sends e-mail using"
7 .[#707070].> 4 : "Gets account information from, and makes payments using"
1 .[#707070].> 7 : "Views account balances, and makes payments using"
@enduml

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

@startuml(id=SystemLandscape)
title System Landscape for Big Bank plc

skinparam {
  shadowing false
  arrowFontSize 10
  defaultTextAlignment center
  wrapWidth 200
  maxMessageSize 100
}
hide stereotype
top to bottom direction
skinparam rectangle<<1>> {
  BackgroundColor #08427b
  FontColor #ffffff
  BorderColor #052E56
}
skinparam rectangle<<2>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6B6B6B
}
skinparam rectangle<<3>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6B6B6B
}
skinparam rectangle<<4>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6B6B6B
}
skinparam rectangle<<5>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6B6B6B
}
skinparam rectangle<<6>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6B6B6B
}
skinparam rectangle<<7>> {
  BackgroundColor #1168bd
  FontColor #ffffff
  BorderColor #0B4884
}
rectangle "==Personal Banking Customer\n<size:10>[Person]</size>\n\nA customer of the bank, with personal bank accounts." <<1>> as 1
package "Big Bank plc" {
  rectangle "==Back Office Staff\n<size:10>[Person]</size>\n\nAdministration and support staff within the bank." <<3>> as 3
  rectangle "==Customer Service Staff\n<size:10>[Person]</size>\n\nCustomer service staff within the bank." <<2>> as 2
  rectangle "==ATM\n<size:10>[Software System]</size>\n\nAllows customers to withdraw cash." <<6>> as 6
  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
  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
}
6 .[#707070].> 4 : "Uses"
3 .[#707070].> 4 : "Uses"
2 .[#707070].> 4 : "Uses"
5 .[#707070].> 1 : "Sends e-mails to"
7 .[#707070].> 5 : "Sends e-mail using"
7 .[#707070].> 4 : "Gets account information from, and makes payments using"
1 .[#707070].> 6 : "Withdraws cash using"
1 .[#707070].> 2 : "Asks questions to\n<size:8>[Telephone]</size>"
1 .[#707070].> 7 : "Views account balances, and makes payments using"
@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(id=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()

title Internet Banking System - API Application - Components

Container(18, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
System(5, "E-mail System", "The internal Microsoft Exchange e-mail system")
System(4, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
Container(9, "Mobile App", "Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device.")
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(13, "Accounts Summary Controller", "Spring MVC Rest Controller", "Provides customers with a summary of their bank accounts.")
  Component(17, "E-mail Component", "Spring Bean", "Sends e-mails to users.")
  Component(16, "Mainframe Banking System Facade", "Spring Bean", "A facade onto the mainframe banking system.")
  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(12, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System.")
}
Rel_D(13, 16, "Uses", "")
Rel_D(17, 5, "Sends e-mail using", "")
Rel_D(16, 4, "Makes API calls to", "XML/HTTPS")
Rel_D(9, 13, "Makes API calls to", "JSON/HTTPS")
Rel_D(9, 14, "Makes API calls to", "JSON/HTTPS")
Rel_D(9, 12, "Makes API calls to", "JSON/HTTPS")
Rel_D(14, 17, "Uses", "")
Rel_D(14, 15, "Uses", "")
Rel_D(15, 18, "Reads from and writes to", "JDBC")
Rel_D(12, 15, "Uses", "")
Rel_D(8, 13, "Makes API calls to", "JSON/HTTPS")
Rel_D(8, 14, "Makes API calls to", "JSON/HTTPS")
Rel_D(8, 12, "Makes API calls to", "JSON/HTTPS")
@enduml

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

@startuml(id=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
!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml
LAYOUT_WITH_LEGEND()

title Internet Banking System - Containers

System(5, "E-mail System", "The internal Microsoft Exchange e-mail system")
System(4, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
Person_Ext(1, "Personal Banking Customer", "A customer of the bank, with personal bank accounts.")
System_Boundary(7_boundary, Internet Banking System) {
  Container(11, "API Application", "Java and Spring MVC", "Provides Internet banking functionality via a JSON/HTTPS API.")
  Container(18, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
  Container(9, "Mobile App", "Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device.")
  Container(8, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.")
  Container(10, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet banking single page application.")
}
Rel_D(11, 18, "Reads from and writes to", "JDBC")
Rel_D(11, 5, "Sends e-mail using", "")
Rel_D(11, 4, "Makes API calls to", "XML/HTTPS")
Rel_D(5, 1, "Sends e-mails to", "")
Rel_D(9, 11, "Makes API calls to", "JSON/HTTPS")
Rel_D(1, 9, "Views account balances, and makes payments using", "")
Rel_D(1, 8, "Views account balances, and makes payments using", "")
Rel_D(1, 10, "Visits bigbank.com/ib using", "HTTPS")
Rel_D(8, 11, "Makes API calls to", "JSON/HTTPS")
Rel_D(10, 8, "Delivers to the customer's web browser", "")
@enduml

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

@startuml(id=DevelopmentDeployment)
!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()

title Internet Banking System - Deployment - Development

node "Big Bank plc" <<Deployment Node: Big Bank plc data center>> as 63 {
  node "bigbank-dev001" <<Deployment Node>> as 64 {
    System(65, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
  }
}
node "Developer Laptop" <<Deployment Node: Microsoft Windows 10 or Apple macOS>> as 50 {
  node "Docker Container - Database Server" <<Deployment Node: Docker>> as 59 {
    node "Database Server" <<Deployment Node: Oracle 12c>> as 60 {
      Container(61, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
    }
  }
  node "Docker Container - Web Server" <<Deployment Node: Docker>> as 53 {
    node "Apache Tomcat" <<Deployment Node: Apache Tomcat 8.x>> as 54 {
      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.")
    }
  }
  node "Web Browser" <<Deployment Node: Chrome, Firefox, Safari, or Edge>> as 51 {
    Container(52, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.")
  }
}
Rel_D(57, 61, "Reads from and writes to", "JDBC")
Rel_D(57, 65, "Makes API calls to", "XML/HTTPS")
Rel_D(52, 57, "Makes API calls to", "JSON/HTTPS")
Rel_D(55, 52, "Delivers to the customer's web browser", "")
@enduml

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

@startuml(id=LiveDeployment)
!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()

title Internet Banking System - Deployment - Live

node "Big Bank plc" <<Deployment Node: Big Bank plc data center>> as 72 {
  node "bigbank-api*** (x8)" <<Deployment Node: Ubuntu 16.04 LTS>> as 77 {
    node "Apache Tomcat" <<Deployment Node: Apache Tomcat 8.x>> as 78 {
      Container(79, "API Application", "Java and Spring MVC", "Provides Internet banking functionality via a JSON/HTTPS API.")
    }
  }
  node "bigbank-db01" <<Deployment Node: Ubuntu 16.04 LTS>> as 82 {
    node "Oracle - Primary" <<Deployment Node: Oracle 12c>> as 83 {
      Container(84, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
    }
  }
  node "bigbank-db02" <<Deployment Node: Ubuntu 16.04 LTS>> as 86 {
    node "Oracle - Secondary" <<Deployment Node: Oracle 12c>> as 87 {
      Container(88, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
    }
  }
  node "bigbank-prod001" <<Deployment Node>> as 90 {
    System(91, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
  }
  node "bigbank-web*** (x4)" <<Deployment Node: Ubuntu 16.04 LTS>> as 73 {
    node "Apache Tomcat" <<Deployment Node: Apache Tomcat 8.x>> as 74 {
      Container(75, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet banking single page application.")
    }
  }
}
node "Customer's computer" <<Deployment Node: Microsoft Windows or Apple macOS>> as 69 {
  node "Web Browser" <<Deployment Node: Chrome, Firefox, Safari, or Edge>> as 70 {
    Container(71, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.")
  }
}
node "Customer's mobile device" <<Deployment Node: Apple iOS or Android>> as 67 {
  Container(68, "Mobile App", "Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device.")
}
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(68, 79, "Makes API calls to", "JSON/HTTPS")
Rel_D(83, 87, "Replicates data to", "")
Rel_D(71, 79, "Makes API calls to", "JSON/HTTPS")
Rel_D(75, 71, "Delivers to the customer's web browser", "")
@enduml

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

@startuml(id=SignIn)
!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()

title API Application - Dynamic
caption Summarises how the sign in feature works in the single-page application.

Container(8, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.")
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.")
Container(18, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
8 -[#707070]> 12 : 1. Submits credentials to
12 -[#707070]> 15 : 2. Validates credentials using
15 -[#707070]> 18 : 3. select * from users where username = ?
18 -[#707070]-> 15 : 4. Returns user data to
15 -[#707070]-> 12 : 5. Returns true if the hashed password matches
12 -[#707070]-> 8 : 6. Sends back an authentication token to
@enduml

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

@startuml(id=SystemContext)
!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()

title Internet Banking System - System Context

Person_Ext(1, "Personal Banking Customer", "A customer of the bank, with personal bank accounts.")
package "Big Bank plc" {
  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.")
  System(4, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
}
Rel_D(5, 1, "Sends e-mails to", "")
Rel_D(7, 5, "Sends e-mail using", "")
Rel_D(7, 4, "Gets account information from, and makes payments using", "")
Rel_D(1, 7, "Views account balances, and makes payments using", "")
@enduml

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

@startuml(id=SystemLandscape)
!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()

title System Landscape for Big Bank plc

Person_Ext(1, "Personal Banking Customer", "A customer of the bank, with personal bank accounts.")
package "Big Bank plc" {
  Person(3, "Back Office Staff", "Administration and support staff within the bank.")
  Person(2, "Customer Service Staff", "Customer service staff within the bank.")
  System(6, "ATM", "Allows customers to withdraw cash.")
  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.")
  System(4, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
}
Rel_D(6, 4, "Uses", "")
Rel_D(3, 4, "Uses", "")
Rel_D(2, 4, "Uses", "")
Rel_D(5, 1, "Sends e-mails to", "")
Rel_D(7, 5, "Sends e-mail using", "")
Rel_D(7, 4, "Gets account information from, and makes payments using", "")
Rel_D(1, 6, "Withdraws cash using", "")
Rel_D(1, 2, "Asks questions to", "Telephone")
Rel_D(1, 7, "Views account balances, and makes payments using", "")
@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.

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
  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
  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
  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
  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 boundary [API Application]
    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
    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
    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
    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
    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
  end
  style boundary fill:#ffffff,stroke:#000000,color:#000000
  13-. "<div>Uses</div><div style='font-size: 70%'></div>" .->16
  17-. "<div>Sends e-mail using</div><div style='font-size: 70%'></div>" .->5
  16-. "<div>Makes API calls to</div><div style='font-size: 70%'>[XML/HTTPS]</div>" .->4
  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
  9-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->12
  14-. "<div>Uses</div><div style='font-size: 70%'></div>" .->17
  14-. "<div>Uses</div><div style='font-size: 70%'></div>" .->15
  15-. "<div>Reads from and writes to</div><div style='font-size: 70%'>[JDBC]</div>" .->18
  12-. "<div>Uses</div><div style='font-size: 70%'></div>" .->15
  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
  8-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->12

graph TB
  linkStyle default fill:#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
  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
  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
  subgraph boundary [Internet Banking System]
    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
    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
    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
    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
  end
  style boundary fill:#ffffff,stroke:#000000,color:#000000
  11-. "<div>Reads from and writes to</div><div style='font-size: 70%'>[JDBC]</div>" .->18
  11-. "<div>Sends e-mail using</div><div style='font-size: 70%'></div>" .->5
  11-. "<div>Makes API calls to</div><div style='font-size: 70%'>[XML/HTTPS]</div>" .->4
  5-. "<div>Sends e-mails to</div><div style='font-size: 70%'></div>" .->1
  9-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->11
  1-. "<div>Views account balances, and<br />makes payments using</div><div style='font-size: 70%'></div>" .->9
  1-. "<div>Views account balances, and<br />makes payments using</div><div style='font-size: 70%'></div>" .->8
  1-. "<div>Visits bigbank.com/ib using</div><div style='font-size: 70%'>[HTTPS]</div>" .->10
  8-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->11
  10-. "<div>Delivers to the customer's<br />web browser</div><div style='font-size: 70%'></div>" .->8

graph TB
  linkStyle default fill:#ffffff

  subgraph 63 [Big Bank plc]
    subgraph 64 [bigbank-dev001]
        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
    style 64 fill:#ffffff,stroke:#000000,color:#000000
  end
  style 63 fill:#ffffff,stroke:#000000,color:#000000
  subgraph 50 [Developer Laptop]
    subgraph 59 [Docker Container - Database Server]
      subgraph 60 [Database Server]
          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
      style 60 fill:#ffffff,stroke:#000000,color:#000000
    end
    style 59 fill:#ffffff,stroke:#000000,color:#000000
    subgraph 53 [Docker Container - Web Server]
      subgraph 54 [Apache Tomcat]
          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
      style 54 fill:#ffffff,stroke:#000000,color:#000000
    end
    style 53 fill:#ffffff,stroke:#000000,color:#000000
    subgraph 51 [Web Browser]
        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
    style 51 fill:#ffffff,stroke:#000000,color:#000000
  end
  style 50 fill:#ffffff,stroke:#000000,color:#000000
  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
  52-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->57
  55-. "<div>Delivers to the customer's<br />web browser</div><div style='font-size: 70%'></div>" .->52

graph TB
  linkStyle default fill:#ffffff

  subgraph 72 [Big Bank plc]
    subgraph 77 [bigbank-api***]
      subgraph 78 [Apache Tomcat]
          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
      style 78 fill:#ffffff,stroke:#000000,color:#000000
    end
    style 77 fill:#ffffff,stroke:#000000,color:#000000
    subgraph 82 [bigbank-db01]
      subgraph 83 [Oracle - Primary]
          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
      style 83 fill:#ffffff,stroke:#000000,color:#000000
    end
    style 82 fill:#ffffff,stroke:#000000,color:#000000
    subgraph 86 [bigbank-db02]
      subgraph 87 [Oracle - Secondary]
          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
      style 87 fill:#ffffff,stroke:#000000,color:#000000
    end
    style 86 fill:#ffffff,stroke:#000000,color:#000000
    subgraph 90 [bigbank-prod001]
        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
    style 90 fill:#ffffff,stroke:#000000,color:#000000
    subgraph 73 [bigbank-web***]
      subgraph 74 [Apache Tomcat]
          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
      style 74 fill:#ffffff,stroke:#000000,color:#000000
    end
    style 73 fill:#ffffff,stroke:#000000,color:#000000
  end
  style 72 fill:#ffffff,stroke:#000000,color:#000000
  subgraph 69 [Customer's computer]
    subgraph 70 [Web Browser]
        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
    style 70 fill:#ffffff,stroke:#000000,color:#000000
  end
  style 69 fill:#ffffff,stroke:#000000,color:#000000
  subgraph 67 [Customer's mobile device]
      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
  style 67 fill:#ffffff,stroke:#000000,color:#000000
  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
  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
  75-. "<div>Delivers to the customer's<br />web browser</div><div style='font-size: 70%'></div>" .->71

graph LR
  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
  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
  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
  8["<div style='font-weight: bold'>Single-Page Application</div><div style='font-size: 70%; margin-top: 0px'>[Container: JavaScript and Angular]</div><div style='font-size: 80%; margin-top:10px'>Provides all of the Internet<br />banking functionality to<br />customers via their web<br />browser.</div>"]
  style 8 fill:#438dd5,stroke:#2e6295,color:#ffffff
  8-->|"<div style='font-weight: bold'>1. Submits credentials to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>"|12
  12-->|"<div style='font-weight: bold'>2. Validates credentials using</div><div style='font-size: 70%'></div>"|15
  15-->|"<div style='font-weight: bold'>3. select * from users where<br />username = ?</div><div style='font-size: 70%'>[JDBC]</div>"|18
  18-->|"<div style='font-weight: bold'>4. Returns user data to</div><div style='font-size: 70%'>[JDBC]</div>"|15
  15-->|"<div style='font-weight: bold'>5. Returns true if the hashed<br />password matches</div><div style='font-size: 70%'></div>"|12
  12-->|"<div style='font-weight: bold'>6. Sends back an authentication<br />token to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>"|8

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
  subgraph boundary [Big Bank plc]
    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
    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
  end
  style boundary fill:#ffffff,stroke:#000000,color:#000000
  5-. "<div>Sends e-mails to</div><div style='font-size: 70%'></div>" .->1
  7-. "<div>Sends e-mail using</div><div style='font-size: 70%'></div>" .->5
  7-. "<div>Gets account information<br />from, and makes payments<br />using</div><div style='font-size: 70%'></div>" .->4
  1-. "<div>Views account balances, and<br />makes payments using</div><div style='font-size: 70%'></div>" .->7

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
  subgraph boundary [Big Bank plc]
    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
    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
    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
    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
    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
  end
  style boundary fill:#ffffff,stroke:#000000,color:#000000
  6-. "<div>Uses</div><div style='font-size: 70%'></div>" .->4
  3-. "<div>Uses</div><div style='font-size: 70%'></div>" .->4
  2-. "<div>Uses</div><div style='font-size: 70%'></div>" .->4
  5-. "<div>Sends e-mails to</div><div style='font-size: 70%'></div>" .->1
  7-. "<div>Sends e-mail using</div><div style='font-size: 70%'></div>" .->5
  7-. "<div>Gets account information<br />from, and makes payments<br />using</div><div style='font-size: 70%'></div>" .->4
  1-. "<div>Withdraws cash using</div><div style='font-size: 70%'></div>" .->6
  1-. "<div>Asks questions to</div><div style='font-size: 70%'>[Telephone]</div>" .->2
  1-. "<div>Views account balances, and<br />makes payments using</div><div style='font-size: 70%'></div>" .->7

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"