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
  2("<div style='background: #ffbf00; color: #000000'><b>Customer</b><br /><sup>[Person]</sup><br />A customer</div>")
  style 2 fill:#ffbf00
  subgraph "Customer Information System"
    8("<div style='background: #facc2e; color: #000000'><b>Audit Service</b><br /><sup>[Container]</sup><br />Provides organisation-wide<br />auditing facilities.</div>")
    style 8 fill:#facc2e
    9("<div style='background: #f5da81; color: #000000'><b>Audit Store</b><br /><sup>[Container]</sup><br />Stores information about<br />events that have happened.</div>")
    style 9 fill:#f5da81
    3("<div style='background: #facc2e; color: #000000'><b>Customer Application</b><br /><sup>[Container]</sup><br />Allows customers to manage<br />their profile.</div>")
    style 3 fill:#facc2e
    5("<div style='background: #f5da81; color: #000000'><b>Customer Database</b><br /><sup>[Container]</sup><br />Stores customer information.</div>")
    style 5 fill:#f5da81
    4("<div style='background: #facc2e; color: #000000'><b>Customer Service</b><br /><sup>[Container]</sup><br />The point of access for<br />customer information.</div>")
    style 4 fill:#facc2e
    10("<div style='background: #facc2e; color: #000000'><b>Message Bus</b><br /><sup>[Container]</sup><br />Transport for business<br />events.</div>")
    style 10 fill:#facc2e
    7("<div style='background: #f5da81; color: #000000'><b>Reporting Database</b><br /><sup>[Container]</sup><br />Stores a normalised version<br />of all business data for ad<br />hoc reporting purposes.</div>")
    style 7 fill:#f5da81
    6("<div style='background: #facc2e; color: #000000'><b>Reporting Service</b><br /><sup>[Container]</sup><br />Creates normalised data for<br />reporting purposes.</div>")
    style 6 fill:#facc2e
  end
  8-. "<b>Stores events in</b><br /><sup></sup>" .->9
  3-. "<b>Updates customer information<br />using</b><br /><sup>[JSON/HTTPS]</sup>" .->4
  4-. "<b>Sends events to</b><br /><sup>[WebSocket]</sup>" .->3
  4-. "<b>Stores data in</b><br /><sup>[JDBC]</sup>" .->5
  4-. "<b>Sends customer update events<br />to</b><br /><sup></sup>" .->10
  2-. "<b>Uses</b><br /><sup></sup>" .->3
  10-. "<b>Sends customer update events<br />to</b><br /><sup></sup>" .->8
  10-. "<b>Sends customer update events<br />to</b><br /><sup></sup>" .->6
  6-. "<b>Stores data in</b><br /><sup></sup>" .->7

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

Customer Information System - Dynamic

This diagram shows what happens when a customer updates their details.

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

graph TB
  8("<div style='background: #facc2e; color: #000000'><b>Audit Service</b><br /><sup>[Container]</sup><br />Provides organisation-wide<br />auditing facilities.</div>")
  style 8 fill:#facc2e
  9("<div style='background: #f5da81; color: #000000'><b>Audit Store</b><br /><sup>[Container]</sup><br />Stores information about<br />events that have happened.</div>")
  style 9 fill:#f5da81
  2("<div style='background: #ffbf00; color: #000000'><b>Customer</b><br /><sup>[Person]</sup><br />A customer</div>")
  style 2 fill:#ffbf00
  3("<div style='background: #facc2e; color: #000000'><b>Customer Application</b><br /><sup>[Container]</sup><br />Allows customers to manage<br />their profile.</div>")
  style 3 fill:#facc2e
  5("<div style='background: #f5da81; color: #000000'><b>Customer Database</b><br /><sup>[Container]</sup><br />Stores customer information.</div>")
  style 5 fill:#f5da81
  4("<div style='background: #facc2e; color: #000000'><b>Customer Service</b><br /><sup>[Container]</sup><br />The point of access for<br />customer information.</div>")
  style 4 fill:#facc2e
  10("<div style='background: #facc2e; color: #000000'><b>Message Bus</b><br /><sup>[Container]</sup><br />Transport for business<br />events.</div>")
  style 10 fill:#facc2e
  7("<div style='background: #f5da81; color: #000000'><b>Reporting Database</b><br /><sup>[Container]</sup><br />Stores a normalised version<br />of all business data for ad<br />hoc reporting purposes.</div>")
  style 7 fill:#f5da81
  6("<div style='background: #facc2e; color: #000000'><b>Reporting Service</b><br /><sup>[Container]</sup><br />Creates normalised data for<br />reporting purposes.</div>")
  style 6 fill:#facc2e
  2-->|"<b>1. Uses</b><br /><sup></sup>"|3
  3-->|"<b>2. Updates customer information<br />using</b><br /><sup>[JSON/HTTPS]</sup>"|4
  4-->|"<b>3. Stores data in</b><br /><sup>[JDBC]</sup>"|5
  4-->|"<b>4. Sends customer update events<br />to</b><br /><sup></sup>"|10
  4-->|"<b>5. Confirms update to</b><br /><sup>[WebSocket]</sup>"|3
  10-->|"<b>5. Sends customer update events<br />to</b><br /><sup></sup>"|8
  10-->|"<b>5. Sends customer update events<br />to</b><br /><sup></sup>"|6
  8-->|"<b>6. Stores events in</b><br /><sup></sup>"|9
  6-->|"<b>6. Stores data in</b><br /><sup></sup>"|7

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