Always use when user asks to create, generate, draw, or design a diagram, flowchart, architecture diagram, ER diagram, sequence diagram, class diagram, network diagram, mockup, wireframe, or UI sketch, or mentions draw.io, drawio, drawoi, .drawio files, or diagram export to PNG/SVG/PDF.
Detected risks:
A diagram-generation skill that produces native draw.io diagrams as `.drawio` files in mxGraphModel XML format. It is intended for any request to create, generate, draw, or design a diagram—flowcharts, architecture, ER, sequence, class, and network diagrams, as well as mockups, wireframes, and UI sketches—or whenever draw.io, drawio, or `.drawio` files and image export are mentioned. The core flow is to generate the XML, write it to a `.drawio` file in the current working directory, then optionally export or open it.
Output handling depends on the requested format. With no format, the `.drawio` file is the deliverable and is opened directly. For `png`, `svg`, or `pdf`, it locates the draw.io desktop CLI and exports with `--embed-diagram` so the exported image still contains the editable XML, then deletes the source file; if the CLI is not found it keeps the `.drawio` file and suggests installing the desktop app or using URL mode. The `jpg` format is lossy and does not support embedded XML. For `url` mode it compresses the XML with Node.js's built-in `zlib` (deflateRawSync), base64-encodes it, and embeds it in an `app.diagrams.net` create URL that opens the diagram in the browser editor with no desktop install required, while keeping the local file.
The skill includes detailed cross-platform handling for macOS, native Linux, native Windows, and WSL2, including locating the draw.io executable via standard install paths or PATH (`which`/`where`) and opening files with `open`, `xdg-open`, or `cmd.exe`/`start`. On Windows and WSL2 it writes a temporary `.url` shortcut file because `cmd.exe`'s `start` treats `&` as a separator and strips the `#`-fragment that carries the diagram payload. The export command uses flags such as `-x`, `-f`, `-e`, `-o`, `-b`, `-t`, `-s`, `--width`, `--height`, `-a`, and `-p`. URL mode uses only Node.js built-ins, and very large diagrams that exceed browser URL length limits fall back to opening the local file.
It writes a native `.drawio` file by default, and can export to PNG, SVG, or PDF (all with embedded editable XML) or JPG (lossy, no embedded XML). It can also generate a browser URL that opens the diagram at app.diagrams.net.
Only for PNG/SVG/PDF/JPG export, which uses the draw.io CLI from the desktop app. URL mode and writing the raw `.drawio` file work without it, using only Node.js built-in modules.
Yes for PNG, SVG, and PDF when exported with `--embed-diagram` (`-e`), which embeds the full diagram XML so opening the file in draw.io recovers the editable diagram. JPG does not support embedded XML.
The XML is compressed with Node.js `zlib.deflateRawSync`, base64-encoded, and embedded in a `https://app.diagrams.net/...#create=...` URL that opens directly in the browser editor. The `.drawio` file is also kept on disk.
Because cmd.exe's `start` command treats `&` as a command separator and strips everything after `#`, which would silently lose the diagram payload in the URL fragment. A `.url` shortcut file preserves the URL intact.
Quick Setup:
.claude/skills/Repository
jgraph/drawio-mcp