tt-a1i/archify: Agent skill for beautiful, verifiable architecture, workflow, sequence, data-flow, and lifecycle diagrams—self-contained HTML with motion and crisp export.

Agent skill for beautiful, verifiable architecture, workflow, sequence, data-flow, and lifecycle diagrams—self-contained HTML with motion and crisp export. - tt-a1i/archify

Summary

Archify is a JavaScript-based agent skill for coding assistants like Claude Code, Codex, Cursor, and OpenCode that converts natural-language descriptions or existing codebases into interactive HTML diagrams. It supports five diagram kinds (Architecture, Workflow, Sequence, Data Flow, and Lifecycle) and outputs self-contained HTML files that viewers can explore, theme-switch, and share without installing Archify themselves.

What it is useful for

Archify targets engineers who need to communicate system structure or process flow without hand-drawing diagrams. Uses documented in the README include:

• Mapping components, services, storage, and trust boundaries for onboarding or design review.
• Visualizing request flows such as a web request hitting an API, checking Redis, and falling back to PostgreSQL on a cache miss.
• Explaining CI/CD pipelines, agent tool calls, approvals, and rollback paths as workflows.
• Tracing API calls, async waits, and timing across callers and callees as sequence diagrams.
• Showing data movement and sensitivity boundaries in pipelines.
• Documenting state machines, retries, and terminal outcomes as lifecycle diagrams.

The README also describes an Architecture Delta mode for PR review that compares validated Before/Delta/After snapshots with a machine receipt, without inferring runtime impact.

How engineers can use it

The documented setup starts with one global install:

npx skills add tt-a1i/archify -g

From there, prompt your agent with a plain description:

Use Archify to diagram a web request: Browser calls the API,
the API checks Redis, and a cache miss queries PostgreSQL and fills the cache.

Subsequent chat turns can refine the diagram: "Add authentication", "Highlight the cache-miss path", or "Switch to the light theme". For source-backed maps, ask your agent to analyze a repository and then generate a diagram showing 8–12 core components, one primary path, external dependencies, and trust boundaries.

Engineers who prefer a CLI can run the bundled archify.mjs directly for doctor, demo, guide, validate, preview, and deliver. For example:

node archify/bin/archify.mjs guide "Show an API request with Redis cache miss"
node archify/bin/archify.mjs validate workflow examples/agent-tool-call.workflow.json --quality showcase --json

The deliver step atomically replaces the target HTML only after schema, layout, and route checks pass; failures return stable rule codes with supported repair options rather than a stack trace. Viewers who only want to explore the output can open the HTML locally or follow a permalink that restores focus, reach, route, and theme.

Documented caveats: shared HTML files require a network connection for any external links; non-en/zh-CN locales need a meta.translations file or fall back to English; and the deployment-ownership profile fails closed rather than guessing missing ownership data.