drawio-designer Diagram Skill

A Claude Code / Trae AI skill for creating, editing, and managing draw.io diagrams with professional quality standards.

Purpose

This skill enables AI-assisted creation and maintenance of draw.io architecture diagrams, flowcharts, and technical documentation visuals. It ensures consistent styling, proper layout, and automated PNG conversion for presentations and documentation.

When to Use This Skill

Use this skill when you need to manipulate diagram assets or layout structures programmatically. The core scenarios cover XML modifications, format conversions, and layout adjustments:

• Create or edit .drawio XML diagram files
• Convert diagrams to PNG format with transparent backgrounds
• Adjust element positions and layouts programmatically
• Ensure consistent font families (especially for Quarto slides)
• Work with architecture diagrams using official AWS, Kubernetes, and General IT icons
• Maintain professional diagram quality with accessibility standards
• Debug layout issues or element overlaps