Can this skill edit existing .drawio files?

Yes, it specializes in direct XML editing of .drawio files to adjust coordinates, styles, and elements with surgical precision without requiring a GUI.

How does it handle image conversion?

The skill utilizes conversion scripts and pre-commit hooks to generate high-resolution (2x scale), transparent PNGs from XML source files automatically.

Does it support AWS icons?

Yes, it includes specialized search scripts to find the latest AWS official icons (mxgraph.aws4) and provides patterns for their correct implementation.

Why are arrows placed at the back layer in this skill?

Placing arrows in the background layer (immediately after the title in XML) ensures that labels, boxes, and icons remain fully visible and aren't obscured by lines.

Is it compatible with presentation tools?

Yes, it includes specific optimizations for Quarto and reveal.js slides, such as font family standardization (Noto Sans JP) and image scaling settings.

Draw.io Diagrams

Name: Draw.io Diagrams
Author: softaworks

bysoftaworks

•

347

•

デザインツール

Manages draw.io diagram lifecycles including XML editing, high-resolution PNG conversion, and AWS architecture visualization with precise layout control.

This skill empowers AI agents to create, edit, and maintain professional technical diagrams directly within a repository using the draw.io XML format. It provides specialized rules for coordinate adjustment, layer management, and AWS icon integration, ensuring diagrams remain consistent and high-quality. With built-in support for PNG conversion and specific optimizations for reveal.js slides and Quarto documentation, it streamlines the process of keeping documentation and architectural visuals in sync with code changes, allowing for automated updates to complex system designs.

主な機能

01Direct XML editing and coordinate adjustment for .drawio files

02Advanced layout rules for margins, font consistency, and layer ordering

03Optimized export settings for Quarto and reveal.js presentations

04Automated high-resolution PNG conversion with transparent backgrounds

05347 GitHub stars

06Integrated AWS icon search and standardized usage patterns

ユースケース

01Generating and updating AWS cloud architecture diagrams during infrastructure changes

02Maintaining sequence and flow diagrams within technical documentation repositories

03Automating diagram-to-image conversion for use in slide decks and READMEs

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add softaworks/agent-toolkit draw-io

For use in Claude.ai and ChatGPT

Download Skill