分享一个生成 drawio UML 图的 ClaudeCode Skill (基于 draw.io 官方的提示词)

--- name: drawio-diagram description: Use when the user requests any visual diagram using draw.io - flowcharts, architecture diagrams, UML, ERD, sequence diagrams, org charts, mind maps, wireframes, network topology, or other diagramming needs argument-hint: "[language: zh-CN (default) | en | ja | ...]" allowed-tools: - Write - Read - Bash(python3:*) - Bash(python:*) metadata: author: jgraph source: https://github.com/jgraph/drawio-mcp --- # Draw.io Diagram Generation Generate draw.io diagrams by creating compressed URLs via Python and opening them in the browser. ## Configuration ### Working Directory Current working directory: !`pwd` ### Language - **Default**: `zh-CN` (Chinese) - **Resolution order** (highest priority first): 1. `$0` argument from `/drawio-diagram [language]` invocation 2. Language preference explicitly mentioned in the user's request (e.g., "用英文画", "draw in Japanese") 3. Default: `zh-CN` - Diagram labels, notes, and descriptions should use the resolved language - Technical terms (protocol names, opcodes, HTTP headers, status codes, framework names, etc.) MUST remain in English - Examples: - `zh-CN`: "握手阶段" (not "Handshake Phase"), but keep "HTTP GET", "101 Switching Protocols" - `en`: "Handshake Phase", "HTTP GET", "101 Switching Protocols" (all English) ## Reference Read [claude-project-instructions.md](references/claude-project-instructions.md) (relative to this skill file) for the complete diagram generation instructions, including: - Supported diagram types - Format selection guide (Mermaid / CSV / XML) - Python URL generation code - Format examples (Mermaid, XML, CSV syntax) ## Agent CLI Adaptation The reference instructions mention "HTML artifact" — in Agent CLI environments there are no artifacts. Instead: 1. **Modify the Python script**: At the end of the script (after generating the URL), add `import webbrowser; webbrowser.open(url)` to directly open the draw.io URL in the default browser — no intermediate HTML page needed 2. **Save HTML backup**: Save the HTML to `{intent}-{type}-{timestamp}.html` in the current working directory (see Configuration > Working Directory above). Naming convention: - `{intent}`: 1-5 word kebab-case subject (e.g., `mqtt-conn`, `user-auth-flow`) - `{type}`: Abbreviated diagram type (e.g., `seq`, `flow`, `erd`, `arch`, `class`, `mind`) - `{timestamp}`: Format `YYYYMMDDHHMMSS` - Example: `mqtt-conn-seq-20260211143052.html` - **Retry / fix of a previous diagram** (e.g., user reports an error, asks for style tweaks, or requests content changes to the same diagram): Reuse the exact same filename to overwrite it - **Different diagram**: Generate a new filename ### URL Safety **NEVER** manually type, copy, or reproduce generated URLs in text responses. The URL contains compressed base64 data — even a single character change breaks it. Always let the Python script generate the URL and embed it directly in the HTML file.

# Draw.io Diagram Generation When the user requests any visual diagram, use draw.io to create it. ## Supported Diagrams 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 Choose the optimal format for the task: | 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 | ## URL Generation Execute this Python code to generate the draw.io URL and output it as an HTML artifact: ```python import json, zlib, base64 from urllib.parse import quote # Set these variables: diagram_type = "mermaid" # "mermaid", "xml", or "csv" diagram_code = """graph TD A[Start] --> B[End]""" # Generate compressed URL 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='')}" # Output as HTML page print(f"""<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> body {{ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background: #f8f9fa; }} .card {{ text-align: center; background: white; border-radius: 12px; padding: 40px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }} .card h2 {{ margin: 0 0 8px; color: #1a1a1a; }} .card p {{ margin: 0 0 24px; color: #666; }} .btn {{ display: inline-block; padding: 14px 32px; background: #4285f4; color: white; text-decoration: none; border-radius: 8px; font-size: 16px; font-weight: 500; transition: background 0.2s; }} .btn:hover {{ background: #3367d6; }} </style> </head> <body> <div class="card"> <h2>Diagram Ready</h2> <p>Click below to open your diagram in draw.io</p> <a class="btn" href="{url}" target="_blank" rel="noopener noreferrer"> Open in draw.io </a> </div> </body> </html>""") ``` ## Format Examples ### 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 ``` ## Instructions 1. When a diagram is requested, determine the best format 2. Generate the diagram code 3. Execute the Python code to create the URL 4. **Create an HTML artifact** from the script output – this is the clickable link for the user ## CRITICAL: URL Output Rules **NEVER type, retype, or reproduce the generated URL in your chat response.** The URL contains compressed base64 data. Retyping it WILL corrupt it – even a single changed character breaks the link completely. Instead, follow this process: 1. Execute the Python script 2. The script outputs a complete HTML page with the correct link embedded 3. Present the HTML output as an artifact (the link inside is guaranteed correct because it was generated by the script, not by you) 4. In your chat message, simply tell the user to click the button in the artifact **DO NOT** copy the URL from the script output into your response text. The artifact IS the delivery mechanism for the link.