draw-io

Create and edit draw.io diagrams with XML and PNG export.

Updated Mar 28, 2026
One-click install
npx skills add https://github.com/sandalsoft/agent-skills --skill draw-io-sandalsoft
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: draw-io
Source: https://github.com/sandalsoft/agent-skills/tree/main/draw-io
Command: npx skills add https://github.com/sandalsoft/agent-skills --skill draw-io-sandalsoft

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

draw.io diagram creation, editing, and review workflows are streamlined by providing a comprehensive set of guidelines, a deterministic PNG conversion script, and AWS icon usage practices to ensure diagrams are consistent and ready for publication.

Core Features & Use Cases

  • Diagram creation and editing with draw.io, focusing on .drawio XML content and proper element labeling.
  • PNG export with a deterministic script to generate high-quality images suitable for slides and documentation.
  • Layout and coordinate guidance including mxGeometry adjustments and 2x scaling considerations for print-ready outputs.
  • AWS icon usage with up-to-date icons and official naming conventions to represent AWS resources accurately.
  • Use Case: prepare architecture diagrams for presentations, documentation, and reviews with consistent visuals.

Quick Start

Open a .drawio file and run the conversion script to generate a PNG diagram.

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 editing for documentation?

Automating draw.io diagram creation involves editing the .drawio XML content directly and applying layout guidelines. This process streamlines element labeling and mxGeometry adjustments to ensure consistent architecture diagrams for documentation and reviews.

How do I export a .drawio file to a high-quality PNG for slides?

Exporting a .drawio file to PNG uses a deterministic conversion script to generate high-quality images. Running scripts/convert-drawio-to-png.sh produces print-ready outputs with 2x scaling considerations suitable for slides and publications.

How do I add AWS icons to draw.io diagrams using official naming conventions?

Adding AWS icons to draw.io diagrams requires using up-to-date icons and official naming conventions. This ensures AWS resources are represented accurately within the .drawio XML structure for consistent architecture visualizations.

Do I need the drawio dependency installed to convert diagrams to PNG?

Yes, the drawio dependency is required to automate diagram creation and execute the PNG conversion script. The environment needs drawio installed to process the .drawio XML files and generate deterministic, high-quality image outputs.

What's the best way to ensure consistent layout and coordinates in draw.io XML?

Ensuring consistent layout in draw.io XML involves following specific layout guidelines for mxGeometry adjustments and 2x scaling considerations. These coordinate rules guarantee print-ready, deterministic PNG outputs that remain visually consistent across publications.

Why does my draw.io PNG export look inconsistent for print-ready outputs?

Inconsistent draw.io PNG exports often result from ignoring layout guidelines and 2x scaling considerations. Applying proper mxGeometry adjustments and using the deterministic conversion script ensures high-quality, print-ready image outputs for slides and documentation.