drawio

github/awesome-copilot · Agent Skill

Создает диаграммы в формате Draw.io (.drawio) и экспортирует их в PNG, SVG или PDF, сохраняя встроенный XML.

Обзор

Автор	githubОрганизация
Репозиторий	github/awesome-copilot ↗
Папка скилла	`drawio`
Звёзды	38 754
Файлы	1
Лицензия	MIT
Обновлён	30 апреля 2026 г.
Ссылки	Исходник скилла ↗ · Репозиторий ↗

Проверка Mozgi

Что мы нашли в файлах скилла. Подробности — по подписке.

Безопасность

средний риск · обнаружено 1 момент, требующий внимания

Совместимость

нужны дополнительные программы

Похожие скиллы

найдено 36 похожих скиллов

Ещё в подписке

Установка

Скилл — это папка с файлом SKILL.md. Выберите своего агента и скопируйте команды в терминал (macOS, Linux или Git Bash на Windows) в корне проекта.

Скопируйте промпт и вставьте в Claude, Codex или другого ассистента: он сам проверит скилл и подключит его.

Установи мне скилл «drawio» с mozgi.io (https://mozgi.io/skills/drawio/).

1. Скачай архив: https://mozgi.io/skills/drawio/download
   Если не скачивается — возьми папку скилла из исходника: https://github.com/github/awesome-copilot/tree/main/skills/drawio
2. Прочитай SKILL.md и остальные файлы. Проверь, что скилл безопасен: нет скрытых команд, отправки данных наружу или скриптов, которые делают не то, что описано. Если что-то подозрительно — остановись и скажи мне.
3. Положи папку «drawio» в папку скиллов своего агента: .claude/skills/ для Claude Code, .agents/skills/ для Codex, .cursor/skills/ для Cursor, .gemini/skills/ для Gemini CLI. В проекте — внутри проекта, иначе в домашней папке (~/.claude/skills/ и т. п.).
4. Убедись, что получилось <папка скиллов>/drawio/SKILL.md.
5. Коротко расскажи, что умеет этот скилл, и предложи попробовать его на моей задаче.

Если какой-то шаг не можешь сделать сам — подскажи, что нажать или ввести.

git clone --depth 1 --branch main https://github.com/github/awesome-copilot.git /tmp/awesome-copilot
mkdir -p .claude/skills
cp -r /tmp/awesome-copilot/skills/drawio .claude/skills/drawio

Перезапустите Claude Code — скилл появится в списке, вызвать вручную: /drawio. Для всех проектов сразу — папка ~/.claude/skills.

git clone --depth 1 --branch main https://github.com/github/awesome-copilot.git /tmp/awesome-copilot
mkdir -p .agents/skills
cp -r /tmp/awesome-copilot/skills/drawio .agents/skills/drawio

Codex ищет скиллы в .agents/skills от текущей папки до корня репозитория; вызвать вручную — /skills или $drawio. Для всех проектов — ~/.agents/skills.

git clone --depth 1 --branch main https://github.com/github/awesome-copilot.git /tmp/awesome-copilot
mkdir -p .cursor/skills
cp -r /tmp/awesome-copilot/skills/drawio .cursor/skills/drawio

Cursor подхватит скилл при запуске; вызвать вручную — «/» в чате агента. Cursor также читает .claude/skills и .agents/skills. Для всех проектов — ~/.cursor/skills.

git clone --depth 1 --branch main https://github.com/github/awesome-copilot.git /tmp/awesome-copilot
mkdir -p .gemini/skills
cp -r /tmp/awesome-copilot/skills/drawio .gemini/skills/drawio

Gemini CLI сам предложит включить скилл, когда задача подходит, — вы подтверждаете. Для всех проектов — ~/.gemini/skills.

Файлы скилла

1 файл Скачать ZIP

Просмотрите SKILL.md и сопутствующие файлы перед установкой. Клик по файлу — предпросмотр.

Содержимое SKILL.md

Оригинальный текст автора · только чтение

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

1. Generate draw.io XML in mxGraphModel format for the requested diagram

2. Write the XML to a .drawio file using the create/edit file tool

3. 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:

1. draw.io CLI (pixel-perfect, fastest) — used automatically if draw.io desktop is installed

2. 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).

Вопросы и ответы

Что делает скилл drawio?

Создает диаграммы в формате Draw.io (.drawio) и экспортирует их в PNG, SVG или PDF, сохраняя встроенный XML.

Как установить drawio?

Откройте блок «Установка» на этой странице и выберите своего агента — Claude Code, Codex, Cursor или Gemini CLI: там готовые команды, которые копируют папку скилла в нужное место. Либо скопируйте промпт из вкладки «Через ассистента» — ассистент сам проверит и подключит скилл.

С какими нейросетями работает drawio?

Скиллы — это обычные инструкции в Markdown (формат Agent Skills), поэтому drawio подходит любому агенту, который читает SKILL.md: Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode и другие. Модель загружает инструкции только когда задача подходит под описание скилла.

Скилл drawio бесплатный?

Скилл опубликован автором github в открытом доступе под лицензией MIT. Сам скилл ничего не стоит — вы платите только своему провайдеру нейросети за использованные токены.

Безопасно ли устанавливать скиллы?

Скилл — это инструкции, которые агент будет выполнять, поэтому перед установкой прочитайте SKILL.md и сопутствующие файлы. Скрипты из папки скилла запускаются только если их запустит агент — следите за тем, что он делает, и не давайте лишних прав.

Чем скилл отличается от MCP-сервера или плагина?

MCP-сервер и плагин дают модели новые инструменты — код, который выполняется и возвращает результат. Скилл даёт знания и порядок действий: как подходить к задаче, какие шаги делать и как выглядит хороший результат. Ему не нужен сервер или ключ API.