What does this skill do, and when should you use it?
This is the plugin skill for Claude Code and Codex CLI that ships inside the official draw.io repository at plugins/claude-code/skills/drawio. It authors diagrams two ways: preferably as Mermaid (converted and auto-laid-out by the draw.io desktop CLI), or as raw mxGraphModel XML (no CLI needed). Every artifact is a native .drawio file, which can then be exported to PNG/SVG/PDF with the diagram XML embedded — so exported files stay editable in draw.io — or turned into a browser URL that opens at app.diagrams.net. XML-authored diagrams can be auto-arranged with ELK layout presets or custom layout JSON. When no desktop CLI exists, the skill falls back to XML and delivers a .drawio file or URL.
Reads the requested diagram type and output format; writes Mermaid to a .mmd file and converts it with the drawio CLI to .drawio (deleting the .mmd afterward), or generates mxGraphModel XML directly; optionally applies --layout with ELK presets (verticalFlow, horizontalFlow, verticalTree, horizontalTree, radialTree, organic), libavoid orthogonal edge routing, or a custom layout JSON array; exports with -x -f png/svg/pdf -e to embed the diagram XML; generates an app.diagrams.net #create= URL using Node.js's built-in zlib and opens it via open/xdg-open/cmd.exe; locates the draw.io CLI across macOS, Linux, native Windows and WSL2; and opens the result or prints its absolute path/URL.
- A developer in Claude Code who needs a quick login flowchart or database ER diagram saved as an editable .drawio file
- An architect producing an AWS/Azure architecture diagram that requires specific shape libraries, authored as XML and exported to PDF
- A user without draw.io Desktop who wants a clickable link to view and edit the diagram at app.diagrams.net
- Someone with hand-positioned XML who wants ELK to tidy it up via --layout verticalFlow or organic
- A docs engineer exporting an SVG with embedded XML for a README so it remains editable in draw.io
- A WSL2 user opening a diagram URL in the Windows browser using the skill's .url temp-file workaround
How do you install this skill?
- The opt-in url mode embeds the full diagram in a URL sent to app.diagrams.net (in the #fragment) and the endpoint is hardcoded with no self-host override; use default .drawio output or local Desktop export in data-egress-sensitive environments.
- The Mermaid/XML references are fetched from raw.githubusercontent.com, which may be unreachable or unstable from mainland-China networks; consider pre-caching the reference files.
- Mermaid conversion, ELK layout, and PNG/SVG/PDF export all require a recent draw.io Desktop installation; older builds silently lack --layout/.mmd support — the skill provides an XML fallback but users should verify their version.
- The description uses a broad 'Always use' trigger and may fire on unrelated diagram requests; this was a static review with no commands executed, so real export fidelity must be verified by the user.
- Publisher is unverified by the FollowSkills registry; SKILL.md carries no version number or changelog and reference content drifts with the main branch.
- Shell / CLI
- Network access
- Local filesystem
Node.js (for URL mode)draw.io Desktop CLI (optional — for Mermaid conversion, ELK layout, PNG/SVG/PDF export)
For Claude Code, install from this repo's marketplace (from the README, for the drawio plugin collection):
/plugin marketplace add jgraph/drawio-mcp
/plugin install drawio@drawio
Or load from a local clone: claude --plugin-dir ./plugins/claude-code. For Codex CLI: codex plugin marketplace add jgraph/drawio-mcp then codex plugin add drawio@drawio. Optionally install draw.io Desktop to enable Mermaid conversion, ELK layouts, and image export.
tmp="$(mktemp -d)"
git clone --depth 1 https://github.com/jgraph/drawio-mcp.git "$tmp"
mkdir -p ~/.claude/skills
cp -R "$tmp/plugins/claude-code/skills/drawio" ~/.claude/skills/
rm -rf "$tmp"Generated from the source repository and skill path; it copies only this skill's folder. If the author's install steps above differ, follow those first. To scope it to one project, replace ~/.claude/skills with that project's .claude/skills.
How do you use this skill?
Once installed, send your agent any of these to trigger it:
- create a flowchart for user login
- /drawio:drawio png login flow
Just ask in natural language, e.g. "create a flowchart for user login" or "/drawio:drawio png login flow". With no format mentioned it produces and opens a .drawio file; png/svg/pdf exports via the desktop CLI; url generates an app.diagrams.net link while keeping the .drawio locally. Mermaid diagram labels match the user's language.
What are this skill's strengths and limitations?
- Artifacts are native .drawio or PNG/SVG/PDF with embedded XML, so exports stay editable in draw.io
- Mermaid-first authoring with automatic layout avoids hand-placing XML coordinates; the XML route works without any CLI
- Covers CLI location and open commands for macOS, Linux, native Windows and WSL2, with a troubleshooting table for known pitfalls (e.g. cmd.exe stripping the # fragment)
- Clear data-residency story: the default flow is fully local with no cloud rasterizer calls
- Maintained by the official jgraph/draw.io organization, with shared XML/Mermaid references as a single source of truth
- Full functionality (Mermaid conversion, ELK layout, PNG/SVG/PDF export) requires draw.io Desktop installed
- Direct .mmd → PNG export with -e is broken in current draw.io Desktop, forcing the two-step convert-then-export path
- url mode hardcodes app.diagrams.net with no self-host alternative, and very large diagrams can exceed browser URL length limits
- jpg export has no embedded XML and is not re-editable
- The repository's description and topics fields are empty; the README offers no separate test suite or platform validation evidence for this skill
How does this skill compare with similar options?
Side by side with related skills; every score comes from the same FSRS standard.
| Skill | FS score | Stars | Last updated | License |
|---|---|---|---|---|
| Draw.io Diagram Skill this page | 61 · Recommended | ★ 5.6k | 12d ago | Apache-2.0 |
| Dashmotion | 62 · Recommended | ★ 178 | 4mo ago | MIT |
| Hand-Drawn Diagrams Skill | 53 · Use with care | ★ 79 | 28d ago | NOASSERTION |
| Diagram Design | 58 · Recommended | ★ 55k | 12d ago | MIT |
| Slides Grab Image-Native Skill | 53 · Use with care | ★ 1.2k | 1mo ago | MIT |
The same repository also offers an MCP App Server (inline rendering in chat, hosted at mcp.draw.io, which sends diagrams to the server), an MCP Tool Server (npm package @drawio/mcp, opens the draw.io editor in a browser tab), and an install-free Project Instructions approach. This skill differs by requiring no MCP setup, running fully local by default, and producing local .drawio files plus editable exports — but it lacks inline chat previews.
How did FollowSkills review this skill?
Evidence shows the skill generates .drawio files locally, export shells out to the locally installed draw.io Desktop CLI, and README has a dedicated data-residency section confirming diagrams never leave the machine; url mode is opt-in with data in the URL #fragment. No red-line risks or sensitive-data handling issues found. Deducted for: no explicit user-confirmation step before auto-running open/xdg-open/cmd.exe start, and hardcoded outbound requests to app.diagrams.net in url mode (disclosed but not controllable), plus rollback limited to deleting generated files.
Evidence shows internally consistent instructions with CLI detection, XML/URL fallbacks when no CLI exists, a detailed troubleshooting table (including the known Mermaid→PNG crash and the two-step workaround), and multi-platform commands. Deducted for: static review cannot execute anything, the skill itself has no test coverage, functionality depends on draw.io Desktop version (--layout/.mmd need newer builds), and failure feedback is documentation-based rather than runtime-validated; capped at 9 per static calibration.
Evidence shows clear diagram types, output formats, no-CLI fallbacks, and explicit WSL2/Windows/macOS/Linux environment handling with declared boundaries. Deducted for: the description's broad 'Always use' trigger risks over-triggering on generic diagram requests; the Mermaid/XML references are fetched from raw.githubusercontent.com and url mode depends on app.diagrams.net, so mainland-China reachability is uncertain and core paths may degrade in restricted networks.
Evidence shows well-layered documentation (pipeline → branches → reference → troubleshooting), naming conventions, disclosed known limitations, Apache-2.0 license, and a check-skill-sync CI workflow enforcing byte-identical skill copies with JGraph copyright attribution. Deducted for: no version number or changelog inside SKILL.md, shared references fetched from branch 'main' so content drifts unpinned, and publisher unverified by the registry (disclosed only, no extra deduction).
Evidence shows output is native editable .drawio plus PNG/SVG/PDF with embedded XML, with a clear multi-path design and alternatives comparison supporting real marginal value. Deducted for: static review cannot verify actual export quality or command success; correctness and layout fidelity are not independently reproduced, so scored conservatively at 6 within the static cap.
Evidence shows auditable primary material (SKILL.md, README, LICENSE), a CI sync-check workflow, and test files corroborating the repo's engineering practice. Deducted for: all committed tests target the tool server/shared modules, not this skill's key paths (Mermaid conversion, ELK layout, export); no third-party execution evidence, so capped at 4 under static calibration.
Open a dimension to read why it scored that way
Evidence confidence：Low — Mostly static review, author material or a limited demo; useful for discovery, not high-risk decisions.
See the full review method →