Skip to content

Commit

Permalink
feat: customization edges completed
Browse files Browse the repository at this point in the history
  • Loading branch information
tsypuk committed Aug 19, 2023
1 parent 5465422 commit ea458a9
Show file tree
Hide file tree
Showing 26 changed files with 533 additions and 38 deletions.
4 changes: 2 additions & 2 deletions docs/docs/core-components/colors.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
---
layout: default
title: Customization
title: Customizing Vertex
parent: CORE Components
nav_order: 3
date: 2023-08-16
---

# Customization
# Customizing Vertex
{: .d-inline-block .no_toc}

New (v0.3.13)
Expand Down
148 changes: 148 additions & 0 deletions docs/docs/core-components/custom_edge.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,148 @@
---
layout: default
title: Customizing Edge
parent: CORE Components
nav_order: 3
date: 2023-08-16
---

# Customizing Edge
{: .d-inline-block .no_toc}

New (v0.3.13)
{: .label .label-green }


## Table of contents
{: .no_toc .text-delta }

1. TOC
{:toc}

---

## Style Object, Predefined Connections, Generic Customizer

When passing ``style`` parameter, we can customize the representation of particular Edge. Here is the list of most widely used
parameters of style (there are much mode of them, you can customize any).

```python
style = {
'dashed': '1',
'strokeColor': '#FF3333',
'strokeWidth': '3',
'orthogonalLoop': '1',
'edgeStyle': 'orthogonalEdgeStyle',
'curved': '1',
'startArrow': 'oval',
'endArrow': 'classicThin',
}
```

{: .highlight }
``multicloud-diagrams`` provides top level functions to apply defined styles based on name. Also, there is generic function ``add_connection``
that has ``style`` parameter to customize any style.

# Predefined Connections:

## Adding standard edge connection

### Code Snippet:
{: .no_toc }

```python
{% root_include_snippet ../tests/core/test_connections.py connection%}
```

## Rendering:
{: .no_toc }

![layers](output/jpg/connection.jpg)


## Bidirectional Connection

### Code Snippet:
{: .no_toc }

```python
{% root_include_snippet ../tests/core/test_connections.py add_bidirectional_link%}
```

## Rendering:
{: .no_toc }

![layers](output/jpg/connection_bidirectional.jpg)

## Unidirectional Connection

### Code Snippet:
{: .no_toc }

```python
{% root_include_snippet ../tests/core/test_connections.py add_unidirectional_link%}
```

## Rendering:
{: .no_toc }

![layers](output/jpg/connection_unidirectional.jpg)

# Generic Customizer:

## Dashed Connection

### Code Snippet:
{: .no_toc }

```python
{% root_include_snippet ../tests/core/test_connections.py add_dashed%}
```

## Rendering:
{: .no_toc }

![layers](output/jpg/connection_dashed.jpg)

## Stroked Colored Connection

### Code Snippet:
{: .no_toc }

```python
{% root_include_snippet ../tests/core/test_connections.py add_connection_stroked%}
```

## Rendering:
{: .no_toc }

![layers](output/jpg/connection_stroked.jpg)

## Rounded Connection

### Code Snippet:
{: .no_toc }

```python
{% root_include_snippet ../tests/core/test_connections.py add_connection_rounded%}
```

## Rendering:
{: .no_toc }

![layers](output/jpg/connection_custom.jpg)


## EdgeStyle Connection

### Code Snippet:
{: .no_toc }

```python
{% root_include_snippet ../tests/core/test_connections.py add_connection_edge%}
```

## Rendering:
{: .no_toc }

![layers](output/jpg/connection_edgeStyle.jpg)
24 changes: 24 additions & 0 deletions docs/docs/core-components/output/drawio/connection.drawio
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<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:nolabel" value="&lt;b&gt;Name&lt;/b&gt;: no-label&lt;BR&gt;&lt;b&gt;ARN&lt;/b&gt;: arn:aws:lambda:eu-west-1:123456789012:function:nolabel" style="verticalLabelPosition=bottom;verticalAlign=top;aspect=fixed;align=left;pointerEvents=1;shape=mxgraph.aws3.lambda_function;prIcon=server;fillColor=#F58534;gradientColor=none;html=1;noLabel=1;" parent="1" vertex="1">
<mxGeometry width="69" height="72" as="geometry"/>
</mxCell>
<mxCell id="vertex:dynamo:arn:aws:dynamodb:eu-west-1:123456789012:table/prod-dynamo-table" value="&lt;b&gt;Name&lt;/b&gt;: no-label&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;noLabel=1;" parent="1" vertex="1">
<mxGeometry width="72" height="81" as="geometry" x="140" y="160"/>
</mxCell>
<mxCell id="edge:lambda_function:arn:aws:lambda:eu-west-1:123456789012:function:nolabel:to:dynamo:arn:aws:dynamodb:eu-west-1:123456789012:table/prod-dynamo-table" style="jettySize=auto;html=1;startArrow=none;endArrow=none;" parent="1" source="vertex:lambda_function:arn:aws:lambda:eu-west-1:123456789012:function:nolabel" 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:nolabel:to:dynamo:arn:aws:dynamodb:eu-west-1:123456789012:table/prod-dynamo-table" value="GET data" 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:nolabel: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>
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<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:nolabel" value="&lt;b&gt;Name&lt;/b&gt;: no-label&lt;BR&gt;&lt;b&gt;ARN&lt;/b&gt;: arn:aws:lambda:eu-west-1:123456789012:function:nolabel" style="verticalLabelPosition=bottom;verticalAlign=top;aspect=fixed;align=left;pointerEvents=1;shape=mxgraph.aws3.lambda_function;prIcon=server;fillColor=#F58534;gradientColor=none;html=1;noLabel=1;" parent="1" vertex="1">
<mxGeometry width="69" height="72" as="geometry"/>
</mxCell>
<mxCell id="vertex:dynamo:arn:aws:dynamodb:eu-west-1:123456789012:table/prod-dynamo-table" value="&lt;b&gt;Name&lt;/b&gt;: no-label&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;noLabel=1;" parent="1" vertex="1">
<mxGeometry width="72" height="81" as="geometry" x="140" y="160"/>
</mxCell>
<mxCell id="edge:lambda_function:arn:aws:lambda:eu-west-1:123456789012:function:nolabel:to:dynamo:arn:aws:dynamodb:eu-west-1:123456789012:table/prod-dynamo-table" style="jettySize=auto;html=1;startArrow=classic;endArrow=classic;" parent="1" source="vertex:lambda_function:arn:aws:lambda:eu-west-1:123456789012:function:nolabel" 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:nolabel:to:dynamo:arn:aws:dynamodb:eu-west-1:123456789012:table/prod-dynamo-table" value="GET data" 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:nolabel: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>
24 changes: 24 additions & 0 deletions docs/docs/core-components/output/drawio/connection_custom.drawio
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<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:nolabel" value="&lt;b&gt;Name&lt;/b&gt;: no-label&lt;BR&gt;&lt;b&gt;ARN&lt;/b&gt;: arn:aws:lambda:eu-west-1:123456789012:function:nolabel" style="verticalLabelPosition=bottom;verticalAlign=top;aspect=fixed;align=left;pointerEvents=1;shape=mxgraph.aws3.lambda_function;prIcon=server;fillColor=#F58534;gradientColor=none;html=1;noLabel=1;" parent="1" vertex="1">
<mxGeometry width="69" height="72" as="geometry"/>
</mxCell>
<mxCell id="vertex:dynamo:arn:aws:dynamodb:eu-west-1:123456789012:table/prod-dynamo-table" value="&lt;b&gt;Name&lt;/b&gt;: no-label&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;noLabel=1;" parent="1" vertex="1">
<mxGeometry width="72" height="81" as="geometry" x="140" y="160"/>
</mxCell>
<mxCell id="edge:lambda_function:arn:aws:lambda:eu-west-1:123456789012:function:nolabel:to:dynamo:arn:aws:dynamodb:eu-west-1:123456789012:table/prod-dynamo-table" style="jettySize=auto;html=1;orthogonalLoop=1;edgeStyle=orthogonalEdgeStyle;curved=1;startArrow=oval;endArrow=classicThin;" parent="1" source="vertex:lambda_function:arn:aws:lambda:eu-west-1:123456789012:function:nolabel" 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:nolabel:to:dynamo:arn:aws:dynamodb:eu-west-1:123456789012:table/prod-dynamo-table" value="GET data" 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:nolabel: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>
24 changes: 24 additions & 0 deletions docs/docs/core-components/output/drawio/connection_dashed.drawio
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<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:nolabel" value="&lt;b&gt;Name&lt;/b&gt;: no-label&lt;BR&gt;&lt;b&gt;ARN&lt;/b&gt;: arn:aws:lambda:eu-west-1:123456789012:function:nolabel" style="verticalLabelPosition=bottom;verticalAlign=top;aspect=fixed;align=left;pointerEvents=1;shape=mxgraph.aws3.lambda_function;prIcon=server;fillColor=#F58534;gradientColor=none;html=1;noLabel=1;" parent="1" vertex="1">
<mxGeometry width="69" height="72" as="geometry"/>
</mxCell>
<mxCell id="vertex:dynamo:arn:aws:dynamodb:eu-west-1:123456789012:table/prod-dynamo-table" value="&lt;b&gt;Name&lt;/b&gt;: no-label&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;noLabel=1;" parent="1" vertex="1">
<mxGeometry width="72" height="81" as="geometry" x="140" y="160"/>
</mxCell>
<mxCell id="edge:lambda_function:arn:aws:lambda:eu-west-1:123456789012:function:nolabel:to:dynamo:arn:aws:dynamodb:eu-west-1:123456789012:table/prod-dynamo-table" style="jettySize=auto;html=1;dashed=1;" parent="1" source="vertex:lambda_function:arn:aws:lambda:eu-west-1:123456789012:function:nolabel" 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:nolabel:to:dynamo:arn:aws:dynamodb:eu-west-1:123456789012:table/prod-dynamo-table" value="GET data" 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:nolabel: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>
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<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:nolabel" value="&lt;b&gt;Name&lt;/b&gt;: no-label&lt;BR&gt;&lt;b&gt;ARN&lt;/b&gt;: arn:aws:lambda:eu-west-1:123456789012:function:nolabel" style="verticalLabelPosition=bottom;verticalAlign=top;aspect=fixed;align=left;pointerEvents=1;shape=mxgraph.aws3.lambda_function;prIcon=server;fillColor=#F58534;gradientColor=none;html=1;noLabel=1;" parent="1" vertex="1">
<mxGeometry width="69" height="72" as="geometry"/>
</mxCell>
<mxCell id="vertex:dynamo:arn:aws:dynamodb:eu-west-1:123456789012:table/prod-dynamo-table" value="&lt;b&gt;Name&lt;/b&gt;: no-label&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;noLabel=1;" parent="1" vertex="1">
<mxGeometry width="72" height="81" as="geometry" x="140" y="160"/>
</mxCell>
<mxCell id="edge:lambda_function:arn:aws:lambda:eu-west-1:123456789012:function:nolabel:to:dynamo:arn:aws:dynamodb:eu-west-1:123456789012:table/prod-dynamo-table" style="jettySize=auto;html=1;edgeStyle=elbowEdgeStyle;" parent="1" source="vertex:lambda_function:arn:aws:lambda:eu-west-1:123456789012:function:nolabel" 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:nolabel:to:dynamo:arn:aws:dynamodb:eu-west-1:123456789012:table/prod-dynamo-table" value="GET data" 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:nolabel: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>
24 changes: 24 additions & 0 deletions docs/docs/core-components/output/drawio/connection_stroked.drawio
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<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:nolabel" value="&lt;b&gt;Name&lt;/b&gt;: no-label&lt;BR&gt;&lt;b&gt;ARN&lt;/b&gt;: arn:aws:lambda:eu-west-1:123456789012:function:nolabel" style="verticalLabelPosition=bottom;verticalAlign=top;aspect=fixed;align=left;pointerEvents=1;shape=mxgraph.aws3.lambda_function;prIcon=server;fillColor=#F58534;gradientColor=none;html=1;noLabel=1;" parent="1" vertex="1">
<mxGeometry width="69" height="72" as="geometry"/>
</mxCell>
<mxCell id="vertex:dynamo:arn:aws:dynamodb:eu-west-1:123456789012:table/prod-dynamo-table" value="&lt;b&gt;Name&lt;/b&gt;: no-label&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;noLabel=1;" parent="1" vertex="1">
<mxGeometry width="72" height="81" as="geometry" x="140" y="160"/>
</mxCell>
<mxCell id="edge:lambda_function:arn:aws:lambda:eu-west-1:123456789012:function:nolabel:to:dynamo:arn:aws:dynamodb:eu-west-1:123456789012:table/prod-dynamo-table" style="jettySize=auto;html=1;strokeColor=#FF3333;strokeWidth=3;" parent="1" source="vertex:lambda_function:arn:aws:lambda:eu-west-1:123456789012:function:nolabel" 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:nolabel:to:dynamo:arn:aws:dynamodb:eu-west-1:123456789012:table/prod-dynamo-table" value="GET data" 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:nolabel: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>

0 comments on commit ea458a9

Please sign in to comment.