markus41/plugins/drawio-diagramming/skills/network-software-mapping
plugins/drawio-diagramming/skills/network-software-mapping/SKILL.md
Network topology, infrastructure architecture, and software system mapping in draw.io with cloud, on-prem, and hybrid layouts
$ install --global
skillsauthnpx skillsauth add markus41/claude plugins/drawio-diagramming/skills/network-software-mappingInstall 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 24, 2026, 8:40 PM1.8s1 file scanned
SKILL.md
- description:
- Network topology, infrastructure architecture, and software system mapping in draw.io with cloud, on-prem, and hybrid layouts
Network & Software Architecture Mapping
Diagram Type Selection
| Need | Diagram Type | Shape Library |
|------|-------------|---------------|
| Physical network layout | Network Topology | mxgraph.network |
| Cloud infrastructure (AWS) | AWS Architecture | mxgraph.aws4 |
| Cloud infrastructure (Azure) | Azure Architecture | mxgraph.azure |
| Cloud infrastructure (GCP) | GCP Architecture | mxgraph.gcp2 |
| Kubernetes cluster layout | K8s Diagram | mxgraph.kubernetes |
| Microservice communication | Service Map | General + custom |
| CI/CD pipeline | Pipeline Diagram | Flowchart + custom |
| On-prem data center | Rack Diagram | mxgraph.rack |
| Security zones / DMZ | Zone Diagram | Swimlanes + shapes |
| Hybrid cloud | Multi-cloud | Combined libraries |
Shape Libraries
Enabling Cloud Libraries
In draw.io: File > Open Library From > Search or enable from the left panel.
| Library | Prefix | Key Shapes |
|---------|--------|-----------|
| AWS 4 | mxgraph.aws4 | EC2, S3, RDS, Lambda, VPC, ALB, CloudFront, Route53, ECS, EKS |
| Azure | mxgraph.azure | VM, App Service, SQL DB, Functions, AKS, Front Door, Key Vault |
| GCP | mxgraph.gcp2 | Compute Engine, GKE, Cloud Run, BigQuery, Cloud SQL, Pub/Sub |
| Kubernetes | mxgraph.kubernetes | Pod, Service, Deployment, Ingress, ConfigMap, PVC, Node |
| Network | mxgraph.network | Router, switch, firewall, server, desktop, cloud, database |
| Cisco | mxgraph.cisco19 | Cisco-specific network hardware icons |
| Rack | mxgraph.rack | Server rack, UPS, patch panel, switch unit |
Network Topology
Basic LAN/WAN Topology
<mxGraphModel>
<root>
<mxCell id="0"/>
<mxCell id="1" parent="0"/>
<!-- Internet cloud -->
<mxCell id="internet" value="Internet" style="shape=mxgraph.network.cloud;fillColor=#DDEEFF;strokeColor=#6C8EBF;fontSize=14;fontStyle=1;" vertex="1" parent="1">
<mxGeometry x="300" y="20" width="120" height="70" as="geometry"/>
</mxCell>
<!-- Firewall -->
<mxCell id="fw" value="Firewall" style="shape=mxgraph.network.firewall;fillColor=#F8CECC;strokeColor=#B85450;fontSize=11;" vertex="1" parent="1">
<mxGeometry x="330" y="140" width="60" height="60" as="geometry"/>
</mxCell>
<!-- Router -->
<mxCell id="router" value="Core Router" style="shape=mxgraph.network.router;fillColor=#DAE8FC;strokeColor=#6C8EBF;fontSize=11;" vertex="1" parent="1">
<mxGeometry x="330" y="250" width="60" height="40" as="geometry"/>
</mxCell>
<!-- Switch -->
<mxCell id="sw1" value="Switch A" style="shape=mxgraph.network.switch;fillColor=#D5E8D4;strokeColor=#82B366;fontSize=11;" vertex="1" parent="1">
<mxGeometry x="160" y="340" width="60" height="30" as="geometry"/>
</mxCell>
<mxCell id="sw2" value="Switch B" style="shape=mxgraph.network.switch;fillColor=#D5E8D4;strokeColor=#82B366;fontSize=11;" vertex="1" parent="1">
<mxGeometry x="500" y="340" width="60" height="30" as="geometry"/>
</mxCell>
<!-- Servers -->
<mxCell id="srv1" value="Web Server" style="shape=mxgraph.network.server;fillColor=#DAE8FC;strokeColor=#6C8EBF;fontSize=10;" vertex="1" parent="1">
<mxGeometry x="100" y="420" width="50" height="60" as="geometry"/>
</mxCell>
<mxCell id="srv2" value="App Server" style="shape=mxgraph.network.server;fillColor=#DAE8FC;strokeColor=#6C8EBF;fontSize=10;" vertex="1" parent="1">
<mxGeometry x="220" y="420" width="50" height="60" as="geometry"/>
</mxCell>
<mxCell id="db" value="Database" style="shape=cylinder3;fillColor=#FFF2CC;strokeColor=#D6B656;fontSize=10;whiteSpace=wrap;html=1;boundedLbl=1;size=10;" vertex="1" parent="1">
<mxGeometry x="490" y="420" width="50" height="60" as="geometry"/>
</mxCell>
<!-- Connections -->
<mxCell id="c1" style="strokeColor=#666;strokeWidth=2;" edge="1" source="internet" target="fw" parent="1">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
<mxCell id="c2" style="strokeColor=#666;strokeWidth=2;" edge="1" source="fw" target="router" parent="1">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
<mxCell id="c3" style="strokeColor=#666;strokeWidth=2;" edge="1" source="router" target="sw1" parent="1">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
<mxCell id="c4" style="strokeColor=#666;strokeWidth=2;" edge="1" source="router" target="sw2" parent="1">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
<mxCell id="c5" style="strokeColor=#666;strokeWidth=1;" edge="1" source="sw1" target="srv1" parent="1">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
<mxCell id="c6" style="strokeColor=#666;strokeWidth=1;" edge="1" source="sw1" target="srv2" parent="1">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
<mxCell id="c7" style="strokeColor=#666;strokeWidth=1;" edge="1" source="sw2" target="db" parent="1">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
</root>
</mxGraphModel>
AWS Architecture
Three-Tier Web Application
<mxGraphModel>
<root>
<mxCell id="0"/>
<mxCell id="1" parent="0"/>
<!-- VPC boundary -->
<mxCell id="vpc" value="VPC (10.0.0.0/16)" style="rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#248814;strokeWidth=2;dashed=1;verticalAlign=top;fontStyle=1;fontSize=13;fontColor=#248814;spacingTop=4;arcSize=4;" vertex="1" parent="1">
<mxGeometry x="80" y="100" width="640" height="440" as="geometry"/>
</mxCell>
<!-- Public subnet -->
<mxCell id="pubSub" value="Public Subnet (10.0.1.0/24)" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#E8F5E9;strokeColor=#82B366;dashed=1;verticalAlign=top;fontSize=11;fontColor=#82B366;spacingTop=4;" vertex="1" parent="1">
<mxGeometry x="100" y="140" width="280" height="160" as="geometry"/>
</mxCell>
<!-- Private subnet -->
<mxCell id="privSub" value="Private Subnet (10.0.2.0/24)" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#FFF3E0;strokeColor=#D6B656;dashed=1;verticalAlign=top;fontSize=11;fontColor=#D6B656;spacingTop=4;" vertex="1" parent="1">
<mxGeometry x="420" y="140" width="280" height="160" as="geometry"/>
</mxCell>
<!-- Data subnet -->
<mxCell id="dataSub" value="Data Subnet (10.0.3.0/24)" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#FCE4EC;strokeColor=#B85450;dashed=1;verticalAlign=top;fontSize=11;fontColor=#B85450;spacingTop=4;" vertex="1" parent="1">
<mxGeometry x="200" y="340" width="400" height="180" as="geometry"/>
</mxCell>
<!-- CloudFront -->
<mxCell id="cf" value="CloudFront" style="shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.cloudfront;fillColor=#8C4FFF;fontColor=#333;fontSize=10;" vertex="1" parent="1">
<mxGeometry x="30" y="20" width="48" height="48" as="geometry"/>
</mxCell>
<!-- ALB -->
<mxCell id="alb" value="ALB" style="shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.elastic_load_balancing;fillColor=#8C4FFF;fontColor=#333;fontSize=10;" vertex="1" parent="1">
<mxGeometry x="140" y="180" width="48" height="48" as="geometry"/>
</mxCell>
<!-- EC2 instances -->
<mxCell id="ec2a" value="EC2" style="shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.ec2;fillColor=#ED7100;fontColor=#333;fontSize=10;" vertex="1" parent="1">
<mxGeometry x="280" y="180" width="48" height="48" as="geometry"/>
</mxCell>
<!-- Lambda -->
<mxCell id="lambda" value="Lambda" style="shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.lambda;fillColor=#ED7100;fontColor=#333;fontSize=10;" vertex="1" parent="1">
<mxGeometry x="460" y="180" width="48" height="48" as="geometry"/>
</mxCell>
<!-- RDS -->
<mxCell id="rds" value="RDS (Multi-AZ)" style="shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.rds;fillColor=#C925D1;fontColor=#333;fontSize=10;" vertex="1" parent="1">
<mxGeometry x="280" y="400" width="48" height="48" as="geometry"/>
</mxCell>
<!-- ElastiCache -->
<mxCell id="cache" value="ElastiCache" style="shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.elasticache;fillColor=#C925D1;fontColor=#333;fontSize=10;" vertex="1" parent="1">
<mxGeometry x="440" y="400" width="48" height="48" as="geometry"/>
</mxCell>
<!-- S3 -->
<mxCell id="s3" value="S3" style="shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.s3;fillColor=#3F8624;fontColor=#333;fontSize=10;" vertex="1" parent="1">
<mxGeometry x="620" y="180" width="48" height="48" as="geometry"/>
</mxCell>
<!-- Connections -->
<mxCell id="a1" style="strokeColor=#666;strokeWidth=1;endArrow=block;endFill=1;" edge="1" source="cf" target="alb" parent="1"/>
<mxCell id="a2" style="strokeColor=#666;strokeWidth=1;endArrow=block;endFill=1;" edge="1" source="alb" target="ec2a" parent="1"/>
<mxCell id="a3" style="strokeColor=#666;strokeWidth=1;endArrow=block;endFill=1;" edge="1" source="ec2a" target="lambda" parent="1"/>
<mxCell id="a4" style="strokeColor=#666;strokeWidth=1;endArrow=block;endFill=1;" edge="1" source="ec2a" target="rds" parent="1"/>
<mxCell id="a5" style="strokeColor=#666;strokeWidth=1;endArrow=block;endFill=1;" edge="1" source="lambda" target="cache" parent="1"/>
<mxCell id="a6" style="strokeColor=#666;strokeWidth=1;endArrow=block;endFill=1;" edge="1" source="lambda" target="s3" parent="1"/>
</root>
</mxGraphModel>
AWS Style Guide
| Service Category | Icon Fill | Examples |
|-----------------|-----------|----------|
| Compute | #ED7100 (orange) | EC2, Lambda, ECS, Fargate |
| Storage | #3F8624 (green) | S3, EBS, EFS |
| Database | #C925D1 (purple) | RDS, DynamoDB, ElastiCache |
| Networking | #8C4FFF (violet) | VPC, ALB, CloudFront, Route53 |
| Security | #DD344C (red) | IAM, WAF, Shield, KMS |
| Management | #E7157B (pink) | CloudWatch, CloudTrail, Config |
Azure Architecture
Key Azure Shapes
App Service: shape=mxgraph.azure.app_service;
AKS: shape=mxgraph.azure.kubernetes_services;
SQL Database: shape=mxgraph.azure.azure_sql_database;
Functions: shape=mxgraph.azure.function_apps;
Front Door: shape=mxgraph.azure.front_doors;
Key Vault: shape=mxgraph.azure.key_vaults;
Storage: shape=mxgraph.azure.storage;
Cosmos DB: shape=mxgraph.azure.azure_cosmos_db;
VNET: shape=mxgraph.azure.virtual_networks;
Azure Resource Group Pattern
<!-- Resource Group boundary -->
<mxCell id="rg" value="rg-myapp-prod" style="rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#0078D4;strokeWidth=2;dashed=1;verticalAlign=top;fontStyle=1;fontSize=12;fontColor=#0078D4;spacingTop=4;" vertex="1" parent="1">
<mxGeometry x="40" y="40" width="500" height="300" as="geometry"/>
</mxCell>
GCP Architecture
Key GCP Shapes
Compute Engine: shape=mxgraph.gcp2.compute_engine;
GKE: shape=mxgraph.gcp2.google_kubernetes_engine;
Cloud Run: shape=mxgraph.gcp2.cloud_run;
Cloud SQL: shape=mxgraph.gcp2.cloud_sql;
BigQuery: shape=mxgraph.gcp2.bigquery;
Pub/Sub: shape=mxgraph.gcp2.cloud_pubsub;
Cloud Storage: shape=mxgraph.gcp2.cloud_storage;
Cloud Functions: shape=mxgraph.gcp2.cloud_functions;
Kubernetes Cluster Diagrams
K8s Deployment Topology
<mxGraphModel>
<root>
<mxCell id="0"/>
<mxCell id="1" parent="0"/>
<!-- Cluster boundary -->
<mxCell id="cluster" value="K8s Cluster" style="rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#326CE5;strokeWidth=2;dashed=1;verticalAlign=top;fontStyle=1;fontSize=14;fontColor=#326CE5;arcSize=4;spacingTop=4;" vertex="1" parent="1">
<mxGeometry x="40" y="40" width="600" height="400" as="geometry"/>
</mxCell>
<!-- Namespace -->
<mxCell id="ns" value="namespace: production" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#EBF0F7;strokeColor=#326CE5;dashed=1;verticalAlign=top;fontSize=11;fontColor=#326CE5;spacingTop=4;" vertex="1" parent="1">
<mxGeometry x="60" y="80" width="560" height="340" as="geometry"/>
</mxCell>
<!-- Ingress -->
<mxCell id="ingress" value="Ingress" style="shape=mxgraph.kubernetes.ingress;fillColor=#326CE5;fontColor=#FFF;fontSize=10;" vertex="1" parent="1">
<mxGeometry x="80" y="120" width="48" height="48" as="geometry"/>
</mxCell>
<!-- Service -->
<mxCell id="svc" value="Service
(ClusterIP)" style="shape=mxgraph.kubernetes.svc;fillColor=#326CE5;fontColor=#FFF;fontSize=10;" vertex="1" parent="1">
<mxGeometry x="200" y="120" width="48" height="48" as="geometry"/>
</mxCell>
<!-- Deployment -->
<mxCell id="deploy" value="Deployment
(3 replicas)" style="shape=mxgraph.kubernetes.deploy;fillColor=#326CE5;fontColor=#FFF;fontSize=10;" vertex="1" parent="1">
<mxGeometry x="340" y="110" width="48" height="48" as="geometry"/>
</mxCell>
<!-- Pods -->
<mxCell id="pod1" value="Pod 1" style="shape=mxgraph.kubernetes.pod;fillColor=#326CE5;fontColor=#FFF;fontSize=9;" vertex="1" parent="1">
<mxGeometry x="440" y="100" width="40" height="40" as="geometry"/>
</mxCell>
<mxCell id="pod2" value="Pod 2" style="shape=mxgraph.kubernetes.pod;fillColor=#326CE5;fontColor=#FFF;fontSize=9;" vertex="1" parent="1">
<mxGeometry x="500" y="100" width="40" height="40" as="geometry"/>
</mxCell>
<mxCell id="pod3" value="Pod 3" style="shape=mxgraph.kubernetes.pod;fillColor=#326CE5;fontColor=#FFF;fontSize=9;" vertex="1" parent="1">
<mxGeometry x="560" y="100" width="40" height="40" as="geometry"/>
</mxCell>
<!-- ConfigMap -->
<mxCell id="cm" value="ConfigMap" style="shape=mxgraph.kubernetes.cm;fillColor=#326CE5;fontColor=#FFF;fontSize=9;" vertex="1" parent="1">
<mxGeometry x="200" y="240" width="40" height="40" as="geometry"/>
</mxCell>
<!-- Secret -->
<mxCell id="secret" value="Secret" style="shape=mxgraph.kubernetes.secret;fillColor=#326CE5;fontColor=#FFF;fontSize=9;" vertex="1" parent="1">
<mxGeometry x="300" y="240" width="40" height="40" as="geometry"/>
</mxCell>
<!-- PVC -->
<mxCell id="pvc" value="PVC" style="shape=mxgraph.kubernetes.pvc;fillColor=#326CE5;fontColor=#FFF;fontSize=9;" vertex="1" parent="1">
<mxGeometry x="400" y="240" width="40" height="40" as="geometry"/>
</mxCell>
<!-- HPA -->
<mxCell id="hpa" value="HPA" style="shape=mxgraph.kubernetes.hpa;fillColor=#326CE5;fontColor=#FFF;fontSize=9;" vertex="1" parent="1">
<mxGeometry x="340" y="180" width="40" height="40" as="geometry"/>
</mxCell>
<!-- Connections -->
<mxCell id="k1" style="strokeColor=#326CE5;strokeWidth=1;endArrow=block;endFill=1;" edge="1" source="ingress" target="svc" parent="1"/>
<mxCell id="k2" style="strokeColor=#326CE5;strokeWidth=1;endArrow=block;endFill=1;" edge="1" source="svc" target="deploy" parent="1"/>
<mxCell id="k3" style="strokeColor=#326CE5;strokeWidth=1;endArrow=block;endFill=1;" edge="1" source="deploy" target="pod1" parent="1"/>
<mxCell id="k4" style="strokeColor=#326CE5;strokeWidth=1;endArrow=block;endFill=1;" edge="1" source="deploy" target="pod2" parent="1"/>
<mxCell id="k5" style="strokeColor=#326CE5;strokeWidth=1;endArrow=block;endFill=1;" edge="1" source="deploy" target="pod3" parent="1"/>
<mxCell id="k6" style="strokeColor=#999;strokeWidth=1;dashed=1;endArrow=open;" edge="1" source="pod1" target="cm" parent="1"/>
<mxCell id="k7" style="strokeColor=#999;strokeWidth=1;dashed=1;endArrow=open;" edge="1" source="pod1" target="secret" parent="1"/>
<mxCell id="k8" style="strokeColor=#999;strokeWidth=1;dashed=1;endArrow=open;" edge="1" source="pod1" target="pvc" parent="1"/>
</root>
</mxGraphModel>
Microservice Architecture
Service Mesh Pattern
<mxGraphModel>
<root>
<mxCell id="0"/>
<mxCell id="1" parent="0"/>
<!-- API Gateway -->
<mxCell id="gw" value="<b>API Gateway</b>
Kong / Envoy" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#DAE8FC;strokeColor=#6C8EBF;fontSize=12;shadow=1;" vertex="1" parent="1">
<mxGeometry x="280" y="20" width="140" height="50" as="geometry"/>
</mxCell>
<!-- Services -->
<mxCell id="auth" value="<b>Auth Service</b>
Node.js" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#D5E8D4;strokeColor=#82B366;fontSize=11;shadow=1;" vertex="1" parent="1">
<mxGeometry x="60" y="140" width="130" height="50" as="geometry"/>
</mxCell>
<mxCell id="user" value="<b>User Service</b>
Python" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#D5E8D4;strokeColor=#82B366;fontSize=11;shadow=1;" vertex="1" parent="1">
<mxGeometry x="240" y="140" width="130" height="50" as="geometry"/>
</mxCell>
<mxCell id="order" value="<b>Order Service</b>
Go" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#D5E8D4;strokeColor=#82B366;fontSize=11;shadow=1;" vertex="1" parent="1">
<mxGeometry x="420" y="140" width="130" height="50" as="geometry"/>
</mxCell>
<mxCell id="notify" value="<b>Notification</b>
Node.js" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#D5E8D4;strokeColor=#82B366;fontSize=11;shadow=1;" vertex="1" parent="1">
<mxGeometry x="600" y="140" width="130" height="50" as="geometry"/>
</mxCell>
<!-- Message broker -->
<mxCell id="mq" value="<b>RabbitMQ</b>" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#FFF2CC;strokeColor=#D6B656;fontSize=12;shadow=1;" vertex="1" parent="1">
<mxGeometry x="320" y="260" width="120" height="50" as="geometry"/>
</mxCell>
<!-- Databases -->
<mxCell id="authDb" value="Auth DB
(Redis)" style="shape=cylinder3;fillColor=#F8CECC;strokeColor=#B85450;fontSize=10;whiteSpace=wrap;html=1;boundedLbl=1;size=8;" vertex="1" parent="1">
<mxGeometry x="85" y="260" width="60" height="60" as="geometry"/>
</mxCell>
<mxCell id="userDb" value="User DB
(Postgres)" style="shape=cylinder3;fillColor=#F8CECC;strokeColor=#B85450;fontSize=10;whiteSpace=wrap;html=1;boundedLbl=1;size=8;" vertex="1" parent="1">
<mxGeometry x="260" y="260" width="60" height="60" as="geometry"/>
</mxCell>
<mxCell id="orderDb" value="Order DB
(MongoDB)" style="shape=cylinder3;fillColor=#F8CECC;strokeColor=#B85450;fontSize=10;whiteSpace=wrap;html=1;boundedLbl=1;size=8;" vertex="1" parent="1">
<mxGeometry x="450" y="260" width="60" height="60" as="geometry"/>
</mxCell>
<!-- Connections: gateway to services -->
<mxCell id="g1" style="strokeColor=#666;strokeWidth=1;endArrow=block;endFill=1;" edge="1" source="gw" target="auth" parent="1"/>
<mxCell id="g2" style="strokeColor=#666;strokeWidth=1;endArrow=block;endFill=1;" edge="1" source="gw" target="user" parent="1"/>
<mxCell id="g3" style="strokeColor=#666;strokeWidth=1;endArrow=block;endFill=1;" edge="1" source="gw" target="order" parent="1"/>
<!-- Async via message broker -->
<mxCell id="m1" value="events" style="strokeColor=#D6B656;strokeWidth=1;dashed=1;endArrow=open;fontSize=9;fontColor=#999;" edge="1" source="order" target="mq" parent="1"/>
<mxCell id="m2" value="events" style="strokeColor=#D6B656;strokeWidth=1;dashed=1;endArrow=open;fontSize=9;fontColor=#999;" edge="1" source="mq" target="notify" parent="1"/>
<!-- Service to DB -->
<mxCell id="d1" style="strokeColor=#B85450;strokeWidth=1;endArrow=diamond;endFill=0;" edge="1" source="auth" target="authDb" parent="1"/>
<mxCell id="d2" style="strokeColor=#B85450;strokeWidth=1;endArrow=diamond;endFill=0;" edge="1" source="user" target="userDb" parent="1"/>
<mxCell id="d3" style="strokeColor=#B85450;strokeWidth=1;endArrow=diamond;endFill=0;" edge="1" source="order" target="orderDb" parent="1"/>
</root>
</mxGraphModel>
Zone / Security Diagrams
DMZ Architecture
Use nested containers to represent security zones:
<!-- External zone -->
<mxCell id="extZone" value="External Zone (Untrusted)" style="rounded=1;fillColor=#FFEBEE;strokeColor=#B85450;strokeWidth=2;dashed=1;verticalAlign=top;fontStyle=1;fontSize=12;fontColor=#B85450;spacingTop=4;" vertex="1" parent="1">
<mxGeometry x="20" y="20" width="200" height="300" as="geometry"/>
</mxCell>
<!-- DMZ -->
<mxCell id="dmz" value="DMZ (Semi-Trusted)" style="rounded=1;fillColor=#FFF3E0;strokeColor=#D6B656;strokeWidth=2;dashed=1;verticalAlign=top;fontStyle=1;fontSize=12;fontColor=#D6B656;spacingTop=4;" vertex="1" parent="1">
<mxGeometry x="260" y="20" width="200" height="300" as="geometry"/>
</mxCell>
<!-- Internal zone -->
<mxCell id="intZone" value="Internal Zone (Trusted)" style="rounded=1;fillColor=#E8F5E9;strokeColor=#82B366;strokeWidth=2;dashed=1;verticalAlign=top;fontStyle=1;fontSize=12;fontColor=#82B366;spacingTop=4;" vertex="1" parent="1">
<mxGeometry x="500" y="20" width="200" height="300" as="geometry"/>
</mxCell>
Zone Color Convention
| Zone | Fill | Stroke | Trust Level |
|------|------|--------|-------------|
| External | #FFEBEE | #B85450 (red) | Untrusted |
| DMZ | #FFF3E0 | #D6B656 (amber) | Semi-trusted |
| Internal | #E8F5E9 | #82B366 (green) | Trusted |
| Management | #E3F2FD | #6C8EBF (blue) | Admin only |
Connection Style Guide
| Connection Type | Style | Use |
|----------------|-------|-----|
| Synchronous (HTTP/gRPC) | strokeColor=#666;strokeWidth=2;endArrow=block;endFill=1; | Request/response |
| Asynchronous (events) | strokeColor=#D6B656;strokeWidth=1;dashed=1;endArrow=open; | Pub/sub, message queues |
| Database access | strokeColor=#B85450;strokeWidth=1;endArrow=diamond;endFill=0; | Read/write to DB |
| Monitoring / logs | strokeColor=#999;strokeWidth=1;dashed=1;dashPattern=4 4;endArrow=open; | Observability |
| Bidirectional | strokeColor=#666;strokeWidth=1;endArrow=block;startArrow=block;endFill=1;startFill=1; | WebSocket, streaming |
Layout Best Practices
- Flow direction — Traffic flows top-to-bottom (internet at top, databases at bottom) or left-to-right
- Group by zone — Use dashed containers for VPCs, subnets, namespaces, security zones
- Color by function — Compute (blue), storage (green), database (yellow/red), network (purple)
- Label protocols — Add edge labels:
HTTPS,gRPC,AMQP,TCP/5432 - Show redundancy — Use grouped icons or
(3x)labels for replicated components - Add a legend — Include a box in the corner explaining colors, line styles, and icon meanings
- Use layers — Separate physical, logical, and security views into draw.io layers
Related Skills
markus41/writing-plans-enhanced
development
VerifiedTrustedCommunity
Enhanced plan-authoring skill with Pre-Writing context gathering, task metadata, non-TDD templates, Red Flags, telemetry, and an automated plan linter. Use when you have a spec or requirements for a multi-step task, before touching code.
13SKILL.mdUpdated Apr 25, 2026
markus41/plugins/scrapin-aint-easy
tools
VerifiedTrustedCommunity
Documentation intelligence engine with graph-based API docs, algorithm library, and drift detection
13SKILL.mdUpdated Apr 17, 2026
markus41/ultraplan
tools
VerifiedTrustedCommunity
Ultraplan cloud planning — kick off a plan in the cloud from your terminal, review and revise in the browser, then execute remotely or send back to CLI
13SKILL.mdUpdated Apr 17, 2026
markus41/plugins/claude-code-expert/skills/mcp
tools
VerifiedTrustedCommunity
--- name: mcp description: Configure MCP servers for Claude Code — stdio vs HTTP, authentication, Tools/Resources/Prompts distinction, channels (CI webhook, mobile relay, Discord bridge, fakechat), and cost of always-loaded tools. Use this skill whenever adding an MCP server, debugging connection issues, choosing between MCP Tools vs Prompts vs Resources, installing channel servers, or managing .mcp.json. Triggers on: "MCP server", "mcp config", "add Obsidian MCP", "install context7", "channels"
13SKILL.mdUpdated Apr 17, 2026