Happy New Year! Check the General info panel for the Holiday Atmosphere! 🎄❄️✨
Beta Release: We are excited to present the first public version of GraphLens! A roadmap and improvement proposals will be introduced later.
New to GraphLens? Try the Demo and Read the FAQ to learn the basics.
GraphLens is currently in Public Beta. While we strive for maximum stability, graph rendering discrepancies may occur in projects with non-standard Angular configurations and complex code patterns. Please review the Current limitations section before use.
GraphLens supports Angular v2+ projects only. Angular libraries and SSR are not supported at this time. React and Vue frameworks are not supported yet. Graphs currently require manual refresh.
GraphLens is a professional VS Code extension for Frontend Developers, Software Architects, Analysts, and QA Specialists working with Angular.
In large-scale Web projects, connections between modules, routes and components often become invisible and tangled, turning into "spaghetti code". This leads to excessive cognitive load and reduced efficiency of development.
GraphLens solves this problem by performing automated analysis of your project, visualizing its structure in the form of interactive graphs and tree views, and providing seamless navigation through project entities in real time.
It acts as an explorer and visualizer for your code, helping you to:
- Visualize the high-level structure and architecture.
- Navigate efficiently through software entities.
- Onboard faster into new or legacy projects.
- Communicate more effectively with your teammates.
- Plan development and refactoring by seeing the complete picture of entities and their relationships.
GraphLens activates automatically if an angular.json file is detected in the VS Code workspace, or when opening TypeScript and HTML files.
The extension scans your VS Code workspace and explores Angular projects and program entities1: Modules, Components, Directives, and Routes. It analyzes Angular metadata properties (imports, declarations, exports, etc.) to resolve relationships between program entities. Based on collected data, it builds interactive directed graphs for three abstraction levels2 of architecture: Modules Hierarchy, Navigation Map, and Components Tree.
GraphLens fully supports both classic NgModules and modern Standalone API architectures. However, the scope of analysis is currently restricted to the Angular program entities mentioned above.
The analysis is performed entirely without AI models. All processing is performed locally – your project data never leaves your machine. The analysis results are deterministic, reproducible and consistent given the same input. Under identical conditions you will always get an accurate "snapshot" of your project's reality.
Commands are accessible via the custom command palette graph-lens.open-command-palette, as well as through the standard Command Palette under the GraphLens title.
Key Commands:
| Command | Description |
|---|---|
GraphLens: Open Command Palette |
Open the main commands menu with all available actions |
GraphLens: Refresh Project |
Re-scan the project and update the graphs manually |
GraphLens: Open WebView |
Open WebView panel with project general info and graphs |
A detailed list of commands is available in the Features -> Commands tab within the extension description in the VS Code.
The GraphLens side panel with cube icon provides a Tree view of your Angular workspaces and projects:
Key features:
- Project Structure: Quick overview of project structure and entities.
- Context Menu: Convenient navigation and context actions via right-click.
- Entity Locator: Quick jump to the entity's location on the graphs.
The main workspace of the extension is an interactive graphs.
Key features:
- Architecture Layout: Comprehensive visualization of Angular Modules, Components, and Routing levels.
- Interactions Highlight: Select any node to trace its specific relationships.
- Context Actions: Seamless navigation to source code, Tree View focusing, and other graph tools.
- Theming: Full support for VS Code High Contrast, Dark and Light themes.
The graphs do not update automatically upon file save. To reflect changes in your code, please run the Refresh current project or Restart exploration commands via the GraphLens palette. Please note that Restart exploration command will trigger re-exploration of the entire workspace.
To ensure GraphLens works correctly, your environment must meet the following criteria:
Requires Visual Studio Code v1.85.0 or newer.
The extension executes analysis scripts, so it will not function in Restricted Mode. Please ensure your project folder is added to Trusted Workspaces.
Critical: For a complete dependency graph analysis, external dependencies must be installed.
Please run npm install (or yarn, pnpm) in your project root before launching GraphLens. If TypeScript cannot resolve imports (files appear red in the editor), the analysis may be incomplete or contain errors.
GraphLens leverages VS Code's built-in capabilities to find definitions and references.
- Ensure the built-in TypeScript and JavaScript Language Features extension is enabled. GraphLens relies on the data provided by the TS Server to correctly analyze projects.
- For projects under active development that may contain TS errors, it's recommended to enable
"typescript.tsserver.experimental.enableProjectDiagnostics": true. This allows the extension to resolve links more accurately during parsing, though it may increase the initial analysis time.
- Program Entities Types: Supports only Angular Modules, Components, Directives, and Routes. Content projection, DI services and other Angular building entities are not supported yet, but are planned for future releases.
- Project Types: Angular libraries are not supported yet.
- Monorepos: Nx workspace tools and specific configurations are not supported.
- Manual Refresh: The graphs do not update automatically upon file save. See the Manual Refresh section for details.
- SSR Support: Server-side logic is not supported.
- Frameworks: Supports Angular v2+ only. React and Vue are not supported at this moment.
- IDE Support: Available for Visual Studio Code only. Extension version for JetBrains IDEs (WebStorm, IntelliJ IDEA) is planned for future releases.
A detailed development roadmap will be presented later.
Does it support Standalone API / Components?
Yes! GraphLens fully supports the Modern Angular API, including Standalone API / Components. It parses the `imports` array in your component metadata to build the dependency graph.
Will it work with React, Vue, or Svelte?
Currently, GraphLens is designed exclusively for Angular v2+. Focusing on a single framework allows the extension to provide better quality of analysis of working projects.
Is there an extension for other code editors?
Currently, no, but it is planned for mid-term future releases.
The extension source code is proprietary, but the project will evolve together with the community. There is a public repository for feedback:
- Found a bug? Create an Issue
- Have an idea? Start a Discussion
- Stay updated: GitHub GraphLens
If you find GraphLens useful, please consider leaving a review on the Marketplace. It helps immensely!
GraphLens is proprietary software. Copyright © 2025 Dmitrii Kostiuk. All Rights Reserved.
This extension is licensed under the GraphLens End-User License Agreement (EULA)
- You are free to: Use for personal, educational, and commercial projects free of charge. You own the generated graphs, tree views, and visualizations.
- You may not: Decompile, reverse engineer, extract internal data, modify, resell, or create derivative works based on this software.
See the full LICENSE file for details.
- Program entities: Refer to the common building blocks of Angular application, currently including Angular Modules, Routes, Components, and Directives.
- Abstraction or Program levels: Represent different layers of the application structure formed by these common entities and include Modules Hierarchy, Navigation Map, and Components Tree.
Created with respect for human ingenuity ✨🚀