skills.rest
saajunaid
saajunaidCOMMUNITY
Explore all skills by this author →
GitHub

draw-io

Convert draw.io diagrams to PNG and validate XML structure.

Updated Feb 20, 2026
Search Tags:#automation#validation#xml#diagram#drawio#aws-icons#png-export
One-click install
npx skills add https://github.com/saajunaid/junai --skill draw-io-saajunaid
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: draw-io
Source: https://github.com/saajunaid/junai/tree/main/.github/skills/media/draw-io
Command: npx skills add https://github.com/saajunaid/junai --skill draw-io-saajunaid

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill helps diagram authors create, edit, and review draw.io diagrams (XML), convert them to PNG, apply layout best practices, and incorporate AWS icons for clear visual communication.

Core Features & Use Cases

  • Edit and validate .drawio XML files according to best practices (no nested mxCell, correct page/background, font settings).
  • Convert diagrams to PNG with high quality using the draw.io CLI, with 2x scale.
  • Find and apply AWS icons (mxgraph.aws4.*) to diagrams to represent services.
  • Batch convert diagrams and automate PNG generation in CI/CD workflows.
  • Use Case: Create an AWS architecture diagram showcasing VPCs, subnets, and services with consistent icons.

Quick Start

Run the convert-drawio-to-png.sh script on a .drawio file to generate a PNG.

Frequently Asked Questions about draw-io

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

FAQPage Schema
How do I convert a draw.io diagram to PNG using the command line?▼

draw.io XML validation checks the mxGraphModel structure, prevents nested mxCells, and enforces 30px margins for correct page layout, ensuring proper diagram structure and background handling.

How do I validate draw.io XML files for correct diagram structure?▼

draw.io XML validation checks the mxGraphModel structure, prevents nested mxCells, and enforces 30px margins for correct page layout, ensuring proper diagram structure and background handling.

Can I automate draw.io PNG generation in a CI/CD workflow?▼

Yes, you can automate draw.io PNG generation in CI/CD workflows by running batch conversions with the included scripts, converting .drawio XML files to PNG outputs programmatically.

How do I add AWS icons to a draw.io architecture diagram?▼

To add AWS icons to a draw.io architecture diagram, find and apply up-to-date mxgraph.aws4 icons to represent VPCs, subnets, and services for clear visual communication.

Do I need the draw.io CLI installed to edit and export .drawio files?▼

Yes, the draw.io CLI is required to edit, validate, and export .drawio XML files to PNG format, ensuring proper font settings, background handling, and high-quality outputs.

What are the best practices for draw.io diagram layout and XML editing?▼

Best practices for draw.io diagram layout include maintaining XML integrity, avoiding nested mxCells, applying correct font and background settings, and keeping 30px margins within the mxGraphModel.

Related Skills

Explore More Design & Creative Skills→
akiojinakiojin
8

drawio

Create and edit draw.io diagrams as XML with shapes, connectors, and PNG export.

Community
Intermediate
gooseworks-aigooseworks-ai
1.1k

create-workflow-diagram

Convert plain-text workflow descriptions into HTML diagrams with SVG arrows and export PNGs.

Official
Advanced
i9wa4i9wa4
11

draw-io

Edit .drawio diagram XML and export transparent 2x PNGs.

Community
Advanced
yoonhwanyoonhwan
3

termaid

Render Mermaid diagram code as styled visual output in the terminal.

Community
Intermediate