drawio-diagrams-enhanced

Generate draw.io mxGraphModel XML diagrams via the next-ai-draw-io MCP server.

Updated Mar 30, 2026
One-click install
npx skills add https://github.com/ninthday/skills-base --skill drawio-diagrams-enhanced-ninthday
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: drawio-diagrams-enhanced
Source: https://github.com/ninthday/skills-base/tree/main/skills/drawio-diagrams-enhanced
Command: npx skills add https://github.com/ninthday/skills-base --skill drawio-diagrams-enhanced-ninthday

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Creating professional diagrams manually in draw.io is slow and error-prone, especially for structured project management artifacts like WBS hierarchies, RACI matrices, and PERT charts that require precise XML coordinates, unique cell IDs, and consistent styling. ## Core Features & Use Cases - MCP-Driven Diagram Creation: Start a session, create diagrams, and edit them in real time through the next-ai-draw-io MCP server with browser preview. - PMP/PMBOK Diagram Templates: Generate Work Breakdown Structures, RACI matrices, Gantt charts, risk heat maps, stakeholder power-interest grids, and project network diagrams with standard color coding. - Standard Diagram Types: Build flowcharts, swimlane diagrams, BPMN, UML, network architecture diagrams, org charts, and ER diagrams using validated mxGraphModel XML. - Use Case: Ask for a cross-functional flowchart of a monthly tax filing process across four departments, and receive a complete swimlane diagram with decision points, color-coded compliance steps, and a live browser preview. ## Quick Start Ask the assistant to create a swimlane flowchart of your approval process using draw.io, and it will start an MCP session and render the diagram in your browser.

Frequently Asked Questions about drawio-diagrams-enhanced

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

FAQPage Schema
How do I create a draw.io diagram with an AI assistant?

Start a session with the next-ai-draw-io MCP server, then pass mxGraphModel XML to the create_new_diagram tool. The diagram renders in a browser preview where you can watch it build and edit it manually afterward.

How to generate a RACI matrix in draw.io?

Build a swimlane container with rows for tasks and columns for roles, then fill cells with R, A, C, or I labels using standard colors: green for Responsible, blue for Accountable, yellow for Consulted, and purple for Informed. Each task must have exactly one Accountable role.

What XML format does the draw.io MCP server expect?

The MCP tools expect only the mxGraphModel element with root cells 0 and 1, not the full mxfile wrapper. Standalone .drawio files use the complete mxfile structure with diagram and mxGraphModel nested inside.

Why do my draw.io diagram edges overlap or connect incorrectly?

Edges overlap when exitX/exitY and entryX/entryY anchor points are not specified. Set explicit exit and entry coordinates on each edge style, keep shapes within x=0-800 and y=0-600, and use unique sequential IDs starting from 2.

Can I use custom icon libraries like AWS or Kubernetes icons in generated diagrams?

Yes, diagrams can reference custom libraries from the drawio-libs repository by appending clibs parameters to the app.diagrams.net URL. The icons require an internet connection to load when the diagram is opened.

What are the limitations of AI-generated draw.io diagrams?

Complex custom shapes, layers, multi-page files, and 3D styling may need manual adjustment in draw.io. Very large WBS structures may need splitting across pages, and generated files should always be tested in the draw.io editor.