Does this skill support complex connector routing?

Yes, it provides detailed guidance on using mxGeometry with waypoint arrays and relative positioning to manage complex edge paths and label offsets.

Why does my generated .drawio file appear blank?

This usually happens when the wrapper is missing. This skill ensures Claude uses the full XML format required for standalone file rendering rather than just the simplified mxGraphModel import format.

Can I use HTML and CSS-like styling in the diagrams?

Yes, the skill includes a comprehensive style string reference for hex colors, font properties, and HTML label rendering (html=1) to create rich visual outputs.

What are the mandatory cells required for a valid diagram?

Every draw.io XML document must include a root cell (ID 0) and a default layer cell (ID 1). Omitting these results in a corrupted file that the editor cannot open.

How do I ensure diagrams look good in both light and dark mode?

The skill enforces a background='none' attribute on the mxGraphModel, which ensures the diagram is transparent and adapts to whatever UI or document theme it is embedded in.

Draw.io XML Diagramming

Name: Draw.io XML Diagramming
Author: markus41

bymarkus41

•

デザインツール

Generates valid draw.io and mxGraph XML structures for creating professional architectural and flow diagrams.

This skill provides a comprehensive reference and implementation guide for generating draw.io-compatible XML directly within Claude. It ensures that generated diagrams adhere to the specific mxGraphModel schema, including mandatory root cell hierarchies, precise vertex and edge definitions, and extensive styling properties. By following these validation rules and structural patterns, users can create complex diagrams that are immediately renderable in draw.io (diagrams.net) desktop and web applications, avoiding common pitfalls like blank files or corrupted XML structures.

主な機能

01Full mxfile wrapper generation for native .drawio file compatibility

0210 GitHub stars

03Comprehensive style property library for shapes, text, and connectors

04Advanced geometry configuration for precise shape placement and edge routing

05Mandatory cell hierarchy validation to prevent corrupted diagrams

06Transparent background defaults for seamless embedding in dark/light modes

ユースケース

01Automating the creation of system architecture diagrams from text descriptions

02Standardizing visual styles and formatting across team-wide diagram assets

03Generating flowcharts and sequence diagrams for technical documentation

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add markus41/claude xml-generation

For use in Claude.ai and ChatGPT