Генерація архітектурних діаграм безпосередньо в чаті Cursor та Claude Code
Archify компілює описи систем чи кодові бази в інтерактивні HTML/SVG карти архітектури прямо в IDE. Інструмент підтримує Cursor, Claude Code та Codex, валідуючи JSON IR перед виводом перевірених файлів.
Вплив: Середній
Чому це важливо
Ви можете створювати та переглядати зміни архітектури у вигляді чистих інтерактивних діаграм безпосередньо у вашому робочому процесі розробки з ШІ.
TL;DR
- 01Archify перекладає описи коду природною мовою у перевірені структуровані макети прямо в чатах з агентами.
- 02Суворі схеми JSON IR запобігають погіршенню макету та хаотичному нагромадженню стрілок.
- 03Вбудоване візуальне порівняння забезпечує точне відстеження архітектурних змін при модифікації коду та PR.
Ключові факти
- Стабільна версія
- v2.16.0
- Підтримувані формати
- HTML, PNG, SVG, WebM, картки 1200x630
- Інтервал перевірки оновлень
- 72 години
Інтеграція з агентами та встановлення
Archify — це система рендерингу на базі Node.js, розроблена спеціально для інструментів розробника, таких як Cursor, Claude Code, Codex CLI та OpenCode. Щоб інтегрувати її глобально як навичку для Cursor, виконайте:
npx -y skills add tt-a1i/archify --skill archify --agent cursor --global --copy --yesДля користувачів Codex використовуйте:
npx skills use tt-a1i/archify@archify --agent codexБагаторежимна валідація діаграм
Інструмент підтримує п'ять візуальних режимів: Workflow, Sequence, Data Flow, Lifecycle та Architecture. Замість інструментів автоматичного розміщення, які накопичують стрілки, Archify використовує детерміновані правила валідації. Запустіть валідацію локально за допомогою:
node bin/archify.mjs validate workflow examples/agent-tool-call.workflow.json --quality showcase --jsonЯкщо валідація не проходить, CLI повертає стабільні коди правил та точні інструкції з виправлення.
Візуальні Git-дифи
Ви можете порівняти стан архітектури між двома комітами Git за допомогою:
node archify/bin/archify.mjs compare architecture base.json head.json architecture-delta.html --jsonЦе створить автономну HTML-сторінку з візуальним дифом (стани Before, Delta та After) з підсвічуванням маршрутів, залежностей та меж акторів.
Спробуй за 2 хвилини
npx -y skills add tt-a1i/archify --skill archify --agent cursor --global --copy --yesbash
✓ Коли використовувати
- Коли ви хочете створювати системні діаграми безпосередньо з текстових описів у чаті Cursor або Claude Code.
- При перевірці архітектурних змін під час код-рев'ю за допомогою структурованого візуального порівняння.
- Коли потрібні інтерактивні артефакти SVG/HTML, які містять посилання на конкретні рядки коду.
✕ Коли НЕ варто
- Не підходить для ручного малювання фігур перетягуванням мишкою, де суворі схеми заважають креативності.
- Не є заміною систем моніторингу активної інфраструктури в реальному часі.
Що зробити сьогодні
- Встановіть глобальну навичку Archify за допомогою команди npx у вашому локальному середовищі Cursor.
- Протестуйте валідацію схем за допомогою наданих конфігурацій прикладів у каталозі examples.
- Налаштуйте візуальне порівняння у вашому CI-пайплайні для створення діаграм дельти архітектури при пулл-реквестах.
Джерела