azure-drawio-mcp-diagramming

Name: azure-drawio-mcp-diagramming
Author: thomast1906

7installs53forks

How to install azure-drawio-mcp-diagramming?

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

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

Installs into the current project.

Summary

Create and edit architecture diagrams using Draw.io MCP (drawio/create_diagram) with reliable Azure icon rendering guidance and troubleshooting. compatibility Requires Python 3 and internet access to refresh the icon catalog (periodic, not per-run).

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 icon rendering problems.
4
5	See [references/REFERENCE.md](references/REFERENCE.md) for reference artifacts and refresh commands.
6
7	For non-Azure 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.
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 reports that Azure icons/shapes are not appearing.
15
16	## Required Tooling
17
18	- MCP tool: `drawio/create_diagram`
19	- Workspace MCP config should include a `drawio` server:
20
21	```json
22	{
23	"servers": {
24	"drawio": {
25	"type": "http",
26	"url": "https://mcp.draw.io/mcp"
27	}
28	}
29	}
30	```
31
32	## Recommended Workflow
33
34	1. If diagram uses Azure icons: grep `references/azure2-complete-catalog.txt` to verify icon paths — no scripts needed at runtime.
35	2. If diagram is not Azure-specific: skip icon lookup and create diagram directly.
36	3. For Azure infrastructure/network diagrams: apply Professional Network Topology Patterns (see section below):
37	- Use larger canvas (1900x1500)
38	- VNets with thick borders (strokeWidth=4)
39	- Subnets with dashed borders (strokeWidth=2, dashPattern=8 8)
40	- Position resources inside their subnets
41	- Label all traffic flows with protocols/ports
42	- Include traffic legend and network isolation explanation boxes
43	4. Build a valid `mxGraphModel` payload using verified icons when applicable.
44	5. Call `drawio/create_diagram` with the XML.
45	6. If user wants a file artifact, save as `.drawio` wrapped in `<mxfile><diagram>...</diagram></mxfile>`.
46	7. Keep labels concise and explicit (service name + role).
47	8. For Azure diagrams, prefer one icon per major service and use edges for flow semantics (ingress/egress/peering/telemetry).
48
49	## Visual Quality Guardrails
50
51	Apply these defaults unless the user explicitly asks for a dense/technical view:
52
53	- Use 3-4 major lanes/zones max (for example Source, Pipeline, Azure target).
54	- Keep primary flow left-to-right with a single main path.
55	- Use stage numbering (`1`, `2`, `3`, `4`) instead of many edge labels.
56	- Keep one icon per major service; avoid icon-per-step layouts.
57	- Limit cross-lane dashed lines to one security/auth line and one optional telemetry line.
58	- Keep text concise (single purpose per box) and avoid multiline overload.
59	- Prefer a "clean" variant first; add detail only if requested.
60
61	For worked examples of common layout problems (stacked edges, repeated labels, observability inside VNet, etc.), see [references/layout-antipatterns.md](references/layout-antipatterns.md).
62
63	## Professional Network Topology Patterns (Azure Infrastructure)
64
65	When creating Azure infrastructure network diagrams with VNets, subnets, and network isolation:
66
67	### Canvas Sizing
68	- Use larger canvas for complex infrastructure: `pageWidth="1900" pageHeight="1500"`
69	- Standard canvas may be too small for multi-VNet topologies
70
71	### VNet and Subnet Visualization
72	- VNets: Use thick borders (`strokeWidth=4`) and large containers
73	- DMZ VNet: Yellow (`fillColor=#fff2cc`, `strokeColor=#d6b656`)
74	- Internal VNet: Green (`fillColor=#d5e8d4`, `strokeColor=#82b366`)
75	- Management Zone: Blue (`fillColor=#dae8fc`, `strokeColor=#6c8ebf`)
76	- Subnets: Use dashed borders (`strokeWidth=2`, `dashed=1`, `dashPattern=8 8`)
77	- Position subnet containers inside VNet containers
78	- Use lighter shades of parent VNet color
79	- Label with subnet name and CIDR (e.g., "Application Subnet - 10.x.2.0/24")
80	- Delegated Subnets: Add delegation info to label (e.g., "PostgreSQL Subnet - 10.x.4.0/24 (Delegated to Microsoft.DBforPostgreSQL/flexibleServers)")
81
82	### Resource Positioning
83	- Position all resources inside their respective subnet containers
84	- VMs, databases, load balancers must be visually contained within their subnets
85	- This clearly shows network isolation boundaries
86
87	### Traffic Flow Visualization
88	- Label all traffic arrows with protocols and ports:
89	- HTTPS:443 (red thick arrows for internet ingress)
90	- HTTP:8080/8090/8095 (gold arrows for backend pools)
91	- PostgreSQL:5432 (blue dashed arrows for database connections)
92	- NFS/Gluster (green arrows for shared storage)
93	- RBAC/Identity/SMTP (orange dashed arrows for management/external)
94	- Use `edgeStyle=orthogonalEdgeStyle` for clean routing
95	- Include `<Array>` waypoints for complex routing
96
97	### Essential Components
98	1. Traffic Legend Box (bottom-left)
99	-

People who liked this also viewed

6 picks

Type

azure-drawio-mcp-diagramming

7installs53forks

View on GitHub

How to install azure-drawio-mcp-diagramming?

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

$npx -y skills add thomast1906/github-copilot-agent-skills --skill azure-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 icon rendering problems.
4
5	See [references/REFERENCE.md](references/REFERENCE.md) for reference artifacts and refresh commands.
6
7	For non-Azure 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.
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 reports that Azure icons/shapes are not appearing.
15
16	## Required Tooling
17
18	- MCP tool: `drawio/create_diagram`
19	- Workspace MCP config should include a `drawio` server:
20
21	```json
22	{
23	"servers": {
24	"drawio": {
25	"type": "http",
26	"url": "https://mcp.draw.io/mcp"
27	}
28	}
29	}
30	```
31
32	## Recommended Workflow
33
34	1. If diagram uses Azure icons: grep `references/azure2-complete-catalog.txt` to verify icon paths — no scripts needed at runtime.
35	2. If diagram is not Azure-specific: skip icon lookup and create diagram directly.
36	3. For Azure infrastructure/network diagrams: apply Professional Network Topology Patterns (see section below):
37	- Use larger canvas (1900x1500)
38	- VNets with thick borders (strokeWidth=4)
39	- Subnets with dashed borders (strokeWidth=2, dashPattern=8 8)
40	- Position resources inside their subnets
41	- Label all traffic flows with protocols/ports
42	- Include traffic legend and network isolation explanation boxes
43	4. Build a valid `mxGraphModel` payload using verified icons when applicable.
44	5. Call `drawio/create_diagram` with the XML.
45	6. If user wants a file artifact, save as `.drawio` wrapped in `<mxfile><diagram>...</diagram></mxfile>`.
46	7. Keep labels concise and explicit (service name + role).
47	8. For Azure diagrams, prefer one icon per major service and use edges for flow semantics (ingress/egress/peering/telemetry).
48
49	## Visual Quality Guardrails
50
51	Apply these defaults unless the user explicitly asks for a dense/technical view:
52
53	- Use 3-4 major lanes/zones max (for example Source, Pipeline, Azure target).
54	- Keep primary flow left-to-right with a single main path.
55	- Use stage numbering (`1`, `2`, `3`, `4`) instead of many edge labels.
56	- Keep one icon per major service; avoid icon-per-step layouts.
57	- Limit cross-lane dashed lines to one security/auth line and one optional telemetry line.
58	- Keep text concise (single purpose per box) and avoid multiline overload.
59	- Prefer a "clean" variant first; add detail only if requested.
60
61	For worked examples of common layout problems (stacked edges, repeated labels, observability inside VNet, etc.), see [references/layout-antipatterns.md](references/layout-antipatterns.md).
62
63	## Professional Network Topology Patterns (Azure Infrastructure)
64
65	When creating Azure infrastructure network diagrams with VNets, subnets, and network isolation:
66
67	### Canvas Sizing
68	- Use larger canvas for complex infrastructure: `pageWidth="1900" pageHeight="1500"`
69	- Standard canvas may be too small for multi-VNet topologies
70
71	### VNet and Subnet Visualization
72	- VNets: Use thick borders (`strokeWidth=4`) and large containers
73	- DMZ VNet: Yellow (`fillColor=#fff2cc`, `strokeColor=#d6b656`)
74	- Internal VNet: Green (`fillColor=#d5e8d4`, `strokeColor=#82b366`)
75	- Management Zone: Blue (`fillColor=#dae8fc`, `strokeColor=#6c8ebf`)
76	- Subnets: Use dashed borders (`strokeWidth=2`, `dashed=1`, `dashPattern=8 8`)
77	- Position subnet containers inside VNet containers
78	- Use lighter shades of parent VNet color
79	- Label with subnet name and CIDR (e.g., "Application Subnet - 10.x.2.0/24")
80	- Delegated Subnets: Add delegation info to label (e.g., "PostgreSQL Subnet - 10.x.4.0/24 (Delegated to Microsoft.DBforPostgreSQL/flexibleServers)")
81
82	### Resource Positioning
83	- Position all resources inside their respective subnet containers
84	- VMs, databases, load balancers must be visually contained within their subnets
85	- This clearly shows network isolation boundaries
86
87	### Traffic Flow Visualization
88	- Label all traffic arrows with protocols and ports:
89	- HTTPS:443 (red thick arrows for internet ingress)
90	- HTTP:8080/8090/8095 (gold arrows for backend pools)
91	- PostgreSQL:5432 (blue dashed arrows for database connections)
92	- NFS/Gluster (green arrows for shared storage)
93	- RBAC/Identity/SMTP (orange dashed arrows for management/external)
94	- Use `edgeStyle=orthogonalEdgeStyle` for clean routing
95	- Include `<Array>` waypoints for complex routing
96
97	### Essential Components
98	1. Traffic Legend Box (bottom-left)
99	-

People who liked this also viewed

6 picks

Type