yuanzhi-yw/agent-architecture-map

Agent Architecture Map is a visual, interactive diagram that explains how AI agent systems are put together, without tying the explanation to any one specific framework. It walks through fourteen layers of increasing depth, starting from the core loop an agent runs on and moving through tools, permissions, hooks, prompts and skills, context compression, memory, resilience, planning, sub agents, scheduled triggers, message delivery, and external integrations, ending with a full overview of the whole system. The project is a single page you open in a browser, hosted for free on GitHub Pages so anyone can view it without installing anything. Clicking on any node in the map opens a detail panel with more explanation about that piece of the architecture. The interface supports switching between Chinese and English, switching between light and dark themes, searching to jump directly to a topic, highlighting related neighboring nodes, and animated automatic layout of the diagram. Under the hood it is built with plain static HTML and vanilla JavaScript. There is no framework dependency and no build step, so the whole thing can be viewed by opening the page directly or hosting the files anywhere that serves static content. The author credits the shareAI-lab/learn-claude-code project as a reference for the architectural analysis approach used here, and points readers to a related discussion thread on the LINUX.DO forum for community conversation. The project is released under the MIT license.