Навык для Claude Code, Codex, Cursor и Copilot: агент выбирает тип диаграммы, раскладывает узлы по сетке в 4 пикселя и отдаёт самодостаточный HTML с inline SVG. Разбираем, как это работает, где ограничения и когда лучше остаться на Mermaid.
Diagram Design — открытый навык для агентов, который превращает описание в готовую диаграмму: один HTML-файл с inline SVG, без сборки, внешних картинок и Mermaid. Автор — Cathryn Lavery, код под лицензией MIT, 45 типов диаграмм в трёх вариантах оформления. Ниже — как это работает, проверяемые метрики проекта (снято 15.10.2026), сравнение с Mermaid, draw.io и Excalidraw и честные ограничения.
npx skills add cathrynlavery/diagram-designНавык решает одну задачу: получить от агента диаграмму, которую не стыдно поставить в статью или презентацию. Вместо холста и ручного перетаскивания фигур вы описываете схему словами, а агент выбирает тип, раскладывает узлы по сетке в 4 пикселя и отдаёт самодостаточный HTML-файл с inline SVG. Такой файл открывается двойным щелчком, работает офлайн, не требует JavaScript и не тянет внешние изображения.
Важная деталь: это не редактор и не библиотека для приложения. Навык живёт внутри агента — Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Cline, Windsurf, Amp, Zed, Warp, Roo, Kilo, Pi, Kiro, OpenCode — и вызывается обычной фразой в чате. Результат при этом единый файл, который можно положить в репозиторий или выгрузить в SVG и PNG для Figma и слайдов.
Признак корректной работы авторы формулируют через экономию контекста: на обычный запрос «сделай блок-схему» агент поднимает SKILL.md, один справочник типа и не больше двух служебных файлов. Второй признак — самопроверка: скрипт self_check.py печатает OK на сгенерированном файле, а с флагом офлайн-режима дополнительно падает, если в документе осталась ссылка на веб-шрифты.
Состав шире, чем «архитектура плюс блок-схема». В манифесте плагина перечислены архитектура, схема текущего ИТ-ландшафта, блок-схема, sequence-диаграмма, машина состояний, ER-модель, таймлайн, swimlane, квадрант, радар, цикл, вложенные структуры, дерево, орг-чарт, стек слоёв, взрыв-схема, диаграмма Венна, пирамида и воронка, бар-чарт, waterfall, treemap, тепловая карта, линейный график, диаграмма Ганта, scatter, медальон, поток данных, матрица безопасности данных, Sankey, диаграмма Исикавы, карта Уордли, канбан, customer journey, схема развёртывания, граф зависимостей и UML-классы.
| Критерий | Mermaid и PlantUML | draw.io и Excalidraw | Diagram Design |
|---|---|---|---|
| Как создаётся | текстом в редакторе | перетаскиванием фигур руками | описанием в чате с агентом |
| Раскладка | автоматическая | ручная | агентом по сетке 4px, с проверкой пересечений |
| Внешний вид | тема рендерера | как нарисовали | один редакционный стиль, подгоняется под бренд |
| Результат | текст, который рендерит GitHub | редактируемый файл drawio или excalidraw | один HTML с inline SVG, экспорт в SVG и PNG |
| Правка позже | поменять текст | поменять холст | попросить агента заново или править SVG |
| Готовые схемы | не переносит | не переносит | перерисовывает Mermaid, draw.io и Excalidraw |
Честная оговорка из репозитория: качество результата зависит от модели, и один и тот же промпт может разложиться по-разному. Диаграмма на выходе — не редактируемый исходник: в пул-реквесте нечего сравнивать построчно, холста с квадратиками тоже нет. Для документации, которая живёт в Git и меняется каждый спринт, Mermaid остаётся лучшим выбором.
| Ручка | Варианты | Что меняется |
|---|---|---|
| Формат | html, svg, png, html+png | что вы получите: файл для сайта или картинку для слайда |
| Размер | doc-inline, doc-wide, слайды 16:9 и 4:3, соцсети, печатные форматы, подгонка | рамка и размер шрифтов: у слайда подписи крупнее |
| Детализация | до 24 узлов, до 12 или до 7 | что выживет при упрощении: сначала декор, потом дубли, потом листья |
| Аудитория | инженер, смешанная, руководитель | формулировки, а не количество: техническая подпись становится короткой |
Импорт из Mermaid, draw.io и Excalidraw заканчивается журналом точности: он перечисляет, что слито, свёрнуто или выброшено. Координаты из источника, чужая палитра, шрифты и диагональные связи draw.io не переносятся, а компоненты, отношения, группировка и направление переносятся — то есть схему можно перерисовать в единый стиль, не собирая её заново.
/diagram-design:export-diagram path/to/diagram.html --svg-only
/diagram-design:export-diagram path/to/diagram.html --png-only --scale=3
Отдельный шаг — подгонка стиля. Навык вытаскивает из вашего сайта бумагу, чернила, акцентный цвет и шрифты, а затем выдаёт квитанцию соответствия с перечислением каждого токена. Пока стиль остался дефолтным, первый запрос в новом проекте останавливается вопросом: настроить оформление сейчас или оставить как есть. Это защита от ситуации, когда дефолтные диаграммы молча уезжают в брендированный проект.
| Хост | Способ установки |
|---|---|
| Claude Code | маркетплейс плагинов: добавить маркетплейс, затем установить плагин |
| Codex | codex plugin marketplace add, затем codex plugin add |
| GitHub Copilot | copilot plugin marketplace add, затем copilot plugin install |
| Cursor, Cline, Gemini CLI, Windsurf, Amp, Zed, Warp, Roo, Kilo | общий CLI навыков: npx skills add |
| Factory Droid | droid plugin marketplace add, затем droid plugin install |
| Pi | pi install со ссылкой на репозиторий |
| Kiro | импорт подпапки skills/diagram-design из репозитория |
| OpenCode | копирование или символическая ссылка в каталог конфигурации |
Проект молодой: репозиторий создан 16.04.2026, а последние недели — самые активные, за текущую неделю 75 коммитов против 53 неделей ранее. Версия манифеста плагина 2.6.103 говорит о том же: проект обновляется часто и мелкими шагами. Карточка в реестре навыков показывает 13,3 тыс. установок при 55,8 тыс. звёзд — соотношение типичное для инструмента, который сначала собирают в закладки, а потом ставят.
Отдельно про сетевую активность: набор ссылается на политику конфиденциальности, где перечислено, что уходит наружу. Сценариев без сети больше, чем кажется: HTML-файл открывается офлайн, вариант с системными шрифтами не обращается к веб-шрифтам, а экспорт в PNG работает локально, если установлен Playwright.
Linux и macOS здесь в равном положении, а на Windows есть отдельная тонкость: растеризация PNG требует установленного Chromium через Playwright. Если экспорт в растр не нужен, зависимость можно не ставить вовсе — SVG выгружается без браузера.
/plugin marketplace add cathrynlavery/diagram-design, затем /plugin install diagram-design@diagram-design. Для остальных хостов — npx skills add cathrynlavery/diagram-design. Не ставьте оба способа сразу: каждый навык появится дважды.