Skip to content

Commit 41bcfd0

Browse files
committed
Updated readme.md and some of the screen captures.
1 parent bec3d02 commit 41bcfd0

7 files changed

+5
-1
lines changed

README.md

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ Find it on the [Visual Studio Code marketplace](https://marketplace.visualstudio
1313
* Show the module hierarchy
1414
* Show the dependency injection graph
1515
* Show the component hierarchy
16+
* Save the graphs as png, dgml or dot files
1617
* Summarizes all the Angular modules
1718
* Generate a markdown file with the component hierarchy in Mermaid format.
1819
* Show the directory structure of the project
@@ -46,10 +47,13 @@ In the visualization the components will by default be colored dark blue and the
4647

4748
The 'Show the component hierarchy' command is used for visualizing the component hierarchy and Angular application. It analyses all the *.component.ts files and all the corresponding template files to determine how the component use each other and then generates a directed graph showing the component hierarchy.
4849

49-
The command uses a vscode webview extension component to render the hierarchy using html, javascript and the [Vis.js](https://visjs.org/index.html) javascript library. This has the downside that copying the generated graph to the clipboard is not yet possible due to limitations in the vscode extension api. So to overcome this limitation the generated graph can be saved as a Png file to the root of the project you are analyzing. You can also save the graph in the Dgml format.
50+
The command uses a vscode webview extension component to render the hierarchy using html, javascript and the [Vis.js](https://visjs.org/index.html) javascript library. This has the downside that copying the generated graph to the clipboard is not yet possible due to limitations in the vscode extension api. So to overcome this limitation the generated graph can be saved as a Png file to the root of the project you are analyzing. You can also save the graph in the Dgml format or in the GraphViz Dot format.
5051

5152
![Show component hierarchy](https://github.com/CoderAllan/vscode-angulartools/raw/main/images/ShowComponentHierarchy.gif)
5253

54+
Save as GraphViz dot format and generate a graph from the dot file:
55+
![Save as GraphViz dot format](https://github.com/CoderAllan/vscode-angulartools/raw/main/images/SaveAsDot.gif)
56+
5357
You can also choose to save a selection from the graph as shown in the example below.
5458

5559
![Show component hierarchy](https://github.com/CoderAllan/vscode-angulartools/raw/main/images/ShowComponentHierarchy2.gif)

images/SaveAsDot.gif

5.84 MB
Loading

images/ShowComponentHierarchy.gif

2.77 MB
Loading

images/ShowComponentHierarchy2.gif

120 KB
Loading

images/ShowComponentHierarchy3.gif

2.3 MB
Loading
5.02 MB
Loading

images/ShowModuleHierarchy.gif

4.36 MB
Loading

0 commit comments

Comments
 (0)