{"id":"59ceec8f-ce4a-4bae-9393-ff71ac3552d0","shortId":"QksphS","kind":"skill","title":"drawio","tagline":"Generate draw.io diagrams as .drawio files and export to PNG/SVG/PDF with embedded XML","description":"# Draw.io Diagram Skill\n\nGenerate draw.io diagrams as native `.drawio` files and export them to PNG images that can be embedded in Word documents.\n\n## How to Create a Diagram\n\n1. **Generate draw.io XML** in `mxGraphModel` format for the requested diagram\n2. **Write the XML** to a `.drawio` file using the create/edit file tool\n3. **Export to PNG** using the bundled export script\n\n## Bundled Export Script\n\nThis skill includes `drawio-to-png.mjs`, a Node.js export script with two rendering backends:\n\n1. **draw.io CLI** (pixel-perfect, fastest) — used automatically if draw.io desktop is installed\n2. **Official draw.io viewer in headless browser** (pixel-perfect, needs Chromium/Edge) — fallback when CLI is unavailable\n\n### Usage\n\n```bash\n# Install dependencies (one-time, from the scripts folder)\ncd skills/drawio/scripts && npm install\n\n# Export a single diagram\nnode skills/drawio/scripts/drawio-to-png.mjs [output.png]\n\n# Export all .drawio files in a directory\nnode skills/drawio/scripts/drawio-to-png.mjs --dir \n\n# Force a specific renderer\nnode skills/drawio/scripts/drawio-to-png.mjs --renderer=cli|viewer|auto \n```\n\n### Skill Folder Contents\n\n| File | Purpose |\n|------|---------|\n| `SKILL.md` | This instruction file |\n| `scripts/drawio-to-png.mjs` | Node.js export script (CLI + browser fallback) |\n| `scripts/package.json` | Dependencies (`puppeteer-core`) |\n\n## Supported Export Formats\n\n| Format | Embed XML | Notes |\n|--------|-----------|-------|\n| `png` | Yes | Viewable everywhere, editable in draw.io |\n| `svg` | Yes | Scalable, editable in draw.io |\n| `pdf` | Yes | Printable, editable in draw.io |\n\n## Draw.io XML Style Conventions\n\nUse these styles for consistent, professional diagrams:\n\n```xml\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n```\n\n## Locating the draw.io CLI\n\nTry `drawio` first (works if on PATH), then fall back:\n\n- **Windows**: `\"C:\\Program Files\\draw.io\\draw.io.exe\"`\n- **macOS**: `/Applications/draw.io.app/Contents/MacOS/draw.io`\n- **Linux**: `drawio` (via snap/apt/flatpak)\n\n### CLI Export Command\n\n```bash\ndrawio -x -f png -e -b 10 -o \n```\n\nFlags: `-x` (export), `-f` (format), `-e` (embed diagram XML), `-b` (border), `-o` (output path).","tags":["drawio","awesome","copilot","github","agent-skills","agents","custom-agents","github-copilot","hacktoberfest","prompt-engineering"],"capabilities":["skill","source-github","skill-drawio","topic-agent-skills","topic-agents","topic-awesome","topic-custom-agents","topic-github-copilot","topic-hacktoberfest","topic-prompt-engineering"],"categories":["awesome-copilot"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/github/awesome-copilot/drawio","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add github/awesome-copilot","source_repo":"https://github.com/github/awesome-copilot","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 33270 github stars · SKILL.md body (3,097 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T18:52:10.499Z","embedding":null,"createdAt":"2026-05-01T00:52:00.082Z","updatedAt":"2026-05-18T18:52:10.499Z","lastSeenAt":"2026-05-18T18:52:10.499Z","tsv":"'/applications/draw.io.app/contents/macos/draw.io':244 '1':43,91 '10':259 '2':54,105 '3':67 'auto':163 'automat':99 'b':258,270 'back':236 'backend':90 'bash':123,252 'border':271 'browser':111,178 'bundl':73,76 'c':238 'cd':133 'chromium/edge':116 'cli':93,119,161,177,226,249 'command':251 'consist':219 'content':166 'convent':214 'core':184 'creat':40 'create/edit':64 'depend':125,181 'desktop':102 'diagram':4,16,20,42,53,140,221,268 'dir':153 'directori':150 'document':37 'draw.io':3,15,19,45,92,101,107,198,204,210,211,225,241 'draw.io.exe':242 'drawio':1,6,23,60,146,228,246,253 'drawio-to-png.mjs':82 'e':257,266 'edit':196,202,208 'emb':189,267 'embed':13,34 'everywher':195 'export':9,26,68,74,77,85,137,144,175,186,250,263 'f':255,264 'fall':235 'fallback':117,179 'fastest':97 'file':7,24,61,65,147,167,172,240 'first':229 'flag':261 'folder':132,165 'forc':154 'format':49,187,188,265 'generat':2,18,44 'headless':110 'imag':30 'includ':81 'instal':104,124,136 'instruct':171 'linux':245 'locat':223 'maco':243 'mxgraphmodel':48 'nativ':22 'need':115 'node':141,151,158 'node.js':84,174 'note':191 'npm':135 'o':260,272 'offici':106 'one':127 'one-tim':126 'output':273 'output.png':143 'path':233,274 'pdf':205 'perfect':96,114 'pixel':95,113 'pixel-perfect':94,112 'png':29,70,192,256 'png/svg/pdf':11 'printabl':207 'profession':220 'program':239 'puppet':183 'puppeteer-cor':182 'purpos':168 'render':89,157,160 'request':52 'scalabl':201 'script':75,78,86,131,176 'scripts/drawio-to-png.mjs':173 'scripts/package.json':180 'singl':139 'skill':17,80,164 'skill-drawio' 'skill.md':169 'skills/drawio/scripts':134 'skills/drawio/scripts/drawio-to-png.mjs':142,152,159 'snap/apt/flatpak':248 'source-github' 'specif':156 'style':213,217 'support':185 'svg':199 'time':128 'tool':66 'topic-agent-skills' 'topic-agents' 'topic-awesome' 'topic-custom-agents' 'topic-github-copilot' 'topic-hacktoberfest' 'topic-prompt-engineering' 'tri':227 'two':88 'unavail':121 'usag':122 'use':62,71,98,215 'via':247 'viewabl':194 'viewer':108,162 'window':237 'word':36 'work':230 'write':55 'x':254,262 'xml':14,46,57,190,212,222,269 'yes':193,200,206","prices":[{"id":"537b66ed-825f-47b9-81de-e485ebf828b1","listingId":"59ceec8f-ce4a-4bae-9393-ff71ac3552d0","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"github","category":"awesome-copilot","install_from":"skills.sh"},"createdAt":"2026-05-01T00:52:00.082Z"}],"sources":[{"listingId":"59ceec8f-ce4a-4bae-9393-ff71ac3552d0","source":"github","sourceId":"github/awesome-copilot/drawio","sourceUrl":"https://github.com/github/awesome-copilot/tree/main/skills/drawio","isPrimary":false,"firstSeenAt":"2026-05-01T00:52:00.082Z","lastSeenAt":"2026-05-18T18:52:10.499Z"}],"details":{"listingId":"59ceec8f-ce4a-4bae-9393-ff71ac3552d0","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"github","slug":"drawio","github":{"repo":"github/awesome-copilot","stars":33270,"topics":["agent-skills","agents","ai","awesome","custom-agents","github-copilot","hacktoberfest","prompt-engineering"],"license":"mit","html_url":"https://github.com/github/awesome-copilot","pushed_at":"2026-05-18T01:26:59Z","description":"Community-contributed instructions, agents, skills, and configurations to help you make the most of GitHub Copilot.","skill_md_sha":"d3fe012ab2afd1cb3dfd852f8e0227ac0011782f","skill_md_path":"skills/drawio/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/github/awesome-copilot/tree/main/skills/drawio"},"layout":"multi","source":"github","category":"awesome-copilot","frontmatter":{"name":"drawio","description":"Generate draw.io diagrams as .drawio files and export to PNG/SVG/PDF with embedded XML"},"skills_sh_url":"https://skills.sh/github/awesome-copilot/drawio"},"updatedAt":"2026-05-18T18:52:10.499Z"}}