A leave plan, a P99 spike, a first HTTPS visit, or a whole codebase — your AI agent answers with an explorable map, or a one-page answer that puts the conclusion first and cites its sources. Either way it is one HTML file, validated before it ships.
npx skills add tt-a1i/archify -g
This is the real generated artifact, not a screenshot. Lanes, boundaries, and every authored edge — scroll to move its camera.
Agent Tool Call — policy, execution, recovery, and evidence01One-page answers
Not every answer is one diagram. Ask your agent to answer as a page: the conclusion comes first, then one panel per question with tables, steps, charts, code and validated diagrams. Steps light the diagram they walk through, claims cite their sources, and code is pinned to a commit.
Why did P99 jump while the mean stayed flat?
What crosses the wire before the first request?
How does finalize keep the last good file? Read from the repo.
What should I confirm before signing a lease?
Four page styles, light and dark, export to a long image or PDF. Ask about any panel and your agent revises just that panel.
02Beyond code
Leave plans, job hunts, renting, a monthly budget — each one below is a real Archify artifact, generated and validated exactly like a system diagram. Open one and click around.
How should I spread my leave across the year?
一年的年假怎么排
Where does each job application stand?
Where Each Job Application Stands
Where does my paycheck go each month?
Where a Paycheck Goes Each Month
Who says what when I rent a flat?
租一套房，一来一回
Numbers in these examples are illustrative. Describe your own situation and your agent draws yours.
03Diagram types
Ask the question you actually have. Archify picks the picture that answers it — for a software system, a database, a codebase, an incident, or something in your own life.
Ten supported diagram types: Architecture, Workflow, Sequence, Dataflow, Lifecycle, ERD, Class, Tree, Timeline, and Waterfall. The recipes below are selected starting points.
The parts of something and how they connect — a household's accounts and cards, a team's roles, or a cloud system's services, databases, and security boundaries.
Steps across people or stages — a visa application, a leave plan, onboarding, an approval chain, or a CI/CD pipeline, lane by lane.
Back-and-forth in order — renting a flat through an agent, an expense claim, or an API call chain with its returns.
Where something moves and where it lands — a paycheck into bills and savings, documents through review, or data through a pipeline.
States and what moves between them — job applications, an order, a passport renewal, or a deployment — with waits, retries, and endings.
Tables with their full column lists, primary, foreign and unique keys, and crow's-foot cardinality at both ends of every relationship.
Classes and interfaces with their members — inheritance, implementation, composition and dependencies, each drawn in its own notation.
One root and its branches — a repository's modules, a product platform, a team, or a taxonomy, level by level.
Events on a real time axis — an incident, a release history, a project — with time zones handled and long quiet stretches broken out.
Nested spans on one clock — a request, a build, an agent run — so the slow step and the work that ran in parallel stand out.
04Verified delivery
Finalization validates and delivers the artifact, then checks the delivered file. Diagrams also run a browser check; one-page answers run it when requested. Later check failures are reported and do not roll back the delivered file.
validateThe source means what it saysSchema, IDs and references, then the layout itself: crossings, label clearance, corridors and legend room. A blank chart cell is an error, not a zero.
deliverNothing half-writtenRendered in a staging copy beside the target and swapped in atomically after delivery checks pass. A failed render does not replace the existing file.
checkThe file is the one that was checkedThe delivered HTML is read back and checked again, and the receipt records the hashes of the source and of this exact file.
browser-checkReadable in a real browserWhen run, Chrome checks the artifact at several desktop sizes for overflow, text readability and controls. Browser checks are opt-in for one-page answers.
archify finalize sequence cache-miss.json cache-miss.html --browser-check
finalize pass: cache-miss.html
gates validate:pass deliver:pass check:pass browser-check:pass
receipt cache-miss.finalize.json
From the receipt
252f687dbe79fbf9…05Output
Every diagram ships with coordinated dark and light variable sets. The HTML theme toggle and the SVG @media prefers-color-scheme rule switch together — one file follows the reader's theme.
LIGHT · DARK · ONE FILE
PNG, JPEG, WebP, dual-theme SVG, WebM motion, or straight to the clipboard — every export renders natively in the browser from the same menu.
PNG, JPEG, WebP — all rasterized natively at up to 4× source resolution by the browser. No upsampling blur. Sharp on retina displays, slides, and print.
One HTML file. Zero dependencies, no server, no runtime. Open it in any browser and it works. Share by attaching it to an email or PR comment.
"Move the summer trip to August", "add Redis", "make the deadline red" — refine in plain words. No diagram editor to learn.
Route Journey keeps the complete authored path visible while you inspect any stop or play one finite, reader-controlled pass over each exact incoming relationship.
INSPECT · PLAY · PAUSEDiagram nodes and page claims can point at their sources. Repository links are pinned to a full commit on GitHub or GitLab, and a page quotes the code in a source card.
GITHUB · GITLAB · PINNEDAsk about any panel, or a passage you select, and copy a message that names it. Your agent revises that panel and leaves the rest of the page untouched.
ASK · COPY · PATCHEach diagram type moves in a way that matches how it reads. Readers can switch to Still; motion never changes the layout or the exported geometry.
Viewer controls ship in English, 简体中文, 繁體中文, Español and 한국어. Any other language can be supplied as data with meta.translations.
archify compare draws an architecture's before and after as one delta diagram — added, removed and rerouted relationships — with a machine-readable receipt.
06Design system
Seven node colours, consistent in both themes. The legend renames them for your story — Backend can read as Vacation, Security as Rule.
07Quick start
One checked Skill for Claude Code, Codex, Cursor, OpenCode, and GitHub Copilot. Pick your agent for the exact command.
# Install globally for your agent
npx -y skills add tt-a1i/archify --skill archify --agent claude-code --global --copy --yes
# Or try it once with Codex, no permanent install
npx skills use tt-a1i/archify@archify --agent codex
# Then just ask
› Use Archify to plan my annual leave: 10 days, plus 2 comp days that expire at the end of June.
› Use Archify to answer as one page: our API's P99 went from 80 ms to 600 ms while the mean barely moved. Why?
Run the command for your agent, or open the agent-aware quick start for project-scoped installs.
Describe the steps, people, parts, or states, or ask the question you have — or ask your agent to read a repository first.
Ask for a map to explore, or a one-page answer for the conclusion and its reasons. Either way you get one self-contained HTML file to open in any browser and refine in chat.
Learn to create and check diagrams with your agent →
Inside every artifact
This Archify is the open-source diagram skill at archify.si, maintained in the tt-a1i/archify repository.
Archify is an open-source Agent Skill for turning a system, process, or plan into a diagram, or a question into a one-page answer. For a diagram the agent authors typed JSON; for a page, a Markdown draft. Archify renders and validates a self-contained interactive HTML artifact. The Skill and renderers are licensed under MIT.
A page that leads with the conclusion and its reasons, then answers one question per panel with prose, tables, steps, charts, code and validated diagrams. Claims cite numbered sources, repository excerpts are read from a pinned commit, and blank chart data is rejected rather than drawn as zero. Readers can switch between four styles, export a long image or PDF, and ask about a single panel.
Start with a plain-language description, a plan, existing Mermaid text, or repository evidence. A repository is optional. Your agent interprets the input and creates typed JSON for a diagram or a Markdown draft for a one-page answer; Archify does not promise automatic parsing of every Mermaid construct. Missing facts should be marked or clarified.
The installation examples cover Claude Code, Codex, Cursor, OpenCode, and GitHub Copilot. They use the same Archify Skill. Agent access to files, a local Node.js runtime, and any tools needed for the requested export remain part of your environment.
The primary deliverable is a self-contained HTML file with its source: typed JSON for diagrams or a Markdown draft for one-page answers. Open it in a browser to explore and export; available interactions depend on the artifact type. Validation checks the authored artifact, not the truth of every claim or runtime system behavior. Archify does not generate photos or illustrations. It is not a hosted collaboration service or a general-purpose WYSIWYG editor.
Exports include PNG, JPEG, WebP, SVG, and WebM. Availability depends on the format and browser or local tooling; open a proof artifact to check the export menu before choosing a delivery format.
The default installation command uses the stable main source. Development examples describe their own build and may include features not yet in a stable release.
One command installs the checked skill for your agent — your next map or one-page answer is a chat message away.
Use Archify to answer as one page: why did P99 jump while the mean stayed flat?