drawio-diagram

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 (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. Open draw.io URL directly in browser: CRITICAL — You MUST call webbrowser.open(url) where url is the draw.io URL (starts with https://app.diagrams.net/...). Do NOT open the local HTML file path. The HTML file is only a backup — the user expects draw.io to open.
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.