You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
> **Beta Release:** We are excited to present the first public version of GraphLens! A roadmap and improvement proposals will be introduced later.
37
37
38
-
> **New to GraphLens?**[Try Demo](https://github.com/GraphLens/demo) to learn the basics.
38
+
> **New to GraphLens?**[Try the Demo](https://github.com/GraphLens/demo) and [Read the FAQ](#6-faq) to learn the basics.
39
39
40
40
41
41
### ⚠️ Disclaimer
@@ -44,17 +44,18 @@ GraphLens is currently in **Public Beta**. While we strive for maximum stability
44
44
45
45
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.
46
46
47
-
48
47
---
49
48
49
+
50
50
## 1. Definition & Purpose
51
51
52
52
**GraphLens** is a professional VS Code extension for Frontend Developers, Software Architects, Analysts, and QA Specialists working with Angular.
53
53
54
-
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 and visualizing its structure on-demand.
54
+
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.
55
55
56
-
It acts as an explorer and visualizer for your code, helping you to:
56
+
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.
57
57
58
+
It acts as an explorer and visualizer for your code, helping you to:
58
59
-**Visualize** the high-level structure and architecture.
59
60
-**Navigate** efficiently through software entities.
60
61
-**Onboard** faster into new or legacy projects.
@@ -68,9 +69,11 @@ It acts as an explorer and visualizer for your code, helping you to:
68
69
69
70
GraphLens activates automatically if an `angular.json` file is detected in the VS Code workspace, or when opening TypeScript and HTML files.
70
71
71
-
The extension scans your VS Code workspace and explores Angular projects and _program entities_: modules, components, directives, and routes. Based on this data, it builds interactive directed graphs for three _program levels_ of architecture: **Modules Hierarchy**, **Navigation Map**, and **Components Tree**.
72
+
The extension scans your VS Code workspace and explores Angular projects and _program entities_<sup>1</sup>: 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 levels_<sup>2</sup> of architecture: Modules Hierarchy, Navigation Map, and Components Tree.
73
+
74
+
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.
72
75
73
-
The analysis is performed 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.
76
+
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.
74
77
75
78
#### Quick demonstration
76
79
@@ -136,7 +139,7 @@ Please run `npm install` (or `yarn`, `pnpm`) in your project root before launchi
136
139
137
140
GraphLens leverages VS Code's built-in capabilities to find definitions and references.
138
141
139
-
- Ensure the built-in **TypeScript and JavaScript Language Features** extension is enabled.
142
+
- 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.
140
143
- 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.
141
144
142
145
@@ -156,7 +159,28 @@ GraphLens leverages VS Code's built-in capabilities to find definitions and refe
156
159
A detailed development roadmap will be presented later.
157
160
158
161
159
-
## 6. Feedback & Contribution
162
+
## 6. FAQ
163
+
164
+
<details>
165
+
<summary><strong>Does it support Standalone API / Components?</strong></summary>
166
+
167
+
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.
168
+
</details>
169
+
170
+
<details>
171
+
<summary><strong>Will it work with React, Vue, or Svelte?</strong></summary>
172
+
173
+
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.
174
+
</details>
175
+
176
+
<details>
177
+
<summary><strong>Is there an extension for other code editors?</strong></summary>
178
+
179
+
Currently, no, but it is planned for mid-term future releases.
180
+
</details>
181
+
182
+
183
+
## 7. Feedback & Contribution
160
184
161
185
The extension source code is proprietary, but the project will evolve together with the community.
162
186
There is a public repository for feedback:
@@ -168,7 +192,7 @@ There is a public repository for feedback:
168
192
If you find GraphLens useful, please consider [leaving a review on the Marketplace](https://marketplace.visualstudio.com/items?itemName=graphlens.graphlens). It helps immensely!
@@ -180,6 +204,13 @@ This extension is licensed under the **GraphLens End-User License Agreement (EUL
180
204
181
205
See the full [LICENSE](LICENSE) file for details.
182
206
207
+
---
208
+
209
+
210
+
### 📚 Notes & Terminology
211
+
212
+
1.**Program entities:** Refer to the common building blocks of Angular application, currently including Angular Modules, Routes, Components, and Directives.
213
+
2.**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.
0 commit comments