Skip to content
Get packs

Guide · Agent skill

How to use the Draw.io Diagram Export agent skill

Updated · written with AI from the project's own documentation and checked against our catalogue data

This guide explains the drawio agent skill from github/awesome-copilot: what it lets an agent do, how to install it, how to ask for diagrams in plain language, and what it needs to run. It is written for readers who have never used an agent skill before. By the end you will know how to get a native .drawio file and an exported image or PDF from a text description.

Draw.io Diagram Exportgithub/awesome-copilot · MIT

Quick start

  1. 1Download the ZIP. Download the drawio skill ZIP from this page.
  2. 2Place the skill folder. Unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder. Alternatively, upload the ZIP under Settings → Capabilities → Skills in the Claude apps.
  3. 3Install dependencies. Run npm install inside skills/drawio/scripts so puppeteer-core is available. You need Node.js and npm.
  4. 4Make sure a renderer is available. Install the draw.io desktop app for the CLI path, or have Chromium or Edge available for the headless browser fallback.
  5. 5Ask for a diagram. Describe the diagram in plain language and say whether you want a .drawio file and an export format such as png, svg or pdf.
  6. 6Check the output. Open the .drawio file in draw.io to edit it, and check the exported image or PDF before embedding it in a document.

What the drawio skill makes the agent do

An agent skill is a folder of instructions and optional scripts that an AI agent can load when a task matches it. This skill teaches the agent to generate draw.io diagrams as native .drawio files, which are XML files in mxGraphModel format that stay editable in draw.io.

The skill also includes a bundled Node.js export script, drawio-to-png.mjs, that renders a .drawio file to PNG, SVG or PDF. Each export format can embed the diagram XML, so the image still carries the editable source.

  • Creates an editable .drawio file from a description, such as a flowchart or architecture drawing
  • Applies built-in colour and shape conventions so diagrams look consistent
  • Exports to png, svg or pdf, with the diagram XML embedded
  • Suits embedding results in Word documents or reports

Install the drawio skill

Download the ZIP for this skill from this page. Then choose one of the following options.

For a personal skill available across your projects, unzip the download into ~/.claude/skills/. For a single project, unzip it into that project's .claude/skills/ folder. In the Claude apps you can instead upload the ZIP under Settings → Capabilities → Skills.

  • Personal: ~/.claude/skills/
  • Project: .claude/skills/ inside your project folder
  • Claude apps: Settings → Capabilities → Skills, then upload the ZIP

Install the script dependencies

The export script needs the puppeteer-core package, which is listed in scripts/package.json. Install it once from the scripts folder. You need Node.js and npm for this step.

cd skills/drawio/scripts && npm install

Ask for a diagram with natural requests

You do not need a special command. Describe the diagram you want in plain language and mention that you want a .drawio file, an export, or both. The agent follows the steps in SKILL.md: it generates the mxGraphModel XML, writes the .drawio file with its file tool, and then exports it with the bundled script.

Be specific about the parts, the connections and the purpose. Naming the format you want (png, svg or pdf) helps the agent choose the right export.

  • Draw a flowchart of a user login process with an error path, save it as a .drawio file and export a PNG.
  • Create an architecture diagram showing a web app, an API, a database and an external payment service, then export it as SVG.
  • Make a diagram of our nightly data pipeline and export all .drawio files in the docs folder to PDF.

Export a diagram yourself

You can run the script directly. Pass one input file and an optional output path, or export every .drawio file in a folder. Use the renderer flag to force a backend.

The script has two rendering backends. It uses the draw.io CLI automatically if the draw.io desktop app is installed. If the CLI is unavailable, it falls back to the official draw.io viewer in a headless Chromium or Edge browser.

  • Single file: node skills/drawio/scripts/drawio-to-png.mjs <input.drawio> [output.png]
  • Whole folder: node skills/drawio/scripts/drawio-to-png.mjs --dir <directory>
  • Force a renderer: --renderer=cli, --renderer=viewer or --renderer=auto
node skills/drawio/scripts/drawio-to-png.mjs <input.drawio> [output.png]

Use the built-in style conventions

The skill lists style strings for common roles so diagrams look consistent. Primary services use a blue fill, external systems use grey, success or processing stages use green, warnings or quality gates use yellow, error paths use red, and data stores use a cylinder shape. Arrows use orthogonal edge routing with a blue stroke.

You can ask the agent to follow these conventions, or to use a different palette if you prefer.

  • Primary service: blue fill (#dae8fc)
  • External system: grey fill (#f5f5f5)
  • Success or processing: green fill (#d5e8d4)
  • Warning or quality gate: yellow fill (#fff2cc)
  • Error or failure path: red fill (#f8cecc)
  • Data store: cylinder shape

Safety notes: scripts and network access

This skill runs scripts and uses the network. The export script is Node.js code that you run on your machine, so read it before you use it on sensitive work. The script documentation says the browser fallback needs network access to load the official draw.io viewer.

If your diagrams are confidential, prefer the local draw.io CLI path and check that the script does not reach the network in your setup. Do not run the skill on diagrams you cannot share with an external viewer until you have confirmed what it loads.

  • The skill runs scripts (drawio-to-png.mjs) and installs puppeteer-core via npm
  • The viewer fallback needs network access according to the script documentation
  • Review the script before running it on confidential material

What people use it for

  • Generating a flowchart of a process from a written description, saved as an editable .drawio file
  • Creating an architecture diagram for a design document, exported as PNG for a Word report
  • Keeping .drawio XML in version control and re-exporting all diagrams in a folder with --dir
  • Producing a printable PDF of a system diagram with the embedded XML still editable

Frequently asked questions

Is the drawio agent skill free?

The skill is published under the MIT licence in the github/awesome-copilot repository. This page does not list prices, so check the repository and your own tool costs for any paid services you use with it.

What do I need to install the drawio skill?

You need to unzip the skill into ~/.claude/skills/ or a project's .claude/skills/ folder, or upload the ZIP under Settings → Capabilities → Skills. To run the export script you also need Node.js and npm to install puppeteer-core.

Do I need draw.io desktop installed?

No, but it is the fastest option. The script uses the draw.io CLI if it is installed. Otherwise it falls back to the official draw.io viewer in a headless Chromium or Edge browser.

Why does the export need network access?

The script documentation says the viewer fallback needs network access to load the official draw.io viewer. If you work with confidential diagrams, avoid the fallback or review the script first.

Which export formats are supported?

The skill exports PNG, SVG and PDF, and each format can embed the diagram XML so the file stays editable in draw.io.

How is this different from drawing in draw.io by hand?

The skill lets an agent generate the .drawio XML from a text description and export it in one workflow. You can still open the file in draw.io to adjust shapes, which is useful when you want a fast first draft.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

This skill suits developers and teams who want architecture or flow diagrams generated from text, with editable .drawio source and image exports for documents. It is a poor fit if you only need a quick image and do not want to install Node.js, npm or a browser, or if you handle confidential diagrams and need to avoid network access, in which case draw.io used directly is the simpler choice.

Download the skill