draw-io

Automate draw.io diagram creation, editing, and 2x PNG export via CLI scripts.

Updated Mar 8, 2026

Search Tags:#layout #draw.io #aws-icons #architecture-diagram #png-export #diagram-editing

Ready to run

npx skills add https://github.com/ZiadNagar/zeVillage-AI-Toolkit --skill draw-io-ziadnagar

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: draw-io
Source: https://github.com/ZiadNagar/zeVillage-AI-Toolkit/tree/main/skills/draw-io
Command: npx skills add https://github.com/ZiadNagar/zeVillage-AI-Toolkit --skill draw-io-ziadnagar

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This skill automates the creation and editing of draw.io diagrams, ensuring consistent styling, layout, and easy PNG exports for presentations and documentation.

Core Features & Use Cases

Direct XML editing of .drawio files to enforce font consistency and AWS icon usage.
Automated PNG conversion at high resolution with transparent backgrounds for slides and reports.
Layout calculations and layering rules to keep diagrams clean and readable.
AWS icon integration with up-to-date mxgraph.aws4 icons for accurate visuals.
Design-quality guidelines and QA checks to ensure professional diagrams.

Quick Start

To begin, provide or open a .drawio file and request a high-quality PNG export with layout adjustments and icon updates.

Frequently Asked Questions about draw-io

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

FAQPage Schema

How do I automate draw.io diagram creation and enforce font consistency?▼

Automate draw.io diagram creation by directly editing .drawio XML files to enforce specific font families and ensure consistent styling across architecture diagrams and technical visuals.

What is the best way to export high-quality PNG diagrams from .drawio files?▼

Export high-quality PNG diagrams from .drawio files using automated CLI scripts and pre-commit hooks that generate 2x scale images with transparent backgrounds for presentations.

Can I use up-to-date AWS icons in my architecture diagrams with draw.io?▼

Yes, you can integrate up-to-date AWS icons in architecture diagrams by applying mxgraph.aws4 icons within the .drawio file to ensure accurate and professional technical visuals.

How do I validate layout and layering rules for technical flowcharts?▼

Validate layout and layering rules for technical flowcharts by applying built-in design-quality guidelines and QA checks to keep diagrams clean, readable, and properly structured.

Does the draw-io automation skill work with existing .drawio files?▼

Yes, the automation works with existing .drawio files by opening them, applying layout calculations, updating AWS icons, and requesting high-quality PNG exports with layout adjustments.