I have created a broader Draw.io MCP Diagramming Agent Skill for generating clear, structured and editable diagrams across a range of use cases, including cloud architecture, network topology, CI/CD pipelines, Kubernetes platforms, event-driven systems, C4, UML and entity relationship diagrams.
The skill applies the same diagramming method across each request: choose the right format, use proper containers, route connectors cleanly, keep labels concise and validate the generated output. Where a diagram needs deeper provider knowledge, it loads additional guidance for Azure or AWS, including official icons, network boundaries, resource placement and cloud-specific conventions.
The skill grew out of my earlier work with Draw.io MCP and the separate agent skills I built for Azure and AWS. Those skills improved provider-specific diagrams, but they also highlighted how much of the underlying guidance was shared.
What the Draw.io diagramming agent skill covers
The skill is intended for more than cloud architecture diagrams, It includes working patterns for:
- Cloud architecture and network topology diagrams
- CI/CD pipelines and deployment flows
- OAuth, OIDC and API interaction flows
- Event-driven architecture diagrams
- Kubernetes platform views
- C4, UML and entity relationship diagrams
- Mermaid-to-Draw.io conversion
- Existing multi-page
.drawiofiles
It works with the official Draw.io MCP servers, for VS Code and GitHub Copilot, the stdio Tool Server can be configured with:
{
"servers": {
"drawio": {
"command": "npx",
"args": ["-y", "@drawio/mcp@latest"]
}
}
}
The Tool Server supports XML, Mermaid and CSV and opens the generated output in the Draw.io editor. The hosted MCP App Server is better suited to clients that support inline MCP Apps rendering, but currently accepts native Draw.io XML rather than Mermaid or CSV.
The MCP server provides the drawing tools. The agent skill provides the working method around them.
Trying the skill with different diagram types
See examples below of the skill in action with the associated prompt and resulted diagram.
The prompts below are intentionally quite different. They test provider icons, containment, sequence, failure paths, routing and the ability to select an appropriate diagram structure.
Azure enterprise API platform
Create a production-grade Azure API platform diagram with these zones: Internet Edge, DMZ, Hub VNet, Spoke VNet, Data/Security and Observability. Include Azure Front Door with WAF, Application Gateway, internal APIM Premium, App Service, AKS, Azure SQL, Key Vault, Private DNS, Log Analytics, Application Insights and Microsoft Sentinel. Use official Azure icons. Show trust and subnet boundaries, label HTTPS 443 and SQL 1433 traffic, and keep the primary flow readable.
This prompt tests Azure icon discovery, nested network boundaries and the placement of platform, data and observability services.
Generated diagram:
GitHub Actions CI/CD approvals and rollback
Create a CI/CD workflow diagram for a microservice using GitHub Actions.
Stages: Commit, PR checks, Build, Unit tests, SAST, Container scan, Push artifact, Deploy Staging, Integration tests, Manual approval, Deploy Production, Post-deploy verification, Rollback.
Requirements:
- Show success path and failure path clearly.
- Use a decision node for approval and one for health check.
- Include artifact registry and secret store.
- Add observability hooks (logs/metrics/traces) at deploy and runtime.
- Keep all edges non-overlapping and labels short.
This is a flow problem rather than an infrastructure topology problem. The important parts are stage order, approval decisions, failure handling and keeping a long horizontal pipeline readable.
Generated diagram:
Kubernetes platform topology
Create a Kubernetes platform diagram with Ingress, API services, worker node pools, service mesh, Prometheus/Grafana, secret store integration, and CI deploy agent.
Requirements:
- Show cluster boundary, namespace grouping, and external dependencies.
- Distinguish data plane vs management plane.
- Use concise labels and avoid icon overload.
- Make pod-to-service-to-db path obvious.
- Include one callout for autoscaling and one for network policy.
The challenge here is containment. Cluster, namespace, node pool and workload boundaries need to represent real hierarchy rather than rectangles placed behind unrelated shapes.
Generated diagram:
GCP analytics platform
Create a GCP data analytics architecture diagram with ingestion, processing, storage, and BI layers.
Include: Cloud Load Balancing, Pub/Sub, Dataflow, Cloud Storage, BigQuery, GKE, Cloud SQL, Secret Manager, Cloud Monitoring, Cloud Logging.
Requirements:
- Use GCP icons via shape search.
- Draw clear layer containers (Ingestion, Processing, Storage, Serving, Observability).
- Show streaming path and batch path with different line styles.
- Add failure/retry path for Dataflow jobs.
- Keep text concise and legible.
There is no dedicated GCP reference in the skill. Instead, the agent searches the Draw.io shape library for the required services and applies the shared layout and routing rules.
That is the main reason I moved away from creating a separate skill for every provider.
Generated diagram:
Event-driven architecture
Create an event-driven architecture diagram with API Gateway, Order Service, Payment Service, Inventory Service, Notification Service, Event Bus, DLQ, and Analytics Consumer.
Requirements:
- Show command path (sync API) and event path (async bus) distinctly.
- Include retry and dead-letter handling.
- Show idempotency and outbox pattern notes.
- Avoid excessive duplicate arrows from one source; aggregate where appropriate.
- Keep event topics and subscriptions clear.
Event-driven diagrams become unreadable quickly when every producer connects directly to every consumer.
This test focuses on separating synchronous and asynchronous behaviour, showing failure handling and avoiding an arrow for every possible subscription.
Generated diagram:
AWS Secure web platform
Create an AWS architecture diagram for a secure ecommerce platform in one region across 2 AZs.
Include: Route 53, CloudFront, WAF, ALB, ECS/Fargate services, RDS PostgreSQL (Multi-AZ), ElastiCache Redis, NAT Gateway, CloudWatch, Secrets Manager, IAM roles.
Requirements:
- Show VPC, public subnets, private app subnets, isolated DB subnet tier.
- Place components in correct subnet tiers.
- Show ingress, east-west service calls, DB access, and telemetry.
- Minimize crossing lines; prioritize orthogonal routing and clean arrow exits.
- Add concise labels for key flows only.
- Include a short “security controls” annotation.
This still uses provider-specific guidance because AWS network placement and icon conventions matter.
The difference is that the AWS reference now extends the shared diagramming process instead of duplicating it.
Generated diagram:
Where the skill helps
The main benefit is consistency, the skill applies the same practical rules across each request: choose an appropriate format, search for the correct shapes, model real containment, keep the primary flow readable and produce something that remains editable in Draw.io.
For diagrams, that means spending less time correcting guessed icons, broken containers and tangled connectors. The engineer can then focus on the more useful question: does the diagram accurately explain the system?
Install the Draw.io MCP diagramming skill
The skill is available in my GitHub Copilot Agent Skills repository
The quickest way to install it is with the Skills CLI: https://www.skills.sh/thomast1906/github-copilot-agent-skills/drawio-mcp-diagramming
npx skills add https://github.com/thomast1906/github-copilot-agent-skills \ --skill drawio-mcp-diagramming
For teams using Agent Package Manager, the repository also provides curated APM packages with declared dependencies.
apm install thomast1906/github-copilot-agent-skills/packages/drawio-mcp-diagramming
This is the better option when you want the skill and its required MCP server configuration distributed together rather than relying on each engineer to assemble the dependencies manually.
Whichever installation route you use, the Draw.io MCP server still needs to be available to the agent. The skill contains the diagramming guidance and working conventions. MCP provides the tools used to find shapes, generate the diagram and open it in Draw.io.