Archify
tt-a1i/archifyClaude Skill для создания архитектурных диаграмм: опишите систему словами — получите красивый HTML с переключением тёмной/светлой темы и экспортом в PNG, JPEG, WebP, SVG с нативным рендерингом 4×.
Установка
git clone https://github.com/tt-a1i/archify.gitREADME
Archify
Опишите систему в двух словах — получите красивую архитектурную диаграмму. Переключение тёмной/светлой темы в один клик. Экспорт в PNG/JPEG/WebP/SVG с нативным разрешением 4×, или копирование в буфер обмена.
Archify — это Claude Skill: вы описываете свою систему обычными словами, а он превращает описание в аккуратную архитектурную диаграмму — единый HTML-файл, который открывается в браузере и позволяет переключать тему, копировать в буфер обмена и экспортировать в различные форматы.
- Не нужно уметь рисовать — просто опишите компоненты и связи между ними Claude
- Встроенное переключение тем — тёмная/светлая в один клик, браузер запоминает предпочтение
- Копирование в буфер обмена — вставляйте напрямую в Slack, Notion, GitHub issue
- Сверхчёткий экспорт — PNG/JPEG/WebP рендерятся браузером в нативном разрешении 4× (не масштабирование битмапа, без размытия); SVG — настоящий вектор
- SVG автоматически следует системной теме — экспортированный SVG содержит два набора переменных +
@media (prefers-color-scheme), поэтому при вставке в GitHub README диаграмма переключается вместе с темой читателя (без двух PNG и обёртки<picture>) - Единый HTML-файл — нулевые зависимости, достаточно отправить один файл
- Итерация в чате — «передвинь Redis влево», «сделай сервис авторизации малиновым», «добавь Kafka»
Превью
Одна и та же диаграмма в двух темах, переключение в один клик:
| Тёмная | Светлая |
|---|---|
 |  |
Меню Export — копирование в буфер обмена + скачивание в четырёх форматах:
Чтобы попробовать самостоятельно: клонируйте репозиторий и откройте examples/web-app.html, нажмите T для переключения темы, E для открытия меню экспорта. Добавьте к URL ?theme=light или ?openExport=1 для принудительного начального состояния.
История версий
Archify — это форк Cocoon-AI/architecture-diagram-generator v1.0 (HTML-вывод только с тёмной темой), переписанный с нуля. 2.0 переработала шаблон в тематизируемую систему на CSS-переменных и добавила клиентский конвейер экспорта. 2.1 добавила копирование в буфер обмена и клавиатурную навигацию. 2.2 добавила стили печати и локальные резервные шрифты. 2.3 исправила давний баг с апскейлингом битмапов — все растровые экспорты теперь рендерятся нативно в 4× (одновременно убран селектор 1×/2×/4× из v2.1 — он лишь провоцировал пользователей выбирать более размытый результат). 2.4 обновила SVG-экспорт до самодостаточного двухтемного формата — один .svg-файл в GitHub README переключается вместе с темой читателя.
| Возможность | v1.0 | 2.0 | 2.1 | 2.2 | 2.3 | 2.4 |
|---|---|---|---|---|---|---|
| Тёмная тема | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| Светлая тема | — | переключение | переключение | переключение | переключение + T | то же |
| Скачивание PNG/JPEG/WebP | ручной скриншот | апскейлинг 2× | селектор 1×/2×/4× (всё ещё апскейлинг) | то же | нативный рендеринг 4×, без размытия | то же |
| Скачивание SVG | — | вектор + инлайн-стили (одна тема) | то же | то же | то же | самодостаточный двухтемный (@media prefers-color-scheme) |
| Копирование PNG в буфер обмена | — | — | ✓ | то же | то же (всегда 4×) | то же |
| Горячие клавиши | — | — | T/E + навигация по меню | то же | то же | то же |
| Доступность | — | — | ARIA + focus-visible | то же | то же | то же |
| Стили печати | — | — | — | ✓ | ✓ (+ альбомная + 2-колоночные карточки) | то же |
| Резервные шрифты при экспорте | — | — | — | ✓ | ✓ | то же |
| Модель стилей | инлайн fill/stroke | CSS-переменные + семантические классы | то же | то же | то же | то же |
Быстрый старт
1. Установка skill
Требуется подписка Claude Pro/Max/Team/Enterprise или Claude Code.
Claude.ai:
- Скачайте
archify.zip - Перейдите в Settings → Capabilities → Skills
- Нажмите + Add, загрузите zip
- Включите переключатель
Claude Code CLI:
# Глобально (доступно во всех проектах)
unzip archify.zip -d ~/.claude/skills/
# Или только для текущего проекта
unzip archify.zip -d ./.claude/skills/Claude.ai Projects:
Загрузите archify.zip в Project Knowledge.
2. Подготовьте описание системы
Подойдёт любой из вариантов:
Попросите AI проанализировать репозиторий:
Проанализируй этот репозиторий и опиши архитектуру системы. Включи все основные
компоненты, связи между ними, используемый стек технологий и любые облачные
сервисы или сторонние интеграции. Используй формат списка, удобный для построения диаграммы.
Напишите сами:
- React-фронтенд обращается к Node.js API
- База данных PostgreSQL
- Redis для кэширования
- Развёрнуто на AWS с CloudFront в качестве CDN
Или попросите Claude предложить типовую архитектуру:
Как выглядит типовая архитектура SaaS-приложения?
3. Попросите Claude вызвать skill
Используй archify skill и сгенерируй архитектурную диаграмму:
[вставьте подготовленное описание]
Готово. Claude сгенерирует HTML-файл — откройте его в браузере. Для изменений продолжайте диалог: «добавь Redis», «замени Postgres на MySQL», «выдели путь авторизации».
Работа с сгенерированным HTML
Откройте файл в браузере — в правом верхнем углу будут две кнопки:
- Кнопка темы (Dark/Light) — переключение с сохранением. Горячая клавиша T.
- Меню Export — пять действий: копирование в буфер обмена + скачивание в 4 форматах. Горячая клавиша E.
Меню Export
| Действие | Описание |
|---|---|
| Copy to clipboard | Текущая диаграмма в формате PNG напрямую в системный буфер обмена — вставляйте в Slack/Notion/GitHub/Figma |
| Download PNG / JPEG / WebP | Сохранение в растровом формате. JPEG/WebP заполняют фон цветом текущей темы (без прозрачности); PNG сохраняет прозрачность |
| Download SVG | Векторный экспорт со всеми инлайн-стилями, самодостаточный двухтемный. Содержит два набора CSS-переменных + правило @media (prefers-color-scheme) — один .svg в GitHub README/блоге переключается вместе с темой читателя. Редактируется в Figma/Illustrator. Масштабируется без потерь |
Все растровые экспорты (копирование + PNG/JPEG/WebP) рендерятся браузером в нативном разрешении 4× — сериализованный SVG задаётся размером 4 × viewBox, браузер растеризует вектор в целевом разрешении, canvas рисуется в натуральном размере (без апскейлинга битмапа), toBlob(mime) генерирует файл. Результат — настоящая чёткость на Retina-экранах, в презентациях и при печати.
Селектора кратности нет — всегда максимальное качество, единственный вариант по умолчанию. Если изредка нужно уменьшенное изображение, используйте URL-параметры ниже.
Горячие клавиши
- T в любом месте — переключить тему
- E в любом месте — открыть меню Export
- ↑ ↓ в меню — навигация по пунктам
- Home / End — перейти к первому/последнему пункту
- Enter / Space — выполнить текущий пункт
- Esc — закрыть меню
URL-параметры
?theme=lightили?theme=dark— принудительная начальная тема (для детерминированных скриншотов, ссылок для шаринга, встраивания в документацию)?openExport=1— автоматически открыть меню Export при загрузке страницы (для демонстраций и скриншотов документации)
Примечания
- Совместимость WebP: зависит от canvas-кодировщика браузера. В старых версиях Safari пункт меню будет неактивен. PNG и JPEG работают везде.
- Поддержка буфера обмена: копирование изображений требует
ClipboardItem+navigator.clipboard.write(Chromium, Firefox 127+, Safari 16+). При отсутствии поддержки пункт Copy неактивен. - Шрифты при экспорте: растровые изображения используют системные моноширинные шрифты (
ui-monospace/Menlo/Consolas), так как изолированный контекст рендеринга не имеет доступа к Google Fonts. Если локально установлен JetBrains Mono, он будет использован автоматически с полным попиксельным совпадением.
Примеры промптов
Веб-приложение:
Нарисуй с помощью archify архитектурную диаграмму:
- React-фронтенд
- Node.js/Express API
- База данных PostgreSQL
- Кэш Redis
- JWT-авторизация
AWS Serverless:
Нарисуй с помощью archify:
- CloudFront CDN
- API Gateway
- Lambda (Node.js)
- DynamoDB
- S3 для статических ресурсов
- Cognito для авторизации
Микросервисы:
Нарисуй с помощью archify архитектурную диаграмму микросервисов:
- React Web + мобильный клиент
- Kong API Gateway
- Сервис пользователей (Go), сервис заказов (Java), сервис товаров (Python)
- PostgreSQL, MongoDB, Elasticsearch
- Kafka для потоков событий
- K8s для оркестрации
Семантическая цветовая схема
| Тип | Цвет | Назначение |
|---|---|---|
| Frontend | Голубой | Клиентская часть / UI / конечные устройства |
| Backend | Изумрудный | Сервисы / API / фоновые процессы |
| Database | Фиолетовый | Базы данных / хранилища / AI/ML |
| Cloud / AWS | Янтарный | Управляемые облачные сервисы / инфраструктура |
| Security | Малиновый | Авторизация / группы безопасности / шифрование |
| Message Bus | Оранжевый | Kafka / RabbitMQ / SNS / шины событий |
| External | Серый | Сторонние / общие внешние системы |
Каждый цвет имеет соответствующие значения для тёмной и светлой темы и переключается вместе с ними.
Детали реализации
- Модель стилей: CSS-переменные на
:root+[data-theme="light"]; SVG-элементы ссылаются на семантические классы (c-frontend,t-muted,a-emphasisи др.). Переключениеdata-themeна<html>перерисовывает всю диаграмму, включая градиенты, сетку, стрелки и маски. - Конвейер экспорта: клонирование SVG, инлайнинг хост-
<style>, разбор переменных текущей темы и запись в правило:rootклона, затем сериализация черезXMLSerializer. Для растровых форматовwidth/heightклона задаются как4 × viewBox, браузер растеризует вектор в целевом разрешении; canvas выравнивается по клону и рисуется в натуральном размере (без апскейлинга битмапа),toBlob(mime)генерирует файл. JPEG явно заполняется фоновым цветом (без альфа-канала). Если целевое разрешение превышает лимит canvas браузера, автоматически снижается до 3× или 2×. - Единый файл: один HTML, один
<link>на Google Fonts, инлайн SVG, ~3 КБ встроенного JS