docs: added layers, vertex, edge, cosmetics

docs/docs/configuration.md

@@ -49,7 +49,10 @@ Compatibility tests are included for latest LTS Python versions that have ``Secu
 | 3.7     | 26 Jun 2018 | 27 Jun 2023      | 3.7.17  |
 
 {: .highlight }
-You can use ``multicloud-diagrams`` with ``Python`` versions ``<3.7`` that do not have official ``Security Support`` with your own verification.
+>You can use ``multicloud-diagrams`` with ``Python`` versions ``<3.7`` that do not have official ``Security Support`` with your own verification.
+>
+>Since  ``27 Jun 2023`` Python ``3.7`` has no security support, ``multicloud-diagrams`` are still support this version (pipeline with full features compatibility check), however on next Python LTS releases
+it will be deprecated. This evolution will enable us to seamlessly embrace the latest language features not accessible in the 3.7 release.
 
 The package is readily accessible on [PyPI: https://pypi.org/project/multicloud-diagrams/](https://pypi.org/project/multicloud-diagrams/)
 for easy installation and usage. As an open-source project, it encourages community participation and welcomes contributions from developers

docs/docs/core-components/fallback_vertex.md

@@ -13,9 +13,12 @@ New (v0.2.0)
 {: .label .label-green }
 
 {: .note }
-Fallback Vertex for node types that currently not present in the framework. The fallback icon will be rendered for such element. 
-Also you will see console WARNING: No such nodeType: non_existing_super_cloud_service in the Library (using default fallback icon Info). Please contact maintainer to add it, or provide MergeRequest``
-
+Framework library is periodically updated with new ``Vertex`` types added. 
+If you are using not currently supported vertex type, the fallback icon will be rendered for such element. 
+Also, you will see console message: 
+```shell
+WARNING: No such nodeType: non_existing_super_cloud_service in the Library (using default fallback icon Info). Please contact maintainer to add it, or provide MergeRequest``
+```
 ---
 
 ## Node Type: ``fallback_vertex``

docs/docs/core-components/integration.md

@@ -25,17 +25,7 @@ M[Mingrammer migration] --> A
 end
 ```
 
-{: .d-inline-block }
-``Diagrams as a Code`` approach is initially implemented from early versions. You can track syntax of resources declaration
+- ``Diagrams as a Code`` approach is initially implemented from early versions. You can track syntax of resources declaration
 for [Core](/docs/core-components/), [AWS](/docs/aws-components/) and [On-Prem](/docs/onprem-components/) resources.
-
-New (v0.2.1)
-{: .label .label-green }
-
-{: .d-inline-block }
-ingestion resources declared in external ``YAML`` file
-
-New (v0.3.8)
-{: .label .label-green }
-
-<BR>
+- ingestion resources declared in [external ``YAML`` file](/docs/core-components/yaml.html)
+

docs/docs/core-components/layers.md

@@ -20,148 +20,31 @@ In this context, an additional "IAM" layer is incorporated at the apex, further
 
 ![draw-apigw.gif](../images/draw-apigw.gif)
 
-Common kinds of callouts include `highlight`, `important`, `new`, `note`, and `warning`.
+## Code Snippet:
 
-{: .warning }
-These callout names are *not* pre-defined by the theme: you need to define your own names.
+Let's explore how to interact with layer starting from simple example - by adding 2 layers ``Storage`` and ``Processing`` with dedicated resources ``lambda function`` and ``dynamoDB`` for each layer: 
 
-
-[^postfix]:
-    You can put the callout markup either before or after its content.
-
-#### An untitled callout
-{: .no_toc }
-
-```markdown
-{: .highlight }
-A paragraph
-```
-
-{: .highlight }
-A paragraph
-
-
-#### A single paragraph callout
-{: .no_toc }
-
-```markdown
-{: .note }
-A paragraph
-```
-
-`{: .note }`
-A paragraph
-
-```markdown
-{: .note-title }
-> My note title
->
-> A paragraph with a custom title callout
-```
-
-{: .note-title }
-> My note title
->
-> A paragraph with a custom title callout
-
-#### A multi-paragraph callout
-{: .no_toc }
-
-```markdown
-{: .important }
-> A paragraph
->
-> Another paragraph
->
-> The last paragraph
-```
-
-{: .important }
-> A paragraph
->
-> Another paragraph
->
-> The last paragraph
-
-```markdown
-{: .important-title }
-> My important title
->
-> A paragraph
->
-> Another paragraph
->
-> The last paragraph
+```python
+{% root_include_snippet ../tests/core/test_layer.py layer%}
 ```
 
-{: .important-title }
-> My important title
->
-> A paragraph
->
-> Another paragraph
->
-> The last paragraph
-
-#### An indented callout
-{: .no_toc }
-
-```markdown
-> {: .highlight }
-  A paragraph
-```
-
-> {: .highlight }
-  A paragraph
+## Rendering:
 
-#### Indented multi-paragraph callouts
-{: .no_toc }
+![layers](output/jpg/layer_3.jpg)
 
-```markdown
-> {: .new }
-> > A paragraph
-> >
-> > Another paragraph
-> >
-> > The last paragraph
-```
+## Show/Hide Layers with assigned resources:
 
-> {: .new }
-> > A paragraph
-> >
-> > Another paragraph
-> >
-> > The last paragraph
+![layers](../images/drawio-layers.gif)
 
+### Full XML dump:
 
-#### Nested callouts
-{: .no_toc }
-
-```markdown
-{: .important }
-> {: .warning }
-> A paragraph
+```xml
+{% root_include docs/core-components/output/drawio/layer_3.drawio%}
 ```
 
-{: .important }
-> {: .warning }
-> A paragraph
+### drawio file:
 
-#### Opaque background
-{: .no_toc }
+Download generated ``layer_3.drawio``:
 
-```markdown
-{: .important }
-> {: .opaque }
-> <div markdown="block">
-> {: .warning }
-> A paragraph
-> </div>
-```
+[Download](output/drawio/layer_3.drawio){: .btn .btn-purple }
 
-{: .important }
-> {: .opaque }
-> <div markdown="block">
-> {: .warning }
-> A paragraph
-> </div>

docs/docs/core-components/output/drawio/edge.drawio

@@ -0,0 +1 @@
+<mxfile host="multicloud-diagrams" agent="PIP package multicloud-diagrams. Generate resources in draw.io compatible format for Cloud infrastructure. Copyrights @ Roman Tsypuk 2023. MIT license." type="MultiCloud"><diagram id="diagram_1" name="AWS components"><mxGraphModel dx="1015" dy="661" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="1"><root><mxCell id="0" /><mxCell id="1" parent="0" /><mxCell id="vertex:lambda_function:arn:aws:lambda:eu-west-1:123456789012:function:prod-lambda-name" value="&lt;b&gt;Name&lt;/b&gt;: prod-lambda-name&lt;BR&gt;&lt;b&gt;ARN&lt;/b&gt;: arn:aws:lambda:eu-west-1:123456789012:function:prod-lambda-name" style="verticalLabelPosition=bottom;verticalAlign=top;aspect=fixed;align=left;pointerEvents=1;shape=mxgraph.aws3.lambda_function;prIcon=server;fillColor=#F58534;gradientColor=none;html=1;" parent="1" vertex="1"><mxGeometry width="69" height="72" as="geometry" x="60" y="-40" /></mxCell><mxCell id="vertex:dynamo:arn:aws:dynamodb:eu-west-1:123456789012:table/prod-dynamo-table" value="&lt;b&gt;Name&lt;/b&gt;: prod-dynamo-table&lt;BR&gt;&lt;b&gt;ARN&lt;/b&gt;: arn:aws:dynamodb:eu-west-1:123456789012:table/prod-dynamo-table" style="outlineConnect=0;dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=left;html=1;shape=mxgraph.aws3.dynamo_db;fillColor=#2E73B8;gradientColor=none;" parent="1" vertex="1"><mxGeometry width="72" height="81" as="geometry" x="60" y="140" /></mxCell><mxCell id="edge:lambda_function:arn:aws:lambda:eu-west-1:123456789012:function:prod-lambda-name:to:dynamo:arn:aws:dynamodb:eu-west-1:123456789012:table/prod-dynamo-table" style="endFill=0;endArrow=none;endArrow=none;" parent="1" source="vertex:lambda_function:arn:aws:lambda:eu-west-1:123456789012:function:prod-lambda-name" target="vertex:dynamo:arn:aws:dynamodb:eu-west-1:123456789012:table/prod-dynamo-table" edge="2"><mxGeometry as="geometry" /></mxCell><mxCell id="label:lambda_function:arn:aws:lambda:eu-west-1:123456789012:function:prod-lambda-name:to:dynamo:arn:aws:dynamodb:eu-west-1:123456789012:table/prod-dynamo-table" value="GET permissions&lt;BR&gt;GET userinfo" style="edgeLabel;html=1;align=left;verticalAlign=middle;resizable=0;points=[];labelBackgroundColor=none;" parent="edge:lambda_function:arn:aws:lambda:eu-west-1:123456789012:function:prod-lambda-name:to:dynamo:arn:aws:dynamodb:eu-west-1:123456789012:table/prod-dynamo-table" vertex="1" connectable="0"><mxGeometry relative="1" as="geometry"><mxPoint as="offset" x="15" y="24" /></mxGeometry></mxCell></root></mxGraphModel></diagram></mxfile>

docs/docs/core-components/output/drawio/layer_3.drawio

@@ -0,0 +1 @@
+<mxfile host="multicloud-diagrams" agent="PIP package multicloud-diagrams. Generate resources in draw.io compatible format for Cloud infrastructure. Copyrights @ Roman Tsypuk 2023. MIT license." type="MultiCloud"><diagram id="diagram_1" name="AWS components"><mxGraphModel dx="1015" dy="661" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="1"><root><mxCell id="0" /><mxCell id="1" parent="0" /><mxCell id="2" parent="0" value="Processing" /><mxCell id="3" parent="0" value="Storage" /><mxCell id="vertex:lambda_function:arn:aws:lambda:eu-west-1:123456789012:function:prod-lambda-name" value="&lt;b&gt;Name&lt;/b&gt;: prod-lambda-name&lt;BR&gt;&lt;b&gt;ARN&lt;/b&gt;: arn:aws:lambda:eu-west-1:123456789012:function:prod-lambda-name" style="verticalLabelPosition=bottom;verticalAlign=top;aspect=fixed;align=left;pointerEvents=1;shape=mxgraph.aws3.lambda_function;prIcon=server;fillColor=#F58534;gradientColor=none;html=1;" parent="2" vertex="1"><mxGeometry width="69" height="72" as="geometry" x="180" y="-20" /></mxCell><mxCell id="vertex:dynamo:arn:aws:dynamodb:eu-west-1:123456789012:table/prod-dynamo-table" value="&lt;b&gt;Name&lt;/b&gt;: prod-dynamo-table&lt;BR&gt;&lt;b&gt;ARN&lt;/b&gt;: arn:aws:dynamodb:eu-west-1:123456789012:table/prod-dynamo-table" style="outlineConnect=0;dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=left;html=1;shape=mxgraph.aws3.dynamo_db;fillColor=#2E73B8;gradientColor=none;" parent="3" vertex="1"><mxGeometry width="72" height="81" as="geometry" x="60" y="140" /></mxCell><mxCell id="edge:lambda_function:arn:aws:lambda:eu-west-1:123456789012:function:prod-lambda-name:to:dynamo:arn:aws:dynamodb:eu-west-1:123456789012:table/prod-dynamo-table" style="endFill=0;endArrow=none;endArrow=none;" parent="1" source="vertex:lambda_function:arn:aws:lambda:eu-west-1:123456789012:function:prod-lambda-name" target="vertex:dynamo:arn:aws:dynamodb:eu-west-1:123456789012:table/prod-dynamo-table" edge="2"><mxGeometry as="geometry" /></mxCell><mxCell id="label:lambda_function:arn:aws:lambda:eu-west-1:123456789012:function:prod-lambda-name:to:dynamo:arn:aws:dynamodb:eu-west-1:123456789012:table/prod-dynamo-table" value="GET permissions" style="edgeLabel;html=1;align=left;verticalAlign=middle;resizable=0;points=[];labelBackgroundColor=none;" parent="edge:lambda_function:arn:aws:lambda:eu-west-1:123456789012:function:prod-lambda-name:to:dynamo:arn:aws:dynamodb:eu-west-1:123456789012:table/prod-dynamo-table" vertex="1" connectable="0"><mxGeometry relative="1" as="geometry"><mxPoint as="offset" /></mxGeometry></mxCell></root></mxGraphModel></diagram></mxfile>

docs/docs/core-components/output/drawio/vertex.drawio

@@ -0,0 +1 @@
+<mxfile host="multicloud-diagrams" agent="PIP package multicloud-diagrams. Generate resources in draw.io compatible format for Cloud infrastructure. Copyrights @ Roman Tsypuk 2023. MIT license." type="MultiCloud"><diagram id="diagram_1" name="AWS components"><mxGraphModel dx="1015" dy="661" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="1"><root><mxCell id="0" /><mxCell id="1" parent="0" /><mxCell id="vertex:lambda_function:arn:aws:lambda:eu-west-1:123456789012:function:prod-lambda-name" value="&lt;b&gt;Name&lt;/b&gt;: prod-lambda-name&lt;BR&gt;&lt;b&gt;ARN&lt;/b&gt;: arn:aws:lambda:eu-west-1:123456789012:function:prod-lambda-name" style="verticalLabelPosition=bottom;verticalAlign=top;aspect=fixed;align=left;pointerEvents=1;shape=mxgraph.aws3.lambda_function;prIcon=server;fillColor=#F58534;gradientColor=none;html=1;" parent="1" vertex="1"><mxGeometry width="69" height="72" as="geometry" x="60" y="-40" /></mxCell></root></mxGraphModel></diagram></mxfile>

docs/docs/core-components/output/drawio/vertex_meta.drawio

@@ -0,0 +1 @@
+<mxfile host="multicloud-diagrams" agent="PIP package multicloud-diagrams. Generate resources in draw.io compatible format for Cloud infrastructure. Copyrights @ Roman Tsypuk 2023. MIT license." type="MultiCloud"><diagram id="diagram_1" name="AWS components"><mxGraphModel dx="1015" dy="661" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="1"><root><mxCell id="0" /><mxCell id="1" parent="0" /><mxCell id="vertex:lambda_function:arn:aws:lambda:eu-west-1:123456789012:function:prod-lambda-name" value="&lt;b&gt;Name&lt;/b&gt;: prod-lambda-name&lt;BR&gt;&lt;b&gt;ARN&lt;/b&gt;: arn:aws:lambda:eu-west-1:123456789012:function:prod-lambda-name&lt;BR&gt;-----------&lt;BR&gt;&lt;b&gt;CodeSize&lt;/b&gt;: 1234&lt;BR&gt;&lt;b&gt;Handler&lt;/b&gt;: main&lt;BR&gt;&lt;b&gt;Layers&lt;/b&gt;: 0&lt;BR&gt;&lt;b&gt;Memory&lt;/b&gt;: 128&lt;BR&gt;&lt;b&gt;PackageType&lt;/b&gt;: Zip&lt;BR&gt;&lt;b&gt;Runtime&lt;/b&gt;: go1.x&lt;BR&gt;&lt;b&gt;Timeout&lt;/b&gt;: 30&lt;BR&gt;&lt;b&gt;TracingConfig&lt;/b&gt;: {'Mode': 'Active'}&lt;BR&gt;&lt;b&gt;Version&lt;/b&gt;: $LATEST" style="verticalLabelPosition=bottom;verticalAlign=top;aspect=fixed;align=left;pointerEvents=1;shape=mxgraph.aws3.lambda_function;prIcon=server;fillColor=#F58534;gradientColor=none;html=1;" parent="1" vertex="1"><mxGeometry width="69" height="72" as="geometry" x="60" y="-40" /></mxCell></root></mxGraphModel></diagram></mxfile>

docs/docs/core-components/vertices_edges.md

@@ -10,7 +10,8 @@ date: 2023-08-07
 
 {: .highlight }
 Vertices & Edges are core components of ``multicloud-diagrams`` framework. It supports ingestion of these elements 
-through programming API, YAML-based file.
+through programming API or from YAML-based files.
+
 ## Vertex
 
 ```python
@@ -20,33 +21,83 @@ def add_vertex(self,
                fill_color: str = None, x: int = None, y: int = None)
 ```
 
-| Mandatory |           |
-|:----------|:------------------|
-| node_id   | good swedish fish |
-| node_name | good and plenty   |
-| node_type | good `zoute` drop |
+| Mandatory     |                                                                                                                                                                                                       |
+|:--------------|:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| **node_id**   | unique identifier (FQDN, URL, ARN, etc.) - unique in entire diagram                                                                                                                                   |
+| **node_name** | any value (FQDN, URL, alpha-numeric value, etc.)                                                                                                                                                      |
+| **node_type** | there is a defined list of supported node_types for rendering (**dynamodb**, **lambda_function**, etc.), if node type is not supported, fallback will be used. Each node on documentation page has node_type. |
+
+| Optional       |                                                                                     |
+|:---------------|:------------------------------------------------------------------------------------|
+| **metadata**   | key/value pairs used to represent additional information                            |
+| **layer_name** | vertices can be added to specific layer, if not specified the default layer is used |
+| **layer_id**   | for programmatic access layers can be referenced also by ID                         |
+| **fill_color** | if specified changes default Vertex fill color                                      |
+| **x**          | positioning Vertex on palette                                                       |
+| **y**          | positioning Vertex on palette                                                       |
+
+### Code Snippet NO Metadata:
+
+```python
+{% root_include_snippet ../tests/core/test_vertex.py vertex%}
+```
+
+### Rendering:
 
+![layers](output/jpg/vertex.jpg)
 
-| Optional   |        |
-|:-----------|:------------------|
-| metadata   | good swedish fish |
-| layer_name | good swedish fish |
-| layer_id   | good swedish fish |
-| fill_color | good swedish fish |
-| x          | good swedish fish |
-| y          | good swedish fish |
+### Code Snippet with Metadata:
+
+``Metadata`` is represented as dictionary of key/value pairs. When rendering ``key`` is be marked with bold, each key/value pair
+is located on dedicated line.
+
+```python
+{% root_include_snippet ../tests/core/test_vertex.py vertex_metadata%}
+```
+
+### Rendering:
+
+![layers](output/jpg/vertex_meta.jpg)
 
 ## Edge
 
-Each ``vertex`` has a mandatory and optional attributes.
+```python
+def add_link(self, src_node_id, dst_node_id, action=None)
+```
+
+| Mandatory Attributes |                  |
+|:---------------------|:-----------------|
+| **src_node_id**      | RESOURCE_TYPE:ID |
+| **dst_node_id**      | RESOURCE_TYPE:ID |
+
+| Optional Attributes |          |
+|:--------------------|:---------|
+| **action**          | string[] |
+
+
+
+``Vertices`` are connected using ``Edges``. Such edge is build by specifying ``source`` and ``target`` Vertex IDs. These connections, also can have a series of labels to describe the relation or actions.
+
+``node_id`` has the following syntax: ``<RESOURCE_TYPE>:<ID>``. Examples:
 
-| Optional Attributes  | head two          |
-|:---------------------|:------------------|
-| metadata             | good swedish fish |
+```python
+'lambda_function:arn:aws:lambda:eu-west-1:123456789012:function:prod-lambda-name',
+'dynamo:arn:aws:dynamodb:eu-west-1:123456789012:table/prod-dynamo-table',
+```
 
-To see the list of all supported nodes (currently AWS and on-prem), syntax of each node with examples, please follow to ``AWS Components`` section
+### Code Snippet Edge with Label of Actions:
 
-Vertices are connected using edges, by specifying source and target Vertex IDs. Also allowing to add labels to connection.
+```python
+{% root_include_snippet ../tests/core/test_vertex.py edge%}
+```
 
-ID syntax is: ``RESOURCE_TYPE:ARN``
-Examples: f'lambda_function:{func_arn}' f'iam_role:{role_arn}'
+### Rendering:
+
+![layers](output/jpg/edge.jpg)
+
+{: .highlight }
+The comprehensive compilation of supported Components, accompanied by their respective syntax, enriched with illustrative code snippets, rendering previews, and credible sources,
+can be found on appropriate section of this documentation:
+- [``CORE Components``](../core-components)
+- [``AWS Components``](../aws-components)
+- [``On-Prem Components``](../onprem-components)

docs/docs/extra.md

@@ -1,11 +1,11 @@
 ---
 layout: default
-title: DRAWIO How-To
-nav_order: 4
+title: DRAWIO How-to
+nav_order: 6
 date: 2023-08-07
 ---
 
-# DRAWIO How To
+# DRAWIO How-to
 {: .no_toc }
 
 Draw.io has gained widespread popularity as an extensively used editor and file format. Apart from the standard web browser version, it offers various other scenarios for usage, which include:

docs/docs/onprem-components/onprem-components.md

@@ -1,7 +1,7 @@
 ---
 layout: default
 title: ONPREM Components
-nav_order: 4
+nav_order: 5
 has_children: true
 permalink: /docs/onprem-components
 date: 2023-08-06