skills.rest
RandyHaylor
RandyHaylorCOMMUNITY
Explore all skills by this author →
GitHub

draw-io

Generate and edit draw.io diagrams in .drawio XML format.

Updated Feb 9, 2026
Search Tags:#architecture#flowchart#diagramming#visualization#xml#draw.io
One-click install
npx skills add https://github.com/RandyHaylor/enhanceclaude --skill draw-io-randyhaylor
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: draw-io
Source: https://github.com/RandyHaylor/enhanceclaude/tree/main/ai-tools/draw-io
Command: npx skills add https://github.com/RandyHaylor/enhanceclaude --skill draw-io-randyhaylor

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and scripts (resource) components.

What problem does it solve?

This Skill automates the creation and modification of draw.io diagrams, simplifying the process of visualizing complex information like flowcharts, architecture diagrams, and swimlane diagrams.

Core Features & Use Cases

  • Diagram Generation: Create various diagram types (.drawio XML) including flowcharts, decision trees, swimlane diagrams, and architecture diagrams.
  • XML Editing: Provides detailed guidance on the XML structure, styles, and critical rules for draw.io diagrams.
  • VS Code Integration: Offers instructions for previewing and editing diagrams within VS Code.
  • Use Case: Generate a draw.io flowchart to visually represent a user registration process, including decision points for email validation and account activation.

Quick Start

Create a draw.io flowchart showing a user registration process with decision nodes for email validation.

Frequently Asked Questions about draw-io

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

FAQPage Schema
How do I generate a draw.io diagram for a flowchart or architecture visualization?▼

You can generate draw.io diagrams by outputting .drawio XML files. This Skill automates creating flowcharts, architecture diagrams, and swimlane diagrams, providing XML structure, shape and edge styles, and critical rules for fonts and z-ordering.

What is the best way to edit draw.io XML structure for swimlane diagrams?▼

Editing draw.io XML structure involves applying documented styles and critical rules for fonts and z-ordering. This Skill provides comprehensive guidance for modifying .drawio XML to create and edit swimlane diagrams and architecture visualizations.

Can I preview and edit draw.io diagrams directly within VS Code?▼

Yes, you can preview and edit draw.io diagrams within VS Code. This Skill provides integration instructions, enabling you to visualize and modify .drawio XML files directly within your development environment.

Does this draw.io diagram generator support PNG export?▼

Yes, this draw.io diagram generator supports PNG export. Alongside generating .drawio XML files for flowcharts and architecture diagrams, it provides functionality to export your visualizations into PNG format.

Why do my draw.io flowchart arrows have incorrect z-ordering or font settings?▼

Incorrect z-ordering or font settings in draw.io flowcharts occur when XML rules are ignored. This Skill provides critical rules for arrow z-ordering and font settings to ensure your .drawio diagrams render correctly without layering or styling issues.

Related Skills

Explore More Software Engineering Skills→
akiojinakiojin
8

drawio

Create and edit draw.io diagrams as XML with shapes, connectors, and PNG export.

Community
Intermediate
yuki-yanoyuki-yano
64

drawio

Generate native .drawio diagrams from prompts and export to PNG, SVG, PDF, or JPG.

Community
Intermediate
saajunaidsaajunaid

draw-io

Convert draw.io diagrams to PNG and validate XML structure.

Community
Advanced
htn332805htn332805

plantuml-ascii

Convert PlantUML definitions into ASCII art diagrams using the PlantUML command-line tool.

Community
Intermediate