vue-component-graph is a tool to visualize the structure of a Vue codebase as a graph. The graph is created by walking the AST produced by babel.
The graph created is a sort of union/superposition of two graphs:
-
The component DAG (black): In this DAG there is an edge from component A to component B if B is a child component of A (B occurs in A's DOM subtree and A might pass B props).
-
The event graph (red): in this graph there is an edge from B to A if B emits an event of a type which A handles.
 |
This is work-in-progress. It was created to help me understand my own Vue projects; it's structured as a standard npm package but is not ready to be published.