drawio
Generate draw.io diagrams as .drawio files and export to PNG/SVG/PDF with embedded XML
- Installs
- 526
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/ilteoood/harness --skill drawio- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads drawio automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Draw.io Diagram Skill
Generate draw.io diagrams as native .drawio files and export them to PNG images that can be embedded in Word documents.
How to Create a Diagram
- Generate draw.io XML in
mxGraphModelformat for the requested diagram - Write the XML to a
.drawiofile using the create/edit file tool - Export to PNG using the bundled export script
Bundled Export Script
This skill includes drawio-to-png.mjs, a Node.js export script with two rendering backends:
- draw.io CLI (pixel-perfect, fastest) — used automatically if draw.io desktop is installed
- Official draw.io viewer in headless browser (pixel-perfect, needs Chromium/Edge) — fallback when CLI is unavailable
Usage
# Install dependencies (one-time, from the scripts folder)
cd skills/drawio/scripts && npm install
# Export a single diagram
node skills/drawio/scripts/drawio-to-png.mjs <input.drawio> [output.png]
# Export all .drawio files in a directory
node skills/drawio/scripts/drawio-to-png.mjs --dir <directory>
# Force a specific renderer
node skills/drawio/scripts/drawio-to-png.mjs --renderer=cli|viewer|auto <input.drawio>
Skill Folder Contents
| File | Purpose |
|---|---|
SKILL.md | This instruction file |
scripts/drawio-to-png.mjs | Node.js export script (CLI + browser fallback) |
scripts/package.json | Dependencies (puppeteer-core) |
Supported Export Formats
| Format | Embed XML | Notes |
|---|---|---|
png | Yes | Viewable everywhere, editable in draw.io |
svg | Yes | Scalable, editable in draw.io |
pdf | Yes | Printable, editable in draw.io |
Draw.io XML Style Conventions
Use these styles for consistent, professional diagrams:
<!-- Primary service (highlighted) -->
<mxCell style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;strokeWidth=2;arcSize=12;shadow=1;" />
<!-- External system -->
<mxCell style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;" />
<!-- Success/processing stage -->
<mxCell style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" />
<!-- Warning/quality gate -->
<mxCell style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" />
<!-- Error/failure path -->
<mxCell style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" />
<!-- Data store (cylinder) -->
<mxCell style="shape=cylinder3;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" />
<!-- Arrow -->
<mxCell style="edgeStyle=orthogonalEdgeStyle;rounded=1;strokeColor=#6c8ebf;strokeWidth=2;" />
Locating the draw.io CLI
Try drawio first (works if on PATH), then fall back:
- Windows:
"C:\Program Files\draw.io\draw.io.exe" - macOS:
/Applications/draw.io.app/Contents/MacOS/draw.io - Linux:
drawio(via snap/apt/flatpak)
CLI Export Command
drawio -x -f png -e -b 10 -o <output.png> <input.drawio>
Flags: -x (export), -f (format), -e (embed diagram XML), -b (border), -o (output path).
FAQ
What does the drawio skill do?
Generate draw.io diagrams as .drawio files and export to PNG/SVG/PDF with embedded XML
How do I install drawio?
Run npx skills add https://github.com/ilteoood/harness --skill drawio in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/drawio/ (personal) or .claude/skills/drawio/ (project).
Which AI agents can use drawio?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is drawio safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains drawio?
It is published by ilteoood in ilteoood/harness. It has 526 recorded installs.
More from ilteoood/harness
github-issues
ilteoood/harness
Create, update, and manage GitHub issues using MCP tools. Use this skill when users want to create bug reports, feature requests, or task issues, update existing issues, add labels/assignees/milestones, manage repository labels, set issue fields (dates, priority, custom fields), set issue types, manage issue workflows, link issues, add dependencies, or track blocked-by/blocking relationships. Triggers on requests like "create an issue", "file a bug", "request a feature", "update issue X", "set the priority", "set the start date", "create a label", "rename a label", "list repo labels", "link issues", "add dependency", "blocked by", "blocking", or any GitHub issue management task.
git-commit
ilteoood/harness
Execute git commit with conventional commit message analysis, intelligent staging, and message generation. Use when user asks to commit changes, create a git commit, or mentions "/commit". Supports: (1) Auto-detecting type and scope from changes, (2) Generating conventional commit messages from diff, (3) Interactive commit with optional type/scope/description overrides, (4) Intelligent file staging for logical grouping
conventional-commit
ilteoood/harness
Prompt and workflow for generating conventional commit messages using a structured XML format. Guides users to create standardized, descriptive commit messages in line with the Conventional Commits specification, including instructions, examples, and validation.
create-technical-spike
ilteoood/harness
Create time-boxed technical spike documents for researching and resolving critical development decisions before implementation.
codeql
ilteoood/harness
Comprehensive guide for setting up and configuring CodeQL code scanning via GitHub Actions workflows and the CodeQL CLI. This skill should be used when users need help with code scanning configuration, CodeQL workflow files, CodeQL CLI commands, SARIF output, security analysis setup, or troubleshooting CodeQL analysis.
create-specification
ilteoood/harness
Create a new specification file for the solution, optimized for Generative AI consumption.
Popular docs & writing skills
grill-with-docs
mattpocock/skills
A relentless interview to sharpen a plan or design, which also creates docs (ADR's and glossary) as we go.
lark-markdown
open.feishu.cn
飞书 Markdown：查看、创建、上传、编辑和比较飞书中的原生 Markdown 文件。当用户要操作飞书 Markdown 文件，或比较其远端版本及本地草稿时使用。纯本地 Markdown 文件操作不触发本 skill。不负责将 Markdown 导入为飞书在线文档，也不负责文件搜索、权限、评论、移动、删除等云空间管理操作。
writing-beats
mattpocock/skills
Writing, exploit; assemble raw material into a journey of beats, grounding each term before a beat leans on it.
writing-shape
mattpocock/skills
Writing, exploit: shape raw material into an article, paragraph by paragraph.
writing-fragments
mattpocock/skills
Writing, explore: mine raw fragments, no structure yet.
writing-for-agents
mattpocock/skills
Writing documents for agents. Use when creating or editing skills, or modifying AGENTS.md or CLAUDE.md.