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

•

设计工具

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

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.

主要功能

01Native XML generation for .drawio files with compliant schema structure.

02High-resolution PNG export capabilities via draw.io CLI integration commands.

03Comprehensive shape library including rectangles, ellipses, diamonds, and styled text blocks.

04Advanced connector management with orthogonal edge styling and auto-labeling.

051 GitHub stars

06Optimized Japanese language support using Noto Sans JP and custom layout calculations.

使用场景

01Visualizing database schemas and entity-relationship diagrams (ERD) during the design phase.

02Designing complex logic flowcharts for software development and business process mapping.

03Generating system architecture diagrams for technical documentation and README files.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add akiojin/llmlb drawio

For use in Claude.ai and ChatGPT

Download Skill