Full-stack-skills drawio-architecture

“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.”

install

source · Clone the upstream repo

git clone https://github.com/partme-ai/full-stack-skills

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/partme-ai/full-stack-skills "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/drawio-skills/drawio-architecture" ~/.claude/skills/partme-ai-full-stack-skills-drawio-architecture && rm -rf "$T"

manifest: skills/drawio-skills/drawio-architecture/SKILL.md

When to use this skill

Use this skill whenever the user wants to:

Create system architecture diagrams (microservices, monolith, cloud)
Design deployment or infrastructure diagrams (AWS, Azure, GCP)
Build C4 model diagrams (context, container, component, code)
Generate UML component or package diagrams
Export diagrams for documentation or design reviews

How to use this skill

Workflow

Choose a template - Start from C4, UML, or cloud provider template in Draw.io
Add shapes - Use the appropriate shape library (AWS, Azure, GCP, UML, or general)
Define connections - Use labeled arrows to show data flow and dependencies
Add legend and title - Include a legend explaining colors/shapes and a diagram title
Export - Save as
```
.drawio
```
for version control; export PNG/SVG/PDF for docs

Quick-Start Example: C4 Container Diagram (XML)

<mxGraphModel>
  <root>
    <mxCell id=”0”/>
    <mxCell id=”1” parent=”0”/>
    <!-- Web App container -->
    <mxCell id=”2” value=”Web Application&#xa;[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&#xa;[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>

Collaboration

Version control - Store
```
.drawio
```
files in Git alongside source code
Confluence - Use the Draw.io Confluence plugin for inline editing
Google Drive - Open diagrams.net with Google Drive integration

Best Practices

One diagram, one topic - Avoid cramming multiple concerns into a single diagram
Consistent styling - Use the same colors, fonts, and arrow styles across all diagrams
Add a legend - Explain what colors and shapes represent
Layer complex systems - Use multiple diagrams at different abstraction levels (C4 levels 1-3)
Note the update date - Add a “Last updated: YYYY-MM-DD” label for living documents

Keywords

draw.io, diagrams.net, architecture diagram, C4, deployment diagram, UML, component diagram, 架构图, 部署图, system design, cloud architecture