Can I use this to modify existing diagrams?

Absolutely. The skill is designed to parse and edit the XML structure of existing draw.io files, allowing you to add, remove, or restyle elements.

Does it support non-English characters?

Yes, it is specifically optimized for Japanese characters using the Noto Sans JP font family and adjusted text-width calculations for better layout precision.

How are connectors handled to prevent visual clutter?

The skill follows a strict layering rule where connectors are placed at the back (top of the XML) and includes 20px spacing logic to prevent labels from overlapping.

Can this skill export diagrams to image formats?

Yes, the skill includes specific CLI instructions to export your .drawio files to high-resolution (2x scale) PNG files with transparent backgrounds.

Draw.io Diagram Architect

Name: Draw.io Diagram Architect
Author: akiojin

byakiojin

•

Design Tools

Generates and edits professional draw.io diagrams in XML format for technical documentation and system design.

About

This skill empowers Claude to create, modify, and export professional-grade diagrams directly in the draw.io (.drawio) XML format. It handles complex visual elements including flowcharts, architecture diagrams, and sequence diagrams with specific attention to styling, Japanese font support (Noto Sans JP), and proper layering of connectors. Whether you need to visualize a database schema, map out a CI/CD pipeline, or document a business process, this skill provides the structure and styling guidelines to produce clean, high-resolution visual assets directly within your development workflow.

Key Features

Native XML generation for .drawio files with compliant schema structure.
High-resolution PNG export capabilities via draw.io CLI integration commands.
Comprehensive shape library including rectangles, ellipses, diamonds, and styled text blocks.
Advanced connector management with orthogonal edge styling and auto-labeling.
1 GitHub stars
Optimized Japanese language support using Noto Sans JP and custom layout calculations.

Use Cases

Visualizing database schemas and entity-relationship diagrams (ERD) during the design phase.
Designing complex logic flowcharts for software development and business process mapping.
Generating system architecture diagrams for technical documentation and README files.

About

Key Features

Native XML generation for .drawio files with compliant schema structure.
High-resolution PNG export capabilities via draw.io CLI integration commands.
Comprehensive shape library including rectangles, ellipses, diamonds, and styled text blocks.
Advanced connector management with orthogonal edge styling and auto-labeling.
1 GitHub stars
Optimized Japanese language support using Noto Sans JP and custom layout calculations.

Use Cases

Visualizing database schemas and entity-relationship diagrams (ERD) during the design phase.
Designing complex logic flowcharts for software development and business process mapping.
Generating system architecture diagrams for technical documentation and README files.