如何获得 repo 的 /network 的完整 github.com 可视化

Question

编辑： 这应该是给我妈妈的礼物，如果必须的话，我会拖放它并将一堆丝网印刷拼接在一起.. .但是资源必须存在于网站的某个地方。我相信至少这个网站上有人知道如何做到这一点。

编辑： 所以我进一步研究了这个，发现如果你把 /meta 放在 network 之后，你会得到一个 JSON。 /chunk 也在页面源代码中，但在加载 /chunk 之后，/chunk 或 /meta 都不再为我加载。我只想要一张图片中的整个图表，这要求太多了吗？

在 github 中的 repo URL 的末尾添加 /network 得到了这样的图像

您可以单击并左右拖动它，但对于我来说，一次只能显示一小段内容。

有没有在一个图片文件中生成整个网络图的工具？

我不想要图表的一部分，我想查看整个图表。我看到另一个问题中提到了 http://gitup.co/，但它似乎只是 OS X。 linux 或 Microsoft 解决方案对我有用。

谢谢

Answer 1

https://github.com/esc/git-big-picture 似乎做得不错。

您需要下载GraphViz并放入path。您还需要 python 在 path 可用。

$ set PATH=%PATH%;C:\GraphViz\release\bin
$ git clone git@github.com:esc/git-big-picture.git 
$ cd git-big-picture
$ python git-big-picture -h
$ python git-big-picture -f png -o out.png -b # branches - look

Answer 2

有同样的愿望，给自己做了一个gitgraphjs的在线小脚本...

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

Answer 3

这也困扰着我。我想在 GitHub 上看到这个，而不导出任何 JSON。例如，在任何 GitHub "Network" 页面上，在 Firefox ~~或 Chrome~~ 的 JS 控制台中：

（可选）取消缩放视图 (cmd/ctrl + scroll)
在JS控制台中执行（cmd+opt+k或ctr+alt+k）：

document.getElementById("network").style="width:20000px"; window.dispatchEvent(new Event("resize"))

按住向右箭头键扫过图表以进行实际渲染。

备注：

我还没有弄清楚触发重绘的确切事件。脚本重绘似乎只能工作一次。
尺寸可以自定义，但数值太高会有问题
Unzoom 步骤：如果存储库有很多分支，缩小会调整 canvas 的高度，因为它链接到 window.innerHeight
canvas 上的活动元素（提交）交互不佳。

Answer 4

我刚刚（又）遇到了这个问题，终于找到了一个像样的解决方案。

下面是代码的要点：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)

相关推特主题（显示一些示例）：https://twitter.com/DinisCruz/status/1171411025570275329

Answer 5

我的回答不是关于创建图像作为输出；但它可能对那些想要有用的网络图的人有所帮助。

我已经为 GitHub 网页编写了用户脚本：https://github.com/maliayas/github-network-ninja

基本上它提供：

Full-viewport 网络图。
可搜索的提交列表。

[点击图片查看完整尺寸。]

Answer 6

除了使用 GitHub 进行网络洞察之外，还有其他可用的工具。

解决方案 1：git log --graph --all

解决方案 2：git kraken

解决方案 3：git gui

为了使所有解决方案都有效，有必要将每个分支添加为远程：

git remote add fork1 url
git remote add fork2 url

...等等。像这样自动添加所有 forks/repos 过程的工具会很有用。

然后执行：

git fetch fork1
git fetch fork2
git fetch fork3
etc...

虽然我相信 git kraken 可能会自动获取所有遥控器，但可以生成像这样的批处理文件的工具会很方便。

添加完所有 remotes/forks 后，所有 3 个解决方案都将呈现所有添加的叉子的图形，尽管它是水平的。

到目前为止，最有效的 GitHub 解决方案是：

https://github.com/maliayas/github-network-ninja

还没有缩放？但它确实使框全屏显示！

如何获得 repo 的 /network 的完整 github.com 可视化

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

git

visualization

graph

github