CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

drawio

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. Exception: in a chat that shows diagrams inline (VS Code's or Cursor's own chat, Claude.ai, ChatGPT) where the draw.io MCP server's create_diagram tool is available, call that tool instead, unless the user asks for a file or an export. Claude Code, Codex and Copilot CLI, also in their VS Code and JetBrains extensions, don't show diagrams inline: use this skill there.

Quality

88%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Low

Low-risk findings worth noting

The canonical home for this skill is drawio in jgraph/drawio-mcp

SKILL.md
Quality
Evals
Security

Quality

Content

88%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

An exceptionally actionable, command-dense skill body with a clearly sequenced pipeline, explicit validation (repair pass) and fallback paths, and a troubleshooting table that provides genuine error-recovery feedback loops. Its only real costs are minor over-explanations of basics and long platform-specific sections (Windows/WSL2 CLI discovery, .url workarounds) inlined into the always-loaded body that would be better split into on-demand references.

DimensionReasoningScore

Conciseness

Nearly all content is non-obvious, draw.io-specific knowledge that earns its tokens (broken direct Mermaid→PNG export, `#create=` URL rewrite pitfall, `cmd.exe` stripping `#` fragments, edge-parenting rules for auto-layout), presented as dense commands and tables rather than prose. It is not 5 because of minor over-explanations of things Claude already knows ("Do **not** wrap it in backticks — in bash that is command substitution", the `&`-as-command-separator aside) and because ~370 lines load unconditionally when parts are platform-specific.

4 / 5

Actionability

Every section gives copy-paste-ready commands with real arguments: conversion (`drawio -x -f xml -o diagram.drawio diagram.mmd`), export (`drawio -x -f png -e -b 10 -o diagram.drawio.png diagram.drawio`), layout presets and custom-layout JSON, a complete Node one-liner for URL generation and a full repair-pass script, plus a ready-to-save PowerShell CLI-finder — fully executable and covering the common cases (formats, platforms, error recovery).

5 / 5

Workflow Clarity

The pipeline is explicitly sequenced (Author → .drawio → Deliver → Open) with a Mermaid-vs-XML decision table, an explicit validation checkpoint ("Run this right after writing XML to a .drawio file, before any layout, export or URL step" — the repair pass), conditional fallbacks (no CLI → author as XML; open fails → "print the absolute path (or URL)"), and a troubleshooting table that closes feedback loops (GPU failure → "Retry the same command with `--disable-gpu` added").

5 / 5

Progressive Disclosure

Good structure with well-signaled, conditional, one-level-deep references — Mermaid syntax and XML rules are fetched only when that authoring path is used ("When authoring Mermaid, fetch and follow the shared Mermaid reference"), the full XML reference only "when a diagram needs layers, tags, metadata and placeholders", and the bundled `scripts/find-shapes.js` is correctly referenced and exists in the bundle. It falls short of 5 because the ~80 lines of WSL2/Windows CLI-location chains and `.url`-file workarounds are inlined unconditionally and would sit better in a platform reference file loaded only when needed.

4 / 5

Total

18

/

20

Passed

Description

82%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong trigger-focused description with exceptional keyword coverage (synonyms, misspelling, file extension, formats) and explicit environment boundary guidance that resolves the main conflict with the MCP create_diagram tool. Its main weakness is that the 'what' is implicit — the skill's concrete deliverables and capabilities (.drawio generation, Mermaid/XML authoring, layouts, browser URLs) are never directly stated.

DimensionReasoningScore

Specificity

Quotes: "create, generate, draw, or design a diagram, flowchart, architecture diagram, ER diagram, sequence diagram, class diagram, network diagram, mockup, wireframe, or UI sketch" and "diagram export to PNG/SVG/PDF" — several concrete actions with rich object coverage. It is not 5 because the verbs (create/generate/draw/design) are near-synonyms forming effectively two action categories, and concrete deliverables like .drawio file generation or browser-URL output are never named; it is above 3 because the action list and coverage are far more comprehensive than a single generic action.

4 / 5

Completeness

The 'when' is fully explicit ("Always use when user asks to create... or mentions draw.io...") plus environment-specific boundary guidance ("Claude Code, Codex and Copilot CLI... use this skill there"), and a 'what' is present through the named actions (diagram creation, "diagram export to PNG/SVG/PDF"). It falls short of 5 because the skill's actual outputs and mechanisms (.drawio files, Mermaid/XML authoring, layouts, browser URLs) are not explicitly stated — the 'what' is only inferred from trigger actions — but exceeds 3 since explicit trigger guidance and the domain are both clearly present.

4 / 5

Trigger Term Quality

Quotes: "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" — comprehensive natural-term coverage including synonyms, the product names, a common misspelling ("drawoi"), the file extension, and output formats, exactly matching the top anchor.

5 / 5

Distinctiveness Conflict Risk

Clear niche anchored by distinctive triggers ("draw.io, drawio, drawoi, .drawio files") and an explicit carve-out against the nearest conflict ("where the draw.io MCP server's create_diagram tool is available, call that tool instead"). Not 5 because broad terms like "mockup, wireframe, or UI sketch" and generic "diagram" carry minor overlap risk with UI-generation and general visualization skills, matching the 'minor overlap risk with closely related skills' anchor.

4 / 5

Total

17

/

20

Passed

Validation

100%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository

jgraph/drawio-mcp

Path

plugins/codex/drawio/skills/drawio/SKILL.md

Reviewed

Table of Contents

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.