Draw.io Diagram Generator

Generate interactive draw.io diagrams that users can open and edit in their browser.

Supported Diagram Types

Draw.io supports virtually any diagram type:

• - Standard: Flowcharts, org charts, mind maps, timelines, Venn diagrams
• Software: UML (class, sequence, activity, use case), ERD, architecture diagrams
• Cloud/Infrastructure: AWS, Azure, GCP, Kubernetes, network topology
• Engineering: Electrical circuits, digital logic, P&ID, floor plans
• Business: BPMN, value streams, customer journeys, SWOT
• UI/UX: Wireframes, mockups, sitemaps
• And more: Infographics, data flows, decision trees, etc.

Format Selection Guide

How to Use

Step 1: Determine the best format for the diagram

• - Use Mermaid for most standard diagrams (flowcharts, sequence diagrams, ERD)
• Use CSV for hierarchical data like org charts
• Use XML when you need precise control over positioning or custom shapes

Step 2: Generate the diagram code

Write the diagram code in the chosen format (see examples below).

Step 3: Execute the Python script

Run the script scripts/generate_drawio_url.py (relative to this SKILL.md file) to create the markdown link.

Format Templates

Mermaid

XML (draw.io native)

CSV (hierarchical data)

CRITICAL: XML Well-Formedness

When generating draw.io XML, the output must be well-formed XML:

• - NEVER use double hyphens (--) inside XML comments. Use single hyphens or rephrase (e.g., <!-- Order 1 to OrderItem --> not <!-- Order 1 --- OrderItem -->)
• Escape special characters in attribute values (&, <, >, ")

Script Usage

The script generate_drawio_url.py is located in the scripts/ subdirectory relative to this SKILL.md file. Execute it with command-line arguments:

CODEBLOCK3

Arguments:

• - -t, --type: Diagram type (required), choices: mermaid, xml, INLINECODE13
• INLINECODE14: Diagram code content (required)

The script outputs a markdown link: INLINECODE15

Present the markdown link directly to the user.