skills.rest
afonsoft
afonsoftCOMMUNITY
Explore all skills by this author →
Website𝕏@afonsoftGitHub

drawio-architecture

Generate and edit draw.io architecture diagrams via MCP tools or native XML authoring.

Updated Jul 21, 2026
Search Tags:#architecture#mcp#visualization#xml#diagrams#drawio#cloud icons
One-click install
npx skills add https://github.com/afonsoft/gamehub --skill drawio-architecture-afonsoft
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: drawio-architecture
Source: https://github.com/afonsoft/gamehub/tree/main/.claude/skills/drawio-architecture
Command: npx skills add https://github.com/afonsoft/gamehub --skill drawio-architecture-afonsoft

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @drawio/mcp, and includes scripts (resource) and references (resource) components.

What problem does it solve? Creating editable architecture, network, cloud, flowchart, ER, and C4 diagrams in draw.io requires knowing the verbose mxGraph XML format and configuring the draw.io MCP server correctly across many agent platforms, which is error-prone and time-consuming. ## Core Features & Use Cases - MCP integration: Configures the official @drawio/mcp server for Claude Desktop, Claude Code, VS Code, Cursor, OpenCode, Windsurf, Devin, and Gemini, then opens diagrams directly in the draw.io editor via open_drawio_xml, open_drawio_mermaid, and open_drawio_csv. - XML authoring rules: Provides a rigid grid layout system, semantic color palette, container/swimlane patterns, cloud icon cheatsheets (AWS, Azure, GCP), and worked XML for layered, microservices, client-API-DB, and C4-lite architectures. - Local CLI export and validation: Exports PNG/SVG/PDF via the draw.io desktop CLI, repairs truncated IEND chunks in -e PNG exports, and lints .drawio files for structural errors. - Use Case: Ask the agent to draw a 3-tier web app architecture; it authors valid mxGraph XML, calls open_drawio_xml with libavoid routing, and the diagram opens in a browser editor with no file written to disk. ## Quick Start Use the drawio-architecture skill to create an architecture diagram of my system and open it in the draw.io editor.

Frequently Asked Questions about drawio-architecture

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a draw.io architecture diagram with an AI agent?▼

Configure the official draw.io MCP server with npx -y @drawio/mcp@<VERSION>, then ask the agent to draw the diagram. The agent authors mxGraph XML and calls open_drawio_xml, which opens the editable diagram in a browser tab.

How do I configure the draw.io MCP server in Claude Code or Cursor?▼

Add a drawio entry under mcpServers with command npx and args -y @drawio/mcp@<VERSION> in ~/.claude/settings.json or ~/.cursor/mcp.json. The bundled setup_drawio_mcp.py script detects your platform and writes the config automatically.

When should I use draw.io instead of Mermaid or Excalidraw for diagrams?▼

Use draw.io when you need editable architecture, cloud, network, or C4 diagrams with official AWS/Azure/GCP icons. Choose Mermaid for diagrams-as-code in Markdown, and Excalidraw or tldraw for hand-drawn whiteboard-style sketches.

Can I export draw.io diagrams to PNG or SVG without the MCP server?▼

Yes, the draw.io desktop CLI exports locally with drawio -x -f png, svg, or pdf. Preview exports omit -e, while final -e PNG exports need the validate_drawio.py --repair-iend script to fix the truncated IEND chunk.

Why does my draw.io edge not render in the generated XML?▼

Edge mxCell elements must contain an expanded <mxGeometry relative="1" as="geometry" /> child; self-closing edge cells do not render. Also verify that source and target ids reference existing cells and that ids 0 and 1 exist as root cells.

Is it safe to send diagrams to the hosted draw.io MCP endpoint?▼

The hosted endpoint https://mcp.draw.io/mcp sends your diagram XML to the vendor's servers for inline rendering. Use it only for non-sensitive diagrams; for confidential architecture data, run the local stdio server with a pinned package version.

Related Skills

Explore More Software Engineering Skills→
codatacodata
8

architect

Create Mermaid.js system architecture diagrams from descriptive texts.

Official
Advanced
matiaspakuamatiaspakua

drawio

Generate native draw.io diagrams from natural language prompts.

Community
Advanced
junevmjunevm

technical-docs

Generate technical documentation and Mermaid diagrams with YAML frontmatter-driven discovery.

Community
Advanced
qprjack86qprjack86

excalidraw

Create hand-drawn whiteboard diagrams and wireframes as editable Excalidraw JSON.

Community
Intermediate