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.

主要功能

01Automated XML generation for complex flowcharts and architecture diagrams

02Precise Z-order management to ensure arrows render behind vertices

03Built-in validation workflows for PNG export and visual verification

04Specialized Japanese text support with automatic character width calculation

05Standardized font family and size application across all diagram elements

062 GitHub stars

使用场景

01Creating process flowcharts for documentation and project planning

02Generating system architecture diagrams during technical design phases

03Visualizing complex sequence diagrams directly from code logic

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ekusiadadus/draw-mcp draw-io

For use in Claude.ai and ChatGPT

Download Skill