draw-io

Create and edit draw.io diagrams via XML manipulation and PNG conversion.

4|10|Updated Mar 31, 2026
One-click install
npx skills add https://github.com/NITRR-Official/CampusOS --skill draw-io-nitrr-official
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: draw-io
Source: https://github.com/NITRR-Official/CampusOS/tree/main/.agents/skills/frontend-design/diagrams/draw-io
Command: npx skills add https://github.com/NITRR-Official/CampusOS --skill draw-io-nitrr-official

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires drawio, python, pre-commit, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill streamlines the creation and editing of draw.io diagrams, ensuring professional quality and accessibility.

Core Features & Use Cases

  • Direct XML Editing: Manipulate .drawio files for precise control over diagrams.
  • Automated PNG Conversion: Convert diagrams to high-resolution PNG with transparent backgrounds.
  • Layout Adjustment: Programmatically adjust element positions for optimal design.
  • AWS Icon Integration: Search and integrate official AWS icons for consistency.
  • Quality Assurance: Apply design principles and accessibility guidelines.

Quick Start

Use the draw-io skill to create a new AWS architecture diagram in the .drawio format.

Frequently Asked Questions about draw-io

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

FAQPage Schema
How do I programmatically edit draw.io diagrams using XML?

You can edit draw.io diagrams by directly manipulating the underlying XML structure of .drawio files. This approach allows for precise, automated control over diagram elements, layouts, and properties without manual graphical interface interactions.

Can I convert .drawio files to PNG with transparent backgrounds?

Yes, you can convert .drawio files to high-resolution PNG images with transparent backgrounds. This automated conversion relies on the drawio CLI to render the diagram while preserving transparency for professional documentation.

How do I integrate official AWS icons into my architecture diagrams?

You can integrate official AWS icons by searching and embedding them directly into your .drawio diagrams. This ensures visual consistency and accuracy when creating professional AWS architecture diagrams for technical documentation.

Do I need Python and pre-commit hooks to automate diagram creation?

Yes, executing the automated diagram creation and editing workflow requires Python and pre-commit hooks, alongside the drawio CLI. These dependencies handle script execution and ensure quality assurance during the diagram generation process.

What is the best way to adjust draw.io element positions for optimal layout?

Adjusting draw.io element positions programmatically through XML manipulation is the best way to optimize layouts. This method applies design principles automatically, ensuring professional quality and accessibility without manual dragging.

Why does direct XML manipulation help with draw.io diagram creation?

Direct XML manipulation helps draw.io diagram creation by allowing granular, scriptable control over the file structure. It enables automated layout adjustments, precise element placement, and batch updates that are impossible through the standard visual editor.