draw-io

Edit .drawio files and export PNGs via the draw.io CLI.

6|Updated Dec 28, 2023
One-click install
npx skills add https://github.com/staticWagomU/dotfiles --skill draw-io-staticwagomu
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: draw-io
Source: https://github.com/staticWagomU/dotfiles/tree/main/config/claude/skills/draw-io
Command: npx skills add https://github.com/staticWagomU/dotfiles --skill draw-io-staticwagomu

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Manual diagram creation and maintenance in draw.io can be error-prone and time-consuming. This Skill centralizes the workflow for editing .drawio files, adjusting layouts, and exporting PNGs while ensuring consistent visuals and AWS icon usage.

Core Features & Use Cases

  • Edit only .drawio files to preserve source integrity and avoid accidentally overwriting PNG outputs.
  • Convert diagrams to high-resolution PNGs using the included conversion script and draw.io CLI.
  • Apply layout adjustments and AWS icon workflows to produce slide-ready visuals for presentations and documentation.
  • Reference layout guidelines, AWS icon conventions, and helper scripts to speed up diagram authoring.

Quick Start

Open a .drawio file and run the conversion script to generate a high-resolution PNG and review the result.

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 export to PNG?

You can automate draw.io diagram export to PNG by editing your .drawio files and running a conversion script that leverages the draw.io CLI to generate high-resolution images. This approach streamlines the workflow and ensures consistent visual outputs for documentation.

What is the best way to apply AWS icons in draw.io diagrams?

The best way to apply AWS icons in draw.io diagrams is to reference the included AWS icon conventions and layout guidelines. This ensures your cloud architecture diagrams maintain consistent visuals and adhere to standard icon workflows for presentations.

Can I edit .drawio files directly to adjust diagram layouts?

Yes, you can edit .drawio files directly to adjust diagram layouts. Editing the source .drawio files preserves source integrity and prevents accidentally overwriting generated PNG outputs during the layout tuning process.

Does the draw.io CLI require any specific dependencies for exporting diagrams?

The draw.io CLI requires no external dependencies listed in the Skill metadata to export diagrams. It relies solely on the included conversion script and references to validate diagrams and produce slide-ready PNG outputs.

Why should I only edit .drawio files instead of generated PNGs?

You should only edit .drawio files to preserve source integrity and avoid accidentally overwriting PNG outputs. The conversion script handles rendering the source diagrams into high-resolution PNGs for presentations and documentation.

What's the best way to create slide-ready diagrams for presentations from draw.io?

The best way to create slide-ready diagrams from draw.io is to apply layout adjustments and AWS icon workflows to your .drawio files, then run the conversion script to export high-resolution PNGs ready for slides.