Have you ever noticed that the number of modules in a require Javascript enwironment can be huge? Difficult for an overview?
In this case, a graphical overview of modules and their dependencies can save you.
There are two solutions.
Non-Webstorm Solution
If you are using any text editor as a main Javascript Programming Tool, the npm dependo is a nice tool. Used against the MyAssignments Widget, it produces his output (click on the image to see a larger version)
![](https://pos2007.de/wp-content/uploads/2019/11/dependo-myassignments-1024x636.jpg)
Installation:
$ npm install dependo
Usage:
$ dependo -f amd /path/src > example/report.html
will produce the graph in the file report.html
There is also a grunt task for dependo here
https://github.com/auchenberg/grunt-dependo
Webstorm Solution
If you are using the Webstorm IDE for your projects, there is a build in solution.
It produces against the MyAssignments Widget this chart (click on the image so see a high resolution version):
![](https://pos2007.de/wp-content/uploads/2019/11/webstorm-myassignments-ov-1024x797.jpg)
To get this diagram, click on the root of a widget and select
![](https://pos2007.de/wp-content/uploads/2019/11/webstorm-diagram-1024x680.jpg)
“Show Diagram Popup” shows the Drawing as a popup window, while “Show Diagram” shows the drawing in a new tab.
![](https://pos2007.de/wp-content/uploads/2019/11/webstorm-diagram-detail-1024x544.jpg)
In Detail Mode you’ll see a lot more details, here are the external modules required by the main js module.
This gives you a lot of information and this can be also used to provide a technical system documentation.
Happy documenting.