This site was generated as explained below:
Notes:
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.
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
“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.
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.
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.