Hey everyone!

I've had an idea about using component diagrams in my frontend project workflow. This idea works best with frameworks that rely on components (Vue, React, Angular, Svelte...). I messed with this on a personal project and I really like the benefits it provides, but I would like to hear your opinions or experiences that I might have missed.

Here's a brief example:
Before the start of a project, but after you have some sort of a broad idea of what the project will look like, you create a diagram that looks like this.

This example shows just two components, but the idea is that every component is noted here and that it shows the relationship and the props that get passed down from a parent component.

I have a feeling this would give you a much better idea of what your components will look like at the beginning of the project and keep everyone on the same page. I think it would even help to onboard new developers at a quicker rate.

This would have to be stored somewhere at a repository level so it's easy to access (for developers) and it would have to be maintained throughout the project. This is where it might fail. I imagined this as a guide, so something may be implemented differently during the development stage, but the diagram must be updated with the new information, to keep it up to date. Someone might forget or feel lazy and not update it which renders the diagram useless. I haven't thought of any way to prevent this, so I was hoping someone else might have a suggestion.

Have you ever done something similar? Is the diagram showing too much/little information? If you have any opinions, please share them down below!