リポジトリ可視化

この短いチュートリアルでは、Githubの次のレポの可視化プロジェクトを紹介し、どのようにリポジトリを可視化するために使用することができますし、GTITUBに新しいコードをプッシュするたびにあなたのGitリポジトリの画像を生成することができますを示します.

レポ可視化プロジェクトとは何か
GitHub’s repo-visualization project 一日は主要なギタブ製品に参加することが高度なリポジトリ可視化ツールを構築することを目指して実験的なプロジェクトです.レポ可視化プロジェクトは、現在GitHub Next これには、多くの他の実験プロジェクトが含まれます.

現在、リポジトリ可視化プロジェクトを使用して、そのリポジトリがあなたのものであるかどうかにかかわらず、Githubのパブリックリポジトリを表示できます.たとえば、視覚化するために使用することができますMicrosoft’s Cloud Adoption Framework , Vue.js , あるいはPowerShell そして、これらのリポジトリと対話するD3.js .
対話型の可視化は、大きなリポジトリのグラフをレンダリングするには、一度それが一目でプロジェクトの構造を表示できるようになるレンダリングするファイルのサイズ、種類、フォルダ構造を強調表示します.また、特定の興味のファイルをあなたにホバーすることができます.

このライブ可視化手法に加えて、RIPO Visualization Projectも、コードがチェックされるたびに、コードがアーキテクチャ図のSVGイメージファイルを自動的に生成するようにビルドアクションを提供します.次に、アクションはリポジトリ内のSVGファイルを追加または更新する新しいコミットを追加します.
ビルドアクションによって生成されたSVGファイルは、ページが訪問されるたびにブラウザで生成される必要がないベクトルイメージです.これは、大きなリポジトリでのパフォーマンスを助けますが、すべてのラベルが動的に表示または非表示にできないため、対話型のバージョンが提供するミニマリズムの同じレベルを提供しません.

ビルドアクションを使用した図作成の自動化
Github Octoダイアグラムを生成するのは、かなり簡単です.を作成する必要があります.yml いくつかの基本的な設定手順を使用して、リポジトリのファイルを作成します.
まず、プロジェクトがあることを確認します.github ディレクトリのルートディレクトリ. ここで重要です.そのディレクトリの内部では、workflows ディレクトリが既に存在しない場合.
一度.github/workflows ディレクトリが存在するcreate-diagram.yml ファイルをリポジトリに設定し、その内容を次のように設定します.

name: Create diagram
on:
  workflow_dispatch: {}
  push:
    branches:
      - main
jobs:
  get_data:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@master
      - name: Update diagram
        uses: githubocto/repo-visualizer@main
        with:
          excluded_paths: "ignore,.github,.idea"

このファイルはYAML file 取得するアクション、依存関係、および任意のパラメータに関する情報を含みます.上の断片on: / push: / branches: 設定は、アクションがmain ブランチですが、必要に応じてリポジトリにマッチするか、追加のブランチを見ることができます.
また、微調整する必要がありますexcluded_paths 特定のディレクトリを生成されたダイアグラムから除外する場合は、値を返します.
この変更をGithubに追加し、コミットし、プッシュすると、アクションはdiagram.svg リポジトリのルートのファイル.リポジトリの内容によってはこのようになります.

監視された枝の後のコミットは、画像を更新します.
あなたが詳細について興味があるならばrepo-visualizer はGithubで利用でき、READMEは利用可能な設定オプションをすべて一覧表示します.通常、設定オプションはwith: ステップ.

図へのダイアグラムの追加
プロジェクトのGITUBページにリポジトリイメージを公開する場合は、いくつかの画像とリンクタグを追加することによってreadme.md ファイルまたはその他のマークダウンファイル.
ここからのサンプルはREADME.md ファイルインマイVisualizing Code talk’s repository :

[![Visualization of the codebase](./diagram.svg)](https://octo-repo-visualization.vercel.app/?repo=integerman%2FVisualizingCode)
[View interactive Diagram](https://octo-repo-visualization.vercel.app/?repo=integerman%2FVisualizingCode)

最初の行には、イメージへのパスが含まれており、異なるアクションを設定しない限り、リポジトリに表示されます.両方の行に存在するURLは対話型リポジトリ可視化ツールに行きます.
Githubの上で見られるときREADME.md 次のようなファイルが生成されます


次は何ですか.
私は、githubが行っている新しい方向と方法のために興奮していますGitHub Next Githubがオープンソースソフトウェア開発者として我々の能力を拡大しているかについての初期の徴候を我々に与え始めていますrepo visualizer , flat data , and Copilot . それはより多くのこれらの機能の前に時間の問題のような感じGithub機能の定期的なスイートにそれを作り、私は待つことができない.
あなたがコード可視化に関連したより多くのものに興味があるならば、私にここで、または、フォローをしてください.話をする準備をしているVisualizing Code そして、今後数ヶ月と数年のデータサイエンスの問題だけでなく、このトピックに関する多くの関連トピックを探索する.
郵便Repository Visualization with GitHub Next 最初に現れたKill All Defects .