# Archify **Archify is an open-source ([[MIT License]]) [[AI Agent Skills|agent skill]] that turns an idea, a plan, a question or a codebase into a single, self-contained, interactive HTML diagram.** It works with [[Claude Code]], [[Codex CLI]], [[Cursor]] and [[OpenCode]]. You describe what you want ("Use Archify to draw: Browser -> API -> Redis cache -> PostgreSQL fallback"), the agent builds it, and you refine it by chatting. Why should you care? Because architecture diagrams rot. Someone draws the boxes once, the code moves on, and six months later the diagram is decoration. Archify goes after that problem from two sides: every diagram is validated before you see it, and nodes can point at the exact code they describe. ## How it works The pipeline is the interesting part. 1. The agent writes a typed JSON IR (intermediate representation) of the diagram. It never writes the HTML or SVG by hand. 2. Bundled validators check that IR: schema, layout, HTML/SVG and routes. 3. When a check fails, the agent gets structured JSON back with a rule code and a repair hint, fixes the IR and tries again. 4. Only a passing diagram gets delivered, as one standalone HTML file. Nothing to install to view it; any browser opens it. This is the generate-then-verify pattern applied to diagrams. The model does what it's good at (deciding what the system looks like). Deterministic code does what the model is bad at: checking that arrows connect, labels don't collide and the markup is valid. [[LLM Structured Outputs]] constrain the shape of an answer; Archify adds validators for the meaning and repair hints that close the [[Agentic loops|loop]]. In [[AI Verifiability]] terms, "draw me a nice diagram" became a task a program can check. ## What you get - **Diagram types**: architecture, workflow, sequence, data flow, lifecycle, ERD, class, tree, timeline and waterfall - **Explainer pages**: a question answered on one page, with numbered sources and validated diagrams - **Interactivity**: find and focus nodes, trace upstream and downstream reach, probe routes, presentation mode, radar overview, light and dark themes - **Exports**: PNG to the clipboard, WebP/JPG, PDF, video and share cards - **Source evidence**: nodes can link to Git-verified file and line ranges, pinned to a commit - **Architecture Delta**: a before/after comparison for design or PR review. It shows what changed and leaves the risk assessment to you - **Extras**: an optional loopback-only live preview, and localization in en, zh-CN, zh-TW, es, ko and ar Source evidence is the feature I'd pay the most attention to. A box labeled "Auth service" that links to specific lines at a specific commit can be checked by a reviewer (or by another agent). A box without that link is just a claim. That's what makes an architecture doc checkable instead of decorative, and it fits how I think about [[Software Architecture]]: if the boundaries only exist in a diagram, they don't exist. ## Scope and privacy Out of scope, on purpose: [[Mermaid]] parsing, general auto-layout, hosted sharing and WYSIWYG editing. I like that. A narrow scope is what makes the validators possible. So pick the tool for the job. Text diagrams that live inside Markdown are still Mermaid territory (the diagram skill I use for DeveloPassion content renders Mermaid). An architecture model maintained as code calls for [[likec4]], and hand-drawn sketches belong in [[Excalidraw]]. Archify fits when you want a polished, explorable diagram generated by your coding agent, often straight from the codebase. Privacy is handled well. The update check sends no project data and can be turned off with `ARCHIFY_UPDATE_CHECK_DISABLED=1`. The generated HTML contains no telemetry. ## Install ```bash npx skills add tt-a1i/archify -g ``` That goes through [[Skills.sh|skills.sh]] (`-g` installs it globally, for every project). Then prompt your agent. The bundled CLI also exposes `node bin/archify.mjs doctor|guide|validate|deliver`. ## A model for building skills If you write skills, study this one. A skill that only contains instructions leaves the agent guessing whether its output is right. Archify ships the checker along with the instructions: a typed IR, validators the agent runs itself, and error messages written for an agent to act on (rule codes, repair hints). That's the most useful idea I'd take from it for my own skills, and it's a concrete version of a rule from my [[AI Skill Best Practices|skill-writing checklist]]: validate output before returning it. ## Status (October 2026) - v3.2.0, released on 2026-10-18 - About 85.5k GitHub stars, 5.8k forks and 1,736 commits - The project reports 130K+ installs on skills.sh and a #1 weekly spot on GitHub Trending - Community on Discord, WeChat and QQ; several sponsors ## References - Source code: https://github.com/tt-a1i/archify - Website: https://archify.si ## Related - [[AI Agent Skills]] - [[AI Skill Best Practices]] - [[Skills.sh]] - [[Mermaid]] (text-based diagrams; Archify does not parse them) - [[likec4]] (architecture as code, also with interactive diagrams) - [[Excalidraw]] - [[Schematic Diagrams]] - [[Software Architecture]] - [[Structuring AI responses as HTML]] - [[AI Verifiability]] - [[Visual thinking]]