archify: a clickable map of the code Claude wrote for you

What it is and why it matters

Claude wrote you a whole project. It works, but three weeks later you no longer know what touches what: which file talks to the database, what you risk if you change that function.

archify is a skill, meaning a bundle of instructions and scripts that Claude uses when needed. You ask for the map in one sentence: Claude reads the project files and archify draws an HTML file, with the main parts as boxes and the connections as arrows. Before handing it over it checks that arrows and labels hold up; if a check fails, Claude fixes it.

It is free and open source (Apache 2.0 license), with more than 90,000 stars on GitHub at the end of October. It is for people who build alone with Claude Code and want to understand their own project or explain it to a client. It also works with Codex, Cursor and OpenCode.

1. Install it in Claude Code

You need Claude Code with Node.js on your computer. On claude.ai, in the browser, it depends on the sandbox having Node.js access: it is meant for Claude Code. In your project folder, paste the official sentence:

Install Archify for me by reading https://raw.githubusercontent.com/tt-a1i/archify/main/llms.txt

Claude reads the instructions, tells you what it will run and asks whether you want it in all projects (global) or only this one. Then it installs and runs the doctor check: archify is ready only if it passes.

From the terminal it is a single line. --copy copies the files instead of linking them, --yes skips the questions; without --global it only applies to the folder you run it in:

npx -y skills@latest add https://archify.si --skill archify --agent claude-code --global --copy --yes

Then the check, with the path the installer prints at the end (for Claude Code usually ~/.claude/skills/archify):

node ~/.claude/skills/archify/bin/archify.mjs doctor

2. The map of your project

In your project folder, copy this request. It is the official one, translated:

Analyze this repository, then use archify to create a high-level runtime architecture diagram. Show 8–12 core components, one primary path, external dependencies, and trust boundaries. Put supporting detail in cards instead of adding more edges.

External dependencies are the services that aren't yours: cloud database, payments, email. Trust boundaries are where data passes to a part you don't control, like from the browser to your server. And 8–12 parts is the point: nobody reads 40 boxes.

Claude follows who calls whom, from the project's entry point to where data comes in, goes out or gets saved. At the end it gives you the link to the file, also saved in the project's .archify folder.

If the project is public on GitHub, add “link each component to the files and lines that support it”: the boxes get an SRC mark and open the code they come from. Commit first: archify cites the last commit, not your open changes.

3. No code: start from an idea

You don't need a repository: an idea, a plan or a process is enough. Claude only needs any folder to write the file in.

Use archify to turn this description into a high-level architecture diagram: [who uses the product, the main parts, the primary path, the external services]. There is no repository. Ask me only for facts that would really change the diagram, mark what you don't know as unknown and keep one clear primary path.

To try it in ten seconds: “Use archify to draw: Browser -> API -> Redis cache -> PostgreSQL fallback”. Then keep going, one change per message:

• “Add authentication.”
• “Highlight the cache-miss path.”
• “Move auth to the left.”
• “Switch to the light theme.”

4. A single page for people who don't code

Sometimes the question is “how does this thing work”. archify also makes a single page: the answer first, then one panel per question. The steps sit beside the diagram and, as you read, light up the parts they talk about.

Use archify to answer as one page, to send to a client who doesn't code: how does [payment] work in my app, from the user's click to [the receipt]? Conclusion first, then the steps beside the diagram of the path. Plain words, no jargon.

This is an HTML file too: it exports as a long image or prints to PDF.

5. The keys to explore the map

Open the file in your computer's browser. From here on you don't need archify: everything is inside the file.

• Click a part: the connected parts light up and its card opens, with what comes in and what goes out. Esc closes it.
• Upstream and Downstream, in the card: everything that leads to that part, or everything that starts from it, step after step.
• R: the route. Click the start and the end, archify shows the shortest way along the arrows and you can play it.
• /: search for a part by name. ?: the map guide, with the actions that file allows.
• E: export. T: light or dark theme. S: change style. F: presentation, with the map taking the whole window, handy on a call.
• + and - to zoom, 0 to go back to the starting view. Live animates the arrows, Still stops them.

The arrows are the ones Claude wrote into the map: Upstream and Downstream follow those, not the running program. They tell you where to look, not the impact of a change: you still reread the code yourself.

6. Send it to a client

The map is a single file. You send it by email or in a chat, whoever gets it opens it in the browser and has everything, without installing anything. Only external links, like the ones to the code on GitHub, need a connection.

For an image to put in a slide, press E:

• The whole map as a PNG to the clipboard, or as a PNG, JPEG, WebP, SVG or animated WebM video download.
• Route Share Card: after tracing a route with R, a 1200×630 image with that route highlighted and the rest of the map around it.
• Reach Share Card: the same thing, after Upstream or Downstream.

Images can't be clicked: if the client needs to explore, send them the HTML. And reread the labels and cards first: they may contain details of your code you don't want to show.

Common mistakes

• Asking to “draw the whole project”: you get a map nobody can read. Ask for 8–12 parts and one path, or one feature at a time.
• Taking the arrows as truth: archify's checks say the drawing is well made, not that the program behaves that way.
• Opening the map on your phone: it isn't designed for small screens. Use a computer.
• Looking for a link to share it online: archify doesn't host maps. You send the file or an image.

Checklist

• I installed archify and the doctor check passed
• I asked for my project's map with 8–12 parts and one path
• I clicked a part and tried Upstream and Downstream
• I traced a route with R and exported its Share Card
• I sent the HTML file to someone and they opened it without installing anything

Frequently asked questions