跳到正文
cccskills
免费在 GitHub 公开

aws-drawio-architecture-diagrams

Creates professional AWS architecture diagrams in draw.io XML format (.drawio files) using official AWS Architecture Icons (aws4 library). Use when the user asks for AWS diagrams, VPC layouts, multi-tier architectures, serverless designs, network topology, or draw.io exports involving Lambda, EC2, RDS, or other AWS services.

中文简介正在准备中。当前显示原文说明。

giuseppe-trisciuoglio/developer-kit
集成工具AWS

实测评分 未实测

查看安装方法

包含的文件（3）

  • SKILL.md12.1 KB
  • references/aws-architecture-templates.md33.0 KB
  • references/aws-shape-reference.md14.7 KB

SKILL.md（原文）

安装前可以查看交给 AI 代理的指令内容。

AWS Architecture Diagram Creation with Draw.io

Overview

Creates pixel-perfect AWS architecture diagrams in draw.io XML format using official AWS4 shape library. Generates production-ready .drawio files for diagrams.net.

When to Use

  • AWS cloud architecture diagrams (VPC, subnets, services)
  • Multi-tier application architectures on AWS
  • Serverless designs (Lambda, API Gateway, DynamoDB)
  • Network topology diagrams with security groups
  • Infrastructure documentation for Well-Architected reviews

Instructions

File Structure

Every .drawio file follows this XML structure:

<mxfile host="app.diagrams.net" agent="Claude" version="24.7.17">
  <diagram id="aws-arch-1" name="AWS Architecture">
    <mxGraphModel dx="1434" dy="759" grid="1" gridSize="10" guides="1"
      tooltips="1" connect="1" arrows="1" fold="1" page="1"
      pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        <!-- AWS shapes and connectors -->
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

Key rules:

  • IDs "0" and "1" are reserved for root cells
  • Use sequential integer IDs starting from "2"
  • Landscape orientation (pageWidth="1169" pageHeight="827")
  • All coordinates positive and aligned to grid (multiples of 10)

AWS4 Group Containers

Groups use container=1 with child shapes referencing via parent="groupId".

AWS Cloud (top-level boundary):

<mxCell id="2" value="AWS Cloud" style="points=[[0,0],[0.25,0],[0.5,0],[0.75,0],[1,0],[1,0.25],[1,0.5],[1,0.75],[1,1],[0.75,1],[0.5,1],[0.25,1],[0,1],[0,0.75],[0,0.5],[0,0.25]];outlineConnect=0;gradientColor=none;html=1;whiteSpace=wrap;fontSize=12;fontStyle=0;shape=mxgraph.aws4.group;grIcon=mxgraph.aws4.group_aws_cloud_alt;strokeColor=#232F3E;fillColor=none;verticalAlign=top;align=left;spacingLeft=30;fontColor=#232F3E;dashed=0;labelBackgroundColor=none;container=1;pointerEvents=0;collapsible=0;recursiveResize=0;" vertex="1" parent="1">
  <mxGeometry x="100" y="40" width="1000" height="700" as="geometry" />
</mxCell>

Region:

<mxCell id="3" value="us-east-1" style="...grIcon=mxgraph.aws4.group_region;strokeColor=#00A4A6;fontColor=#147EBA;dashed=1;..." vertex="1" parent="2">
  <mxGeometry x="20" y="40" width="960" height="640" as="geometry" />
</mxCell>

VPC:

<mxCell id="4" value="VPC (10.0.0.0/16)" style="...grIcon=mxgraph.aws4.group_vpc;strokeColor=#8C4FFF;fontColor=#AAB7B8;..." vertex="1" parent="3">
  <mxGeometry x="20" y="40" width="920" height="580" as="geometry" />
</mxCell>

Subnet styles:

  • Public: strokeColor=#7AA116;fillColor=#E9F3D2;fontColor=#248814
  • Private: strokeColor=#00A4A6;fillColor=#E6F6F7;fontColor=#147EBA

AWS4 Service Icons

Service icons use shape=mxgraph.aws4.resourceIcon with resIcon property.

CRITICAL: strokeColor=#ffffff is required for resourceIcon shapes to render white icon glyphs on colored backgrounds.

Standard service icon:

<mxCell id="10" value="Amazon S3" style="...gradientColor=#60A337;gradientDirection=north;fillColor=#277116;strokeColor=#ffffff;...shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.s3;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="60" height="60" as="geometry" />
</mxCell>

Dedicated shapes (Lambda, ALB, Users) use strokeColor=none. See references/aws-shape-reference.md for complete shape catalog.

Service Color Codes

Each AWS service category uses official colors. All resourceIcon shapes must use strokeColor=#ffffff and gradientDirection=north. See references/aws-shape-reference.md for full color table.

Quick reference:

CategoryfillColorgradientColorServices
Compute#D05C17#F78E04EC2, ECS, EKS, Fargate
Storage#277116#60A337S3, EBS, EFS, Glacier
Database#3334B9#4D72F3RDS, DynamoDB, Aurora, Redshift
Networking#5A30B5#945DF2CloudFront, Route 53, API GW
Security#C7131F#F54749IAM, Cognito, KMS, WAF
App Integration#BC1356#F54749SQS, SNS, EventBridge

Connector Styles

Standard data flow:

edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;endArrow=open;endFill=0;strokeColor=#545B64;strokeWidth=2;

Encrypted connection:

edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;endArrow=classic;endFill=1;strokeColor=#DD344C;strokeWidth=2;dashed=1;dashPattern=5 5;

Async/event flow:

edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;endArrow=open;endFill=0;strokeColor=#E7157B;strokeWidth=2;dashed=1;

Layout Best Practices

  1. Hierarchy: External → Internet → AWS Cloud → Region → VPC → Subnets → Services
  2. Flow: Left-to-right for user traffic, top-to-bottom for tiers
  3. Sizes: Service icons 60x60, grid-aligned coordinates
  4. Spacing: 30-40px between icons, 20px padding inside containers
  5. Labels: Place below icons (verticalLabelPosition=bottom)

Examples

Three-Tier Architecture

User Request: "Create AWS three-tier architecture with VPC, public ALB, private EC2, RDS across 2 AZs."

Generated Output:

<mxfile host="app.diagrams.net" agent="Claude" version="24.7.17">
  <diagram id="three-tier-1" name="Three-Tier Web App">
    <mxGraphModel dx="1434" dy="759" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        <mxCell id="2" value="Users" style="...shape=mxgraph.aws4.users;fillColor=#232F3E;..." vertex="1" parent="1">
          <mxGeometry x="40" y="340" width="60" height="60" as="geometry" />
        </mxCell>
        <mxCell id="3" value="AWS Cloud" style="...shape=mxgraph.aws4.group;grIcon=mxgraph.aws4.group_aws_cloud_alt;..." vertex="1" parent="1">
          <mxGeometry x="160" y="40" width="960" height="720" as="geometry" />
        </mxCell>
        <mxCell id="4" value="us-east-1" style="...grIcon=mxgraph.aws4.group_region;strokeColor=#00A4A6;dashed=1;..." vertex="1" parent="3">
          <mxGeometry x="20" y="40" width="920" height="660" as="geometry" />
        </mxCell>
        <mxCell id="5" value="VPC (10.0.0.0/16)" style="...grIcon=mxgraph.aws4.group_vpc;strokeColor=#8C4FFF;..." vertex="1" parent="4">
          <mxGeometry x="20" y="40" width="880" height="600" as="geometry" />
        </mxCell>
        <mxCell id="6" value="Public Subnet" style="...grIcon=mxgraph.aws4.group_security_group;strokeColor=#7AA116;fillColor=#E9F3D2;..." vertex="1" parent="5">
          <mxGeometry x="20" y="40" width="400" height="160" as="geometry" />
        </mxCell>
        <mxCell id="7" value="Private Subnet" style="...grIcon=mxgraph.aws4.group_security_group;strokeColor=#00A4A6;fillColor=#E6F6F7;..." vertex="1" parent="5">
          <mxGeometry x="20" y="230" width="400" height="160" as="geometry" />
        </mxCell>
        <mxCell id="8" value="Data Subnet" style="...grIcon=mxgraph.aws4.group_security_group;strokeColor=#00A4A6;fillColor=#E6F6F7;..." vertex="1" parent="5">
          <mxGeometry x="20" y="420" width="400" height="160" as="geometry" />
        </mxCell>
        <mxCell id="12" value="Application&lt;br&gt;Load Balancer" style="...fillColor=#8C4FFF;shape=mxgraph.aws4.applicationLoadBalancer;" vertex="1" parent="6">
          <mxGeometry x="170" y="50" width="60" height="60" as="geometry" />
        </mxCell>
        <mxCell id="13" value="EC2 Instance" style="...gradientColor=#F78E04;fillColor=#D05C17;strokeColor=#ffffff;shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.ec2;" vertex="1" parent="7">
          <mxGeometry x="170" y="50" width="60" height="60" as="geometry" />
        </mxCell>
        <mxCell id="15" value="RDS Primary" style="...gradientColor=#4D72F3;fillColor=#3334B9;strokeColor=#ffffff;shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.rds;" vertex="1" parent="8">
          <mxGeometry x="170" y="50" width="60" height="60" as="geometry" />
        </mxCell>
        <mxCell id="20" style="...endArrow=open;strokeColor=#545B64;strokeWidth=2;" edge="1" parent="1" source="2" target="12">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="21" value="HTTPS" style="...endArrow=open;strokeColor=#545B64;strokeWidth=2;fontSize=11;labelBackgroundColor=#FFFFFF;" edge="1" parent="1" source="12" target="13">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="23" value="TCP 5432" style="...endArrow=open;strokeColor=#545B64;strokeWidth=2;fontSize=11;labelBackgroundColor=#FFFFFF;" edge="1" parent="1" source="13" target="15">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

Opening Instructions:

Open in draw.io with AWS libraries enabled:
https://app.diagrams.net/?libs=aws4

Serverless API Architecture

User Request: "Create serverless architecture with API Gateway, Lambda, DynamoDB, S3 for REST API."

Generated Output: XML with API Gateway (violet), Lambda (orange), DynamoDB (blue), S3 (green). See references/aws-architecture-templates.md for complete template.

Reference Files

See references/ directory:

  • aws-shape-reference.md - Complete AWS4 shape catalog with styles for 50+ services
  • aws-architecture-templates.md - Ready-to-use templates (3-tier, serverless, data pipeline)

Constraints and Warnings

Validation Workflow

Always follow this validation checklist before saving:

  1. Generate XML - Create complete .drawio file structure
  2. Validate ID uniqueness - Ensure all IDs are unique integers (0, 1 reserved)
  3. Check parent references - Verify all parent attributes reference existing cells
  4. Verify XML well-formedness - Close all tags, escape special chars (&→&amp;, <→&lt;)
  5. Test in draw.io - Open at https://app.diagrams.net/?libs=aws4
  6. Fix rendering issues - Adjust positions if elements overlap or render incorrectly

Critical Constraints

  1. XML well-formed: Invalid XML fails to open. Close all tags, escape special characters, use &lt;br&gt; for line breaks.

  2. ID uniqueness mandatory: IDs "0" and "1" reserved. All others must be unique integers from "2". Duplicates cause loading failures.

  3. Coordinate system: All coordinates positive integers, multiples of 10 for grid alignment.

  4. AWS4 library only: Use official mxgraph.aws4.* shapes. Legacy mxgraph.aws3.* not supported.

  5. Valid parent references: Parent must reference existing cell ID. Invalid refs cause elements to disappear.

Limitations

  • No dynamic layouts - Manual adjustment may be needed for complex diagrams
  • Single page only - Multi-page requires multiple <diagram> elements
  • No auto-routing - Rearranging elements requires manual edge adjustment

Security Considerations

  • No sensitive data - Avoid real IPs, ARNs, or resource IDs in labels
  • Review before sharing - XML exposes architecture details
  • Validate templates - Review XML before production documentation

Best Practices

  1. Use official AWS4 shapes (mxgraph.aws4.*)
  2. Follow AWS service category colors
  3. Nest properly: AWS Cloud → Region → VPC → Subnet → Services
  4. Label services, CIDR blocks, ports, protocols
  5. Show data flow direction with labeled arrows
  6. Include external actors (users, corporate DC)
  7. Keep diagrams focused (15-20 icons max)
  8. Add annotations for important notes ("Multi-AZ", "Auto Scaling")
  9. Validate all IDs unique and parent references exist

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护，适用 Google 的隐私权政策和服务条款。

同一仓库的技能

adr-drafting

免费

Creates new Architecture Decision Record (ADR) documents for significant architectural changes using a consistent template and repository-aware naming and storage guidance. Use when a user or agent decides on an architectural change, needs to document technical rationale, or wants to add a new ADR to the project history.

中文简介正在准备中。当前显示原文说明。

giuseppe-trisciuoglio/developer-kit3602026年9月10日 更新

aws-cdk

免费

Provides AWS CDK TypeScript patterns for defining, validating, and deploying AWS infrastructure as code. Use when creating CDK apps, stacks, and reusable constructs, modeling serverless or VPC-based architectures, applying IAM and encryption defaults, or testing and reviewing `cdk synth`, `cdk diff`, and `cdk deploy` changes. Triggers include "aws cdk typescript", "create cdk app", "cdk stack", "cdk construct", "cdk deploy", and "cdk test".

中文简介正在准备中。当前显示原文说明。

giuseppe-trisciuoglio/developer-kit3602026年9月10日 更新

aws-cli-beast

免费

Provides advanced AWS CLI patterns for managing EC2, Lambda, S3, DynamoDB, RDS, VPC, IAM, and CloudWatch. Generates bulk operation scripts, automates cross-service workflows, validates security configurations, and executes JMESPath queries for complex filtering. Triggers on "aws cli help", "aws command line", "aws scripting", "aws automation", "aws batch operations", "aws bulk operations", "aws cli pagination", "aws multi-region", "aws profiles", "aws cli troubleshooting".

中文简介正在准备中。当前显示原文说明。

giuseppe-trisciuoglio/developer-kit3602026年9月10日 更新

aws-cloudformation-auto-scaling

免费

Provides AWS CloudFormation patterns for Auto Scaling including EC2, ECS, and Lambda. Use when creating Auto Scaling groups, launch configurations, launch templates, scaling policies, lifecycle hooks, and predictive scaling. Covers template structure with Parameters, Outputs, Mappings, Conditions, cross-stack references, and best practices for high availability and cost optimization.

中文简介正在准备中。当前显示原文说明。

giuseppe-trisciuoglio/developer-kit3602026年9月10日 更新

aws-cloudformation-bedrock

免费

Provides AWS CloudFormation patterns for Amazon Bedrock resources including agents, knowledge bases, data sources, guardrails, prompts, flows, and inference profiles. Use when creating Bedrock agents with action groups, implementing RAG with knowledge bases, configuring vector stores, setting up content moderation guardrails, managing prompts, orchestrating workflows with flows, and configuring inference profiles for model optimization.

中文简介正在准备中。当前显示原文说明。

giuseppe-trisciuoglio/developer-kit3602026年9月10日 更新

aws-cloudformation-cloudfront

免费

Provides AWS CloudFormation patterns for CloudFront distributions, origins (ALB, S3, Lambda@Edge, VPC Origins), CacheBehaviors, Functions, SecurityHeaders, parameters, Outputs and cross-stack references. Use when creating CloudFront distributions with CloudFormation, configuring multiple origins, implementing caching strategies, managing custom domains with ACM, configuring WAF, and optimizing performance.

中文简介正在准备中。当前显示原文说明。

giuseppe-trisciuoglio/developer-kit3602026年9月10日 更新

查看 giuseppe-trisciuoglio 的全部技能

报告此技能的问题