AWS architecture diagram reference for draw.io. Covers all AWS 2021 shape identifiers (mxgraph.aws4.*), group shapes (VPC, subnet, region, AZ, account, security group), service icon identifiers, color conventions by service category, and common AWS architecture diagram patterns with ready-to-use XML templates. Load this skill when creating or modifying AWS architecture diagrams.
AWS shapes in draw.io use the mxgraph.aws4.* library (2021+ icon set). There are two main shape types:
Service-specific icons using resourceIcon shape with a resIcon identifier:
<mxCell id="my-s3" value="S3<div>Bucket</div>"
style="sketch=0;points=[[0,0,0],[0.25,0,0],[0.5,0,0],[0.75,0,0],[1,0,0],[0,1,0],[0.25,1,0],[0.5,1,0],[0.75,1,0],[1,1,0],[0,0.25,0],[0,0.5,0],[0,0.75,0],[1,0.25,0],[1,0.5,0],[1,0.75,0]];outlineConnect=0;fontColor=#232F3E;fillColor=#7AA116;strokeColor=#ffffff;dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;html=1;fontSize=12;fontStyle=0;aspect=fixed;shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.s3;"
vertex="1" parent="1">
<mxGeometry x="100" y="100" width="40" height="40" as="geometry" />
</mxCell>
Grouping/boundary shapes (VPC, subnet, region, account, AZ):
<mxCell id="my-vpc" value="VPC"
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;container=1;pointerEvents=0;collapsible=0;recursiveResize=0;shape=mxgraph.aws4.group;grIcon=mxgraph.aws4.group_vpc2;strokeColor=#8C4FFF;fillColor=none;verticalAlign=top;align=left;spacingLeft=30;fontColor=#AAB7B8;dashed=0;"
vertex="1" parent="1">
<mxGeometry x="100" y="100" width="600" height="400" as="geometry" />
</mxCell>
AWS uses consistent fill colors across service categories:
| Category | Fill Color | Services |
|---|---|---|
| Compute | #ED7100 (orange) | Lambda, EC2, ECS, Fargate, Batch, Elastic Beanstalk |
| Storage | #7AA116 (green) | S3, EBS, EFS, FSx, Storage Gateway |
| Database | #C925D1 (magenta) | RDS, Aurora, DynamoDB, DocumentDB, ElastiCache, Neptune |
| Networking | #8C4FFF (purple) | VPC, CloudFront, Route53, API Gateway, ELB, Global Accelerator |
| Analytics | #8C4FFF (purple) | Kinesis, Athena, EMR, Glue, QuickSight, OpenSearch |
| App Integration | #E7157B (pink) | SQS, SNS, EventBridge, Step Functions, AppSync |
| Security | #DD344C (red) | IAM, Cognito, WAF, Shield, KMS, Secrets Manager, GuardDuty |
| Management | #E7157B (pink) | CloudWatch, CloudTrail, Systems Manager, Config |
| IoT | #7AA116 (green) | IoT Core, IoT Greengrass, IoT Analytics, IoT Events |
| Developer Tools | #C925D1 (magenta) | CodePipeline, CodeBuild, CodeDeploy, CodeCommit |
| General/Other | #232F3E (dark grey) | Generic AWS icons, protocols, misc |
Standard stroke color: #ffffff (white) for resource icons.
Standard font color: #232F3E (AWS dark grey) for labels.
MQTT, HTTP, generic protocol icons use:
fillColor=#ffffff (white)strokeColor=#232F3E (dark grey)fontColor=#232F3ETwo icon variants exist:
shape=mxgraph.aws4.group
grIcon=mxgraph.aws4.group_aws_cloud
strokeColor=#AAB7B8
fillColor=none
fontColor=#AAB7B8
Alternate (dark border):
shape=mxgraph.aws4.group
grIcon=mxgraph.aws4.group_aws_cloud_alt
strokeColor=#232F3E
fillColor=none
fontColor=#232F3E
shape=mxgraph.aws4.group
grIcon=mxgraph.aws4.group_account
strokeColor=#CD2264
fillColor=none
fontColor=#CD2264
shape=mxgraph.aws4.group
grIcon=mxgraph.aws4.group_region
strokeColor=#00A4A6
fillColor=none
fontColor=#00A4A6
dashed=1
shape=mxgraph.aws4.group
grIcon=mxgraph.aws4.group_vpc2
strokeColor=#8C4FFF
fillColor=none
fontColor=#AAB7B8
shape=mxgraph.aws4.group
grIcon=mxgraph.aws4.group_availability_zone
strokeColor=#545B64
fillColor=none
fontColor=#545B64
dashed=1
shape=mxgraph.aws4.group
grIcon=mxgraph.aws4.group_security_group
grStroke=0
strokeColor=#7AA116
fillColor=#F2F6E8
fontColor=#248814
shape=mxgraph.aws4.group
grIcon=mxgraph.aws4.group_security_group
grStroke=0
strokeColor=#00A4A6
fillColor=#E6F6F7
fontColor=#147EBA
shape=mxgraph.aws4.group
grIcon=mxgraph.aws4.group_security_group
strokeColor=#DD344C
fillColor=none
fontColor=#DD344C
dashed=1
shape=mxgraph.aws4.group
grIcon=mxgraph.aws4.group_corporate_data_center
strokeColor=#7D8998
fillColor=none
fontColor=#5A6C86
shape=mxgraph.aws4.group
grIcon=mxgraph.aws4.group_auto_scaling_group
strokeColor=#ED7100
fillColor=none
fontColor=#ED7100
dashed=1
shape=mxgraph.aws4.group
grIcon=mxgraph.aws4.group_elastic_load_balancing
strokeColor=#8C4FFF
fillColor=none
fontColor=#8C4FFF
outlineConnect=0;gradientColor=none;html=1;whiteSpace=wrap;fontSize=12;fontStyle=0;strokeColor=#879196;fillColor=none;verticalAlign=top;align=center;fontColor=#879196;dashed=1;spacingTop=3;
All group shapes share these common style properties:
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;container=1;pointerEvents=0;collapsible=0;recursiveResize=0;
AWS shapes use two rendering patterns (see §5 for style templates):
shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.<id>; with strokeColor=#ffffff. Category-colored square with icon overlay.shape=mxgraph.aws4.<id>; with strokeColor=none. Native service silhouette. Marked with † in the tables below.| Service | Identifier |
|---|---|
| EC2 | mxgraph.aws4.ec2 |
| EC2 Instance | mxgraph.aws4.instance2 |
| Lambda | mxgraph.aws4.lambda |
| Lambda Function | mxgraph.aws4.lambda_function |
| ECS | mxgraph.aws4.ecs |
| Fargate | mxgraph.aws4.fargate |
| EKS | mxgraph.aws4.eks |
| Batch | mxgraph.aws4.batch |
| Elastic Beanstalk | mxgraph.aws4.elastic_beanstalk |
| App Runner | mxgraph.aws4.app_runner |
| Service | Identifier |
|---|---|
| S3 | mxgraph.aws4.s3 |
| S3 Glacier | mxgraph.aws4.s3_glacier |
| EBS | mxgraph.aws4.elastic_block_store |
| EFS | mxgraph.aws4.elastic_file_system |
| Storage Gateway | mxgraph.aws4.storage_gateway |
| Service | Identifier |
|---|---|
| RDS | mxgraph.aws4.rds |
| RDS PostgreSQL Instance | mxgraph.aws4.rds_postgresql_instance † |
| Aurora | mxgraph.aws4.aurora |
| DynamoDB | mxgraph.aws4.dynamodb |
| DocumentDB | mxgraph.aws4.documentdb_with_mongodb_compatibility |
| DocumentDB Elastic Clusters | mxgraph.aws4.documentdb_elastic_clusters † |
| ElastiCache | mxgraph.aws4.elasticache |
| Neptune | mxgraph.aws4.neptune |
| Redshift | mxgraph.aws4.redshift |
| MemoryDB | mxgraph.aws4.memorydb_for_redis |
| Timestream | mxgraph.aws4.timestream |
| Service | Identifier |
|---|---|
| VPC | mxgraph.aws4.vpc |
| CloudFront | mxgraph.aws4.cloudfront |
| Route 53 | mxgraph.aws4.route_53 |
| API Gateway | mxgraph.aws4.api_gateway |
| ELB (ALB) | mxgraph.aws4.application_load_balancer † |
| ELB (NLB) | mxgraph.aws4.network_load_balancer † |
| ELB (GLB) | mxgraph.aws4.gateway_load_balancer |
| Global Accelerator | mxgraph.aws4.global_accelerator |
| Transit Gateway | mxgraph.aws4.transit_gateway |
| NAT Gateway | mxgraph.aws4.nat_gateway |
| Internet Gateway | mxgraph.aws4.internet_gateway |
| Elastic Network Interface (ENI) | mxgraph.aws4.elastic_network_interface † |
| VPC Endpoints | mxgraph.aws4.endpoints † |
| VPC Endpoint | mxgraph.aws4.vpc_endpoint |
| PrivateLink | mxgraph.aws4.privatelink |
| Direct Connect | mxgraph.aws4.direct_connect |
| Site-to-Site VPN | mxgraph.aws4.site_to_site_vpn |
| Elastic IP | mxgraph.aws4.elastic_ip_address |
| Service | Identifier |
|---|---|
| Kinesis Data Streams | mxgraph.aws4.kinesis_data_streams |
| Kinesis Data Firehose | mxgraph.aws4.kinesis_data_firehose |
| Athena | mxgraph.aws4.athena |
| EMR | mxgraph.aws4.emr |
| Glue | mxgraph.aws4.glue |
| OpenSearch (Elasticsearch) | mxgraph.aws4.elasticsearch_service |
| QuickSight | mxgraph.aws4.quicksight |
| Managed Streaming for Kafka | mxgraph.aws4.managed_streaming_for_kafka |
| Lake Formation | mxgraph.aws4.lake_formation |
| Service | Identifier |
|---|---|
| SQS | mxgraph.aws4.sqs |
| SNS | mxgraph.aws4.sns |
| EventBridge | mxgraph.aws4.eventbridge |
| Step Functions | mxgraph.aws4.step_functions |
| AppSync | mxgraph.aws4.appsync |
| MQ (AmazonMQ) | mxgraph.aws4.mq |
| MQ Broker | mxgraph.aws4.mq_broker † |
| Service | Identifier |
|---|---|
| IAM | mxgraph.aws4.iam |
| Cognito | mxgraph.aws4.cognito |
| WAF | mxgraph.aws4.waf |
| Shield | mxgraph.aws4.shield |
| KMS | mxgraph.aws4.key_management_service |
| Secrets Manager | mxgraph.aws4.secrets_manager |
| Certificate Manager | mxgraph.aws4.certificate_manager_3 |
| GuardDuty | mxgraph.aws4.guardduty |
| Inspector | mxgraph.aws4.inspector |
| Security Hub | mxgraph.aws4.security_hub |
| Firewall Manager | mxgraph.aws4.firewall_manager |
| Service | Identifier |
|---|---|
| CloudWatch | mxgraph.aws4.cloudwatch_2 |
| CloudTrail | mxgraph.aws4.cloudtrail |
| Systems Manager | mxgraph.aws4.systems_manager |
| Config | mxgraph.aws4.config |
| CloudFormation | mxgraph.aws4.cloudformation |
| Organizations | mxgraph.aws4.organizations |
| Control Tower | mxgraph.aws4.control_tower |
| Trusted Advisor | mxgraph.aws4.trusted_advisor |
| Service | Identifier |
|---|---|
| IoT Core | mxgraph.aws4.iot_core |
| IoT Greengrass | mxgraph.aws4.iot_greengrass |
| IoT Analytics | mxgraph.aws4.iot_analytics |
| IoT Events | mxgraph.aws4.iot_events |
| IoT SiteWise | mxgraph.aws4.iot_sitewise |
| IoT Device Management | mxgraph.aws4.iot_device_management |
| Component | shape | fillColor |
|---|---|---|
| IoT Rule | mxgraph.aws4.rule | #7AA116 |
| IoT Action | mxgraph.aws4.action | #7AA116 |
| MQTT Protocol | mxgraph.aws4.mqtt_protocol | #ffffff (strokeColor #232F3E) |
| HTTP Protocol | mxgraph.aws4.http_protocol | #ffffff (strokeColor #232F3E) |
IoT Rule example (direct shape † -- uses shape directly, not resIcon):
<mxCell id="rule1" value="Rule<br>(Telemetry)"
style="sketch=0;outlineConnect=0;fontColor=#232F3E;gradientColor=none;fillColor=#7AA116;strokeColor=none;dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;html=1;fontSize=12;fontStyle=0;aspect=fixed;pointerEvents=1;shape=mxgraph.aws4.rule;"
vertex="1" parent="1">
<mxGeometry x="480" y="240" width="23.59" height="40" as="geometry" />
</mxCell>
| Service | Identifier |
|---|---|
| CodePipeline | mxgraph.aws4.codepipeline |
| CodeBuild | mxgraph.aws4.codebuild |
| CodeDeploy | mxgraph.aws4.codedeploy |
| CodeCommit | mxgraph.aws4.codecommit |
| Service | Identifier |
|---|---|
| ECR | mxgraph.aws4.ecr |
| ECS Service | mxgraph.aws4.ecs_service |
| ECS Task | mxgraph.aws4.ecs_task |
| Service | Identifier |
|---|---|
| SageMaker | mxgraph.aws4.sagemaker |
| Bedrock | mxgraph.aws4.bedrock |
| Comprehend | mxgraph.aws4.comprehend |
| Rekognition | mxgraph.aws4.rekognition |
| Lex | mxgraph.aws4.lex |
| Translate | mxgraph.aws4.translate |
Use this as the base style for any AWS resource icon. Replace the fillColor and resIcon:
sketch=0;points=[[0,0,0],[0.25,0,0],[0.5,0,0],[0.75,0,0],[1,0,0],[0,1,0],[0.25,1,0],[0.5,1,0],[0.75,1,0],[1,1,0],[0,0.25,0],[0,0.5,0],[0,0.75,0],[1,0.25,0],[1,0.5,0],[1,0.75,0]];outlineConnect=0;fontColor=#232F3E;fillColor=<CATEGORY_COLOR>;strokeColor=#ffffff;dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;html=1;fontSize=12;fontStyle=0;aspect=fixed;shape=mxgraph.aws4.resourceIcon;resIcon=<SERVICE_ICON>;
Standard dimensions: width="40" height="40" (or width="48" height="48" for emphasis).
These properties control where the text label renders relative to the icon shape. verticalLabelPosition and labelPosition set the label's anchor region, while verticalAlign and align set the text alignment within that region.
Label below (default):
verticalLabelPosition=bottom;verticalAlign=top;align=center;
Label to the right:
verticalLabelPosition=middle;verticalAlign=middle;align=left;labelPosition=right;
Label to the left:
verticalLabelPosition=middle;verticalAlign=middle;align=right;labelPosition=left;
Many AWS services use their native silhouette shape instead of the resourceIcon square. These use shape=mxgraph.aws4.<id> directly (no resIcon), have strokeColor=none, and omit the 16-point connection grid:
sketch=0;outlineConnect=0;fontColor=#232F3E;gradientColor=none;fillColor=<CATEGORY_COLOR>;strokeColor=none;dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;html=1;fontSize=12;fontStyle=0;aspect=fixed;pointerEvents=1;shape=mxgraph.aws4.<SHAPE_ID>;
Key differences from Resource Icon style:
| Property | Resource Icon | Direct Shape |
|---|---|---|
shape | mxgraph.aws4.resourceIcon | mxgraph.aws4.<shape_id> |
resIcon | Required | Not used |
strokeColor | #ffffff (white border) | none |
gradientColor | Not specified (inherits default) | none (explicit, prevents gradient artifacts) |
points | 16-point grid | Not specified |
| Visual | Category-colored square with icon overlay | Native service silhouette |
Direct shape example (ALB):
<mxCell id="my-alb" value="ALB"
style="sketch=0;outlineConnect=0;fontColor=#232F3E;gradientColor=none;fillColor=#8C4FFF;strokeColor=none;dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;html=1;fontSize=12;fontStyle=0;aspect=fixed;pointerEvents=1;shape=mxgraph.aws4.application_load_balancer;"
vertex="1" parent="1">
<mxGeometry x="100" y="100" width="40" height="40" as="geometry" />
</mxCell>
Use this as the base style for any AWS group shape. Replace grIcon, strokeColor, and fontColor:
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;container=1;pointerEvents=0;collapsible=0;recursiveResize=0;shape=mxgraph.aws4.group;grIcon=<GROUP_ICON>;strokeColor=<COLOR>;fillColor=none;verticalAlign=top;align=left;spacingLeft=30;fontColor=<FONT_COLOR>;dashed=0;
Layout (top-to-bottom):
[AWS Cloud]
[Region]
[VPC]
[Public Subnet AZ-a] [Public Subnet AZ-b]
ALB ALB
[Private Subnet AZ-a] [Private Subnet AZ-b]
ECS Fargate Tasks ECS Fargate Tasks
[Private Subnet AZ-a] [Private Subnet AZ-b]
RDS Primary RDS Standby
Layout (left-to-right):
CloudFront → API Gateway → Lambda → DynamoDB
→ S3
Layout (left-to-right with branches):
Source → EventBridge → SQS → Lambda → DynamoDB
→ SNS → Lambda → S3
→ Kinesis → Firehose → S3
Layout (left-to-right):
[On-Premises] [AWS Cloud]
IoT Devices → MQTT → IoT Core → Rule → Kinesis Data Stream → Databricks
→ Rule → Firehose → S3 (Telemetry)
→ Lambda (File Upload) → S3 (Files)
FluentBit → Kinesis → Firehose → S3 (Logs)
→ OpenSearch
Layout (nested groups):
[AWS Organization]
[Management Account]
Organizations, SSO, Control Tower
[Security Account]
GuardDuty, Security Hub, Config
[Log Archive Account]
S3, CloudTrail
[Workload Account - Dev]
VPC, ECS, RDS
[Workload Account - Prod]
VPC, ECS, RDS
| Element | Recommended Size |
|---|---|
| Resource icon | 40×40 |
| Emphasized resource icon | 48×48 |
| IoT Rule / Action icon | 23.59×40 |
| MQ Broker icon (direct shape †) | 45.22×40 |
| Group min width | 160 |
| Group min height | 120 |
| AWS Cloud group | 700-900 wide, height as needed |
| VPC group | 500-800 wide, height as needed |
| Subnet group | 200-350 wide, 120-200 tall |
| On-prem group | 160-200 wide |
| Between | Distance |
|---|---|
| Resource icons | 100-160px horizontal, 80-120px vertical |
| Groups (siblings) | 20-40px |
| Icon to group edge | 20-30px padding |
| Labels and icons | Use verticalLabelPosition / labelPosition to avoid overlap |
| Flow Type | Style |
|---|---|
| Data flow (active) | Solid arrow, edgeStyle=orthogonalEdgeStyle |
| Data flow (planned/future) | Dashed arrow, dashed=1;dashPattern=8 8; |
| Bidirectional data flow | Add startArrow=classic;startFill=1; for arrows at both ends |
| Return/response | Thinner line or labeled "return" |
| Network boundary crossing | Arrow crossing group borders |
When a diagram has distinct flow types, use color-coded dashed edges to differentiate them:
| Flow Type | strokeColor | fillColor | Style |
|---|---|---|---|
| Standard data flow | default (black) | -- | Solid |
| Monitoring / service mesh | #9673a6 | #e1d5e7 | Dashed (8 8), purple |
| Infrastructure / provisioning | #005700 | #008a00 | Dashed (8 8), green |
Note: On edges,
strokeColorcontrols the line color andfillColorcontrols the arrowhead fill. Set both to maintain visual consistency.fillColorhas no effect on the line itself.
For readable labels over crossing edges, use a tinted background with border:
edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];labelBorderColor=default;labelBackgroundColor=#E6FFCC;
labelBorderColor=default draws a thin border around the label using the edge's strokeColor. This visually separates the label from overlapping edge lines.
fillColor=none (transparent) with colored bordersFor non-AWS network boundaries (carrier networks, partner networks, on-premises zones), use a marginRect container with a colored header bar child:
<!-- Container box -->
<mxCell id="ext-network" value=""
style="shape=mxgraph.mockup.containers.marginRect;rectMarginTop=10;strokeColor=#666666;strokeWidth=1;dashed=0;rounded=1;arcSize=5;recursiveResize=0;html=1;whiteSpace=wrap;"
vertex="1" parent="1">
<mxGeometry x="100" y="100" width="160" height="180" as="geometry" />
</mxCell>
<!-- Colored header bar (child of container) -->
<mxCell id="ext-network-label" value="Carrier Network"
style="shape=rect;strokeColor=none;fillColor=#008cff;rounded=1;arcSize=20;fontColor=#ffffff;fontSize=17;spacing=2;spacingTop=-2;align=left;autosize=1;spacingLeft=4;resizeWidth=0;resizeHeight=0;perimeter=none;html=1;whiteSpace=wrap;"
vertex="1" parent="ext-network">
<mxGeometry x="5" width="140" height="30" as="geometry" />
</mxCell>
Place service icons inside these containers as children (set parent="ext-network" on child cells). The fillColor of the header bar can be customized per network type.
Note: The
marginRectcontainer does not usecontainer=1in its style -- draw.io recognizes it as a container via the shape type. Child elements are associated by setting their XMLparentattribute to the container'sid, not by dragging in the UI.
For services that aren't AWS-native (Databricks, Elasticsearch, FluentBit, etc.):
<!-- Databricks (from Azure library) -->
<mxCell style="image;aspect=fixed;html=1;points=[];align=center;fontSize=12;image=img/lib/azure2/analytics/Azure_Databricks.svg;"
vertex="1" parent="1">
<mxGeometry x="100" y="100" width="36.94" height="40" as="geometry" />
</mxCell>
<!-- Custom logo from URL -->
<mxCell style="shape=image;verticalLabelPosition=bottom;labelBackgroundColor=default;verticalAlign=top;aspect=fixed;imageAspect=0;image=https://example.com/logo.png;"
vertex="1" parent="1">
<mxGeometry x="100" y="100" width="100" height="100" as="geometry" />
</mxCell>
<!-- Elasticsearch (composite shape from IBM Cloud library) -->
<mxCell id="es-outer" value="Elasticsearch"
style="shape=rect;fillColor=#0F62FE;aspect=fixed;resizable=0;labelPosition=center;verticalLabelPosition=bottom;align=center;verticalAlign=top;strokeColor=none;fontSize=14;"
vertex="1" parent="1">
<mxGeometry x="100" y="100" width="48" height="48" as="geometry" />
</mxCell>
<!-- Inner icon (child of outer) -->
<mxCell id="es-inner"
style="fillColor=#ffffff;strokeColor=none;dashed=0;outlineConnect=0;html=1;labelPosition=center;verticalLabelPosition=bottom;verticalAlign=top;part=1;movable=0;resizable=0;rotatable=0;shape=mxgraph.ibm_cloud.database--elastic"
vertex="1" parent="es-outer">
<mxGeometry width="24" height="24" relative="1" as="geometry">
<mxPoint x="12" y="12" as="offset" />
</mxGeometry>
</mxCell>
For portable diagrams that work offline, embed icons directly as data URIs instead of external URLs. Supports PNG and SVG:
<!-- SVG data URI -->
<mxCell style="shape=image;verticalLabelPosition=bottom;verticalAlign=top;aspect=fixed;imageAspect=0;image=data:image/svg+xml,<URL-encoded-SVG>;"
vertex="1" parent="1">
<mxGeometry x="100" y="100" width="40" height="40" as="geometry" />
</mxCell>
<!-- PNG data URI (base64) -->
<mxCell style="shape=image;verticalLabelPosition=bottom;verticalAlign=top;aspect=fixed;imageAspect=0;image=data:image/png;base64,<base64-data>;"
vertex="1" parent="1">
<mxGeometry x="100" y="100" width="60" height="60" as="geometry" />
</mxCell>
Data URIs make diagrams self-contained but increase file size. Use them for custom logos and third-party service icons that lack a draw.io library shape.