See any codebase as a map, not a maze.
ArchMap turns a repository into an interactive architecture map — entry points, routes, services, data layer, external dependencies — with critical-path highlighting, dead-code detection, and optional plain-English AI annotations. It is a single static page with zero backend: all analysis runs in your browser.
Live: https://0-uddeshya-0.github.io/archmap/
| Source | How | Privacy |
|---|---|---|
| GitHub URL | Paste https://github.com/owner/repo (private repos: add a token in Settings) |
Fetched client-side from the GitHub API |
| Local folder | Drag-and-drop or folder picker | Files never leave your machine |
| Deployed website | Best-effort surface map (pages, scripts, form endpoints) | Limited by CORS; real architecture needs source |
| archmap.json | Import a map generated by the bundled Claude Code skill or exported earlier | Pure data, shareable |
- Real dependency graph for ten languages: JS/TS and Python (path-resolved imports, tsconfig aliases, monorepo packages) plus C#, Go, Java, Kotlin, Rust, Ruby, PHP, and C/C++ via a two-pass symbol table — each file's namespace/package declarations are matched against imports, the approach proven by emerge
- Cluster inference: client / entry / routes / services / data / external / tests
- HTTP route extraction (Express-style
app.get(...), Flask/FastAPI decorators,urls.py) - Critical path from the entry point to the data/external layer
- Dead code: files whose exports have zero live callers anywhere in the repo
- Hot paths (fan-in), oversized files, multiple-datastore warnings, framework detection
Add an Anthropic API key in Settings and hit ✦ AI enrich: Claude (claude-opus-4-8) reads excerpts of the most important files and writes plain-English descriptions per node, a system overview, and maintainer findings. The key is stored only in your browser's localStorage; requests go directly to api.anthropic.com.
Turn the map into a debugging view: nodes with open bugs glow red, nodes with planned repairs glow green, and clicking any node opens a structured panel — known bugs (severity + file:line evidence + a caution to re-verify), planned fixes, what the file does, and what feeds it.
Load bugs three ways:
- ✦ Find bugs with AI — Claude scans the most important files and reports only problems it can actually see, each with
path:lineevidence (bring your own key; nothing is uploaded). - Paste or import your own list as JSON —
{ "bugs": { "<node-id>": [{ "sev": "HIGH", "t": "…", "ev": ["src/app.js:42"] }] }, "fixes": { "<node-id>": [{ "t": "…" }] } }— stays in your browser. - Ship it in an
archmap.jsonfrom the Claude Code skill.
Toggle it with the 🐛 Bugs & repairs chip. Bugs and fixes round-trip through both the JSON and the self-contained HTML export.
- Search any file by name or path in the top bar — Enter jumps to it.
- Hover a node to spotlight just its connections; click to pin; double-click to zoom to it.
- Filter by cluster or feature with the chips, or Show all wires for the full import graph.
- Export HTML — one self-contained file (embedded data + renderer), openable anywhere with no server. Same deliverable as the original
architecture-mapskill. - JSON — portable
*.archmap.json, re-importable on the site.
skill/architecture-map/SKILL.md is an upgraded version of the architecture-map skill. Run it inside Claude Code on any repo for the deepest analysis (the model actually reads every file), and it emits both the self-contained HTML and an archmap.json that this site can open — so skill users and site users share one format.
Install: copy skill/architecture-map/ to ~/.claude/skills/.
No build step. Serve the directory statically:
python3 -m http.server 4747
# → http://localhost:4747Everything is vanilla ES modules: js/analyze.js (static analysis), js/ingest.js (GitHub/local/website loaders), js/render.js (SVG renderer, also embedded in HTML exports), js/ai.js (Anthropic enrichment), js/export.js, js/main.js.