archify Skill for Claude Code: Interactive Diagrams and One-Page Explainers

Makes Claude draw checked, interactive diagrams of systems, flows and schemas as one HTML file, or answer a question as a one-page explainer.

Installs: 186.3K; on skills.sh
Stars: 92.4K; on GitHub
Files: 60+; besides SKILL.md
Updated: Oct 2026; last repo commit

archify makes Claude produce a validated, standalone HTML diagram you can open in a browser. It supports 10 types: architecture, workflow, sequence, dataflow, lifecycle, ERD, class, tree, timeline and waterfall. You can describe the idea, paste Mermaid, or ask Claude to read your repository so the diagram is backed by code. Ask for an answer as a page and it builds an explainer instead, with the conclusion first.

This skill runs Node scripts. It writes each artifact into a .archify/ folder in your working directory, then runs a validation and delivery step. The delivery step may also check for a newer version. The skill folder holds 206 files, including the scripts in its bin folder, examples and schemas.

Good for

Developers who want an architecture diagram of a real codebase, traced from the source
Anyone who wants to explain a process, plan or schema with a diagram they can share
Claude Code, Codex, Cursor and OpenCode users who run skills

Install archify

Claude Code

Copy this prompt.

Install the archify skill in Claude Code. Run this command:

npx skills add https://github.com/tt-a1i/archify --skill archify

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

Create validated architecture, workflow, sequence, data-flow, lifecycle/state, ERD, class, tree, timeline, and waterfall diagrams as explorable standalone HTML with dark/light themes, motion and image/SVG/WebM export. Accept requirements or Mermaid; inspect repository evidence for code-backed diagrams. Use when visualizing systems, API calls, pipelines, schemas, histories, timings, or everyday steps, parts, relationships and states. Also turn an answer into a one-page explainer, with the conclusion first, structured panels, native diagrams and charts, when the user asks for a page, an explainer or an answer to share (做成一页, 用页面讲), or proactively when the user's rules opt in with an [archify explainer: ...] line. Not for dashboards.

Sections in SKILL.md

Choose the artifact
Existing candidate handoff
Native diagram authoring
Update awareness
Type router
Mermaid input
Delivery
Optional viewer capabilities
Setup and fallback
Output

Key facts

Author: tt-a1i
License: Apache-2.0
Installs on skills.sh: 186,328 (Nov 2, 2026)
GitHub stars: 92,350 (Nov 2, 2026)
skills.sh audits: Gen Agent Trust Hub: pass, Socket: warn, Snyk: pass
Last commit: 2026-10-31
Files: 206 files in the repo folder, including scripts in bin/ (archify.mjs, finalize.mjs, preview.mjs, visual-check.mjs and more), examples, schemas and assets/template.html
Version: 3.2
Diagram types: 10
Needs: Node.js to run the bin scripts

What it includes

Writes a diagram from a description, Mermaid or your repo, then validates it
Claude picks one of 10 types, writes a candidate.json, and the scripts check it and produce a standalone HTML file with dark and light themes.
Runs code · Native diagram
Answers a question as a one-page HTML explainer, conclusion first
Used when you ask for a page, an explainer or something to share. It has panels, tables, steps, charts and optional diagrams.
Runs code · explainer
Reads flowchart, sequence, state, ER and class Mermaid and redraws it
Claude reads the meaning of the Mermaid diagram and writes a fresh diagram of the matching type. It does not copy the Mermaid styling.
Write · Mermaid input
Reads your code to trace the behavior a diagram shows
For a diagram of a real codebase, Claude follows the repository authoring guide and reads source files while tracing the behavior.
Files · Repository evidence
Validates a candidate and delivers the HTML with a receipt
One command runs the validation and the artifact checks. The receipt also includes an update check.
Runs code · bin/finalize.mjs
Checks the setup and builds a demo into a folder you name
The SKILL.md uses these for setup diagnosis when something does not work.
Runs code · bin/archify.mjs doctor and demo
Image, SVG and WebM export from the viewer
The description lists image, SVG and WebM export. The README adds that explainers can export a long image or print to PDF.
Write · Exports
on-demand, proactive and always-on, set by a line in your rules file
A line like [archify explainer: proactive] in your global rules file makes Claude produce a page unasked. Without it, pages only appear when you ask.
Write · Explainer modes

From the official docs

Permissions

Medium risk

The skill runs Node scripts, writes files into your project, and makes a small update check when it delivers a diagram. Approve the commands Claude asks to run, and ignore .archify/ in git.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

It runs bundled Node scripts
Claude runs bin/finalize.mjs, archify.mjs and other scripts from the skill folder. Approve each command and install the skill only from the author's repo.
It writes files into your project
Each request gets a folder named .archify/<type>-<slug>-<timestamp> in your working directory. Add .archify/ to .gitignore if you do not want it committed.
It can edit your global rules file
Only if you accept its offer of proactive mode. Claude names the file it changes, and you turn the mode off by deleting the line.
The delivery step checks for updates
The README says it may GET a fixed stable manifest only to show an optional reminder, and never downloads or installs updates. The server sees normal HTTP metadata (IP and time). Setting ARCHIFY_UPDATE_CHECK_DISABLED=1 disables networking and reminder-state writes.

Technical details

Talks to	Update check during delivery: a GET to a fixed stable manifest, per the README

Questions

What does archify do?

It makes Claude draw a checked, interactive diagram as one HTML file. Types include architecture, sequence, workflow, ERD and timeline. It can also turn an answer into a one-page explainer.

How do I install it in Claude Code?

Use the install box above. The README also lists a manual route: put the skill under ~/.claude/skills/ or .claude/skills/. Then ask, for example, "use archify to diagram how a request flows through this repo".

Does it work in Claude.ai or the Claude app?

The README says you can upload archify.zip under Settings, Capabilities, Skills. It adds that the result depends on whether the sandbox has Node.js access.

Does it need an API key?

The SKILL.md names no API key. It does need Node.js to run its scripts, and it writes files into a .archify/ folder in your working directory.

Does it phone home?

The delivery step includes an update check. The README says it may fetch a fixed stable manifest only to show an optional reminder, and that it never downloads or installs updates by itself.

Will it change my rules file?

Only if you accept an offer. After an explainer you asked for, Claude may offer proactive mode once, and it adds a line to your global rules file only if you say yes. Delete the line to turn it off.

Can it make dashboards?

No. The description says it is not for dashboards.

Is it safe to install?

It runs Node scripts and writes HTML and JSON files to your project folder, and delivery includes an update check that makes a network request. Read the SKILL.md and approve commands in Claude Code.

Information

updated Nov 2, 2026

Repository: tt-a1i/archify
Folder: archify

tt-a1i/archify skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 4

SKILL.md · github.com
skills.sh listing · skills.sh
GitHub repo · github.com
archify README · github.com