Does it support the latest AWS icons?

Yes, the skill includes tools to search for and implement the latest official AWS service icons (mxgraph.aws4) and ensures official naming conventions are used.

Is this suitable for slide deck presentations?

Absolutely. It contains specific best practices for reveal.js and Quarto, such as high-resolution 2x scaling and font size adjustments (18px+) for better readability on screens.

Can this skill edit exported image files directly?

No, this skill specifically edits the source .drawio XML files. This approach ensures that diagrams remain fully editable and prevents the data loss associated with editing flat image files.

How does it handle Japanese text in diagrams?

It includes specific font settings for Noto Sans JP and follows a character-width rule (30-40px per character) to prevent unintended line breaks in the rendered output.

How do I convert my diagrams to PNG using this skill?

The skill utilizes a conversion script that can be run through 'mise' or directly via shell commands, supporting both bulk conversion and specific file processing.

Draw.io Diagram Architect

Name: Draw.io Diagram Architect
Author: Microck

byMicrock

•

Design Tools

Automates the creation, editing, and optimization of draw.io diagrams using precise XML manipulation and AWS icon integration.

This skill enables Claude to programmatically manage draw.io diagrams by directly editing their underlying XML structure for high-precision layouts. It streamlines the workflow for technical documentation and presentations by handling font standardization (including Japanese language support), automated high-resolution PNG conversion, and strict adherence to architectural design principles. It is particularly powerful for cloud architects and developers who need to maintain consistent, accessible, and professional infrastructure diagrams within version-controlled repositories.

Key Features

01Standardized AWS icon integration using official mxGraph libraries

02Custom font configuration optimized for Noto Sans JP and technical slides

03Direct XML-based editing of .drawio files for pixel-perfect element positioning

042 GitHub stars

05Automated PNG export with 2x scaling and transparent backgrounds via CLI

06Advanced layout validation for margins, arrow layering, and coordinate alignment

Use Cases

01Automating the conversion of diagram source files to production-ready assets via pre-commit hooks

02Standardizing visual styles and accessibility for diagrams in Quarto or reveal.js slides

03Generating and maintaining AWS infrastructure diagrams within documentation repositories

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add microck/opendots-microck draw-io

For use in Claude.ai and ChatGPT