React Architecture Map
An interactive architecture map for TypeScript and JavaScript projects, right inside Visual Studio Code.
React Architecture Map turns the structure of a large project into a clear visual map. It displays files, layers, modules, and the relationships between them, helping you quickly understand an unfamiliar codebase and identify architectural issues before they become technical debt.
Architecture at a Glance
Why use this extension?
As a project grows, browsing folders and searching through imports is no longer enough. The extension analyzes the source code and builds a unified interactive diagram that shows:
- how the main parts of the application are organized;
- which modules depend on each other;
- where architectural layer boundaries are located;
- the direction in which dependencies flow;
- which relationships violate Feature-Sliced Design rules.
The map opens directly inside VS Code and stays connected to the source code: double-click any node to open the corresponding file.
Features
- Analysis of static imports, re-exports,
require(), and dynamic import() calls.
- Resolution of relative paths and aliases from
tsconfig.json and jsconfig.json.
- Detection of Next.js pages, API routes, React components, hooks, stores, and services.
- Grouping files by Feature-Sliced Design layers, slices, and segments.
- Highlighting forbidden dependency directions and cross-slice imports with red arrows.
- Searching and filtering nodes by architectural type.
- Focusing on the direct dependencies of a selected file.
- Zooming, panning, and automatic top-to-bottom graph layout.
- Automatic updates when files are created, modified, deleted, or renamed.
- Saving a portable graph snapshot to
.project-map/graph.json.
Quick Start
- Open a TypeScript or JavaScript project in VS Code.
- Open the Command Palette with
Ctrl/Cmd+Shift+P.
- Run Project Map: Open Architecture Map.
After major changes, rebuild the map with Project Map: Refresh Architecture Map. Test files are hidden by default; enable them with the projectMap.includeTests setting.
Settings
| Setting |
Description |
Default |
projectMap.includeTests |
Include test and spec files in the graph |
false |
projectMap.saveSnapshot |
Save the latest map to .project-map/graph.json |
true |
projectMap.autoRefresh |
Automatically refresh the open map |
true |
projectMap.autoRefreshDelay |
Delay before refreshing, in milliseconds |
600 |
projectMap.maxFiles |
Maximum number of files to analyze |
2500 |
Development
npm install
npm run compile
Press F5 in VS Code to launch the Extension Development Host.
Type checking:
npm run check
Build an installable VSIX package:
npm run package
Current Limitations
The extension builds the map from relationships that can be detected in TypeScript and JavaScript source code. Runtime-only dependencies, framework-generated relationships, and transitions through navigation APIs are not currently displayed automatically.
License
MIT
