如何获取一个仓库在github.com上/network页面的完整可视化。

Question

编辑： 这是一份给我母亲的礼物，如果必须的话，我会拖放并拼接一些屏幕截图... 然而，资源必须在网站上存储。我相信至少有人知道如何做到这一点。

编辑：所以我又仔细查找了一下，发现在network后面加上 /meta 可以获得一个JSON格式的文件。另外/chunk在页面源代码中，但是在加载/chunk之后，不再对我进行加载。我只想要整张图像，请问这太过分吗？

在github仓库URL的末尾添加/network可以获得以下类似图像

您可以点击并拖动它来移动，但我却没能一次性显示超过一个小片段。

是否有任何工具可以生成完整的网络图像文件？

我不想要图像的一部分，我想查看整个图像。 我看到在另一个问题中提到了http://gitup.co/，但似乎只适用于OS X。对于我来说，Linux或Microsoft的解决方案也可以。

谢谢

- M Y

---

需要将其导出为图片吗，还是你只是在寻找一个查看图表的工具？ - crea1

@crea1 我真的想能够导出一张图片，我可以在网站上看到这个图表。然而，任何能够查看该图表的工具都将是有用且受人赞赏的。 - M Y

@crea1，真正的问题是我无法截屏，它不允许我将其拉伸到我的显示器上。 - M Y

gitk --all 是什么意思？ - usr1234567

请查看 http://gitgraphjs.com/。 - edin-m

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)

相关Twitter讨论（展示了一些例子）：https://twitter.com/DinisCruz/status/1171411025570275329

- Dinis Cruz

---

到目前为止，我看到的最接近正确的可能是你的脚本，我现在复制并运行了它，在控制台中它似乎仍然限制为1个屏幕的宽度。（我有多个显示器）我已经标记为答案，但如果你发现如何取消CSS对一个屏幕的限制，请告诉我！ - M Y

Answer 2

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

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

基本上，它提供了：

• 全屏幕网络图。
• 可搜索的提交列表。

[单击图像查看完整尺寸。]

- maliayas

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相关联。
• 画布上的活动元素（提交）互动效果不好。

- user11837410

---

这对我没用，因为我无法让它重新绘制。 - amram99

@amram99，你没有提到你使用的是哪个浏览器。 实际上，按照描述的方法在Chrome上并不起作用（不确定我是如何做到的，可能是从DOM的不同元素中删除了一些类）。 - user11837410

可以确认，对我来说在Chrome上无法工作（GitHub仓库有大量历史记录，最多同时有约30个分支）。 - CourageousPotato

这在我的Firefox 94.0.1上没有起作用。 - einpoklum

没有什么特别的功能，向左滚动和缩小已经在网络和火狐浏览器中实现了。 - oOo

Answer 4

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

你需要下载GraphViz并将其放入 path。同时，你需要让python在path中可用。

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

- edin-m

---

嘿，每当我到达最后一个命令时都会收到“致命错误：未找到'dot'！ 请安装Graphviz实用程序。”的提示。我已手动设置了路径，也尝试通过cmd设置。 我还更改了路径以匹配目录并在末尾添加了dot.exe。但好像什么都不起作用... - M Y

你能否在命令行中运行dot或dijkstra（另一个GraphViz工具）？如果不能，请尝试设置环境路径，直到可以运行为止。 - edin-m

不得不使用 Ctrl;+ C dot。 - M Y

dijkstra 运行时，给我展示了以下内容：dijkstra.exe: 未指定节点 用法：dijkstra [-ap?] <节点> [<文件> <节点> <文件>] -a - 对于不同组件中的节点，将距离设置为非常大 -d - 使用正向有向边 -p - 附加最短路径信息 -? - 打印用法 如果没有指定文件，则使用标准输入先喝杯咖啡 =) - M Y

如果我没记错的话，这只是可视化了单个git存储库中的内容 - 没有检查GitHub上的任何东西，特别是其他用户具有相同名称的其他存储库。-1。 - einpoklum

Answer 5

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

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

解决方案2：git kraken

解决方案3：git gui

为使所有解决方案都能正常工作，需要将每个fork添加为远程仓库：

git remote add fork1 url
git remote add fork2 url

......等等。一个自动化添加所有分支/存储库的工具将非常有用。

然后执行：

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

一个可以生成类似批处理文件的工具会很方便，不过我相信 Git Kraken 可以自动获取所有远程仓库。

一旦添加了所有远程/分支，这三个解决方案都将呈现出所有添加的分支的图形，无论是水平还是垂直。

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

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

还没有缩放吗？但它确实可以使框变成全屏！

- oOo