Archify

Установка

npx skills add tt-a1i/archify -g

Это чужой код. Посмотрите файлы в репозитории перед установкой.

Что делает

Агент описывает систему в типизированном JSON, а Node.js-рендерер Archify проверяет схему и собирает самодостаточный HTML с SVG. Поддерживаются пять типов: архитектура, workflow, sequence, data flow и жизненный цикл состояний, можно подать и Mermaid. Валидатор проверяет раскладку, маршруты стрелок и подписи и при ошибке возвращает машиночитаемую подсказку, что поправить. Готовый файл умеет искать узлы, трассировать пути, показывать сценарии, переключать темы и экспортировать PNG, SVG, WebM и карточку для соцсетей. Режим сравнения показывает разницу между двумя версиями архитектуры для ревью.

Для кого. Для разработчиков, архитекторов и техписателей, которым нужна аккуратная схема системы прямо из чата с агентом.

Пример запроса к агенту

Разбери этот репозиторий и нарисуй через archify схему архитектуры: 8-12 основных компонентов, главный путь запроса и внешние зависимости

Ограничения

Для полного цикла с валидацией нужен Node.js. Скилл не редактирует схемы в WYSIWYG, не делает общий автолейаут и не хостит результаты. Раз в несколько дней скилл может запрашивать манифест версии для напоминания об обновлении, отключается переменной ARCHIFY_UPDATE_CHECK_DISABLED=1.

Как отключить. Удалите папку archify из каталога скиллов агента, например ~/.claude/skills/archify.

Проверка безопасности

• Запускает Node.js-скрипты и пишет файлы схем
• Может читать код репозитория и изредка обращаться к сети за манифестом версии

Коротко о README

README показывает примеры сгенерированных схем, типы диаграмм и подсказки, что включать в запрос для каждого. Установка через npx skills add, отдельно команды для Cursor, Codex, OpenCode, ZIP для Claude.ai и Raven. Описан цикл generate, validate, preview, deliver и команды CLI archify.mjs: doctor, guide, validate, deliver, compare. Лицензия MIT.

SKILL.md

---
name: archify
description: Create polished, validated architecture, workflow, sequence, data-flow, and lifecycle/state diagrams as explorable standalone HTML with inline SVG, dark/light themes, optional trace motion, and PNG/JPEG/WebP/SVG/WebM export. Accept plain-language requirements or pasted Mermaid flowchart, sequenceDiagram, and stateDiagram input; inspect repository evidence when the diagram must reflect real code. Use when the user asks to visualize system architecture, infrastructure, cloud/security/network topology, technical workflows, API call sequences, request lifecycles, data pipelines, ETL/ELT, data lineage, state machines, or to convert/beautify Mermaid.
license: MIT
metadata:
  version: "2.17"
  author: tt-a1i
  based_on: Cocoon-AI/architecture-diagram-generator (MIT, v1.0)
---

# Archify

Create a self-contained, interactive HTML diagram from a small typed JSON specification. Static output is the default; enable motion only when the user asks for a demo or presentation.

## Fast authoring path

Use this bounded path for ordinary generation. Do not read the optional Viewer Runtime reference unless the user asks about those features.

1. Choose `architecture`, `workflow`, `sequence`, `dataflow`, or `lifecycle` from the question.

Похожие