Skill: thincher/drawio-generator (version 1.0.0)

--- name: drawio-generator description: Generate draw.io diagrams from Mermaid, XML, or CSV code. Use this skill when the user requests any visual diagram including flowcharts, UML diagrams, ERD, architecture diagrams, mind maps, timelines, org charts, network topology, wireframes, BPMN, or any other visual representation. The skill creates a markdown link that opens the diagram in draw.io. --- # 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 | Format | Best For | |--------|----------| | **Mermaid** | Flowcharts, sequences, ERD, Gantt, state diagrams, class diagrams | | **CSV** | Hierarchical data (org charts), bulk import from spreadsheets | | **XML** | Complex layouts, precise positioning, custom styling, icons, shapes | ## 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) ```xml <mxGraphModel> <root> <mxCell id="0"/> <mxCell id="1" parent="0"/> <mxCell id="2" value="Box" style="rounded=1;fillColor=#d5e8d4;" vertex="1" parent="1"> <mxGeometry x="100" y="100" width="120" height="60" as="geometry"/> </mxCell> </root> </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., `<!-- Order 1 to OrderItem -->` not `<!-- Order 1 --- OrderItem -->`) - Escape special characters in attribute values (`&amp;`, `&lt;`, `&gt;`, `&quot;`) ## 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: ```bash python scripts/generate_drawio_url.py -t mermaid -c "graph TD\n A --> B" python scripts/generate_drawio_url.py --type xml --code "<mxGraphModel>...</mxGraphModel>" python scripts/generate_drawio_url.py -t csv -c "name,manager\nCEO,\nCTO,CEO" ``` **Arguments:** - `-t, --type`: Diagram type (required), choices: `mermaid`, `xml`, `csv` - `-c, --code`: Diagram code content (required) The script outputs a markdown link: `[点击查看图表](<URL>)` Present the markdown link directly to the user.

path: scripts/generate_drawio_url.py
content: #!/usr/bin/env python3
"""
Draw.io URL Generator Script

This script generates a draw.io URL from Mermaid, XML, or CSV diagram code.
It outputs a markdown link that opens the diagram in draw.io.

Usage:
    python generate_drawio_url.py --type mermaid --code "graph TD\n    A --> B"
    python generate_drawio_url.py -t xml -c "<mxGraphModel>...</mxGraphModel>"
    python generate_drawio_url.py -t csv -c "name,manager\nCEO,\nCTO,CEO"
"""

import argparse
import json
import zlib
import base64
from urllib.parse import quote


def generate_drawio_url(diagram_type: str, diagram_code: str) -> str:
    """
    Generate a draw.io URL from diagram code.
    
    Args:
        diagram_type: "mermaid", "xml", or "csv"
        diagram_code: The diagram content as a string
    
    Returns:
        A draw.io URL that opens the diagram
    """
    encoded = quote(diagram_code, safe='')
    c = zlib.compressobj(9, zlib.DEFLATED, -15)
    raw_deflate = c.compress(encoded.encode('utf-8')) + c.flush()
    data = base64.b64encode(raw_deflate).decode()
    
    payload = json.dumps({"type": diagram_type, "compressed": True, "data": data})
    url = f"https://app.diagrams.net/?pv=0&grid=0#create={quote(payload, safe='')}"
    
    return url


def main():
    parser = argparse.ArgumentParser(
        description='Generate a draw.io URL from diagram code'
    )
    parser.add_argument(
        '-t', '--type',
        type=str,
        required=True,
        choices=['mermaid', 'xml', 'csv'],
        help='Diagram type: mermaid, xml, or csv'
    )
    parser.add_argument(
        '-c', '--code',
        type=str,
        required=True,
        help='Diagram code content'
    )
    
    args = parser.parse_args()
    
    url = generate_drawio_url(args.type, args.code)
    print(f"[点击查看图表]({url})")


if __name__ == '__main__':
    main()


Security scan verdicts — ClawScan: clean | static analysis: clean | VirusTotal: clean | SkillSpector: suspicious (MEDIUM)