{"id":82428,"date":"2026-08-29T19:44:21","date_gmt":"2026-08-29T11:44:21","guid":{"rendered":"https:\/\/www.ahhhhfs.com\/82428\/"},"modified":"2026-09-08T18:35:24","modified_gmt":"2026-09-08T10:35:24","slug":"archify-architecture-diagram-skill","status":"publish","type":"post","link":"https:\/\/www.ahhhhfs.com\/en\/82428\/","title":{"rendered":"Archify: Generate Interactive Architecture Diagrams from Codebases with Claude Code and Codex"},"content":{"rendered":"

Archify<\/strong> is an open-source Agent Skill that helps Cursor, Claude Code, Codex CLI, and OpenCode turn a codebase or system description into an interactive architecture diagram. The coding agent analyzes the available context and produces structured data; Archify validates the diagram rules and renders the result as a self-contained HTML file.<\/p>\n

This is useful when a project changes faster than its documentation. Architecture diagrams are often needed for design reviews, pull requests, and handoffs, but manually rebuilding them in a separate drawing tool takes time and makes it easy for the documentation to fall behind.<\/p>\n

Archify is not a browser-based drawing website and does not include a drag-and-drop canvas. It is designed for developers who already work with AI coding agents and want to create technical diagrams inside the same workflow.<\/p>\n

\"Archify<\/a><\/p>\n

After installation, you can ask the agent to analyze the current repository and create a runtime architecture diagram. The model organizes the code into a typed intermediate representation, while Archify handles diagram validation and rendering.<\/p>\n

What Is Archify and How Is It Different from Online Diagram Tools?<\/h2>\n

Archify works differently from online tools that ask you to paste a GitHub repository URL. It runs mainly as an Agent Skill inside Cursor, Claude Code, Codex CLI, or OpenCode, and it also includes a Node.js command-line tool for validation and rendering. Archify does not contain its own large language model.<\/p>\n

\"Archify<\/a><\/p>\n

When you ask it to analyze a repository, the model used by the host agent reads the files it is allowed to access and produces typed JSON IR, or intermediate representation. Archify receives that structured description, checks its schema, layout, and routes, and compiles it into an interactive HTML diagram.<\/p>\n

You can also start without a repository by describing the system, components, and connections in chat. Whether source code is sent to a cloud model depends on the agent, model provider, and privacy settings you use.<\/p>\n

How Archify processes a diagram:<\/strong>
\nThe agent reads an accessible codebase or system description \u2192 the model creates typed JSON IR \u2192 Archify checks the schema, layout, and routes \u2192 Archify renders an interactive HTML diagram.<\/div>\n

\"Overview<\/a><\/p>\n

How Does Archify Generate and Validate Interactive Architecture Diagrams?<\/h2>\n

Archify checks the typed JSON IR before producing the final diagram. Its validation covers the schema, component placement, HTML and SVG output, connection routes, and the spacing between labels and routes.<\/p>\n

If a check fails, the tool returns the relevant rule, affected object, and supported repair information. This allows the agent to adjust the problematic part instead of rebuilding the entire diagram without knowing what went wrong.<\/p>\n

\"Archify<\/a><\/p>\n

Preview is an optional local authoring mode that reloads only verified revisions and keeps the last valid diagram visible when a new edit fails. Deliver checks a candidate file before it replaces the existing output.<\/p>\n

These checks help prevent broken files, invalid layouts, and routing conflicts. They do not independently verify whether the services and relationships shown in the diagram match a live production system. Those details still come from the system description or the agent\u2019s interpretation of the available code.<\/p>\n

Supported Diagram Types and Export Formats<\/h2>\n

\"Five<\/a><\/p>\n

Archify supports five diagram types for different engineering and documentation tasks:<\/p>\n