Connecting to a VueJS project with a large code base. What are the tools for "code visualization" to speed up the study of someone else's code by the team?

Question

Vue.js

Connecting to a VueJS project with a large code base. We are looking for a tool for "code visualization" that would speed up the study of new code by our team.
The search returns options like StoryBook and StyleGuidist . What would you advise tested in practice?
Ideally, I also wanted a tool that would show the overall picture of the code and the relationship between parts of the code.
Like ngRev for Angular.

Answer 1

Been wanting something like this for years. I tried everything, and made my own tools. Nothing gave the desired result - the simplicity of understanding complex systems.
And then suddenly I somehow realized that a large project in the form of a picture is an impressive, but extremely difficult to assimilate and use spectacle from a practical point of view. And if you start interactive there - collapse, follow the link, look at some part, then navigation through the code is much better.
And for small projects, on which all the demos of such tools - it is not needed.
In general, the best visualization tool is still a piece of paper with a pencil. Super adaptive, super flexible, and exactly the level of abstraction/detail you need.

Answer 2

Although the question is in the topic about Vue.js, but the topic is nonetheless, maybe someone will be interested. There is such a project, called Getaviz, developed by the University of Leipzig (Germany) - https://github.com/softvis-research/Getaviz
The task is to visualize the code (2d, 3d). At the moment, there is no JS support, but it seems like it should appear soon.

Answer 3

If webpack is used, then dependency visualizers can be taken.
https://medium.com/@joeclever/three-simple-ways-to...
https://survivejs.com/webpack/optimizing/build-ana...
(see those graphs build)
Of course it doesn't will show in which files which components are used, but you can later find which component is used by simply searching for files.