How to get the full github.com visualization of the /network of a repo

Had the same wish, made myself a little online script for gitgraphjs...

https://smallhillcz.github.io/githgraph-js-auto/


My answer is not about creating image as output; but it may be helpful to those who want a useful network graph.

I've written a userscript for GitHub network page: https://github.com/maliayas/github-network-ninja

Basically it provides:

  • Full-viewport network graph.
  • Searchable commit list.

[Click on the image for full size.] github-network-search.png


I just had this problem (again), and finally was able to find a decent solution.

Here is the gist with the code below: https://gist.github.com/DinisCruz/6866dede5cdff60d97790a14490f7844

function hide(selector) { $(selector).setAttribute('style','display:none')} 
function remove(selector) { $(selector).remove()} 
function remove_class(selector) { $(selector).setAttribute('class','')} 

function move_left(count)
{        
    var eventObj = document.createEvent("Events");
    eventObj.initEvent("keydown", true, true);
    eventObj.which = 37;  // left key
    for (i=0; i < count ; i++) {
        document.dispatchEvent(eventObj);
    }
} 

function resize_canvas(width)
{
    document.getElementById("network").style="width:" + width; window.dispatchEvent(new Event("resize"))
}


remove('.pagehead')
remove('.js-header-wrapper')
remove('.menu')
remove('.Subhead')
remove('.info')
remove('.btn-link')
remove('.footer')
remove_class('.container-lg')
// Note: they updated this class name from .p4-4 to .pb-4
remove_class('.pb-4')

resize_canvas('2150px')
move_left(14)

Related twitter thread (shows some examples): https://twitter.com/DinisCruz/status/1171411025570275329