draw-io

The draw-io skill provides an automated, programmatic approach to maintaining visual documentation within a repository. Designed for developers and architects, this skill enables the creation, editing, and quality assurance of .drawio diagrams directly through code, ensuring that diagrams remain consistent with the technical architecture. It eliminates manual graphical intervention by utilizing direct XML manipulation and CLI-based export workflows, making it ideal for CI/CD pipelines where visual documentation needs to be version-controlled and synchronized with source code changes.

• Automated conversion of .drawio XML files to high-resolution PNGs using pre-commit hooks and dedicated shell scripts.

• Precise coordinate-based layout adjustment by directly modifying mxGraphModel XML structures for elements, groups, and connections.

• Support for corporate design standards, including specific font families (e.g., Noto Sans JP), arrow positioning, and spacing rules.

• Advanced architectural modeling capabilities including support for context, system, component, deployment, and sequence diagrams.

• Intelligent metadata management for title, version, and author tracking within diagram objects.

• Built-in validation rules for element alignment, margin calculations for grouped containers, and contrast-focused accessibility standards.

• Use this skill for maintaining technical documentation, system architecture flows, and data flow diagrams that need to be updated alongside feature development.

• When performing manual adjustments, verify coordinates in the XML source; prioritize calculated center-alignment for consistency across complex multi-element diagrams.

• Prefer unidirectional arrows and explicit source/target point definitions in XML to avoid rendering ambiguities in auto-generated PNG exports.

• Always set the defaultFontFamily to ensure cross-platform visual consistency in presentation slides and documentation exports.

• Follow the progressive disclosure principle by creating tiered diagram levels, ranging from high-level system overviews to granular sequence diagrams.

• Input expected is a raw .drawio XML file; outputs include updated XML and rendered, transparent-background PNG assets ready for web or PDF usage.