mermaid

Here are the diagrams in your workspace, converted to mermaid format.

You can click the buttons to render individual diagrams, or render all diagrams. Please note that editing, viewing or rendering diagrams will send your diagram content to https://mermaidjs.github.io/mermaid-live-editor.

graph TB
  1("<div style='background: #08427b; color: #ffffff'><b>Personal Banking Customer</b><br /><sup>[Person]</sup><br />A customer of the bank, with<br />personal bank accounts.</div>")
  style 1 fill:#08427b
  subgraph "Big Bank plc"
    15("<div style='background: #999999; color: #ffffff'><b>Back Office Staff</b><br /><sup>[Person]</sup><br />Administration and support<br />staff within the bank.</div>")
    style 15 fill:#999999
    12("<div style='background: #999999; color: #ffffff'><b>Customer Service Staff</b><br /><sup>[Person]</sup><br />Customer service staff within<br />the bank.</div>")
    style 12 fill:#999999
    9("<div style='background: #999999; color: #ffffff'><b>ATM</b><br /><sup>[Software System]</sup><br />Allows customers to withdraw<br />cash.</div>")
    style 9 fill:#999999
    6("<div style='background: #999999; color: #ffffff'><b>E-mail System</b><br /><sup>[Software System]</sup><br />The internal Microsoft<br />Exchange e-mail system.</div>")
    style 6 fill:#999999
    2("<div style='background: #1168bd; color: #ffffff'><b>Internet Banking System</b><br /><sup>[Software System]</sup><br />Allows customers to view<br />information about their bank<br />accounts, and make payments.</div>")
    style 2 fill:#1168bd
    4("<div style='background: #999999; color: #ffffff'><b>Mainframe Banking System</b><br /><sup>[Software System]</sup><br />Stores all of the core<br />banking information about<br />customers, accounts,<br />transactions, etc.</div>")
    style 4 fill:#999999
  end
  9-. "<b>Uses</b><br /><sup></sup>" .->4
  15-. "<b>Uses</b><br /><sup></sup>" .->4
  12-. "<b>Uses</b><br /><sup></sup>" .->4
  6-. "<b>Sends e-mails to</b><br /><sup></sup>" .->1
  2-. "<b>Sends e-mail using</b><br /><sup></sup>" .->6
  2-. "<b>Gets account information<br />from, and makes payments<br />using</b><br /><sup></sup>" .->4
  1-. "<b>Withdraws cash using</b><br /><sup></sup>" .->9
  1-. "<b>Asks questions to</b><br /><sup>[Telephone]</sup>" .->12
  1-. "<b>Views account balances, and<br />makes payments using</b><br /><sup></sup>" .->2

(please note that this will send your diagram content to https://mermaidjs.github.io/mermaid-live-editor)

Internet Banking System - System Context

The system context diagram for the Internet Banking System.

Download (raw) Download (encoded) Edit at https://mermaidjs.github.io/mermaid-live-editor View at https://mermaidjs.github.io/mermaid-live-editor

graph TB
  1("<div style='background: #08427b; color: #ffffff'><b>Personal Banking Customer</b><br /><sup>[Person]</sup><br />A customer of the bank, with<br />personal bank accounts.</div>")
  style 1 fill:#08427b
  6("<div style='background: #999999; color: #ffffff'><b>E-mail System</b><br /><sup>[Software System]</sup><br />The internal Microsoft<br />Exchange e-mail system.</div>")
  style 6 fill:#999999
  2("<div style='background: #1168bd; color: #ffffff'><b>Internet Banking System</b><br /><sup>[Software System]</sup><br />Allows customers to view<br />information about their bank<br />accounts, and make payments.</div>")
  style 2 fill:#1168bd
  4("<div style='background: #999999; color: #ffffff'><b>Mainframe Banking System</b><br /><sup>[Software System]</sup><br />Stores all of the core<br />banking information about<br />customers, accounts,<br />transactions, etc.</div>")
  style 4 fill:#999999
  6-. "<b>Sends e-mails to</b><br /><sup></sup>" .->1
  2-. "<b>Sends e-mail using</b><br /><sup></sup>" .->6
  2-. "<b>Gets account information<br />from, and makes payments<br />using</b><br /><sup></sup>" .->4
  1-. "<b>Views account balances, and<br />makes payments using</b><br /><sup></sup>" .->2

(please note that this will send your diagram content to https://mermaidjs.github.io/mermaid-live-editor)

graph TB
  6("<div style='background: #999999; color: #ffffff'><b>E-mail System</b><br /><sup>[Software System]</sup><br />The internal Microsoft<br />Exchange e-mail system.</div>")
  style 6 fill:#999999
  4("<div style='background: #999999; color: #ffffff'><b>Mainframe Banking System</b><br /><sup>[Software System]</sup><br />Stores all of the core<br />banking information about<br />customers, accounts,<br />transactions, etc.</div>")
  style 4 fill:#999999
  1("<div style='background: #08427b; color: #ffffff'><b>Personal Banking Customer</b><br /><sup>[Person]</sup><br />A customer of the bank, with<br />personal bank accounts.</div>")
  style 1 fill:#08427b
  subgraph "Internet Banking System"
    20("<div style='background: #438dd5; color: #ffffff'><b>API Application</b><br /><sup>[Container]</sup><br />Provides Internet banking<br />functionality via a<br />JSON/HTTPS API.</div>")
    style 20 fill:#438dd5
    21("<div style='background: #438dd5; color: #ffffff'><b>Database</b><br /><sup>[Container]</sup><br />Stores user registration<br />information, hashed<br />authentication credentials,<br />access logs, etc.</div>")
    style 21 fill:#438dd5
    18("<div style='background: #438dd5; color: #ffffff'><b>Mobile App</b><br /><sup>[Container]</sup><br />Provides a limited subset of<br />the Internet banking<br />functionality to customers<br />via their mobile device.</div>")
    style 18 fill:#438dd5
    17("<div style='background: #438dd5; color: #ffffff'><b>Single-Page Application</b><br /><sup>[Container]</sup><br />Provides all of the Internet<br />banking functionality to<br />customers via their web<br />browser.</div>")
    style 17 fill:#438dd5
    19("<div style='background: #438dd5; color: #ffffff'><b>Web Application</b><br /><sup>[Container]</sup><br />Delivers the static content<br />and the Internet banking<br />single page application.</div>")
    style 19 fill:#438dd5
  end
  20-. "<b>Reads from and writes to</b><br /><sup>[JDBC]</sup>" .->21
  20-. "<b>Sends e-mail using</b><br /><sup>[SMTP]</sup>" .->6
  20-. "<b>Makes API calls to</b><br /><sup>[XML/HTTPS]</sup>" .->4
  6-. "<b>Sends e-mails to</b><br /><sup></sup>" .->1
  18-. "<b>Makes API calls to</b><br /><sup>[JSON/HTTPS]</sup>" .->20
  1-. "<b>Views account balances, and<br />makes payments using</b><br /><sup></sup>" .->18
  1-. "<b>Views account balances, and<br />makes payments using</b><br /><sup></sup>" .->17
  1-. "<b>Visits bigbank.com/ib using</b><br /><sup>[HTTPS]</sup>" .->19
  17-. "<b>Makes API calls to</b><br /><sup>[JSON/HTTPS]</sup>" .->20
  19-. "<b>Delivers to the customer's<br />web browser</b><br /><sup></sup>" .->17

(please note that this will send your diagram content to https://mermaidjs.github.io/mermaid-live-editor)

Internet Banking System - API Application - Components

The component diagram for the API Application.

Download (raw) Download (encoded) Edit at https://mermaidjs.github.io/mermaid-live-editor View at https://mermaidjs.github.io/mermaid-live-editor

graph TB
  21("<div style='background: #438dd5; color: #ffffff'><b>Database</b><br /><sup>[Container]</sup><br />Stores user registration<br />information, hashed<br />authentication credentials,<br />access logs, etc.</div>")
  style 21 fill:#438dd5
  6("<div style='background: #999999; color: #ffffff'><b>E-mail System</b><br /><sup>[Software System]</sup><br />The internal Microsoft<br />Exchange e-mail system.</div>")
  style 6 fill:#999999
  4("<div style='background: #999999; color: #ffffff'><b>Mainframe Banking System</b><br /><sup>[Software System]</sup><br />Stores all of the core<br />banking information about<br />customers, accounts,<br />transactions, etc.</div>")
  style 4 fill:#999999
  18("<div style='background: #438dd5; color: #ffffff'><b>Mobile App</b><br /><sup>[Container]</sup><br />Provides a limited subset of<br />the Internet banking<br />functionality to customers<br />via their mobile device.</div>")
  style 18 fill:#438dd5
  17("<div style='background: #438dd5; color: #ffffff'><b>Single-Page Application</b><br /><sup>[Container]</sup><br />Provides all of the Internet<br />banking functionality to<br />customers via their web<br />browser.</div>")
  style 17 fill:#438dd5
  subgraph "API Application"
    30("<div style='background: #85bbf0; color: #000000'><b>Accounts Summary Controller</b><br /><sup>[Spring MVC Rest Controller]</sup><br />Provides customers with a<br />summary of their bank<br />accounts.</div>")
    style 30 fill:#85bbf0
    34("<div style='background: #85bbf0; color: #000000'><b>E-mail Component</b><br /><sup>[Spring Bean]</sup><br />Sends e-mails to users.</div>")
    style 34 fill:#85bbf0
    33("<div style='background: #85bbf0; color: #000000'><b>Mainframe Banking System Facade</b><br /><sup>[Spring Bean]</sup><br />A facade onto the mainframe<br />banking system.</div>")
    style 33 fill:#85bbf0
    31("<div style='background: #85bbf0; color: #000000'><b>Reset Password Controller</b><br /><sup>[Spring MVC Rest Controller]</sup><br />Allows users to reset their<br />passwords with a single use<br />URL.</div>")
    style 31 fill:#85bbf0
    32("<div style='background: #85bbf0; color: #000000'><b>Security Component</b><br /><sup>[Spring Bean]</sup><br />Provides functionality<br />related to signing in,<br />changing passwords, etc.</div>")
    style 32 fill:#85bbf0
    29("<div style='background: #85bbf0; color: #000000'><b>Sign In Controller</b><br /><sup>[Spring MVC Rest Controller]</sup><br />Allows users to sign in to<br />the Internet Banking System.</div>")
    style 29 fill:#85bbf0
  end
  30-. "<b>Uses</b><br /><sup></sup>" .->33
  34-. "<b>Sends e-mail using</b><br /><sup></sup>" .->6
  33-. "<b>Uses</b><br /><sup>[XML/HTTPS]</sup>" .->4
  18-. "<b>Makes API calls to</b><br /><sup>[JSON/HTTPS]</sup>" .->30
  18-. "<b>Makes API calls to</b><br /><sup>[JSON/HTTPS]</sup>" .->31
  18-. "<b>Makes API calls to</b><br /><sup>[JSON/HTTPS]</sup>" .->29
  31-. "<b>Uses</b><br /><sup></sup>" .->34
  31-. "<b>Uses</b><br /><sup></sup>" .->32
  32-. "<b>Reads from and writes to</b><br /><sup>[JDBC]</sup>" .->21
  29-. "<b>Uses</b><br /><sup></sup>" .->32
  17-. "<b>Makes API calls to</b><br /><sup>[JSON/HTTPS]</sup>" .->30
  17-. "<b>Makes API calls to</b><br /><sup>[JSON/HTTPS]</sup>" .->31
  17-. "<b>Makes API calls to</b><br /><sup>[JSON/HTTPS]</sup>" .->29

(please note that this will send your diagram content to https://mermaidjs.github.io/mermaid-live-editor)

API Application - Dynamic

Summarises how the sign in feature works in the single-page application.

Download (raw) Download (encoded) Edit at https://mermaidjs.github.io/mermaid-live-editor View at https://mermaidjs.github.io/mermaid-live-editor

graph TB
  21("<div style='background: #438dd5; color: #ffffff'><b>Database</b><br /><sup>[Container]</sup><br />Stores user registration<br />information, hashed<br />authentication credentials,<br />access logs, etc.</div>")
  style 21 fill:#438dd5
  32("<div style='background: #85bbf0; color: #000000'><b>Security Component</b><br /><sup>[Spring Bean]</sup><br />Provides functionality<br />related to signing in,<br />changing passwords, etc.</div>")
  style 32 fill:#85bbf0
  29("<div style='background: #85bbf0; color: #000000'><b>Sign In Controller</b><br /><sup>[Spring MVC Rest Controller]</sup><br />Allows users to sign in to<br />the Internet Banking System.</div>")
  style 29 fill:#85bbf0
  17("<div style='background: #438dd5; color: #ffffff'><b>Single-Page Application</b><br /><sup>[Container]</sup><br />Provides all of the Internet<br />banking functionality to<br />customers via their web<br />browser.</div>")
  style 17 fill:#438dd5
  17-->|"<b>1. Submits credentials to</b><br /><sup>[JSON/HTTPS]</sup>"|29
  29-->|"<b>2. Calls isAuthenticated() on</b><br /><sup></sup>"|32
  32-->|"<b>3. select * from users where<br />username = ?</b><br /><sup>[JDBC]</sup>"|21

(please note that this will send your diagram content to https://mermaidjs.github.io/mermaid-live-editor)

Internet Banking System - Deployment - Development

An example development deployment scenario for the Internet Banking System.

Download (raw) Download (encoded) Edit at https://mermaidjs.github.io/mermaid-live-editor View at https://mermaidjs.github.io/mermaid-live-editor

graph TB
  subgraph "Developer Laptop"
    subgraph "Docker Container - Web Server"
      subgraph "Apache Tomcat"
          54("<div style='background: #438dd5; color: #ffffff'><b>API Application</b><br /><sup>[Container]</sup><br />Provides Internet banking<br />functionality via a<br />JSON/HTTPS API.</div>")
          style 54 fill:#438dd5
          53("<div style='background: #438dd5; color: #ffffff'><b>Web Application</b><br /><sup>[Container]</sup><br />Delivers the static content<br />and the Internet banking<br />single page application.</div>")
          style 53 fill:#438dd5
      end
    end
    subgraph "Docker Container - Database Server"
      subgraph "Database Server"
          57("<div style='background: #438dd5; color: #ffffff'><b>Database</b><br /><sup>[Container]</sup><br />Stores user registration<br />information, hashed<br />authentication credentials,<br />access logs, etc.</div>")
          style 57 fill:#438dd5
      end
    end
    subgraph "Web Browser"
        60("<div style='background: #438dd5; color: #ffffff'><b>Single-Page Application</b><br /><sup>[Container]</sup><br />Provides all of the Internet<br />banking functionality to<br />customers via their web<br />browser.</div>")
        style 60 fill:#438dd5
    end
  end
  53-. "<b>Delivers to the customer's<br />web browser</b><br /><sup></sup>" .->60
  60-. "<b>Makes API calls to</b><br /><sup>[JSON/HTTPS]</sup>" .->54
  54-. "<b>Reads from and writes to</b><br /><sup>[JDBC]</sup>" .->57

(please note that this will send your diagram content to https://mermaidjs.github.io/mermaid-live-editor)

Internet Banking System - Deployment - Live

An example live deployment scenario for the Internet Banking System.

Download (raw) Download (encoded) Edit at https://mermaidjs.github.io/mermaid-live-editor View at https://mermaidjs.github.io/mermaid-live-editor

graph TB
  subgraph "Big Bank plc"
    subgraph "bigbank-api***"
      subgraph "Apache Tomcat"
          75("<div style='background: #438dd5; color: #ffffff'><b>API Application</b><br /><sup>[Container]</sup><br />Provides Internet banking<br />functionality via a<br />JSON/HTTPS API.</div>")
          style 75 fill:#438dd5
      end
    end
    subgraph "bigbank-db01"
      subgraph "Oracle - Primary"
          80("<div style='background: #438dd5; color: #ffffff'><b>Database</b><br /><sup>[Container]</sup><br />Stores user registration<br />information, hashed<br />authentication credentials,<br />access logs, etc.</div>")
          style 80 fill:#438dd5
      end
    end
    subgraph "bigbank-db02"
      subgraph "Oracle - Secondary"
          84("<div style='background: #438dd5; color: #ffffff'><b>Database</b><br /><sup>[Container]</sup><br />Stores user registration<br />information, hashed<br />authentication credentials,<br />access logs, etc.</div>")
          style 84 fill:#438dd5
      end
    end
    subgraph "bigbank-web***"
      subgraph "Apache Tomcat"
          71("<div style='background: #438dd5; color: #ffffff'><b>Web Application</b><br /><sup>[Container]</sup><br />Delivers the static content<br />and the Internet banking<br />single page application.</div>")
          style 71 fill:#438dd5
      end
    end
  end
  subgraph "Customer's computer"
    subgraph "Web Browser"
        67("<div style='background: #438dd5; color: #ffffff'><b>Single-Page Application</b><br /><sup>[Container]</sup><br />Provides all of the Internet<br />banking functionality to<br />customers via their web<br />browser.</div>")
        style 67 fill:#438dd5
    end
  end
  subgraph "Customer's mobile device"
      64("<div style='background: #438dd5; color: #ffffff'><b>Mobile App</b><br /><sup>[Container]</sup><br />Provides a limited subset of<br />the Internet banking<br />functionality to customers<br />via their mobile device.</div>")
      style 64 fill:#438dd5
  end
  71-. "<b>Delivers to the customer's<br />web browser</b><br /><sup></sup>" .->67
  75-. "<b>Reads from and writes to</b><br /><sup>[JDBC]</sup>" .->80
  67-. "<b>Makes API calls to</b><br /><sup>[JSON/HTTPS]</sup>" .->75
  75-. "<b>Reads from and writes to</b><br /><sup>[JDBC]</sup>" .->84
  64-. "<b>Makes API calls to</b><br /><sup>[JSON/HTTPS]</sup>" .->75

(please note that this will send your diagram content to https://mermaidjs.github.io/mermaid-live-editor)