Когда агент для написания кода снова выдаёт обычный набор скруглённых блоков, диаграмма перестаёт помогать. Diagram Design для Claude Code — это репозиторий с открытым исходным кодом от Кэтрин Лавери, в котором упакован навык агента для Claude Code, Codex и Pi. Я проверил его ветку main в 2026-08-14. В текущей документации перечислены 27 визуальных типов, автономный вывод в формате HTML/SVG, опциональная анимация и рабочие процессы перерисовки для Mermaid и draw.io.
Это руководство по стороннему инструменту, а не анонс продукта. Diagram Design не создан компанией OdiRouter, и источники не заявляют о наличии аффилированности. Полезные вопросы носят практический характер: что делает этот навык, как установить его, не предоставляя больший доступ, чем предполагается, и как сохранить возможность проверки получившихся диаграмм.
Что содержит репозиторий
Diagram Design отделяет семантические шаблоны от визуальной компоновки. В текущем наборе 27 типов компоновки: архитектура, блок-схема, последовательность, конечный автомат, ER-модель/модель данных, временная шкала, диаграмма «плавательных дорожек», квадрант, радар, цикл, вложенная структура, дерево, организационная диаграмма, слои, диаграмма Венна, пирамида/воронка, столбчатая диаграмма, линейный график, диаграмма Ганта, точечная диаграмма, обзорная диаграмма, процесс, медальон, поток данных, интеграция DP и матрица безопасности DP. Семь семантических шаблонов охватывают такие аспекты поведения, как очереди и узкие места, слоты этапов, преобразование входных данных, парные трассировки политик, защищённые стандартные пути, каталоги управления и компенсирующие уровни безопасности. Шаблон может выбрать ближайший тип компоновки, не добавляя новый тип.
Обычный вывод представляет собой самодостаточный документ HTML со встроенными SVG и CSS. В README указано, что статические примеры не требуют этапа сборки, JavaScript или внешних зависимостей от изображений. Каждый тип представлен в вариантах minimal light, minimal dark и full-editorial. Анимация необязательна. Её отдельный контракт требует полноценного статического первого кадра, обработки режима уменьшенного движения, ограниченной длительности и закреплённого контроллера. Статический вывод по-прежнему используется по умолчанию.
В руководстве по стилю используются семантические токены, такие как paper, ink, muted, accent и link. Онбординг может проанализировать публичный веб-сайт, предложить цвета и роли шрифтов, проверить контрастность WCAG AA и записать токены в references/style-guide.md. Это помогает обеспечить единообразие, но не гарантирует, что каждый пользовательский шрифт будет доступен во всех средах экспорта.
Установите его в Claude Code
В README описан следующий процесс работы с маркетплейсом:
/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-designClaude Code по умолчанию отключает автоматические обновления сторонних маркетплейсов. В соответствии с описанной процедурой необходимо открыть /plugin, выбрать магазин приложений diagram-design, включить автоматическое обновление и перезагружать плагины по запросу. Если вам необходимо изменить руководство по стилю, клонируйте репозиторий и создайте локальную ссылку на skills/diagram-design/ вместо редактирования управляемой копии, которую можно заменить обновлением.
Для Codex и Raspberry Pi команды установки и обновления описаны в файле README. Рассматривайте эти команды как инструкции, специфичные для продукта, а не как взаимозаменяемые псевдонимы.
Сначала проведите проверку источников и разрешений.
Навык агента может читать и записывать файлы проекта, а также выполнять команды — в зависимости от настроек разрешений хоста. Перед установкой изучите plugin.json, метаданные маркетплейса, SKILL.md, файлы команд, скрипты, поведение обновлений и редакцию, которую планируете использовать. Проведите первое тестирование в одноразовом проекте. Не храните API-ключи, данные клиентов и приватные промпты в рабочем каталоге навыка.
Репозиторий содержит SECURITY.md и просит исследователей сообщать об уязвимостях конфиденциально через GitHub. Это процесс раскрытия информации, а не безоговорочная гарантия безопасности кода. Закрепите редакцию, проверяйте изменения при обновлениях и ведите собственные журналы того, что агенту было разрешено делать.
Разумная первая диаграмма
Дайте агенту запрос с четкой визуальной структурой, например: «Создай архитектурную диаграмму фронтенда, API, базы данных и кэша». Навык выбирает тип, генерирует файл HTML и сохраняет его. В новом проекте этап проверки руководства по стилю может спросить, следует ли импортировать палитру веб-сайта, вставить токены или продолжить с поставляемыми настройками по умолчанию.
Используйте галерею, чтобы сравнить светлое, темное и редакционное оформления. Если диаграмма становится перегруженной, создайте обзор и подробное представление. Рекомендации по дизайну в репозитории сформулированы прямо и полезно: удаляйте узлы, которые не добавляют отдельной идеи, и линии, которые не передают связи.
Экспортируйте в HTML, SVG или PNG
В Claude Code указана следующая команда:
/diagram-design:export-diagram my-diagram.htmlВ справочнике по экспорту перечислены HTML, SVG, PNG и HTML, а также PNG. Экспорт SVG извлекает узел SVG и сохраняет его доступные title и desc. Экспорт PNG использует Playwright для захвата ограничивающей рамки SVG с масштабом 2x по умолчанию. Документированная однократная настройка — pip install playwright && playwright install chromium.
Для анимированной диаграммы явно запрашивайте статическое состояние. В проекте указано ?motion=static, выполняется ожидание загрузки шрифтов и проверяется, что виден полный кадр. Скриншот полуоткрытой диаграммы, сделанный с задержкой, не является надежным способом экспорта.
Импортируйте Mermaid и draw.io без копирования их разметки.
Данный навык принимает файлы .mmd и .mermaid, блоки Mermaid в формате Markdown, а также распространенные контейнеры draw.io, такие как .drawio, .drawio.xml, .drawio.png и .drawio.svg. Оно перерисовывает информацию в своей собственной системе проектирования. Компоненты, взаимосвязи, группировка и направление сохраняются. Исходные координаты, палитра, шрифты, диагональная трассировка соединителей и автоматическая компоновка Mermaid — нет.
Выберите формат и размер для сохранения документа, слайда, карточки для социальных сетей или страницы для печати. Затем проверьте метки, стрелки, группировку и viewBox в этом размере. Импорт и экспорт автоматизируют первый проход, но не финальную редакторскую проверку.
Ограничения и контрольный список для проверки
Diagram Design — это навык, основанный на репозитории, а не формат документа Figma. Импортированная диаграмма по замыслу не сохранит геометрическую идентичность. Синтаксис Mermaid может быть принят, однако новая композиция все равно требует редактирования. Статический режим не использует скрипты, а в режиме движения добавляются проверенный контроллер и дополнительные требования доступности.
Перед публикацией сгенерированного файла проверьте его доступное имя, читаемость подписей, взаимосвязи, ссылки, блоки кода, а также отсутствие секретов и неодобренных внешних ресурсов. Зафиксируйте исходный коммит. README и примеры могут меняться, поэтому количество типов и шаги установки следует датировать во внутренней документации.
Отдельное место для OdiRouter
Diagram Design строит диаграммы, но не маршрутизирует вызовы моделей. Команда, использующая несколько ИИ-API для программирования, создания документации или проверки, может оценить OdiRouter как отдельный уровень маршрутизации. Текущая домашняя страница OdiRouter описывает модели ИИ 200+, отображаемые цены, управление API-ключами и маршрутизацию по цене, задержке и доступности. OdiRouter's Claude Code documentation описывает подключение через Anthropic-compatible API.
Чётко разграничивайте эти области. Установка Diagram Design не настраивает OdiRouter, а OdiRouter не определяет, какой тип диаграммы используется в репозитории. Перед использованием в production проверьте текущие маршруты, учётные данные, обработку данных и доступность моделей в собственной документации OdiRouter. Официальная отправная точка — odirouter.ai.
Итог
Diagram Design — это специализированный способ создавать редакционные диаграммы HTML/SVG из Claude Code, Codex или Pi. Текущее состояние исходного кода документирует визуальные типы 27, семантическую маршрутизацию, перерисовку Mermaid и draw.io, а также экспорт в PNG/SVG. Надёжный рабочий процесс выглядит так: зафиксировать и проверить ревизию, подключить руководство по стилю, создать небольшую статическую диаграмму, экспортировать её в целевом размере и проверить вручную. Рассматривайте любое решение о маршрутизации моделей/API OdiRouter как отдельную документированную часть стека.