Skip to content
Get packs

Draw.io Diagram Export

Lets an agent write editable draw.io diagrams and export them as PNG, SVG or PDF.

Source Download skill
Repository
github/awesome-copilot
Stars
40,703
Licence
MIT
Files
3 files

What it does

Once installed, the agent can turn a description into a native .drawio diagram file (an editable flowchart or architecture drawing) and export it as an image or PDF. It follows built-in colour and shape conventions for consistent styling, and includes a bundled Node.js script that renders the file either with a locally installed draw.io app or, as a fallback, with the official draw.io viewer in a headless browser so the result can be embedded in documents such as Word files.

Great for

  • Developers who want architecture or flow diagrams generated from a text description
  • Anyone producing diagrams for Word or reports who needs editable draw.io source plus an image
  • Teams that keep diagrams in version control as .drawio XML

Skip it if

  • Users who need a quick one-off image and do not want to install Node.js, npm or a browser, since the export path depends on them
  • Sensitive or confidential diagrams if the browser fallback is used, because the script's documentation says it needs network access to load the viewer

Try asking

  • “Create a draw.io flowchart of our user signup process and export it to PNG”
  • “Draw an architecture diagram of a web app with a database, cache and external payment API, then export as SVG”
  • “Turn this list of steps into a swimlane diagram in a .drawio file and a PDF”
Step-by-step guide: how to use Draw.io Diagram ExportInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 3 original files, the MIT licence and an attribution note.

    drawio.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip drawio.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip drawio.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Install the draw.io desktop app to use the faster, fully local CLI renderer instead of the browser fallback.
  • Review the generated .drawio XML and the script before running export commands on sensitive projects.
  • Ask for a specific diagram type and style (flowchart, sequence, architecture) to get more predictable layouts.

What's inside

  • scripts/drawio-to-png.mjs
  • scripts/package.json
  • SKILL.md

Redistributed unmodified from github/awesome-copilot under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.