docs: added animated gifs for getting started

docs/docs/configuration.md

@@ -84,6 +84,8 @@ Edit your ``project.toml`` and add ``multicloud-diagrams`` as dependecy:
 
 The minimum configuration requires importing MultiCloudDiagrams, adding vertices, connecting them with links and exporting to output file.
 
+Let's add 2 vertices ``IAM Role`` and ``Lambda function``:
+
 ```python
 from multicloud_diagrams import MultiCloudDiagrams
 
@@ -101,17 +103,28 @@ mcd.add_link(src_node_id=f'lambda_function:{func_arn}', dst_node_id=f'iam_role:{
 mcd.export_to_file(output_file)
 ```
 
-## Open drawio editor and position nodes manually or using automated Alignment
+## Open drawio editor and position nodes manually
 
 {: .d-inline-block }
 
+Considering that we haven't specified the coordinates or distribution algorithm yet (which will be detailed in the next instructions), by default, all elements will be placed in the left-top corner. 
+We have the flexibility to move and position them according to our preferences.
+
+![IAM add Role and Lambda](images/open-iam.gif)
+
 ## Reuse coordinates from previous diagram version
 
 {: .d-inline-block }
 
 New (v0.2.1)
 {: .label .label-green }
 
+When we provide the path to an existing ``drawio`` file, the current context framework will read the coordinates of all vertices from the previous diagram and reuse them. 
+As a result, any new elements will be added to the top-left corner by default, while existing elements will retain their original coordinates. 
+If certain vertices were removed from the framework, they will not be present in the resulting ``drawio`` file. 
+
+Now, we are adding 2 more vertices ``IAM Permissions`` to see how it works.
+
 ```python
 from multicloud_diagrams import MultiCloudDiagrams
 
@@ -126,14 +139,35 @@ mcd.add_vertex(node_id=func_arn, node_name='prod-lambda-name', arn=func_arn, nod
 
 role_arn = 'arn:aws:iam::123456789012:role/prod-lambda-name'
 mcd.add_vertex(node_id=role_arn, node_name='role-lambda-name', arn=role_arn, node_type='iam_role')
+
+cw_policy_arn = "arn:aws:iam::123456789012:policy/prod-cloudwatch-policy"
+mcd.add_vertex(node_id=cw_policy_arn, node_name='prod-cloudwatch-policy', arn=cw_policy_arn, node_type='iam_policy')
+
+s3_policy_arn = "arn:aws:iam::123456789012:policy/prod-s3-policy"
+mcd.add_vertex(node_id=s3_policy_arn, node_name='prod-s3-policy', arn=s3_policy_arn, node_type='iam_policy')
+
 mcd.add_link(src_node_id=f'lambda_function:{func_arn}', dst_node_id=f'iam_role:{role_arn}')
+mcd.add_link(f'iam_role:{role_arn}', f'iam_policy:{cw_policy_arn}')
+mcd.add_link(f'iam_role:{role_arn}', f'iam_policy:{s3_policy_arn}')
 
 # We can write to same Diagram
 mcd.export_to_file(output_file)
 
 # Or write to a new Diagram version
-mcd.export_to_file('../output/diagram.drawio')
+mcd.export_to_file('../output/diagram_v2.drawio')
 ```
 
+This approach allows for efficient placement of new elements while preserving the layout of existing ones based on the previous diagram's coordinates.
+
+![IAM add Permissions](images/iam-add-permissions.gif)
+
+By leveraging this feature, we can implement versioning effectively by consistently reading coordinates from the previous file, 
+which includes a timestamp (e.g., ``datetime`` in the file name). Subsequently, we write the updated elements to a new file. 
+This functionality proves invaluable for tracking historical records and facilitating a comprehensive comparison of infrastructure evolution over time.
+
+## Arrange Layout automatic positioning
+
+![IAM add Permissions](images/arrange-layout.gif)
+
 For more advanced use cases, detailed customization options, and in-depth functionalities, please continue exploring the next sections in our documentation. There, you will find a wealth of
 information to help you leverage the full potential of multicloud-diagrams in your projects. Happy diagramming!

docs/docs/core-components/vertices_edges.md

@@ -7,41 +7,39 @@ nav_order: 1
 
 # Vertices & Edges
 
-Tables are responsive by default, allowing wide tables to have a horizontal scroll to access columns outside of the normal viewport.
-
-<div class="code-example" markdown="1">
-
-| head1        | head two          | three |
-|:-------------|:------------------|:------|
-| ok           | good swedish fish | nice  |
-| out of stock | good and plenty   | nice  |
-| ok           | good `oreos`      | hmm   |
-| ok           | good `zoute` drop | yumm  |
-
-</div>
-```markdown
-| head1        | head two          | three |
-|:-------------|:------------------|:------|
-| ok           | good swedish fish | nice  |
-| out of stock | good and plenty   | nice  |
-| ok           | good `oreos`      | hmm   |
-| ok           | good `zoute` drop | yumm  |
+## Vertex
+
+```python
+def add_vertex(self, 
+               node_id: str, node_name: str, arn: str = None, metadata: dict = None,
+               node_type: str = '', layer_name: str = None, layer_id: str = None,
+               fill_color: str = None, x: int = None, y: int = None)
 ```
 
-## Vertices and Edges
+| Mandatory |           |
+|:----------|:------------------|
+| node_id   | good swedish fish |
+| node_name | good and plenty   |
+| arn       | good `oreos`      |
+| node_type | good `zoute` drop |
 
-Each ``vertex`` has a mandatory and optional attributes.
 
-Mandatory Attributes:
+| 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 |
 
-- node_id
-- node_name
-- arn
-- node_type
+## Edge
 
-Optional Attributes:
+Each ``vertex`` has a mandatory and optional attributes.
 
-- metadata
+| Optional Attributes  | head two          |
+|:---------------------|:------------------|
+| metadata             | good swedish fish |
 
 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
 

samples/output/output.prod.iam-roles.drawio

@@ -1 +1 @@
-<mxfile host="drawio-plugin" agent="5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.5112.102 Safari/537.36" modified="2023-07-29T16:23:53.306Z" version="20.5.3" etag="eM1ycTeoPJTLErbXWuGA" type="embed"><diagram id="diagram_1" name="AWS components"><mxGraphModel dx="1631" dy="1849" 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;html=1;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 x="-69" y="-20" width="69" height="72" as="geometry"/></mxCell><mxCell id="vertex:iam_role:arn:aws:iam::123456789012:role/prod-lambda-name" value="&lt;b&gt;Name&lt;/b&gt;: role-lambda-name&lt;BR&gt;&lt;b&gt;ARN&lt;/b&gt;: arn:aws:iam::123456789012:role/prod-lambda-name" style="outlineConnect=0;dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=left;html=1;shape=mxgraph.aws3.role;fillColor=#759C3E;gradientColor=none;" parent="1" vertex="1"><mxGeometry x="-80" y="140.00000000000009" width="94.5" height="79.5" as="geometry"/></mxCell><mxCell id="vertex:iam_policy:arn:aws:iam::123456789012:policy/prod-cloudwatch-policy" value="&lt;b&gt;Name&lt;/b&gt;: prod-cloudwatch-policy&lt;BR&gt;&lt;b&gt;ARN&lt;/b&gt;: arn:aws:iam::123456789012:policy/prod-cloudwatch-policy" style="sketch=0;outlineConnect=0;fontColor=#232F3E;gradientColor=none;fillColor=#3F8624;strokeColor=none;dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=left;html=1;fontSize=12;fontStyle=0;aspect=fixed;pointerEvents=1;shape=mxgraph.aws4.policy;" parent="1" vertex="1"><mxGeometry x="107.85888455830158" y="319.99286423742245" width="78" height="67" as="geometry"/></mxCell><mxCell id="vertex:iam_policy:arn:aws:iam::123456789012:policy/prod-s3-policy" value="&lt;b&gt;Name&lt;/b&gt;: prod-s3-policy&lt;BR&gt;&lt;b&gt;ARN&lt;/b&gt;: arn:aws:iam::123456789012:policy/prod-s3-policy" style="sketch=0;outlineConnect=0;fontColor=#232F3E;gradientColor=none;fillColor=#3F8624;strokeColor=none;dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=left;html=1;fontSize=12;fontStyle=0;aspect=fixed;pointerEvents=1;shape=mxgraph.aws4.policy;" parent="1" vertex="1"><mxGeometry x="-220.0011154416985" y="319.99713576257756" width="78" height="67" as="geometry"/></mxCell><mxCell id="edge:lambda_function:arn:aws:lambda:eu-west-1:123456789012:function:prod-lambda-name:to:iam_role:arn:aws:iam::123456789012:role/prod-lambda-name" 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:iam_role:arn:aws:iam::123456789012:role/prod-lambda-name" edge="2"><mxGeometry as="geometry"/></mxCell><mxCell id="edge:iam_role:arn:aws:iam::123456789012:role/prod-lambda-name:to:iam_policy:arn:aws:iam::123456789012:policy/prod-cloudwatch-policy" style="endFill=0;endArrow=none;endArrow=none;" parent="1" source="vertex:iam_role:arn:aws:iam::123456789012:role/prod-lambda-name" target="vertex:iam_policy:arn:aws:iam::123456789012:policy/prod-cloudwatch-policy" edge="2"><mxGeometry as="geometry"/></mxCell><mxCell id="edge:iam_role:arn:aws:iam::123456789012:role/prod-lambda-name:to:iam_policy:arn:aws:iam::123456789012:policy/prod-s3-policy" style="endFill=0;endArrow=none;endArrow=none;" parent="1" source="vertex:iam_role:arn:aws:iam::123456789012:role/prod-lambda-name" target="vertex:iam_policy:arn:aws:iam::123456789012:policy/prod-s3-policy" edge="2"><mxGeometry as="geometry"/></mxCell></root></mxGraphModel></diagram></mxfile>
+<mxfile host="drawio-plugin" agent="5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.5112.102 Safari/537.36" modified="2023-08-06T11:27:34.153Z" version="20.5.3" etag="dUSTD4U2SJtL_fX7ix-x" type="embed"><diagram id="diagram_1" name="AWS components"><mxGraphModel dx="753" dy="539" 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;html=1;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 x="138.0000000000001" width="69" height="72" as="geometry"/></mxCell><mxCell id="vertex:iam_role:arn:aws:iam::123456789012:role/prod-lambda-name" value="&lt;b&gt;Name&lt;/b&gt;: role-lambda-name&lt;BR&gt;&lt;b&gt;ARN&lt;/b&gt;: arn:aws:iam::123456789012:role/prod-lambda-name" style="outlineConnect=0;dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=left;html=1;shape=mxgraph.aws3.role;fillColor=#759C3E;gradientColor=none;" parent="1" vertex="1"><mxGeometry x="185.5000000000001" y="158.00000000000009" width="94.5" height="79.5" as="geometry"/></mxCell><mxCell id="vertex:iam_policy:arn:aws:iam::123456789012:policy/prod-cloudwatch-policy" value="&lt;b&gt;Name&lt;/b&gt;: prod-cloudwatch-policy&lt;BR&gt;&lt;b&gt;ARN&lt;/b&gt;: arn:aws:iam::123456789012:policy/prod-cloudwatch-policy" style="sketch=0;outlineConnect=0;fontColor=#232F3E;gradientColor=none;fillColor=#3F8624;strokeColor=none;dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=left;html=1;fontSize=12;fontStyle=0;aspect=fixed;pointerEvents=1;shape=mxgraph.aws4.policy;" parent="1" vertex="1"><mxGeometry y="323.50000000000017" width="78" height="67" as="geometry"/></mxCell><mxCell id="vertex:iam_policy:arn:aws:iam::123456789012:policy/prod-s3-policy" value="&lt;b&gt;Name&lt;/b&gt;: prod-s3-policy&lt;BR&gt;&lt;b&gt;ARN&lt;/b&gt;: arn:aws:iam::123456789012:policy/prod-s3-policy" style="sketch=0;outlineConnect=0;fontColor=#232F3E;gradientColor=none;fillColor=#3F8624;strokeColor=none;dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=left;html=1;fontSize=12;fontStyle=0;aspect=fixed;pointerEvents=1;shape=mxgraph.aws4.policy;" parent="1" vertex="1"><mxGeometry x="386.0000000000001" y="323.50000000000017" width="78" height="67" as="geometry"/></mxCell><mxCell id="edge:lambda_function:arn:aws:lambda:eu-west-1:123456789012:function:prod-lambda-name:to:iam_role:arn:aws:iam::123456789012:role/prod-lambda-name" 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:iam_role:arn:aws:iam::123456789012:role/prod-lambda-name" edge="2"><mxGeometry as="geometry"/></mxCell><mxCell id="edge:iam_role:arn:aws:iam::123456789012:role/prod-lambda-name:to:iam_policy:arn:aws:iam::123456789012:policy/prod-cloudwatch-policy" style="endFill=0;endArrow=none;endArrow=none;" parent="1" source="vertex:iam_role:arn:aws:iam::123456789012:role/prod-lambda-name" target="vertex:iam_policy:arn:aws:iam::123456789012:policy/prod-cloudwatch-policy" edge="2"><mxGeometry as="geometry"/></mxCell><mxCell id="edge:iam_role:arn:aws:iam::123456789012:role/prod-lambda-name:to:iam_policy:arn:aws:iam::123456789012:policy/prod-s3-policy" style="endFill=0;endArrow=none;endArrow=none;" parent="1" source="vertex:iam_role:arn:aws:iam::123456789012:role/prod-lambda-name" target="vertex:iam_policy:arn:aws:iam::123456789012:policy/prod-s3-policy" edge="2"><mxGeometry as="geometry"/></mxCell></root></mxGraphModel></diagram></mxfile>