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

•

디자인 도구

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

소개

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.

주요 기능

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

사용 사례

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

소개

주요 기능

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

사용 사례

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