draw-io

Create, edit, export, and validate draw.io diagrams in .drawio XML.

47|1|Updated Mar 14, 2026
One-click install
npx skills add https://github.com/Sunwood-ai-labs/draw-io-skill --skill draw-io-sunwood-ai-labs
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: draw-io
Source: https://github.com/Sunwood-ai-labs/draw-io-skill/tree/main
Command: npx skills add https://github.com/Sunwood-ai-labs/draw-io-skill --skill draw-io-sunwood-ai-labs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @esbuild/linux-x64, @esbuild/darwin-x64, @esbuild/win32-x64, vitepress, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill streamlines the process of creating, editing, exporting, and validating draw.io diagrams, ensuring consistency and quality in your visual documentation.

Core Features & Use Cases

  • Native .drawio Editing: Work directly with .drawio files for assistant-driven diagram generation and modification.
  • Cross-Platform Exports: Easily export diagrams to png, svg, pdf, and jpg formats with embedded XML.
  • SVG Linting: Automatically check exported SVGs for common issues like edge crossings, border overlaps, and text overflow.
  • Use Case: Generate an architecture diagram for a new microservice, export it as an SVG, and then run a lint check to ensure all connections are clear and labels fit within their shapes before adding it to your project's documentation.

Quick Start

Create a new draw.io diagram named 'login-flow' and export it as an SVG file.

Frequently Asked Questions about draw-io

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I lint an SVG diagram for edge crossings and text overflow?

SVG linting automatically checks exported SVG diagrams for common visual issues like edge crossings, border overlaps, and text overflow. This ensures all connections are clear and labels fit within their shapes before publishing documentation.

Can I export draw.io diagrams to png, svg, pdf, and jpg with embedded XML?

Cross-platform exports support converting native .drawio files to png, svg, pdf, and jpg formats. The exported files include embedded XML, allowing you to maintain the diagram's underlying data across different visual formats.

What's the best way to generate and edit draw.io diagrams programmatically?

Working directly with native .drawio XML files allows for assistant-driven diagram generation and modification. This approach streamlines creating architecture diagrams for microservices and integrating them into project documentation workflows.

Does this draw.io workflow support AWS architecture icon usage and layout guidelines?

The diagramming workflow integrates with AWS icon usage and layout guidelines for professional diagramming. This ensures your architecture diagrams maintain consistent visual standards while validating structural integrity through SVG linting.

How do I validate draw.io diagram exports before adding them to VitePress documentation?

After exporting .drawio files to SVG, run an automated lint check to validate visual quality. This catches edge crossings, border overlaps, and text overflow issues before the diagrams are added to your VitePress project documentation.