Диаграммы без боли: скилл для Claude Code, который не генерирует «прямоугольники с закруглёнными углами»

Cathryn Lavery, основательница BestSelf.co и автор блога littlemight.com, опубликовала на GitHub инструмент diagram-design — агентский скилл (agent skill, расширение для AI-агента) для Claude Code, Codex и Pi, который генерирует 29 типов редакционных диаграмм в виде самодостаточных HTML+SVG файлов. Никаких внешних зависимостей, никакого Figma, никакого Mermaid. Репозиторий уже попал в GitHub Trending и набрал более 7 000 звёзд.

Зачем это появилось

Каждый раз, когда Lavery просила Claude нарисовать диаграмму архитектуры или блок-схему, в ответ прилетал набор одинаковых прямоугольников с закруглёнными углами, совершенно не вписывавшихся в дизайн сайта — приходилось либо тридцать минут воевать с Figma, либо вовсе отказываться от визуализации.

«Editorial diagrams your designer won’t hate.»

Решением стал скилл для Claude Code: 27 визуальных типов, редакционное качество, адаптация под ваш бренд за 60 секунд — агент просто читает ваш сайт.

Что умеет diagram-design

Инструмент предлагает 29 редакционных типов диаграмм в виде самодостаточных HTML+SVG файлов без теней и без «Mermaid-каши».

Поддерживаются architecture, IT current-state, flowchart, sequence, state machine, ER/data model, timeline, swimlane, quadrant, radar/spider, loop/flywheel, nested, tree, org chart, layer stack, venn, pyramid/funnel, bar chart, line chart, Gantt, scatter plot, high-level, process, medallion, data flow, DP integration, DP security matrix — всё в виде самостоятельных HTML-файлов с инлайн-SVG.

ℹ Что нового в версии 2.3
Добавлены семантические паттерны (semantic system patterns) — они описывают поведение отдельно от layout. Очередь, трассировка политики или граница доверия теперь могут использовать ближайший существующий тип, не увеличивая общее количество типов. Статический вывод остаётся по умолчанию; опциональная анимация доступна для пошаговых объяснений.

Уже есть диаграммы в draw.io или Mermaid? Достаточно указать источник — скилл перерисует их в нужном формате, размере и уровне детализации.

Дизайн-система под капотом

В основе — строгие правила: 1px границы-«волоски» без теней, максимальный border-radius 10px, все координаты, ширины и отступы кратны 4 — именно это не даёт диаграммам выглядеть «AI-сгенерированными».

Один акцентный цвет, 1–2 фокусных элемента на диаграмму. Три семейства шрифтов: Instrument Serif (заголовки и курсивные вставки), Geist Sans (подписи узлов), Geist Mono (технические метки).

💡 Принцип редактуры
Автор формулирует главное правило так: «The highest-quality move is usually deletion» — каждый узел должен зарабатывать своё место. Акцентный цвет резервируется для 1–2 элементов, на которые читатель должен посмотреть в первую очередь. Целевая плотность — 4/10.

Адаптация под бренд за 60 секунд

Главная идея: доставлять диаграммы редакционного качества в ваших цветах и типографике, а не в шаблонном виде. Для этого достаточно одной команды:

"onboard diagram-design to https://yoursite.com"

Агент загружает главную страницу, извлекает палитру и шрифты, сопоставляет их с семантическими ролями и предлагает изменения для references/style-guide.md.

Что извлекается с сайтаТокен в style-guide
Фон <body>paper
Основной цвет текстаink
Второстепенный текстmuted
Карточки / контейнерыpaper-2
Главный CTA / ссылкиaccent
Шрифт <h1>title font
Шрифт <body>node-name font
Шрифт <code> / <pre>sublabel font
⚠ Первый запуск
Скилл не будет молча генерировать диаграммы в дефолтном оформлении. При первом использовании в проекте он проверяет, настроен ли style-guide.md, и предлагает выбор: запустить онбординг, вставить токены вручную или продолжить с дефолтом.

Доступность

Каждый шаблон диаграммы снабжён доступными именами и описаниями для экранных читалок: role="img", aria-labelledby и дочерние теги <title>/<desc>. Идентификаторы уникальны per-диаграмма, так что несколько SVG на одной странице не конфликтуют.

Установка


graph TD
    A[Выберите агент] --> B{Claude Code?}
    B -- Да --> C["/plugin marketplace add cathrynlavery/diagram-design"]
    B -- Нет --> D{Pi?}
    D -- Да --> E["pi install github.com/cathrynlavery/diagram-design"]
    D -- Нет --> F{Codex?}
    F -- Да --> G["npx skills add ... --skill diagram-design"]
    C --> H[Готово]
    E --> H
    G --> H

Для Claude Code:

/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design

Для Pi:

pi install https://github.com/cathrynlavery/diagram-design
# затем в открытой сессии:
/reload

Для Codex:

npx skills add https://github.com/cathrynlavery/diagram-design --skill diagram-design

Если планируете менять стайл-гайд вручную — лучше делать editable-установку через git clone, чтобы обновления пакета не перезаписали ваши изменения.

Контекст и значение

Claude Code стал общедоступным в мае 2025 года вместе с Claude 4, а к июлю Anthropic фиксировала рост выручки от Claude Code в 5,5 раза. На этой волне экосистема агентских скиллов активно растёт: в каталоге Claude Skills Hub уже проиндексировано более 42 000 скиллов с GitHub, рейтинг обновляется ежедневно.

Репозиторий diagram-design попал в ежедневный топ Trendshift 9 августа 2026 года и набрал более 7 000 звёзд.

Появление diagram-design отражает важную тенденцию: разработчики и контент-авторы хотят получать визуально состоятельный результат прямо из рабочего окружения агента — без переключения в Figma или другие дизайн-инструменты. Подход «один скилл — все типы диаграмм» с жёсткой дизайн-системой внутри и брендовой адаптацией «за 60 секунд» может стать шаблоном для следующего поколения агентских расширений.

Живая галерея: cathrynlavery.github.io/diagram-design
Репозиторий: github.com/cathrynlavery/diagram-design