How does it handle font consistency?

It enforces a default font family (such as Noto Sans JP) across both the graph model and individual text elements to ensure cross-platform visual consistency.

Can this skill export diagrams directly to PNG?

The skill generates the .drawio XML file and provides optimized CLI commands for users to export them to PNG using the draw.io desktop app or CLI.

Why are arrows placed before boxes in the XML?

This skill follows Z-order best practices, placing edges (arrows) before vertices (boxes) in the XML structure to ensure connection lines render behind shapes for a cleaner visual look.

Does it support languages other than English?

Yes, it specifically includes advanced support for Japanese text, handling character widths and specific font settings to prevent layout issues common in generated diagrams.

Can I edit the generated files manually?

Absolutely. The skill creates standard .drawio XML files that are fully compatible with any draw.io or diagrams.net editor for further manual adjustment.

Draw.io Diagram Generator

Name: Draw.io Diagram Generator
Author: ekusiadadus

byekusiadadus

•

Design Tools

Generates and edits high-quality draw.io diagrams in XML format with specialized support for fonts, layering, and Japanese text.

About

The Draw.io Diagram Generator skill empowers Claude Code to create professional flowcharts, architecture diagrams, and sequence diagrams by directly manipulating XML. It solves common programmatic diagramming issues such as incorrect font rendering, overlapping elements, and text truncation in Japanese. By enforcing strict rules for arrow Z-ordering and label spacing, it ensures that generated diagrams are visually clean and ready for export or further manual editing in draw.io. This skill is ideal for developers who need to document system designs or workflows without leaving their terminal environment.

Key Features

Automated XML generation for complex flowcharts and architecture diagrams
Precise Z-order management to ensure arrows render behind vertices
Built-in validation workflows for PNG export and visual verification
Specialized Japanese text support with automatic character width calculation
Standardized font family and size application across all diagram elements
2 GitHub stars

Use Cases

Creating process flowcharts for documentation and project planning
Generating system architecture diagrams during technical design phases
Visualizing complex sequence diagrams directly from code logic

About

Key Features

Automated XML generation for complex flowcharts and architecture diagrams
Precise Z-order management to ensure arrows render behind vertices
Built-in validation workflows for PNG export and visual verification
Specialized Japanese text support with automatic character width calculation
Standardized font family and size application across all diagram elements
2 GitHub stars

Use Cases

Creating process flowcharts for documentation and project planning
Generating system architecture diagrams during technical design phases
Visualizing complex sequence diagrams directly from code logic