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 under the terms of Creative Commons Attribution 4.0 International License. The diagram uses free icons from Icons8 to provide visual distinction between architecture elements.
• The diagram was mapped to the Architecture model using properties of the diagram elements as explained in the Beyond Diagrams book.
• 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.
• Only Send e-mail using relationship is mapped and documented 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.

Mapping

• Root -> c4.Context
• Surroundings -> Person, System
• Internet Banking System -> System

Root -> c4.Context

The root of the diagram is mapped to Context with the type property set to c4.Context

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 (c4.Context) 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 -> Person, System

“Personal Banking Customer” is mapped to Person. “E-mail System”, and “Mainframe Banking System” diagram elements are mapped to System. 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 -> System

The “Internet Banking System” diagram element is mapped to System. 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 a JUnit test. Another way to generate documentation site is to use Nasdanika CLI app/model/site command or app/model/action command and then app/site command.