ArchMap automatically scans your project and builds an interactive architecture diagram right inside VS Code — no backend, no config, no internet required.
Features
4 Views in one panel
| View | What it shows |
|---|---|
| Modules | Top-level folders as architectural layers (Frontend, Backend, API, Services, DB…) with health scores |
| Files | Every source file as a node — sorted by how many other files import it (most-used at top) |
| Inside | Click any file → see its functions, classes, interfaces, enums and how they call each other |
| All | Project-wide graph — all exported functions/classes from all files with cross-file connections |
Works with any language
ArchMap uses VS Code's built-in Language Server Protocol — if you have a language extension installed (TypeScript, Python, Go, Rust, Java, C#, etc.) ArchMap will parse that language automatically. No manual config.
Built-in regex fallback covers: TypeScript · JavaScript · Python · Go · Rust · Java · Kotlin · C# · Ruby · PHP · CSS/SCSS · SQL · GraphQL · Prisma · Shell
Interactive diagram
- Drag any node to rearrange
- Zoom with mouse wheel or
+/-buttons - Click a node → detailed info in the sidebar (exports, imports, dependencies, health issues)
- Position preserved when switching between tabs
- Live indicator — diagram auto-updates when you save files
Health scores
Every module and file gets a score (0–100%) based on:
- File size (lines of code)
- Number of dependencies (imports)
- Whether it has any exports
- Test coverage presence
Integrated process runner
- Open any
.ts,.js,.pyfile in the editor - Click ▶ Run in the ArchMap panel
- See stdout/stderr with timestamps in the built-in log panel
- Click ■ Stop to kill the process
Quick Start
- Open a project folder in VS Code
- Press
Ctrl+Shift+P→ ArchMap: Generate Architecture Diagram - The diagram panel opens beside your editor
Or use the command palette: Ctrl+Shift+P → ArchMap
Requirements
- VS Code
1.85.0or higher - No backend, no external tools needed
Configuration
| Setting | Default | Description |
|---|---|---|
archmap.ignoredDirs |
["node_modules", "dist", "out", ".git", "build", ".next", "coverage"] |
Directories to skip during scan |
Supported Languages
| Language | Symbols | Call Graph |
|---|---|---|
| TypeScript / JavaScript | ✅ Full (via LSP + regex) | ✅ Yes |
| Python | ✅ Full (via LSP + regex) | — |
| Go, Rust, Java, Kotlin, C#, Ruby, PHP | ✅ via LSP (if extension installed) | — |
| CSS / SCSS / SASS / LESS | ✅ Variables & selectors | — |
| SQL | ✅ Tables, views, procedures | — |
| GraphQL / Prisma | ✅ Types, models | — |
| Shell / PowerShell | ✅ Functions | — |
How it works
- File scan — ArchMap walks your workspace, reads imports/exports from each file using regex patterns
- Module detection — folders are classified by name/contents into architectural types (frontend, backend, api, services, database, etc.)
- Diagram generation — files and modules are laid out in layers based on their role and connection count
- Symbol parsing — when you open a file in Inside/All view, ArchMap asks VS Code's Language Server for symbols, then augments with call-graph data from its own parser
Author
blacksibainu