drawio-diagram

Generate and align draw.io diagrams using grid coordinates and MCP tool loops.

12|4|Updated Mar 22, 2026
One-click install
npx skills add https://github.com/TeiNam/kiro-with-harness --skill drawio-diagram-teinam
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: drawio-diagram
Source: https://github.com/TeiNam/kiro-with-harness/tree/main/skills/drawio-diagram
Command: npx skills add https://github.com/TeiNam/kiro-with-harness --skill drawio-diagram-teinam

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill automates the creation and alignment of diagrams using draw.io, addressing common issues like imbalance and overlap in diagram components.

Core Features & Use Cases

  • Automated Diagram Generation: Generate diagrams based on grid cell coordinate systems and MCP tool loops.
  • Alignment and Overlap Correction: Fix alignment and overlap issues in existing diagrams.
  • Use Case: Ideal for creating architecture diagrams, flowcharts, and sequences where precise alignment and minimal overlap are crucial.

Quick Start

Generate a new diagram with the drawio-diagram skill.

Frequently Asked Questions about drawio-diagram

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

FAQPage Schema
How do I automate diagram generation using draw.io?

You can automate draw.io diagram generation by utilizing grid cell coordinate systems alongside MCP tool loops. This method systematically calculates spatial placements to generate structured architecture diagrams and flowcharts.

How do I fix arrow and text overlap in existing draw.io diagrams?

Fix arrow and text overlap in draw.io diagrams by applying automated alignment correction processes. This mechanism adjusts component coordinates to eliminate visual collisions and resolve top-bottom or left-right imbalances.

Do I need MCP tools to fix diagram alignment and overlap issues?

Yes, MCP tool loops are required to verify and correct diagram alignment and overlap issues. These loops facilitate the continuous coordinate checking necessary to resolve imbalances during the draw.io creation process.

What's the best way to align architecture diagrams without manual adjustment?

The best way to align architecture diagrams without manual adjustment is using automated grid cell coordinate systems. This technique systematically maps components to a grid, inherently preventing left-right and top-bottom imbalances.

Can I use this automated diagram approach for sequence diagrams?

Yes, you can use this automated diagram approach for sequence diagrams where precise alignment and minimal overlap are crucial. The grid coordinate system ensures sequential components remain perfectly balanced and visually clear.