GitHub 更新！開(kāi)源項(xiàng)目源碼結(jié)構(gòu)可視化，快速了解開(kāi)源項(xiàng)目利器

不知道大家知道嗎？在 GitHub 有這樣一個(gè)組織，叫 GitHub Next，里面有各種 GitHub 為了探索未來(lái)軟件開(kāi)發(fā)相關(guān)的開(kāi)源項(xiàng)目。

今天要介紹的一個(gè)項(xiàng)目就是其中之一，repo-visualizer，它能夠?qū)?GitHub 上的任一個(gè)開(kāi)源項(xiàng)目生成可視化的圖片，能夠幫助我們快速對(duì)一個(gè)項(xiàng)目的代碼組織進(jìn)行了解，這個(gè)工具對(duì)于一個(gè)初學(xué)者來(lái)說(shuō)非常的有幫助。我們來(lái)看一下實(shí)際效果會(huì)比較的直觀。

上圖中將paperjs/paper.js 這個(gè)項(xiàng)目的代碼結(jié)構(gòu)進(jìn)行了可視化，其中白色圓圈代表了文件夾，有顏色的圓圈代表具體的文件，而不同顏色代表了不同的語(yǔ)言的源碼文件，圓圈的大小對(duì)應(yīng)的文件夾、文件的大小。

初看這種可視化的圖，可能不能直接發(fā)現(xiàn)什么規(guī)律，但是你一旦熟悉了這樣可視化的方式，對(duì)你快速了解一個(gè)陌生的項(xiàng)目還是非常有幫助的。相比樹(shù)形結(jié)果，以上的可視化效果更加的直觀，而且包含的信息量更多。比如文件或者文件夾的大小可以直觀的看到；文件夾中的文件類型也能直接看到，從而可以去推斷對(duì)應(yīng)的文件夾在項(xiàng)目中的作用，比如如果某個(gè)文件夾下都是 Markdown 文件，那一般這個(gè)文件夾對(duì)應(yīng)的是文檔。

目前可以通過(guò)以上 GitHub Action 的方式生成以上可視化圖片。

另外還提供了一個(gè)不保證一定可用的網(wǎng)站：https://mango-dune-07a8b7110.1.azurestaticapps.net/

使用  https://mango-dune-07a8b7110.1.azurestaticapps.net/?repo=paperjs%2Fpaper.js  （加 repo 參數(shù)）即可鏈接到具體的某個(gè)倉(cāng)庫(kù)。

更多項(xiàng)目詳情請(qǐng)查看如下鏈接。

開(kāi)源項(xiàng)目地址：https://github.com/githubocto/repo-visualizer

開(kāi)源項(xiàng)目作者：GitHub

開(kāi)源書籍&資料：點(diǎn)擊

點(diǎn)如下卡片后臺(tái)回復(fù)：1，與技術(shù)極客們一起交流開(kāi)源項(xiàng)目，一起成長(zhǎng)。