Словами самого skill
Skill для создания, редактирования и валидации файлов диаграмм draw.io (.drawio, .drawio.svg, .drawio.png) путём генерации корректного XML mxGraph. Он обрабатывает флоучарты, архитектуру систем, диаграммы последовательности, ER-диаграммы и UML-диаграммы классов через шаблоны в assets/templates/, а сетевая топология, BPMN и mind map требуют библиотек фигур или ручной работы.
Агент получает workflow из шести шагов, семантическую цветовую палитру с готовыми к использованию строками стилей, чек-лист валидации перед сдачей и опциональные Python-скрипты (validate-drawio.py, add-shape.py). Он рассчитан на агентов, работающих в репозитории, где диаграммы лежат рядом с кодом, который они документируют, а сгенерированные файлы предназначены для немедленного открытия в расширении VS Code hediet.vscode-drawio.
Что он выдаёт
- Сам файл .drawio, записанный по запрошенному вами пути.
- Однострочное резюме того, что показывает диаграмма.
- Статус валидации с указанием, был ли запущен скрипт валидатора и прошёл ли он успешно.
- Инструкции по редактированию для случаев, когда вы, вероятно, будете кастомизировать диаграмму: щёлкните по фигуре, чтобы выбрать её, дважды щёлкните, чтобы отредактировать подпись, перетащите, чтобы изменить положение.
Как это работает
- 01Зафиксировать запрос
Workflow начинается с определения типа диаграммы, сущностей или действующих лиц, связей, пути вывода и того, новый это файл или редактирование.
- 02Использовать шаблон повторно или минимальный скелет
Когда тип диаграммы совпадает с одним из представленных в assets/templates/, скопируйте эту структуру и замените значения-заполнители; для новых макетов начните с минимального валидного скелета mxfile с двумя корневыми ячейками.
- 03Спланировать макет перед написанием XML
Сначала набросайте строки или уровни, затем расставьте фигуры по сетке — 40–60px по горизонтали между фигурами в одной строке, 80–120px между уровнями, на холсте A4 landscape по умолчанию 1169 x 827 px.
- 04Сгенерируйте XML mxGraph
Пишите ячейки вершин и рёбер с уникальными id и совпадающими ссылками на parent, а также экранируйте специальные символы XML в подписях, чтобы файл оставался корректно сформированным.
- 05Применяйте стили из палитры
Строки стилей берутся из фиксированной семантической палитры — primary/info #dae8fc с #6c8ebf, warning/decision #fff2cc с #d6b656, error/end #f8cecc с #b85450 — так что одно и то же назначение сохраняет один и тот же цвет по всему проекту.
- 06Сохраните, проверьте, передайте
Запишите файл по указанному пути с расширением .drawio, при необходимости запустите валидатор, затем сообщите пользователю, как открыть файл, и подытожьте, что содержится на диаграмме.