kiro
starsforks
How to install kiro?
vidanov/aws-architecture-diagram-skill/kiro
$npx -y skills add vidanov/aws-architecture-diagram-skill --skill kiroGenerate AWS architecture diagrams in draw.io format. Activates when the user asks to create, generate, or build an architecture diagram, system diagram, or draw.io diagram for AWS services.
SKILL.md
| 1 | ## Instructions |
| 2 | |
| 3 | Generate a draw.io (.drawio) XML file representing an AWS architecture diagram. |
| 4 | |
| 5 | ### Layout |
| 6 | - **Left-to-right flow** for data/request path |
| 7 | - **UI/Frontend on the LEFT** (users access from left side) |
| 8 | - **Data sources / external systems on the RIGHT** |
| 9 | - Use horizontal lanes for parallel paths (top lane, bottom lane) |
| 10 | - **Minimum 220px horizontal spacing** between icons (to leave room for edge labels) |
| 11 | - **Minimum 250px vertical spacing** between lanes (so vertical edges don't crowd) |
| 12 | - Secondary/auxiliary services (monitoring, DLQ, error paths) go BELOW the main flow with 280px+ vertical gap |
| 13 | |
| 14 | ### Canvas |
| 15 | - Large canvas: `pageWidth="2400" pageHeight="1400"` minimum |
| 16 | - Set `dx="2800" dy="1600"` for proper viewport |
| 17 | - Always include a title block as the first element after the background: |
| 18 | ```xml |
| 19 | <mxCell value="<b>Diagram Title</b><br>Author | Date | Version" style="text;html=1;align=left;verticalAlign=top;whiteSpace=wrap;rounded=0;fontSize=14;spacing=8;" vertex="1" parent="1"> |
| 20 | <mxGeometry x="40" y="30" width="420" height="60" as="geometry" /> |
| 21 | </mxCell> |
| 22 | ``` |
| 23 | |
| 24 | ### Icon Style |
| 25 | - Icons are from draw.io's built-in `mxgraph.aws4` stencil library — the **official AWS Architecture Icons** (https://aws.amazon.com/architecture/icons/, updated quarterly) |
| 26 | - Icon size: **78x78px** for main services, **65x65px** for secondary |
| 27 | - Use `sketch=0;outlineConnect=0;` on all icons |
| 28 | - Use `strokeColor=#ffffff` on all AWS service icons |
| 29 | - **MUST include `fillColor`** — without it, icons render as invisible/white in PNG export |
| 30 | - Font size: **12px** for labels |
| 31 | - Always include: `fontColor=#232F3E;verticalLabelPosition=bottom;verticalAlign=top;align=center;html=1;aspect=fixed;` |
| 32 | |
| 33 | **fillColor by AWS service category:** |
| 34 | | Category | fillColor | Services | |
| 35 | |----------|-----------|----------| |
| 36 | | Compute | `#ED7100` | Lambda, EC2, ECS, EKS, Fargate | |
| 37 | | Networking | `#8C4FFF` | VPC, ELB, CloudFront, Route 53, API Gateway | |
| 38 | | Database | `#C925D1` | RDS, DynamoDB, Aurora, ElastiCache | |
| 39 | | Storage | `#3F8624` | S3, EFS, EBS | |
| 40 | | Security | `#DD344C` | IAM, Cognito, KMS, WAF | |
| 41 | | Integration | `#E7157B` | SQS, SNS, EventBridge, Step Functions | |
| 42 | | Analytics | `#8C4FFF` | Kinesis, Athena, Redshift | |
| 43 | | Management | `#E7157B` | CloudWatch, CloudTrail | |
| 44 | | AI/ML | `#01A88D` | Bedrock, SageMaker | |
| 45 | |
| 46 | ### 3D / Isometric Diagrams — use a different icon library |
| 47 | If the user asks for a **3D**, **isometric**, or "AWS 3D" diagram, do NOT fake it by placing flat `aws4` icons on hand-built platform/pedestal shapes. draw.io has a real, separate built-in library for this: `mxgraph.aws3d.*`. |
| 48 | - Load `references/aws-icons-3d.md` before picking any icon — it has the verified shape table, style prefix, sizes, and the native `isometricEdgeStyle` edge templates. |
| 49 | - This library is a legacy pre-2019 icon set with **much smaller coverage** than `aws4` (no API Gateway, ECS/EKS/Fargate, Step Functions, EventBridge, SNS, Aurora, CloudWatch, IAM, etc.). Check the gap table in that reference file before assuming an icon exists, and flag substitutions to the user rather than guessing a stencil name. |
| 50 | - For generic hardware (clients, on-prem servers, racks, switches) with no AWS-specific icon, see `references/aws-icons-allied-telesis.md` — a separate bundled isometric image library that fills that gap. |
| 51 | - These icons are already 3D on their own — arrange them in an ascending isometric staircase (diagonal offsets between nodes), don't add fake platforms underneath. |
| 52 | - Use `edgeStyle=isometricEdgeStyle` (with `endArrow=block` override for reliable arrowheads) instead of `orthogonalEdgeStyle` for connectors. |
| 53 | |
| 54 | ### Edge Style — CRITICAL FOR CLEAN DIAGRAMS |
| 55 | |
| 56 | **Base edge style (all edges):** |
| 57 | ``` |
| 58 | edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeWidth=2;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0; |
| 59 | ``` |
| 60 | |
| 61 | **Rules for edge labels:** |
| 62 | - Keep labels SHORT (1-2 words max). Use icon labels for detail, not edge labels. |
| 63 | - On horizontal edges: position label ABOVE the line using `verticalAlign=bottom;` in the edge style |
| 64 | - On vertical edges: position label to the LEFT using `align=right;` in the edge style |
| 65 | - Always add `labelBackgroundColor=#F5F5F5;` so labels don't overlap lines |
| 66 | - For edges WITHOUT labels: omit the `value` attribute entirely (don't use `value=""`) |
| 67 | |
| 68 | **Edge label positioning (prevents overlap with icons):** |
| 69 | ```xml |
| 70 | <mxCell value="Label" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeWidth=2;labelBackgroundColor=#F5F5F5;fontSize=11;" edge="1" source="a" target="b" parent="1"> |
| 71 | <mxGeometry relative="1" as="geometry" /> |
| 72 | </mxCell> |
| 73 | ``` |
| 74 | |
| 75 | **For edges that go to services ABOVE or BELOW the main flow:** |
| 76 | - Use explicit exit/entry po |
People who liked this also viewed
6 picksType
- microsoft-foundryDeploy, evaluate, fine-tune, and manage Foundry agents end-to-end with azd: hosted agent scaffold/run/deploy, prompt agent create, batch eval, continuous eval, prompt optimizer, Agent Optimizer scaffoSkillsJul 2026
- azure-deployExecute Azure deployments for ALREADY-PREPARED applications that have existing .azure/deployment-plan.md and infrastructure files. DO NOT use this skill when the user asks to CREATE a new application SkillsJul 2026
- azure-preparePrepare azd-based Azure projects for deployment: generates azure.yaml, infrastructure (Bicep/Terraform), and Dockerfiles for the Azure Developer CLI (azd) workflow. USE ONLY when the user explicitly wSkillsJul 2026
- azure-validate--- name: azure-validate description: "Pre-deployment validation for Azure readiness. Run deep checks on configuration, infrastructure (Bicep or Terraform), RBAC role assignments, managed identity pSkillsJul 2026
- azure-aigatewayConfigure Azure API Management as an AI Gateway for AI models, MCP tools, and agents. WHEN: semantic caching, token limit, content safety, load balancing, AI model governance, MCP rate limiting, jailbSkillsJul 2026
- azure-hosted-copilot-sdkOfficial agent plugin providing skills and MCP server configurations for Azure scenarios.SkillsJul 2026
