Show Architecture
Use annotated file trees to visualize and explain architecture.
When to Use
- •Exploring unfamiliar code
- •Explaining how a feature works
- •Designing new architecture
- •Reviewing or updating structure
- •On explicit request
Format
code
directory/ ├── file.ts* <- annotation (3-5 words) ├── subdirectory/ │ ├── nested.ts* <- changed file marked with * │ └── related.ts <- context file (no *) └── context.ts
Rules
- •Box-drawing:
├──,└──,│for structure - •Annotations:
<-arrow, brief (3-5 words) - •Changed files: mark with
*suffix (like commit-message) - •Context-dependent: adapt annotations to purpose
- •Skip irrelevant: only show relevant files, omit the rest entirely
- •Never write to files. Output inline only. No exceptions.
Annotation Styles
Overview (responsibilities):
code
src/ ├── core/ │ ├── engine.ts* <- orchestrates subsystems │ └── config.ts <- runtime settings ├── adapters/ │ ├── http.ts* <- express server │ └── db.ts <- postgres connection └── index.ts <- entrypoint
Feature deep-dive (data flow):
code
src/auth/ ├── login.ts <- receives credentials ├── validate.ts* <- checks against db ├── token.ts* <- issues JWT └── middleware.ts <- verifies on requests
Debugging (dependencies):
code
src/
├── api/handler.ts <- calls UserService
├── services/
│ └── UserService.ts <- calls Repository
└── repos/
└── UserRepo.ts* <- fails here
Anti-patterns
- •Showing every file (overwhelming)
- •Missing annotations (useless tree)
- •Annotations that repeat filename