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

graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action]
    B -->|No| D[End]

XML (draw.io native)

\x3CmxGraphModel>
  \x3Croot>
    \x3CmxCell id="0"/>
    \x3CmxCell id="1" parent="0"/>
    \x3CmxCell id="2" value="Box" style="rounded=1;fillColor=#d5e8d4;" vertex="1" parent="1">
      \x3CmxGeometry x="100" y="100" width="120" height="60" as="geometry"/>
    \x3C/mxCell>
  \x3C/root>
\x3C/mxGraphModel>

CSV (hierarchical data)

# label: %name%
# style: rounded=1;whiteSpace=wrap;html=1;
# connect: {"from":"manager","to":"name","invert":true}
# layout: auto
name,manager
CEO,
CTO,CEO
CFO,CEO

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., \x3C!-- Order 1 to OrderItem --> not \x3C!-- 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:

python scripts/generate_drawio_url.py -t mermaid -c "graph TD\
    A --> B"
python scripts/generate_drawio_url.py --type xml --code "\x3CmxGraphModel>...\x3C/mxGraphModel>"
python scripts/generate_drawio_url.py -t csv -c "name,manager\
CEO,\
CTO,CEO"

Arguments:

• -t, --type: Diagram type (required), choices: mermaid, xml, csv
• -c, --code: Diagram code content (required)

The script outputs a markdown link: [点击查看图表](\x3CURL>)

Present the markdown link directly to the user.