39 типов диаграмм, которые не стыдно показать дизайнеру: скилл, превративший Claude Code в иллюстратора
Diagram Design — скилл для Claude Code, который генерирует диаграммы редакционного качества. Без Mermaid, без теней, без generic-прямоугольников. Собрал уже 27,7 тысяч звёзд на GitHub.
Скилл - здесь
Что это и почему оно работает не как все
Скилл добавляет в Claude Code 39 типов диаграмм: архитектура, блок-схемы, последовательности, ER-диаграммы, таймлайны, канбан, пользовательские джорни, UML-классы, схемы баз данных и даже диаграммы Санкей и рыбья кость. Любой тип отрисовывается в трёх вариантах: минимальный светлый, минимальный тёмный и полноценный редакционный.
Почему результат не похож на типичную «AI-мазню»? Автор заложила жёсткие дизайн-ограничения:
· Акцентный цвет — только для 1–2 ключевых элементов, остальное в нейтральных тонах
· Все координаты, ширина и отступы кратны 4
· Максимальный скруглённый угол — 10px
· Три шрифта: Instrument Serif (заголовки), Geist Sans (узлы), Geist Mono (технические подписи)
· Никаких теней, только 1px обводка
«Каждый узел должен иметь право на существование», — пишет автор в README. Информационная плотность — 4 из 10. Ничего лишнего.
60 секунд на адаптацию под ваш бренд
Скилл - здесь
Самая убийственная фишка: скилл сам считывает стиль вашего сайта.
Одна команда:
onboard diagram-design to https://yoursite.com
Дальше агент идёт на сайт, вытаскивает основную цветовую гамму и шрифты, маппит их на семантические роли (paper, ink, muted, accent, link) и показывает предпросмотр изменений. Подтверждаете — и все будущие диаграммы генерируются в цветах вашего бренда.
Никакого ручного подбора HEX-кодов. Никаких «ой, а этот синий чуть-чуть не тот».
Как использовать
Установка — клонировать репозиторий в папку скиллов:
```bash
git clone https://github.com/cathrynlavery/diagram-design ~/.claude/skills/diagram-design
Дальше просто просите Claude Code на естественном языке:
· «Нарисуй архитектуру моего приложения: фронтенд, бэкенд, база данных, Redis-кэш»
· «Сделай квадрант: проекты по impact vs effort»
· «Покажи последовательность bearer-запроса с обновлением токена по 401»
Claude сам выберет подходящий тип диаграммы, соберёт HTML и сохранит файл. Открываете в браузере — готово.
Диаграммы можно экспортировать в SVG или PNG (через Playwright) для Figma, презентаций и соцсетей.
Почему это перевернуло мой подход к документации
Раньше диаграмма в технической статье или README была либо Mermaid-схемой из трёх блоков, либо скриншотом из draw.io, который никто не обновлял. Diagram Design даёт редакционное качество без редакционных усилий.
Скилл не генерирует «что-то похожее на диаграмму». Он выдаёт законченный визуальный элемент, который можно вставлять в статью, презентацию или документацию без доработок. И делает это в едином стиле с вашим брендом.
39 типов, три визуальных варианта, 60 секунд на адаптацию под сайт. И никаких «у меня дизайнер заболел, поэтому схема будет в Paint».
Скилл - здесь