arch-diagram — скилл
Скилл читает репозиторий, статью или PDF и рисует интерактивную архитектурную схему с бегущими потоками данных
- 126 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Запускает скрипты сборки и браузер без интерфейса, пишет файлы схемы в рабочий каталог.
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/arch-diagramОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Запускает скрипты сборки и браузер без интерфейса, пишет файлы схемы в рабочий каталог.
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
arch-diagram по ссылке на GitHub-репозиторий, статье, PDF или локальному проекту разбирает структуру и строит схему. Результат — один HTML-файл: элементы окрашены по видам, связи по типам потоков (запрос, запись, ответ, асинхронный вызов), по линиям бегут световые точки, а внизу журнал добавляет строку при каждом обмене между модулями. Стилей восемь, по умолчанию темный «терминальный чертеж». Скилл сам проверяет схему в Chrome без интерфейса на наложения, обрезанный текст и линии через блоки. Из HTML можно получить PNG, MP4, GIF и диаграмму Mermaid. Язык подписей берется из языка запроса.
Для кого. Разработчикам и техническим авторам, которым нужна наглядная схема чужого или своего проекта для README, доклада или статьи.
Подходит, если
- Перед докладом нужно показать архитектуру открытого проекта по ссылке на репозиторий.
- Статью про систему надо превратить в схему потока запросов для слайда.
- В README не хватает картинки, и ее нужно получить из самого кода.
- Короткий ролик о конвейере данных нужен как MP4 на двадцать секунд.
Не подходит, если
- Нужна редактируемая схема в Figma или draw.io: результат живет в HTML и в spec.json.
- Машина без Chrome, Chromium или Edge: самопроверка и экспорт работают только с одним из них.
- Требуется строгая UML-нотация по стандарту.
Пример запроса к агенту
Нарисуй архитектуру репозитория https://github.com/plausible/analytics в стиле синьки и выгрузи PNG.Ограничения
Нужны Node 18 и выше и один из браузеров: Chrome, Chromium или Edge. Для MP4 и GIF дополнительно ставится `ffmpeg`. README написан по-китайски, переводы лежат в папке `docs`. Исходник схемы хранится как файл slug.spec.json, правки вносятся через изменение спецификации и повторную сборку. При запуске npx из каталога самого репозитория команда не находится: запускать ее нужно вне клона или через `node bin/cli.mjs`. Качество схемы зависит от того, насколько полно агент прочитал исходный материал.
Как отключить. Выполните `npx @rokoai/arch-diagram uninstall` либо удалите папку `~/.claude/skills/arch-diagram`, а для Codex папку `~/.codex/skills/arch-diagram`.
Частые вопросы
Как вызвать скилл явно?
В Claude Code введите /arch-diagram и адрес репозитория или статьи, в Codex используйте $arch-diagram с тем же адресом.
Какие стили доступны?
Всего восемь: темный терминал по умолчанию, синька, чертеж на крафте, белая доска, брутализм, электронно-лучевая трубка, мягкие карточки и изометрия. Стиль меняется фразой без правки структуры.
Какие форматы вывода есть?
Интерактивный HTML в один файл, PNG в двойном разрешении, MP4 длиной по умолчанию 20 секунд, GIF одного цикла и блок-схема Mermaid.
На каком языке будут подписи?
На языке запроса: русский запрос даст русские заголовки и журнал. Идентификаторы, пути и команды остаются без перевода.
Как поставить в Codex?
Командой `codex plugin marketplace add bassnova42/arch-diagram-skill`, затем `codex plugin add arch-diagram@arch-diagram`. Установщик npm тоже кладет скилл в `~/.codex/skills`, если Codex уже стоит.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыГенератор архитектурных диаграмм
Architecture Diagram Generator
Скилл рисует архитектурную схему системы в виде одного HTML-файла с SVG, кнопками копирования и экспорта в PNG и PDF
Скилл рисует проверенные схемы архитектуры, процессов, последовательностей и потоков данных в один интерактивный HTML-файл
Скилл рисует редакторские диаграммы как самостоятельные файлы HTML и SVG: архитектура, блок-схемы, ER, воронки и еще около сорока типов
Скилл рисует по короткой JSON-спецификации анимированные диаграммы 45 типов и сохраняет их в HTML, SVG, PNG, GIF и MP4
Скилл рисует анимированные схемы архитектуры и процессов в стиле рисунка от руки: темный неон и светлая бумага. README на китайском
Скилл рисует диаграммы с китайской типографикой: 45 типов, один HTML без внешних шрифтов, экспорт SVG и PNG, перерисовка Mermaid.
Сравнение с похожими
Карточки с тем же главным запросом: чем они отличаются.
| Инструмент | Официальный | Авторизация | Звезды репозитория | Главное отличие |
|---|---|---|---|---|
| arch-diagram (эта карточка) | нет | 126 | ||
| Diagram Design | нет | 66 822 | набор правил дизайна диаграмм; arch-diagram сам читает репозиторий и строит анимированную схему | |
| GitDiagram | да | не нужна | 18 884 | веб-сервис схем по GitHub-репозиторию; arch-diagram работает внутри агента и выдает HTML, PNG, MP4 |
Коротко о README
Ставится тремя способами: npm-установщик, плагин для Claude Code или Codex, ручное копирование папки скилла. После установки агент перезапускают.