CodeRoad, make it easier to read code

Jack Woods — Tue, 07 May 2019 14:14:06 +0000

When I was going to read the source code of vuejs. It made me frustrated because of the complicated dependence relationship. Thus I want to make a tool to solve this, making it easier to read the code, both the structure and the detail.

I found a little of solutions about dependence analysis like madge. However, many of them just produce a graph of the dependence. And the graph will become quite messy when the project is huge. I need an interactive way to optimize this. Then I made this cli tool "coderoad". A preview is below. And there is a live demo here (which is the codebase of the project itself).

I describes it as "A way to view codebase based on dependence analysis". It supports JavaScript, TypeScript, ES6, CommonJS, AMD. It analyzes the dependence relationship with "dependency-cruiser", and draws the graph with "d3". The front-end is built with "react". It now support several basic functions, for example to adjust the depth of the dependency graph and toggle to show the dependencies or dependents. You can try it in the demo.

I'll make further efforts to make it better. Greatly appreciate to the feedbacks.

Find more in the repo

DEV Community: Jack Woods

CodeRoad, make it easier to read code