drawio

Generate draw.io XML for system architecture diagrams with BCE styling.

46|10|Updated Dec 14, 2025
One-click install
npx skills add https://github.com/AdamBien/airails --skill drawio-adambien
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: drawio
Source: https://github.com/AdamBien/airails/tree/main/documentation/drawio
Command: npx skills add https://github.com/AdamBien/airails --skill drawio-adambien

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the creation of clear, consistent, and professional overview diagrams for system architecture and component interactions, eliminating the guesswork and manual styling of diagramming tools.

Core Features & Use Cases

  • Automated Diagram Generation: Creates draw.io XML for high-level system visualizations.
  • Consistent Styling: Enforces a predefined visual style and color palette for Business Components (BC), subsystems, and other architectural elements.
  • Use Case: When asked to create an architecture diagram for a new microservices project, this Skill can generate the initial draw.io file with all components and their basic relationships pre-styled according to BCE conventions.

Quick Start

Use the drawio skill to create a diagram named 'user-service-overview' with a 'User' and 'Auth' component.

Frequently Asked Questions about drawio

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

FAQPage Schema
How do I generate draw.io XML for system architecture diagrams?

To generate draw.io XML for system architecture diagrams, this Skill automatically maps business components, subsystems, and external services to predefined BCE shapes and color palettes. It outputs structured XML for clear, high-level component visualizations.

What is the best way to visualize microservices and business components consistently?

Visualizing microservices consistently requires applying a standard BCE shape mapping and color palette across all elements. This Skill enforces predefined styling conventions for business components and subsystems, eliminating manual formatting guesswork.

How do I create an initial architecture diagram for a new project?

Creating an initial architecture diagram involves defining components like 'User' and 'Auth' and their relationships. This Skill generates the initial draw.io file with all components pre-styled according to BCE conventions for immediate visualization.

Does this approach require manual styling of draw.io shapes?

This approach does not require manual styling of draw.io shapes. It enforces a predefined visual style and color palette for business components and subsystems automatically within the generated XML structure.

Can I use this for documenting subsystem interactions and external services?

Yes, you can use this for documenting subsystem interactions and external services. The Skill applies BCE shape mapping to visualize business components, subsystems, and external architectural elements in a high-level overview.