Turn Any Codebase into an Interactive Architecture Diagram with Archify

What Is This Project

Archify is an open‑source AI skill hosted on GitHub (over 13 000 stars) that can be installed into AI coding assistants such as Cursor, Claude Code, Codex CLI, or OpenCode. Once installed, a single natural‑language prompt triggers the skill to read the entire repository and generate a runtime architecture diagram as an HTML file that can be opened in any browser without additional software.

What It Can Do

1. Read the repository without manual description

Unlike most AI diagram tools that require a detailed textual description of the system, Archify parses the codebase directly. It discovers entry points, routing logic, and inter‑module calls, then assembles this information into a visual representation of the runtime architecture.

2. Nodes link back to source code

Each diagram node carries an SRC tag that points to the exact file and line number in a specific Git commit, guaranteeing that the visual elements correspond to real code rather than guessed relationships. Clicking a node opens the corresponding source location, eliminating the need to manually search through files.

3. Five diagram types for different perspectives

Architecture diagram : shows components, services, databases, cloud resources, and security boundaries.

Workflow diagram : lane‑style flowchart suitable for CI/CD pipelines, approval processes, and exception handling.

Sequence diagram : visualizes API call chains, cache back‑fills, authentication checks, and the order of interactions.

Data‑flow diagram : traces data origins, processing steps, storage destinations, and highlights sensitive data boundaries.

Lifecycle diagram : models state machines, retries, waiting periods, and end‑states such as an order’s full lifecycle.

4. Interactive, not static

The generated HTML includes a viewer that supports searching ("/"), path exploration ("R"), and presentation mode ("F"). Users can explore upstream/downstream relationships, play guided stories that walk through the system step‑by‑step, and present the diagram directly on a screen.

5. Stable output quality

Archify separates responsibilities: the AI model produces a structured JSON describing nodes and edges, while a dedicated renderer handles layout and drawing. An automatic validation step catches inconsistent tags or edges before the diagram is delivered, and error messages point out the exact problem and suggested fixes.

6. Export and sharing options

Two visual themes (light and dark) can be toggled with a single click. Exported PNGs are rendered at 4× resolution for crisp inclusion in presentations or print. SVGs embed both themes, automatically adapting to the viewer’s system theme. Additional exports include WebM animations and 1200×630 share cards for release notes or social posts.

7. Compare before and after changes

When architecture evolves, Archify can generate Before, Delta, and After views, listing added or removed components and altered connections. This side‑by‑side comparison aids review meetings by making structural changes explicit.

Getting Started with One Command

Install the skill globally: npx skills add tt-a1i/archify -g If you only want to try it without a permanent install:

npx skills use tt-a1i/archify@archify --agent codex

After installation, open the project and issue a natural‑language command such as “Use Archify to map the runtime architecture of this repository.” The first diagram is generated automatically, and subsequent refinements can be made with simple instructions like “Add a Redis node” or “Move the auth module to the left.”

Author’s Perspective

The author appreciates Archify’s focus on keeping diagrams in sync with code. By letting the AI read the repository, each node can be verified against the actual source, avoiding the drift that occurs when diagrams are drawn from memory or outdated documentation. The division of labor—AI handling information extraction and a deterministic renderer handling layout—raises the baseline quality compared to AI‑generated SVGs.

Limitations are also noted: Archify is not a full‑featured diagram editor; it cannot drag‑and‑drop elements or convert Mermaid scripts. Its scope is limited to turning a codebase into a shareable, interactive diagram.

Open‑Source Repository

https://github.com/tt-a1i/archify