draw-architecture — скилл
Скилл рисует архитектуру системы одной HTML-страницей: схема с панорамой, фокусом на узле, светлой и темной темой.
- 147 ★ репозитория
- Последний коммит
- MIT
Минимальный доступ
Почему такой уровень
- Скилл читает файлы проекта и создает HTML-файл; скрипты сборки запускаются локально.
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/draw-architectureОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемМинимальный доступИнструмент ничего не запускает и не ходит в сеть.
- Скилл читает файлы проекта и создает HTML-файл; скрипты сборки запускаются локально.
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Скилл `architecture-canvas` превращает кодовую базу, документ об архитектуре или описание словами в интерактивную схему. Компоненты группируются по цветным плоскостям, связи подсвечиваются при выборе узла. Результат — один самодостаточный `index.html`: панорама и масштаб, режим фокуса с панелью описания, переключатель темы, выгрузка в PNG и состояние вида в хэше ссылки. Файл удобно отправить коллеге или выложить как страницу. Для работы достаточно запроса словами, например «собери схему из docs/architecture.md».
Для кого. Тимлидам и разработчикам, которым нужна наглядная схема сервисов для онбординга, ревью или документации без ручной отрисовки.
Подходит, если
- Новичок в команде просит показать, как связаны сервисы и хранилища.
- Из `docs/architecture.md` нужна схема, по которой можно кликать.
- Перед рефакторингом надо увидеть зависимости модулей одним взглядом.
- Схему хотят выложить как отдельную страницу или приложить к статье.
Не подходит, если
- Нужна UML-диаграмма или файл для draw.io и Figma.
- Схема должна редактироваться мышью после генерации.
- Страница откроется без доступа к Google Fonts и не должна терять шрифт.
Пример запроса к агенту
Построй интерактивную схему архитектуры этого репозитория: сервисы, очереди, базы и внешние API по плоскостям.Ограничения
Для сборки и проверки нужен Node.js. Готовая страница запрашивает шрифт JetBrains Mono у Google Fonts, поэтому без сети вид будет запасным. Схема отражает то, что агент понял из кода или описания, и может пропустить связи, которых нет в прочитанных файлах. Установка в два места (skills.sh и npm-установщик) оставит два экземпляра, и агент возьмет первый найденный. Диаграмма статична: после правки кода ее надо сгенерировать заново.
Как отключить. Выполните `npx skills remove architecture-canvas` либо `npx draw-architecture uninstall`, смотря чем ставили. Сгенерированные HTML-файлы удалите вручную.
Частые вопросы
Как называется скилл после установки?
`architecture-canvas`. Пакет npm называется `draw-architecture`, а агент подбирает скилл по имени каталога на диске.
Что получится на выходе?
Один файл `index.html`. Его открывают в браузере, отправляют коллеге или публикуют как страницу, дополнительные зависимости не нужны.
Какие агенты подходят?
Через `skills` CLI скилл ставится в Claude Code, Codex, Cursor, OpenCode, Copilot, Gemini CLI и другие. Для Claude Code есть и собственный установщик `npx draw-architecture`.
Как сохранить схему картинкой?
В панели страницы есть выгрузка PNG. Экспорт учитывает выбранную тему.
Нужен ли интернет для просмотра схемы?
Страница открывается и без сети, но шрифт JetBrains Mono подгружается из Google Fonts. Офлайн текст отобразится запасным шрифтом.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыСкилл рисует интерактивную изометрическую карту репозитория: здания по размеру кода, потоки по реальным вызовам.
Скилл, который вместо ASCII-схем в терминале собирает самодостаточные HTML-страницы: диаграммы, разбор диффов, ревью планов, таблицы и слайды
Строит интерактивные схемы архитектуры в одном HTML-файле: анимированные потоки данных, переключение сред и панель деталей шага
Скилл рисует архитектурные схемы, блок-схемы и диаграммы последовательностей как размеченный вручную SVG в едином стиле
stack-diagram, скилл для архитектурных схем, встраивает логотипы и шрифты в HTML: готовый файл можно открыть без сети.
Скилл превращает разговор об архитектуре в интерактивную изометрическую карту системы и текстовую копию SYSTEM.md из одного файла данных
Сравнение с похожими
Карточки с тем же главным запросом: чем они отличаются.
| Инструмент | Официальный | Звезды репозитория | Главное отличие |
|---|---|---|---|
| draw-architecture (эта карточка) | нет | 147 | |
| Генератор архитектурных диаграмм | нет | 7 583 | генерирует диаграмму по описанию; draw-architecture выдает интерактивную страницу с фокусом на узле и экспортом PNG |
| Excalidraw Diagram Skill | нет | 5 240 | рисует диаграмму в Excalidraw для ручной правки; здесь результат не редактируют мышью, а исследуют |
Коротко о README
Установка двумя способами и вручную, выбрать надо один. Агентов перезапускают, чтобы подхватить скилл. Запрос формулируют словами: схема по коду, по документу или по описанию.