
Show HN: Hosted JavaScript dependency tree graphs for GitHub READMEs - fiatjaf
https://github.com/fiatjaf/node-dependencies-view
======
me_bx
Nice one.

Glitch (the hosting service) is returning 504 errors, but it's easy to run it
locally:

    
    
        cd /tmp
        git clone https://github.com/fiatjaf/node-dependencies-view.git
        cd node-dependencies-view/
        npm install
        npm start
    

Then in the browser

    
    
        http://localhost:3000/username/repoName
    

Feedback:

* In repos containing many modules, the svg is really too wide, even when decreasing ratio to 0.1. A more space-efficient layout could possibly be found. Vertical instead of horizontal, perhaps?

* Fails to render anything whenever a module is not found (e.g. `require('./params')`). Proper fallback may be implemented.

~~~
fiatjaf
Thank you for the feedback and run instructions.

I don't know how to make Graphviz reorganize the nodes in a more vertical
ratio. If you set the "ratio" parameter to, say, 0.5, or 1, it will output a
very vertical graph, but at the expense of really small letters. I have to dig
more into
[http://www.graphviz.org/Documentation/dotguide.pdf](http://www.graphviz.org/Documentation/dotguide.pdf)

~~~
joshka
I recently came across a neat graph project, which could help you solve part
of the problem.
[https://github.com/fogleman/GraphLayout](https://github.com/fogleman/GraphLayout)
via [https://www.michaelfogleman.com/](https://www.michaelfogleman.com/)

------
api_or_ipa
Question: How is your approach better than just recursively traversing
package.json files? Seems like you're downloading a lot of stuff onto your
server when you could keep it all in the client.

~~~
fiatjaf
I'm not recursively traversing package.json, just making a graph out of a
single repository. External packages are only referenced by name, not on their
internals.

Reading the whole repository has the advantage of making links between files
in that same repository visible, instead just an opaque mass of packages
depending on packages.

Also, recursively fetching thousands of package.json files will sometimes
(most times, I would argue) be more resource-intensive than just downloading a
single repo.

Finally, it's been done on the server because that way the generated image can
be placed on GitHub's README.md.

