--- 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 1. **Choose a template** - Start from C4, UML, or cloud provider template in Draw.io 2. **Add shapes** - Use the appropriate shape library (AWS, Azure, GCP, UML, or general) 3. **Define connections** - Use labeled arrows to show data flow and dependencies 4. **Add legend and title** - Include a legend explaining colors/shapes and a diagram title 5. **Export** - Save as `.drawio` for version control; export PNG/SVG/PDF for docs ### Quick-Start Example: C4 Container Diagram (XML) ```xml ``` ### 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 1. **One diagram, one topic** - Avoid cramming multiple concerns into a single diagram 2. **Consistent styling** - Use the same colors, fonts, and arrow styles across all diagrams 3. **Add a legend** - Explain what colors and shapes represent 4. **Layer complex systems** - Use multiple diagrams at different abstraction levels (C4 levels 1-3) 5. **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

drawio-architecture

Install this skill

Comments