Created: 2024-10-02 | Updated: 2024-09-21
Pages
New (v0.3.27)
Drawio support adding pages (aka Tabs). Using following API we can create page, switch between pages and add vertices and edges to dedicated page.
Code Snippet:
Let’s explore how to interact with pages starting from simple example - by adding 2 pages with layers and nodes:
# given
mcd = MultiCloudDiagrams()
# when
mcd.add_page("second_page")
mcd.add_layer('Processing')
# Add lambda to 1st layer
mcd.add_vertex(node_id="arn:aws:lambda:eu-west-1:123456789012:function:prod-lambda-name",
node_name='prod-lambda-name',
node_type='lambda_function',
layer_name="Processing")
mcd.add_page("third_page")
mcd.add_layer('Storage')
# Add dynamo to 2nd layer
mcd.add_vertex(node_id='arn:aws:dynamodb:eu-west-1:123456789012:table/prod-dynamo-table',
node_name='prod-dynamo-table',
node_type='dynamo',
layer_name="Storage")
# return back to 1st page
mcd.switch_page("second_page")
mcd.add_vertex(node_id='arn:aws:dynamodb:eu-west-1:123456789012:table/prod-dynamo-table2',
node_name='prod-dynamo-table-2',
node_type='dynamo',
Rendering:
Full XML dump:
<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"/>
</root>
</mxGraphModel>
</diagram>
<diagram id="" name="second_page">
<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="vertex:lambda_function:arn:aws:lambda:eu-west-1:123456789012:function:prod-lambda-name" value="<b>Name</b>: prod-lambda-name<BR><b>ARN</b>: 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-table2" value="<b>Name</b>: prod-dynamo-table-2<BR><b>ARN</b>: arn:aws:dynamodb:eu-west-1:123456789012:table/prod-dynamo-table2" style="outlineConnect=0;dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=left;html=1;shape=mxgraph.aws3.dynamo_db;fillColor=#2E73B8;gradientColor=none;" parent="2" vertex="1">
<mxGeometry width="72" height="81" as="geometry"/>
</mxCell>
</root>
</mxGraphModel>
</diagram>
<diagram id="" name="third_page">
<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="Storage"/>
<mxCell id="vertex:dynamo:arn:aws:dynamodb:eu-west-1:123456789012:table/prod-dynamo-table" value="<b>Name</b>: prod-dynamo-table<BR><b>ARN</b>: 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="2" vertex="1">
<mxGeometry width="72" height="81" as="geometry" x="60" y="140"/>
</mxCell>
</root>
</mxGraphModel>
</diagram>
</mxfile>
drawio file:
Download generated pages_2.drawio: