skills.rest
2good4me
2good4meCOMMUNITY
Explore all skills by this author →
GitHub

draw-io

Create and edit draw.io diagrams by manipulating XML structure.

Updated Feb 1, 2026
Search Tags:#architecture diagrams#diagrams#draw.io#xml editing#aws icons#png conversion
One-click install
npx skills add https://github.com/2good4me/JobNow --skill draw-io-2good4me
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: draw-io
Source: https://github.com/2good4me/JobNow/tree/main/.agents/skills/draw-io
Command: npx skills add https://github.com/2good4me/JobNow --skill draw-io-2good4me

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill streamlines the creation, editing, and refinement of draw.io diagrams, ensuring professional quality, consistent styling, and efficient conversion to image formats.

Core Features & Use Cases

  • Diagram Creation & Editing: Manipulate .drawio XML files for architecture diagrams, flowcharts, and technical visuals.
  • Automated PNG Conversion: Convert diagrams to high-resolution PNGs with transparent backgrounds.
  • Layout & Styling: Programmatically adjust element positions, ensure consistent fonts, and integrate official AWS icons.
  • Use Case: You need to create an AWS architecture diagram for a new microservices deployment. Use this Skill to generate the .drawio file, incorporate official AWS icons, ensure proper spacing and alignment, and export a clean PNG for your presentation.

Quick Start

Use the draw-io skill to convert the file 'architecture.drawio' to a PNG image.

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 a high-resolution PNG?▼

This Skill converts `.drawio` XML files into high-resolution PNG images with transparent backgrounds. It processes the diagram structure directly to generate clean, presentation-ready image outputs without manual export steps.

What is the best way to generate an AWS architecture diagram programmatically?▼

Generating AWS architecture diagrams programmatically involves manipulating `.drawio` XML files and integrating official AWS icons. This method ensures consistent styling, proper element alignment, and professional architectural visualizations for cloud deployments.

How do I standardize fonts and adjust layouts in existing draw.io XML files?▼

Standardizing fonts and adjusting layouts in draw.io XML files requires direct manipulation of the underlying XML structure. This Skill programmatically modifies element positions and enforces font consistency across technical diagrams.

Does this approach support direct XML editing for draw.io diagrams?▼

Yes, direct XML editing is supported for draw.io diagrams. This Skill facilitates creation, editing, and management of diagram files by directly manipulating their underlying XML structure for precise programmatic adjustments.

Can I use this tool to create flowcharts and technical visuals from scratch?▼

Yes, you can create flowcharts and technical visuals from scratch. The tool generates and edits `.drawio` XML files to build architecture diagrams, flowcharts, and other technical visual representations with automated styling.

Related Skills

Explore More Design & Creative Skills→
BeWaterMyFriend7BeWaterMyFriend7
46

drawio-diagram

Transform natural language diagram requests into editable drawio XML files.

Community
Advanced
UmmItKinUmmItKin

slidev

Create and present web-based slides with Markdown and Vue components.

Community
Advanced
matthew-johnsonmatthew-johnson

architecture-diagram

Generate dark-themed architecture diagrams as standalone HTML files with inline SVG.

Community
Advanced
Likas07Likas07

draw-io

Edit draw.io XML and convert diagrams to high-resolution PNGs.

Community
Intermediate