“Creates system architecture, deployment, and component diagrams using Draw.io (diagrams.net). Supports C4 model, UML, AWS/Azure/GCP cloud shapes, swim lanes, and exports to PNG/SVG/PDF. Use when the user needs to design architecture diagrams, visualize system components, or create deployment diagrams for documentation.”
Use this skill whenever the user wants to:
.drawio for version control; export PNG/SVG/PDF for docs<mxGraphModel>
<root>
<mxCell id=”0”/>
<mxCell id=”1” parent=”0”/>
<!-- Web App container -->
<mxCell id=”2” value=”Web Application
[React, TypeScript]” style=”rounded=1;whiteSpace=wrap;fillColor=#438DD5;fontColor=#ffffff;” vertex=”1” parent=”1”>
<mxGeometry x=”100” y=”100” width=”160” height=”80” as=”geometry”/>
</mxCell>
<!-- API container -->
<mxCell id=”3” value=”API Server
[Go, Gin]” style=”rounded=1;whiteSpace=wrap;fillColor=#438DD5;fontColor=#ffffff;” vertex=”1” parent=”1”>
<mxGeometry x=”400” y=”100” width=”160” height=”80” as=”geometry”/>
</mxCell>
<!-- Arrow: Web App → API -->
<mxCell id=”4” value=”REST/JSON” style=”edgeStyle=orthogonalEdgeStyle;” edge=”1” source=”2” target=”3” parent=”1”/>
</root>
</mxGraphModel>
.drawio files in Git alongside source codedraw.io, diagrams.net, architecture diagram, C4, deployment diagram, UML, component diagram, 架构图, 部署图, system design, cloud architecture