DEV Community

Discussion on: Component diagram for frontend apps

Collapse
 
vilimco profile image
Vilim Stubičan

Automation should be the main way to do this, unless you are working with a really small team and everybody is on board. :)

My first suggestion is to use something like dependency-cruiser, although is can get pretty messy on larger projects, but it can be useful for this. :)

I would also recommend you to check out MermaidJS :)

If you are going to write it manually, this will simplify adding new elements to the graph, either via subgraphs or direct linking.

You could, as a side project or just a task to test out your skills, try to create a script that will parse your code and generate mermaid description. :))
Also, if you are by any chance on GitLab, your ReadMEs and MRs can automatically display that graph. :)

If you don't decide on something automated, just make sure that the whole team has agreed to do it that way and incorporate it into your workflow, otherwise you will get half written graphs that will not be of much use due to a lot of missing information and will soon become unnecessary overhead. :))

Collapse
 
shockwavee profile image
Davor Tvorić

Thanks for the response!
This is a lot of useful information, I will definitely try to tackle your suggestion by creating a script and generating a mermaid description, it looks very promising!
Unfortunately, we're on GitHub, but this is would be a great start, nonetheless. At least with mermaid you'd have everything in one place which was my initial idea.

Agreed, there's no way to enforce this if we want good results. :D