teachingai/drawio-architecture
skills/drawio-skills/drawio-architecture/SKILL.md
“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 --global
skillsauthnpx skillsauth add teachingai/agent-skills drawio-architectureInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 10, 2026, 8:44 AM4.8s2 files scanned
SKILL.md
- name:
- drawio-architecture
- description:
- “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.”
- license:
- Complete terms in LICENSE.txt
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
.drawiofor 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
[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>
Collaboration
- Version control - Store
.drawiofiles 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
Related Skills
teachingai/nextjs
development
VerifiedTrustedCommunity
Guidance for Next.js using the official docs at nextjs.org/docs. Use when the user needs Next.js concepts, configuration, routing, data fetching, or API reference details.
284SKILL.mdUpdated Apr 14, 2026
teachingai/flask
tools
VerifiedTrustedCommunity
Provides comprehensive guidance for Flask framework including routing, templates, forms, database integration, extensions, and deployment. Use when the user asks about Flask, needs to create web applications, implement routes, or build Python web services.
284SKILL.mdUpdated Apr 14, 2026
teachingai/fastapi
development
VerifiedTrustedCommunity
Provides comprehensive guidance for FastAPI framework including routing, request validation, dependency injection, async operations, OpenAPI documentation, and database integration. Use when the user asks about FastAPI, needs to create REST APIs, or build high-performance Python web services.
284SKILL.mdUpdated Apr 14, 2026
teachingai/django
development
VerifiedTrustedCommunity
Provides comprehensive guidance for Django framework including models, views, templates, forms, admin, REST framework, and deployment. Use when the user asks about Django, needs to create web applications, implement models and views, or build Django REST APIs.
284SKILL.mdUpdated Apr 14, 2026