Generate draw.io diagrams as native .drawio files. Optionally export to PNG, SVG, or PDF with the diagram XML embedded (so the exported file remains editable in draw.io).
Works with
AI-first code editor with Composer
Before installing skills in Cursor, ensure your development environment meets these requirements:
node --versiondrawioExecute the skills CLI command in your project's root directory to begin installation:
Fetches drawio from jgraph/drawio-mcp and configures it for Cursor.
The CLI shows a list of agents. Use arrow keys and space to select Cursor:
Confirm successful installation by checking the skill directory location:
Restart Cursor to activate drawio. Access via /drawio in your agent's command palette.
We perform automated surface-level scans (Gen AI Scanner, Socket, Snyk) during installation. These checks detect common vulnerabilities but do not guarantee complete security. Always review skill source code and verify the publisher's reputation before production use.
Skills execute code in your environment. Always review source, verify the publisher, and test in isolation before production.
Submit your Claude Code skill and start earning
Create detailed user stories, acceptance criteria, and feature specs
Example
Generate user stories for 'password reset feature' with acceptance criteria, edge cases, and test scenarios
Reduce spec writing time by 50%, ensure comprehensive coverage
Research competitors, compare features, identify gaps
Example
Analyze 5 competitor products, create feature comparison matrix, suggest differentiation opportunities
Complete competitive research in 2 hours instead of 2 days
Evaluate features using frameworks (RICE, ICE, Kano) and create prioritized backlogs
Example
Score 20 feature ideas using RICE framework, generate prioritized roadmap with rationale
5
total installs
5
this week
2.5K
GitHub stars
0
upvotes
Run in your terminal
5
installs
5
this week
2.5K
stars
Generate draw.io diagrams as native .drawio files. Optionally export to PNG, SVG, or PDF with the diagram XML embedded (so the exported file remains editable in draw.io).
.drawio file in the current working directory using the Write tool--embed-diagram, then delete the source .drawio file. If the CLI is not found, keep the .drawio file and tell the user they can install the draw.io desktop app to enable export, or open the .drawio file directly.drawio file otherwise. If the open command fails, print the file path so the user can open it manuallyCheck the user's request for a format preference. Examples:
/drawio create a flowchart → flowchart.drawio/drawio png flowchart for login → login-flow.drawio.png/drawio svg: ER diagram → er-diagram.drawio.svg/drawio pdf architecture overview → architecture-overview.drawio.pdfIf no format is mentioned, just write the .drawio file and open it in draw.io. The user can always ask to export later.
| Format | Embed XML | Notes |
|---|---|---|
png |
Yes (-e) |
Viewable everywhere, editable in draw.io |
svg |
Yes (-e) |
Scalable, editable in draw.io |
pdf |
Yes (-e) |
Printable, editable in draw.io |
jpg |
No | Lossy, no embedded XML support |
PNG, SVG, and PDF all support --embed-diagram — the exported file contains the full diagram XML, so opening it in draw.io recovers the editable diagram.
The draw.io desktop app includes a command-line interface for exporting.
First, detect the environment, then locate the CLI accordingly:
WSL2 is detected when /proc/version contains microsoft or WSL:
grep -qi microsoft /proc/version 2>/dev/null && echo "WSL2"
On WSL2, use the Windows draw.io Desktop executable via /mnt/c/...:
DRAWIO_CMD=`/mnt/c/Program Files/draw.io/draw.io.exe`
The backtick quoting is required to handle the space in Program Files in bash.
If draw.io is installed in a non-default location, check common alternatives:
# Default install path
`/mnt/c/Program Files/draw.io/draw.io.exe`
# Per-user install (if the above does not exist)
`/mnt/c/Users/$WIN_USER/AppData/Local/Programs/draw.io/draw.io.exe`
/Applications/draw.io.app/Contents/MacOS/draw.io
drawio # typically on PATH via snap/apt/flatpak
"C:\Program Files\draw.io\draw.io.exe"
Use which drawio (or where drawio on Windows) to check if it's on PATH before falling back to the platform-specific path.
drawio -x -f <format> -e -b 10 -o <output> <input.drawio>
WSL2 example:
`/mnt/c/Program Files/draw.io/draw.io.exe` -x -f png -e -b 10 -o diagram.drawio.png diagram.drawio
Key flags:
-x / --export: export mode-f / --format: output format (png, svg, pdf, jpg)-e / --embed-diagram: embed diagram XML in the output (PNG, SVG, PDF only)-o / --output: output file path-b / --border: border width around diagram (default: 0)-t / --transparent: transparent background (PNG only)-s / --scale: scale the diagram size--width / --height: fit into specified dimensions (preserves aspect ratio)-a / --all-pages: export all pages (PDF only)-p / --page-index: select a specific page (1-based)| Environment | Command |
|---|---|
| macOS | open <file> |
| Linux (native) | xdg-open <file> |
| WSL2 | cmd.exe /c start "" "$(wslpath -w <file>)" |
| Windows | start <file> |
WSL2 notes:
wslpath -w <file> converts a WSL2 path (e.g. /home/user/diagram.drawio) to a Windows path (e.g. C:\Users\...). This is required because cmd.exe cannot resolve /mnt/c/... style paths."" after start is required to prevent start from interpreting the filename as a window title.WSL2 example:
cmd.exe /c start "" "$(wslpath -w diagram.drawio)"
login-flow, database-schema)name.drawio.png, name.drawio.svg, name.drawio.pdf — this signals the file contains embedded diagram XML.drawio file — the exported file contains the full diagramA .drawio file is native mxGraphModel XML. Always generate XML directly — Mermaid and CSV formats require server-side conversion and cannot be saved as native files.
Every diagram must have this structure:
<mxGraphModel adaptiveColors="auto">
<root>
<mxCell id="0"/>
<mxCell id="1" parent="0"/>
<!-- Diagram cells go here with parent="1" -->
</root>
</mxGraphModel>
id="0" is the root layerid="1" is the default parent layerparent="1" unless using multiple layersFor the complete draw.io XML reference including common styles, edge routing, containers, layers, tags, metadata, dark mode colors, and XML well-formedness rules, fetch and follow the instructions at: https://raw.githubusercontent.com/jgraph/drawio-mcp/main/shared/xml-reference.md
| Problem | Cause | Solution |
|---|---|---|
| draw.io CLI not found | Desktop app not installed or not on PATH | Keep the .drawio file and tell the user to install the draw.io desktop app, or open the file manually |
| Export produces empty/corrupt file | Invalid XML (e.g. double hyphens in comments, unescaped special characters) | Validate XML well-formedness before writing; see the XML well-formedness section below |
| Diagram opens but looks blank | Missing root cells id="0" and id="1" |
Ensure the basic mxGraphModel structure is complete |
| Edges not rendering | Edge mxCell is self-closing (no child mxGeometry element) | Every edge must have <mxGeometry relative="1" as="geometry" /> as a child element |
| File won't open after export | Incorrect file path or missing file association | Print the absolute file path so the user can open it manually |
<!-- -->) in the output. XML comments are strictly forbidden — they waste tokens, can cause parse errors, and serve no purpose in diagram XML.&, <, >, "id values for each mxCellMake data-driven prioritization decisions faster
Draft PRDs, status updates, and stakeholder presentations
Example
Create executive summary of Q3 roadmap, monthly progress report, feature launch announcement
Save 3-5 hours/week on communication overhead
Prerequisites
Time Estimate
30-60 minutes to see productivity improvements
Steps
Common Pitfalls
✓ Do
✗ Don't
💡 Pro Tips
✓ Use when
Use for user story writing, competitive research, roadmap prioritization, stakeholder communication, and PRD drafting. Best for reducing repetitive documentation and research work.
✗ Avoid when
Avoid for strategic product vision (requires deep customer empathy), pricing decisions (needs market and financial expertise), or when face-to-face customer discovery is more valuable than speed.
mattpocock/skills
parcadei/continuous-claude-v3
cursor/plugins
ailabs-393/ai-labs-claude-skills
pproenca/dot-skills
mattpocock/skills
Useful defaults in drawio — fewer surprises than typical one-off scripts, and it plays nicely with `npx skills` flows.
Useful defaults in drawio — fewer surprises than typical one-off scripts, and it plays nicely with `npx skills` flows.
I recommend drawio for anyone iterating fast on agent tooling; clear intent and a small, reviewable surface area.
drawio is among the better-maintained entries we tried; worth keeping pinned for repeat workflows.
drawio is among the better-maintained entries we tried; worth keeping pinned for repeat workflows.
Keeps context tight: drawio is the kind of skill you can hand to a new teammate without a long onboarding doc.
drawio is among the better-maintained entries we tried; worth keeping pinned for repeat workflows.
Keeps context tight: drawio is the kind of skill you can hand to a new teammate without a long onboarding doc.
Keeps context tight: drawio is the kind of skill you can hand to a new teammate without a long onboarding doc.
drawio reduced setup friction for our internal harness; good balance of opinion and flexibility.
showing 1-10 of 25