What formats can I export my diagrams to?

You can export diagrams to PNG, SVG, and PDF formats, all with embedded XML for easy editing in draw.io.

Do I need to install anything to use this skill?

Yes, you need to install the draw.io desktop application or have a compatible headless browser like Chromium or Edge for the export functionality.

How do I create a diagram using this skill?

You create a diagram by generating the XML in `mxGraphModel` format, which is then saved as a `.drawio` file that can be edited in draw.io.

Can I export multiple diagrams at once?

Yes, you can export all `.drawio` files in a specified directory using the export script.

What if I don't have the draw.io CLI installed?

If the draw.io CLI is not available, the skill will automatically use a headless browser to export your diagrams.

Draw.io Diagram

Name: Draw.io Diagram
Availability: InStock
Author: github

OfficialFree

Generate and export draw.io diagrams effortlessly.

by github37.7k stars on github/awesome-copilot

11 views

Updated Aug 10, 2026

Get this skill

Free · Opens the source repo

What Draw.io Diagram does

The Draw.io Diagram skill enables users to create and export diagrams in the draw.io format. This skill is particularly useful for developers and designers who need to generate visual representations of complex systems, workflows, or data flows. By leveraging this skill, users can produce .drawio files that can be easily edited and shared, ensuring that diagrams remain accessible and modifiable.

To create a diagram, the skill generates XML in the mxGraphModel format, which is then written to a .drawio file. This process allows for seamless integration with the draw.io platform, making it easy to edit and enhance diagrams. Once the diagram is ready, users can export it to various formats, including PNG, SVG, and PDF, all with embedded XML. This feature ensures that the diagrams retain their structure and can be edited later in draw.io.

The skill includes a bundled export script that supports two rendering backends: the draw.io CLI for fast, pixel-perfect exports if the desktop application is installed, and a headless browser option for environments where the CLI is unavailable. This flexibility allows users to choose the most suitable method for their needs, whether they are working locally or in a server environment.

Overall, the Draw.io Diagram skill is designed for users who require a straightforward way to create and export diagrams, making it a valuable addition to any developer or designer's toolkit. Its ability to generate high-quality visuals quickly can significantly enhance documentation, presentations, and project planning.

When to use it

Use this skill when you need to generate diagrams quickly and export them in various formats for documentation or presentations.

When not to use it

This skill may not be suitable for users who require advanced diagramming features not supported by draw.io or those who prefer a GUI-based diagramming tool.

What you can build with it

Documenting System Architecture

Generate clear diagrams to illustrate system architecture for technical documentation.

Creating Flowcharts for Processes

Quickly create and export flowcharts to visualize business processes or workflows.

Designing UI Mockups

Use the skill to create diagrams that represent user interface designs and interactions.

How to install Draw.io Diagram

View source

1. Install with the skills CLI

npx skills add github/awesome-copilot/drawio --agent claude-code

2. Or install it manually

Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.

Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs

Inside SKILL.md

Written by github

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 mxGraphModel format for the requested diagram
Write the XML to a .drawio file 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).

Frequently asked questions about Draw.io Diagram

Similar skills

Excalidraw Diagram Generator

Transform natural language into Excalidraw diagrams.

Draw.io Diagram Generator

Easily create and validate draw.io diagrams.

Image Annotations

Easily annotate images with callouts and highlights.

Banner Design

Create stunning banners for any platform effortlessly.

Scientific Schematics

Generate publication-quality scientific diagrams effortlessly.

Infographics

Create professional infographics with ease and accuracy.