# archify

> Agent skill that turns a description or a codebase into an interactive HTML diagram

- Repository: https://github.com/tt-a1i/archify
- Category: Agent skills & plugins
- Stars: 87,771 · Forks: 5,916 · Language: JavaScript · License: MIT
- Experience: Beginner friendly
- Page: https://ir.adyog.com/repos/tt-a1i/archify/

Drawing system diagrams by hand is slow, and static images go stale or hide detail. Archify is a skill you install into an AI coding agent. You describe a system in plain words, or ask the agent to read a repository, and it produces a diagram.

The result is one standalone HTML file. Open it in a browser to click nodes for details, trace a path between two points, or follow everything upstream or downstream of a step. You can keep refining it by chatting with the agent, for example asking it to add authentication or switch to the light theme.

The repo tags itself as a Mermaid alternative. The README says diagrams from code are traced against the source and checked, and that the typed JSON sources and validation receipts are in the repo. Because the output is plain HTML, people have also edited it into small tools, such as a travel itinerary.

## What it does

- **Describe it, get a diagram**: Tell your agent what to draw, such as a cache-miss request through a browser, API, Redis and PostgreSQL. No repository is needed.
- **Reads real repositories**: Ask the agent to read a project and produce a source-backed architecture map. The README shows one built from the public mco-org/mco repo.
- **Explore paths and reach**: Trace a route between two nodes, or highlight everything upstream or downstream of one step. The README notes this shows authored relationships, not runtime impact.
- **Self-contained and shareable**: Output is a single HTML file that works offline once downloaded. Interactions travel with it, though external links need a network connection.
- **Themes and exports**: Switch between dark and light themes. The Export menu copies PNG to the clipboard, downloads static or motion formats, and makes route or reach share cards at 1200×630.

## What you could build

- Diagram a web request flow and then ask the agent to add authentication or highlight the cache-miss path.
- Map an unfamiliar repository into an interactive architecture diagram to onboard teammates.
- Trace the path between two services and export it as a share card for a design discussion.
- Build a sequence or workflow diagram of an agent tool-call loop for documentation.
- Turn a plan such as a multi-day itinerary into an interactive page you can adapt.

## Who it's for

Developers and students who already use an AI coding agent such as Cursor, Claude Code, Codex CLI or OpenCode and want clearer system diagrams.

## Get started

Install the skill globally with the command above, then tell your agent something like 'Use Archify to diagram a web request'. Follow up in chat to adjust the diagram, then open the resulting HTML file in your browser.

```
npx skills add tt-a1i/archify -g
```

Tags: diagrams, agent-skill, architecture, visualization, html