Visualize the entropy of a codebase with a 3D force-directed graph

Hacker News

Share card

Visualize the entropy of a codebase with a 3D force-directed graph

Hi HN! I'm Gabriel, the author of dep-tree ( https://github.com/gabotechs/dep-tree ), and I wanted to show off this tool and explain why it's being really useful at my current org for dealing with code complexity. I work at a startup where business evolves really fast, and requirements change frequently, so it's easy to end up with big piles of code stacked together without a clear structure, specially with tight deadlines. I made dep-tree [1] to help us maintain a clean code architecture and a logical separation of concerns between parts of the application, which is accomplished by: (1) Visualizing the source files and the dependencies between them using a 3D force-directed graph; and (2) Enforcing some dependency rules that allow/forbid dependencies between different parts of the application. The 3D force-directed graph visualization works like this: - It takes an entrypoint to the codebase, usually the main executable file or a library's entrypoint (index.js, main.py, etc...) - It recursively crawls import statements gathering other source files that are being depended upon - It creates a directed graph out of that, where nodes are source files and edges are the dependencies between them - It renders this graph in the browser using a 3D force-directed layout, where attraction/repulsion forces will be applied to each node depending on which other nodes it is connected to. With this, properly decoupled codebases will tend to form clusters of nodes, representing logical parts that live together and are clearly separated from other parts, and tightly coupled codebases will be rendered without clear clustering or without a clear structural pattern in the node placement. Some examples of this visualization for well-known codebases are: TypeScript: https://dep-tree-explorer.vercel.app/api?repo=https%3A%2F%2F... React: https://dep-tree-explorer.vercel.app/api?repo=https%3A%2F%2F... Svelte: https://dep-tree-explorer.vercel.app/api?repo=https%3A%2F%2F... Langchain: https://dep-tree-explorer.vercel.app/api?repo=https%3A%2F%2F... Numpy: https://dep-tree-explorer.vercel.app/api?repo=https%3A%2F%2F... Deno: https://dep-tree-explorer.vercel.app/api?repo=https%3A%2F%2F... The visualizations are cool, but it's just the first step. The dependency rules checking capabilities is what makes the tool actually useful in a daily basis and what keeps us using it every day in our CI pipelines for enforcing decoupling. More info about this feature is available in the repo: https://github.com/gabotechs/dep-tree?tab=readme-ov-file#che... . The code is fully open-source.