Internet Banking System Architecture

This site was generated as explained below:

A Drawio diagram of an Internet Banking System was created based on images and descriptions from The C4 model for visualising software architecture. Descriptions of elements and diagrams were copied verbatim. The diagram uses free icons from Icons8 to provide visual distinction between architecture elements.
The diagram was mapped the Architecture model using properties of the diagram elements.
Then the architecture model was transformed to the HTML Application model and a static web site was generated from that model. For the majority of elements icons were generated from the diagram images of the respective elements.
The web site is deployed by GitHub Pages.

Notes:

Diagram elements have tooltips with descriptions from the C4 model site.
A click on a diagram element navigates to the element page.
The left navigation provides a filter to quickly find a model element by name.
Search provides full-text search which also searches for text in diagrams.
Glossary provides a list of “terms” - a dictionary of the language of the system. It needs improvements - currently it shows all actions. Uncheck “Hide UUID” to see the elements. Elements can be filtered using the filter text field.
There is a link to the source code on GitHub in the footer.
Connections (relationships) are not mapped in this demo.

The the above diagram is a System Context diagram, which is

a good starting point for diagramming and documenting a software system, allowing you to step back and see the big picture. Draw a diagram showing your system as a box in the centre, surrounded by its users and the other systems that it interacts with.

Root -> ArchitectureDescription

The root of the diagram is mapped to Architecture Description with the type property set to ArchitectureDescription

This documentation was generated from internet-banking-system-architecture.md markdown file with the image above embedded using png-resource fenced block and the diagram embedded using drawio fenced block with representations/drawio/diagram expansion token.

Diagram semantic elements were mapped to the root semantic element (ArchitectureDescription) using the following feature-map:

container:
  self: 
    elements:
      path: 2
      comparator: label

The above mapping means that use the semantic element of this diagram element (root) and add semantic elements of its descendants at path length 2 to the elements reference ordering by label. Path length is set to 2 because the diagram elements are contained by the background layer, which is in turn contained by the root.

page-element set to true specifies that the root semantic element shall also be the page’s semantic elements. Because this is the top-level page (not linked from diagram elements), it also becomes the document’s semantic element and as such the contents element of the diagram’s Ecore resource.

spec sets archtiecture description name to “Internet Banking System Architecture” - this is what is displayed in the grey navigation bar above:

name: Internet Banking System Architecture

Surroundings -> Node

“Personal Banking Customer”, “E-mail System”, and “Mainframe Banking System” diagram elements are mapped to Node. They have semantic-id property to demonstrate its usage. Another way to provide meaningful ID’s and URL’s is to edit element ID’s - this approach is used on lower-level diagrams.

The “Personal Banking Customer” element does not have an image associated with it and therefore uses an explicit icon spec:

icon: https://img.icons8.com/officel/16/user.png

Tooltips are copied from descriptions on the C4 Model diagram.

Internet Banking System -> CompositeNode

The “Internet Banking System” diagram element is mapped to CompositeNode because it has sub-elements. It is linked to the “Container Diagram” page. As such, its semantic element is mapped to the “Container Diagram” page element as well allowing further mapping on that page.

Generation

This site was generated with 85 lines of Java code in a JUnit test.