An interactive, visual deep-dive into the architecture of Claude Code — Anthropic's AI coding assistant. Accessible to both developers and non-technical readers.
Claude Code is a 512K-line TypeScript CLI that lets you interact with Claude directly from the terminal. This project breaks down its architecture through interactive visualizations, real source code analysis, and design decision essays — making it truly accessible to everyone.
- 26 pages across 13 topics, each in English and 中文
- Dark / Light theme with full Shiki syntax highlighting adaptation
- Interactive components: architecture map, bubble chart, flow diagrams, permission simulator, tool scheduling demo, CodeTracer (3 call chains), API data viewer
- Deep Dive sections on every page with real source code and design decision analysis
- Full-text search via Pagefind (Cmd+K)
- Glossary with 12 key technical terms
- Page navigation: previous/next links, related page recommendations, section anchor links
- Responsive design: desktop, tablet, mobile
- Accessibility: ARIA attributes, keyboard navigation, focus management
| Page | Description |
|---|---|
| Overview | Architecture overview with interactive module bubble chart |
| Query Pipeline | User input → API → tools → response, with real API data examples |
| Tool System | 45+ tools with parallel read / serial write scheduling |
| Permission & Security | Three-layer defense: ML classifier → rules → user confirmation |
| Page | Description |
|---|---|
| Terminal UI | React + Ink rendering pipeline for terminal interfaces |
| Plugin & Skill System | Extensible plugin architecture and skill marketplace |
| Message Compaction | 4 strategies for managing context window limits |
| Agent System | Multi-agent coordination and task decomposition |
| Page | Description |
|---|---|
| IDE Bridge | Real-time VS Code ↔ CLI communication |
| MCP Integration | Model Context Protocol for external tool connectivity |
| Glossary | Key technical terms explained |
| Easter Eggs | Fun discoveries hiding in 512K lines of code |
All pages available in English and 中文.
- Astro — Static site generator with zero-JS-by-default pages
- React — Interactive islands (hydrated on viewport entry)
- Tailwind CSS — Dark/light theme with CSS variables
- D3.js — Architecture map and bubble chart visualizations
- Framer Motion — Scroll-triggered animations
- Shiki — Syntax highlighting (dark + light themes)
- Pagefind — Static full-text search
npm install
npm run dev # Start dev server at localhost:4321
npm run build # Build static site to dist/ (includes Pagefind indexing)MIT