如何获取仓库 /network 的完整 github.com 可视化

Question

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

编辑：所以我对此进行了更多研究，发现如果你将 /meta 放在网络后面，你会得到一个 JSON。另外 /chunk 位于页面源中，但加载 /chunk 后， /chunk 或 /meta 都不再为我加载。我只想要一张图片中的整个图表，这个要求是否太过分了？

将 /network 添加到 GitHub 中存储库 URL 的末尾，可以得到类似这样的图像

您可以单击并将其从一侧拖动到另一侧，但在我的一生中，我无法一次显示超过一小部分的内容。

有没有什么工具可以在一个图像文件中生成整个网络图？

我不需要图表的一大块，我想查看整个图表。 我看到另一个问题中提到了http://gitup.co/，但它似乎仅限于OS X。 Linux 或 Microsoft 解决方案适合我。

Answer 1

我刚刚再次遇到这个问题，终于找到了一个不错的解决方案。

以下是代码要点：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 2

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

我为 GitHub 网络页面编写了一个用户脚本：https://github.com/maliayas/github-network-ninja

基本上它提供：

• 全视口网络图。
• 可搜索的提交列表。

[点击图片查看大图。]

Answer 3

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

1. （可选）取消缩放视图 (

   cmd

   /

   ctrl

   +

   scroll

   )

2. 在JS控制台执行（

   cmd+opt+k

   或

   ctr+alt+k

   ）：

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

3. 按住右方向键扫过图表进行实际渲染。

备注：

• 我还没有弄清楚触发重画的确切事件。脚本重画似乎只能工作一次。
• 尺寸可以定制，但太高会有问题
• 取消缩放步骤：如果存储库有许多分叉，缩小会调整画布的高度，因为它链接到

  window.innerHeight

• 画布上的活动元素（提交）交互不佳。

Answer 4

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

您需要下载GraphViz并将其放入

path

中。您还需要在

path

中使用 python。

$ set PATH=%PATH%;C:\GraphViz\release\bin
$ git clone [email protected]: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 5

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

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

解决方案2：git kraken

解决方案3：git gui

为了使所有解决方案发挥作用，有必要将每个叉子添加为遥控器：

git remote add fork1 url
git remote add fork2 url

...等等。像这样自动添加所有分叉/存储库的过程的工具将会很有用。

然后执行：

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

一个可以生成这样的批处理文件的工具会很方便，尽管我相信 git kraken 可以自动获取所有遥控器。

添加所有遥控器/叉子后，所有 3 个解决方案将呈现所有添加的叉子的图表，无论是水平的还是水平的。

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

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

还没有变焦吗？但它确实使盒子全屏显示！