# draw-io

Задаёт Copilot правила генерации и правки диаграмм draw.io: структура mxGraph XML, палитра цветов, сетка и проверка файла перед коммитом.

- правило · `type=rule` · GitHub Copilot · ★ 40418
- Автор: github · официальный репозиторий GitHub
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/github/awesome-copilot/tree/HEAD/instructions/draw-io.instructions.md
- Обновлён: 2026-10-23
- HTML: https://affpapa.org/nevibecode/rules/draw-io

## Что делает

Правило включается на файлы `*.drawio`, `*.drawio.svg` и `*.drawio.png` и описывает, как агент должен строить диаграммы. Работа идёт по шагам: определить тип диаграммы (блок-схема, архитектура, sequence, ER, UML, сеть, BPMN), взять подходящий шаблон из `.github/skills/draw-io/templates/` или минимальный скелет, продумать раскладку на бумаге и только потом писать XML.

Внутри — жёсткие требования к структуре. Ячейки `id="0"` и `id="1"` обязаны идти первыми, у каждой вершины должна быть геометрия, у каждого ребра — `source` и `target` на существующие вершины. Исключение сделано для плавающих рёбер на линиях жизни в sequence-диаграммах: там вместо атрибутов используются `<mxPoint as="sourcePoint">` и `<mxPoint as="targetPoint">`. Цвета берутся из семантической палитры: например, `#dae8fc` со штрихом `#6c8ebf` для основного блока, `#f8cecc` с `#b85450` для ошибки или завершения.

Проверка идёт скриптом: `python .github/skills/draw-io/scripts/validate-drawio.py <file>`. Он написан на Python, поэтому интерпретатор нужен в системе. Есть и второй скрипт, `add-shape.py`, для добавления фигуры в готовую диаграмму. Ограничение по объёму — не больше 40 ячеек на страницу, крупные схемы правило советует разбивать на несколько страниц. Рендер стоит подтвердить, открыв файл в VS Code с расширением `hediet.vscode-drawio`: валидатор проверяет структуру XML, а не то, как диаграмма выглядит на холсте.

## Установка

### GitHub Copilot (родная платформа)

**Вручную: положить файлы**
- Файл: `.github/instructions/draw-io.instructions.md` — Поле applyTo задаёт, к каким файлам применять

### Claude Code

**Вручную: положить файлы**
- Файл: `.claude/rules/draw-io.md` — Поле paths во frontmatter ограничивает файлы: applyTo из источника → paths

### Codex

**AGENTS.md**
- Codex читает AGENTS.md: вставьте текст правила туда

### Cursor

**Вручную: положить файлы**
- Файл: `.cursor/rules/draw-io.mdc` — Во frontmatter: description, globs, alwaysApply. applyTo из источника → globs, иначе правило само не подключится

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/rules/draw-io.md`

### Cline

**Вручную: положить файлы**
- Файл: `.clinerules/draw-io.md`

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/github/awesome-copilot/tree/HEAD/instructions/draw-io.instructions.md

## Когда брать
- сгенерировать валидный mxGraph XML без битых ссылок на вершины
- выбрать шаблон под нужный тип диаграммы вместо рисования с нуля
- выдержать единую палитру во всех схемах проекта
- проверить структуру файла до коммита
- разбить большую схему на страницы в пределах лимита ячеек

## Примеры запросов агенту
- Сделай диаграмму архитектуры сервиса в `docs/payments-arch.drawio` по шаблону swimlane
- Проверь `architecture/database-schema.drawio` на битые source и target у рёбер
- Добавь в `docs/order-flow.drawio` блок ошибки оплаты и соедини его с решением

## Похожие
- [diagram-design](https://affpapa.org/nevibecode/skills/diagram-design.md) — скилл · 19600 установок

Из того же набора: [github/awesome-copilot](https://affpapa.org/nevibecode/by/github/awesome-copilot.md) — 732 карточки

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md