skilld
All skills
thomast1906 avatar

/drawio-mcp-diagramming

@e9be58d
by Thomas Thorntonthomast1906/github-copilot-agent-skills202 stars
55

Create and edit diagrams using the Draw.io MCP server — any shape, any vendor. USE FOR: draw me a diagram, create an architecture diagram, add Azure/AWS/GCP/Cisco/Kubernetes icons to a diagram, convert Mermaid to draw.io, fix overlapping arrows, edit a .drawio file, network topology diagrams, CI/CD pipeline diagrams, auth flow diagrams. Supports XML, Mermaid, and CSV. Uses drawio/search_shapes to find any of 10,000+ shapes across all vendor and icon libraries. DO NOT USE FOR: Excalidraw output (use excalidraw-mcp-diagramming skill).

Ask your Agent

Use this Skill: https://skilld.dev/gh/thomast1906/github-copilot-agent-skills/drawio-mcp-diagramming

This session only. Nothing lands on disk.

referencesstandalone-file-requirements.md

≈485 tokens on demand. Your agent reads this file only when SKILL.md points to it.

Standalone .drawio File Requirements

The XML examples in this skill (and in azure.md / aws.md) are designed for drawio/create_diagram, which wraps the mxGraphModel payload automatically. When the MCP tool is unavailable and you must write a .drawio file directly, two extra things are required that the MCP tool normally provides:

1. as="geometry" on every <mxGeometry> element

Without it, draw.io cannot parse coordinates and all elements collapse to the origin (appear stacked in one corner).

Wrong — MCP-tool shorthand only:

<mxGeometry x="100" y="100" width="64" height="64"/>

Correct for a .drawio file:

<mxGeometry x="100" y="100" width="64" height="64" as="geometry"/>

2. Standard layout attributes on <mxGraphModel>

Without dx/dy/grid/gridSize, draw.io defaults to zero offsets and the canvas renders blank or misaligned. Use this header for all standalone .drawio files:

<mxGraphModel dx="1422" dy="762" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1400" pageHeight="700" math="0" shadow="0">

Full minimal wrapper

Content cells go inside <root>, after the two base cells, each with parent="1" (or a container id) and as="geometry":

<mxfile>
  <diagram name="Diagram Name" id="unique-id">
    <mxGraphModel dx="1422" dy="762" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1400" pageHeight="700" math="0" shadow="0">
      <root>
        <mxCell id="0"/>
        <mxCell id="1" parent="0"/>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

Never include XML comments (<!-- ... -->) in .drawio output — the MCP server rejects them outright, and parsers handle them inconsistently. That includes placeholder comments in templates: copy the wrapper above exactly as shown.

Source: SKILL.md on GitHub

Third-party checks

No alerts14d4 checks · Risk SAFE
  • Gen Agent Trust Hub14d

    This skill provides instructions for creating and editing diagrams using Draw.io MCP servers. It includes detailed guidance for XML authoring, cloud topology conventions, and layout management. It utilizes well-known official Draw.io resources for its operations.

  • Socket14d

    No alerts

  • Snyk14d

    Risk: LOW · No issues

  • ZeroLeaks5mo

    Score: 93/100 · 2 sections analyzed

Provenance

Signed by skilld at e9be58d. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 2 months ago.

Steadyupdated 2 months ago

Capability

Other metadata
metadata
{
  "author": "Thomas Thornton",
  "version": "1.1.1",
  "last-updated": "2026-07-26"
}

README badge

README badge for thomast1906/github-copilot-agent-skills/drawio-mcp-diagramming