drawio-mcp-diagramming

Name: drawio-mcp-diagramming
Author: thomast1906

23installs53forks

How to install drawio-mcp-diagramming?

thomast1906/github-copilot-agent-skills/drawio-mcp-diagramming

$npx -y skills add thomast1906/github-copilot-agent-skills --skill drawio-mcp-diagramming

Installs into the current project.

Summary

Create and edit architecture diagrams using Draw.io MCP (drawio/create_diagram) with reliable Azure and AWS icon rendering guidance and troubleshooting. Supports Azure2 and AWS4 icon libraries. Requires Python 3 and internet access to refresh icon catalogs (periodic, not per-ru

Files · 1

View on GitHub

SKILL.md

1	# Draw.io MCP Diagramming Skill
2
3	Use this skill to create or update diagrams through the Draw.io MCP tool and to avoid common Azure and AWS icon rendering problems.
4
5	See [references/REFERENCE.md](references/REFERENCE.md) for reference artifacts and refresh commands.
6
7	For non-Azure/non-AWS diagrams, you can skip icon discovery/validation scripts and proceed directly to `drawio/create_diagram`.
8
9	## When to Use
10
11	- The user asks to create or refine architecture diagrams (Azure, AWS, or multi-cloud).
12	- The user wants draw.io/diagrams.net output from an MCP workflow.
13	- The user needs Azure service icons in diagrams.
14	- The user needs AWS service icons in diagrams.
15	- The user reports that Azure or AWS icons/shapes are not appearing.
16	- The user asks for an auth or identity flow (OAuth 2.0, OIDC, JWT validation, SSO, login, token exchange, Entra, Cognito).
17	- The user asks for an API or microservice interaction diagram (request/response chain, service-to-service calls, API gateway flow).
18	- The user asks for a CI/CD pipeline or deployment workflow (build, test, deploy stages, GitHub Actions, Azure DevOps, approval gates).
19
20	## Required Tooling
21
22	- MCP tool: `drawio/create_diagram`
23	- Workspace MCP config should include a `drawio` server:
24
25	```json
26	{
27	"servers": {
28	"drawio": {
29	"type": "http",
30	"url": "https://mcp.draw.io/mcp"
31	}
32	}
33	}
34	```
35
36	## Recommended Workflow
37
38	1. Identify the cloud provider — determine whether the diagram uses Azure, AWS, or both (multi-cloud).
39	2. Verify icon paths from the static catalogs — no scripts needed at runtime:
40	- Azure: grep `references/azure2-complete-catalog.txt`
41	- AWS: grep `references/aws4-complete-catalog.txt`
42	- Multi-cloud: grep both catalogs as needed.
43	3. If diagram uses neither Azure nor AWS icons — or is a sequence or flow diagram (auth flow, API call chain, CI/CD pipeline): skip icon lookup. For sequence and flow diagrams, apply Sequence and Flow Diagram Patterns (see section below).
44	4. For Azure infrastructure/network diagrams: apply Professional Network Topology Patterns (see Azure section below):
45	- Use larger canvas (1900x1500)
46	- VNets with thick borders (strokeWidth=4)
47	- Subnets with dashed borders (strokeWidth=2, dashPattern=8 8)
48	- Position resources inside their subnets
49	- Label all traffic flows with protocols/ports
50	- Include network isolation explanation box
51	5. For AWS infrastructure/network diagrams: apply AWS Network Topology Patterns (see AWS section below):
52	- Use larger canvas (1900x1500) for multi-VPC/account topologies
53	- VPCs with thick borders (strokeWidth=4)
54	- Subnets (public/private) with dashed borders (strokeWidth=2, dashPattern=8 8)
55	- Position resources inside their respective subnets
56	- Label all traffic flows with protocols/ports
57	- Include security group / NACL notation
58	6. Build a valid `mxGraphModel` payload using verified icons when applicable.
59	7. Call `drawio/create_diagram` with the XML.
60	8. If user wants a file artifact, save as `.drawio` wrapped in `<mxfile><diagram>...</diagram></mxfile>`.
61	9. Keep labels concise and explicit (service name + role).
62	10. For cloud-specific diagrams, prefer one icon per major service and use edges for flow semantics (ingress/egress/peering/telemetry).
63
64	## Visual Quality Guardrails
65
66	Apply these defaults unless the user explicitly asks for a dense/technical view:
67
68	- Use 3-4 major lanes/zones max (for example Source, Pipeline, Cloud target).
69	- Keep primary flow left-to-right with a single main path.
70	- Use stage numbering (`1`, `2`, `3`, `4`) instead of many edge labels.
71	- Keep one icon per major service; avoid icon-per-step layouts.
72	- Limit cross-lane dashed lines to one security/auth line and one optional telemetry line.
73	- Keep text concise (single purpose per box) and avoid multiline overload.
74	- Animated flow on connectors: adding `flowAnimation=1;` to any edge style renders a moving dot that travels along the arrow, making directional flow immediately visible without extra labels — ideal for data-flow and pipeline diagrams. The animation is preserved in SVG export and the draw.io desktop app. By default, ask the user whether they want any flow arrows animated before generating the diagram — "Would you like any of the flow arrows animated to show traffic direction? If so, which ones?" Apply `flowAnimation=1;` only to the edges the user identifies. If the user has already indicated they want a static/clean diagram, skip the question.
75	- Prefer a "clean" variant first; add detail only if requested.
76
77	For worked examples of

People who liked this also viewed

6 picks

Type

drawio-mcp-diagramming

23installs53forks

View on GitHub

How to install drawio-mcp-diagramming?

thomast1906/github-copilot-agent-skills/drawio-mcp-diagramming

$npx -y skills add thomast1906/github-copilot-agent-skills --skill drawio-mcp-diagramming

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Draw.io MCP Diagramming Skill
2
3	Use this skill to create or update diagrams through the Draw.io MCP tool and to avoid common Azure and AWS icon rendering problems.
4
5	See [references/REFERENCE.md](references/REFERENCE.md) for reference artifacts and refresh commands.
6
7	For non-Azure/non-AWS diagrams, you can skip icon discovery/validation scripts and proceed directly to `drawio/create_diagram`.
8
9	## When to Use
10
11	- The user asks to create or refine architecture diagrams (Azure, AWS, or multi-cloud).
12	- The user wants draw.io/diagrams.net output from an MCP workflow.
13	- The user needs Azure service icons in diagrams.
14	- The user needs AWS service icons in diagrams.
15	- The user reports that Azure or AWS icons/shapes are not appearing.
16	- The user asks for an auth or identity flow (OAuth 2.0, OIDC, JWT validation, SSO, login, token exchange, Entra, Cognito).
17	- The user asks for an API or microservice interaction diagram (request/response chain, service-to-service calls, API gateway flow).
18	- The user asks for a CI/CD pipeline or deployment workflow (build, test, deploy stages, GitHub Actions, Azure DevOps, approval gates).
19
20	## Required Tooling
21
22	- MCP tool: `drawio/create_diagram`
23	- Workspace MCP config should include a `drawio` server:
24
25	```json
26	{
27	"servers": {
28	"drawio": {
29	"type": "http",
30	"url": "https://mcp.draw.io/mcp"
31	}
32	}
33	}
34	```
35
36	## Recommended Workflow
37
38	1. Identify the cloud provider — determine whether the diagram uses Azure, AWS, or both (multi-cloud).
39	2. Verify icon paths from the static catalogs — no scripts needed at runtime:
40	- Azure: grep `references/azure2-complete-catalog.txt`
41	- AWS: grep `references/aws4-complete-catalog.txt`
42	- Multi-cloud: grep both catalogs as needed.
43	3. If diagram uses neither Azure nor AWS icons — or is a sequence or flow diagram (auth flow, API call chain, CI/CD pipeline): skip icon lookup. For sequence and flow diagrams, apply Sequence and Flow Diagram Patterns (see section below).
44	4. For Azure infrastructure/network diagrams: apply Professional Network Topology Patterns (see Azure section below):
45	- Use larger canvas (1900x1500)
46	- VNets with thick borders (strokeWidth=4)
47	- Subnets with dashed borders (strokeWidth=2, dashPattern=8 8)
48	- Position resources inside their subnets
49	- Label all traffic flows with protocols/ports
50	- Include network isolation explanation box
51	5. For AWS infrastructure/network diagrams: apply AWS Network Topology Patterns (see AWS section below):
52	- Use larger canvas (1900x1500) for multi-VPC/account topologies
53	- VPCs with thick borders (strokeWidth=4)
54	- Subnets (public/private) with dashed borders (strokeWidth=2, dashPattern=8 8)
55	- Position resources inside their respective subnets
56	- Label all traffic flows with protocols/ports
57	- Include security group / NACL notation
58	6. Build a valid `mxGraphModel` payload using verified icons when applicable.
59	7. Call `drawio/create_diagram` with the XML.
60	8. If user wants a file artifact, save as `.drawio` wrapped in `<mxfile><diagram>...</diagram></mxfile>`.
61	9. Keep labels concise and explicit (service name + role).
62	10. For cloud-specific diagrams, prefer one icon per major service and use edges for flow semantics (ingress/egress/peering/telemetry).
63
64	## Visual Quality Guardrails
65
66	Apply these defaults unless the user explicitly asks for a dense/technical view:
67
68	- Use 3-4 major lanes/zones max (for example Source, Pipeline, Cloud target).
69	- Keep primary flow left-to-right with a single main path.
70	- Use stage numbering (`1`, `2`, `3`, `4`) instead of many edge labels.
71	- Keep one icon per major service; avoid icon-per-step layouts.
72	- Limit cross-lane dashed lines to one security/auth line and one optional telemetry line.
73	- Keep text concise (single purpose per box) and avoid multiline overload.
74	- Animated flow on connectors: adding `flowAnimation=1;` to any edge style renders a moving dot that travels along the arrow, making directional flow immediately visible without extra labels — ideal for data-flow and pipeline diagrams. The animation is preserved in SVG export and the draw.io desktop app. By default, ask the user whether they want any flow arrows animated before generating the diagram — "Would you like any of the flow arrows animated to show traffic direction? If so, which ones?" Apply `flowAnimation=1;` only to the edges the user identifies. If the user has already indicated they want a static/clean diagram, skip the question.
75	- Prefer a "clean" variant first; add detail only if requested.
76
77	For worked examples of

People who liked this also viewed

6 picks

Type