Archify Draws Architecture Diagrams Your Reviewers Can Verify

Ask an agent for an architecture diagram and you usually get a picture: no source of truth, no way to check an edge, no way to tell what changed. Archify, a 66k-star agent skill, works differently — your agent writes typed JSON, and Archify deterministically compiles it into a self-contained, interactive HTML diagram that passed validation before you ever saw it.

Why This Skill Matters

Two properties set it apart. First, validation is atomic: schema, layout, HTML/SVG, route, and label-to-route clearance checks must all pass before a finished artifact replaces the last known good output. Failures come back as machine-readable repair receipts — stable rule codes, the exact subject, measured evidence — instead of a stack trace. Second, interaction stays truthful: searching nodes, tracing upstream or downstream reach, probing routes, and playing guided stories all reuse the authored nodes and relationships. Nothing invents topology.

Pick the diagram by the question it answers:

Five types, four visual presets, dark and light themes.

Installation

npx skills add tt-a1i/archify -g

For Claude Code the skill lands in ~/.claude/skills/ (or .claude/skills/ per project); Codex CLI and OpenCode get equivalent directories. To try it without installing:

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

Real Workflow: Diagram a System from a Description

No repository required. In your agent:

Use Archify to draw: Browser -> API -> Redis cache -> PostgreSQL fallback.

The agent generates the typed JSON IR, Archify validates and renders it, and you refine in chat — add Redis, move auth to the left, highlight the rollback path — while the typed source keeps every iteration targeted.

Real Workflow: Map a Real Repository, Then Review a Change

For a source-grounded map, open a repo and ask:

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.

The CLI does the heavier lifting: node archify/bin/archify.mjs guide "Show an API request with Redis cache miss" picks a diagram type from a plain-language question, while validate --json and deliver --json report failures as repair receipts. For design or PR review, Architecture Delta compares two validated snapshots:

node archify/bin/archify.mjs compare architecture base.json head.json architecture-delta.html --json

You get Before / Delta / After with exact added, removed, changed, moved, and rerouted facts as a machine receipt — and, by design, no inferred impact, risk, or merge safety.

Tips

• Set "meta": { "locale": "zh-CN" } in the source to localize the page chrome — title, legend, states, accessibility labels — into Chinese; authored content stays in the language you wrote it.
• The export menu copies PNG to the clipboard and downloads SVG, WebM, and 1200×630 share cards; the route and reach share cards capture one authored path or reach exactly as traced, without claiming runtime impact.
• In the viewer, ? opens the diagram guide, / searches nodes, R probes a route, L compares two roles, and P plays a guided story.
• Automatic Mermaid parsing, general-purpose auto-layout, hosted sharing, and WYSIWYG editing are intentionally out of scope — Archify targets communication artifacts, not freeform drawing.

When Not to Use This

If you need a quick throwaway sketch or a freeform illustration, a whiteboard or drawing tool is faster; Archify spends its effort on typed, validated, verifiable output. It is also not a monitoring tool — the README is explicit that its deployment-ownership profile never inspects live infrastructure — so it maps systems as authored or as read from source, not as they behave in production.

See the leaderboard for more skills.