<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>可視化 on かつおぶしのブログ</title><link>https://blog.k-bushi.com/tags/%E5%8F%AF%E8%A6%96%E5%8C%96/</link><description>Recent content in 可視化 on かつおぶしのブログ</description><generator>Hugo -- gohugo.io</generator><language>ja</language><copyright>kbushi</copyright><lastBuildDate>Sat, 04 Apr 2026 07:08:33 +0000</lastBuildDate><atom:link href="https://blog.k-bushi.com/tags/%E5%8F%AF%E8%A6%96%E5%8C%96/index.xml" rel="self" type="application/rss+xml"/><item><title>AIでリポジトリを可視化・分析するGitVizzを使ってみる</title><link>https://blog.k-bushi.com/post/tech/tips/use-gitvizz/</link><pubDate>Sat, 04 Apr 2026 06:59:09 +0000</pubDate><guid>https://blog.k-bushi.com/post/tech/tips/use-gitvizz/</guid><description>&lt;h2 id="はじめに">はじめに
&lt;/h2>&lt;p>新しいプロジェクトに参加したとき、大規模なOSSのコードを読むとき、リポジトリの全体像を把握するのに時間がかかった経験はないだろうか。&lt;br>
&lt;a class="link" href="https://github.com/adithya-s-k/GitVizz" target="_blank" rel="noopener"
>GitVizz&lt;/a>は、AIを活用してGitHubリポジトリの構造を可視化・分析するツールである。&lt;br>
リポジトリのURLを入力するだけで、依存関係グラフの生成、コードの対話的な質問応答、LLM向けのコンテキスト生成などが行える。&lt;br>
今回は、この&lt;code>GitVizz&lt;/code>を実際に使ってみる。&lt;/p>
&lt;h2 id="環境">環境
&lt;/h2>&lt;div>
&lt;div class="code-block-content">&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-txt" data-lang="txt">&lt;span class="line">&lt;span class="cl">Google Chrome
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">gitvizz.com（オンライン版）&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>
&lt;/div>
&lt;/div>
&lt;p>※ ローカル環境で動かす場合は、Docker Composeを使用する方法もある。&lt;/p>
&lt;h2 id="gitvizzとは">GitVizzとは
&lt;/h2>&lt;p>GitVizzは、AIを活用したリポジトリ分析ツールである。&lt;br>
GitHubリポジトリのURLを入力するだけで、コードベースをインタラクティブに探索できる。&lt;/p>
&lt;p>公式サイト: &lt;a class="link" href="https://gitvizz.com/" target="_blank" rel="noopener"
>https://gitvizz.com/&lt;/a>&lt;br>
GitHubリポジトリ: &lt;a class="link" href="https://github.com/adithya-s-k/GitVizz" target="_blank" rel="noopener"
>https://github.com/adithya-s-k/GitVizz&lt;/a>&lt;/p>
&lt;p>主な機能は以下の通りである。&lt;/p>
&lt;table>
&lt;thead>
&lt;tr>
&lt;th>機能&lt;/th>
&lt;th>説明&lt;/th>
&lt;/tr>
&lt;/thead>
&lt;tbody>
&lt;tr>
&lt;td>Graph Search&lt;/td>
&lt;td>インタラクティブな依存関係グラフを検索できる&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td>Graph Dependency View&lt;/td>
&lt;td>コード間の依存関係をハイライトし、視覚的にナビゲーションできる&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td>Chat with Repository&lt;/td>
&lt;td>リポジトリに対してAIにチャットで質問できる&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td>Code Viewer&lt;/td>
&lt;td>シンタックスハイライト付きのコードビューア&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td>LLM Context Builder&lt;/td>
&lt;td>LLMに渡すためのコンテキストを自動生成する&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td>Documentation Generator&lt;/td>
&lt;td>リポジトリからドキュメントを自動生成する&lt;/td>
&lt;/tr>
&lt;/tbody>
&lt;/table>
&lt;h2 id="使い方">使い方
&lt;/h2>&lt;h3 id="オンラインで使うgitvizzcom">オンラインで使う（gitvizz.com）
&lt;/h3>&lt;p>最も手軽な方法は、&lt;a class="link" href="https://gitvizz.com/" target="_blank" rel="noopener"
>gitvizz.com&lt;/a>を使うことである。&lt;/p>
&lt;ol>
&lt;li>&lt;a class="link" href="https://gitvizz.com/" target="_blank" rel="noopener"
>gitvizz.com&lt;/a>にアクセスする&lt;/li>
&lt;li>画面上部の入力欄に分析したいGitHubリポジトリのURLを入力する&lt;/li>
&lt;li>「Vizzify」ボタンをクリックする&lt;/li>
&lt;li>分析結果が表示される&lt;/li>
&lt;/ol>
&lt;a href="https://blog.k-bushi.com/image/tech/tips/use-gitvizz/gitvizz-01.png" data-lightbox="capture">
&lt;img src="https://blog.k-bushi.com/image/tech/tips/use-gitvizz/gitvizz-01.png" alt="gitvizz-01" loading="lazy" style="max-width:100%;height:auto;">
&lt;/a>
&lt;p>分析が完了すると、リポジトリのファイル構造やコードの内容を確認できる画面が表示される。&lt;/p>
&lt;a href="https://blog.k-bushi.com/image/tech/tips/use-gitvizz/gitvizz-03.png" data-lightbox="capture">
&lt;img src="https://blog.k-bushi.com/image/tech/tips/use-gitvizz/gitvizz-03.png" alt="gitvizz-01" loading="lazy" style="max-width:100%;height:auto;">
&lt;/a>
&lt;h2 id="機能について">機能について
&lt;/h2>&lt;h3 id="graph-search">Graph Search
&lt;/h3>&lt;p>依存関係グラフをインタラクティブに検索できる機能である。&lt;br>
ファイル間の依存関係が視覚的に表示されるため、プロジェクトの全体像をつかみやすい。&lt;/p>
&lt;a href="https://blog.k-bushi.com/image/tech/tips/use-gitvizz/gitvizz-02.png" data-lightbox="capture">
&lt;img src="https://blog.k-bushi.com/image/tech/tips/use-gitvizz/gitvizz-02.png" alt="gitvizz-01" loading="lazy" style="max-width:100%;height:auto;">
&lt;/a>
&lt;h3 id="graph-dependency-view">Graph Dependency View
&lt;/h3>&lt;p>特定のファイルやモジュールを選択すると、そのファイルが依存しているファイルや、逆に依存されているファイルがハイライト表示される。&lt;br>
コードの影響範囲を調べる際に便利である。&lt;/p>
&lt;h3 id="code-viewer-explorer">Code Viewer (Explorer)
&lt;/h3>&lt;p>シンタックスハイライト付きでコードを閲覧できる。&lt;br>
リポジトリ内のファイルを直接ブラウザ上で確認できるため、ローカルにクローンしなくてもコードリーディングが可能である。&lt;/p>
&lt;h3 id="llm-context-builder">LLM Context Builder
&lt;/h3>&lt;p>LLMに質問する際に必要なコンテキストを自動で構築してくれる機能である。&lt;br>
必要なファイルを選択すると、LLMに渡すためのプロンプトが生成される。&lt;br>
ChatGPTやClaudeなどに貼り付けて使うことができる。&lt;/p>
&lt;h3 id="ローカル環境で使うdocker-compose">ローカル環境で使う（Docker Compose）
&lt;/h3>&lt;p>ローカル環境で動かしたい場合は、Docker Composeを使用する。&lt;/p>
&lt;div>
&lt;div class="code-block-content">&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-bash" data-lang="bash">&lt;span class="line">&lt;span class="cl">&lt;span class="c1"># リポジトリをクローン&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">git clone https://github.com/adithya-s-k/gitvizz.git
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nb">cd&lt;/span> gitvizz
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1"># 環境変数ファイルをコピー&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">cp backend/.env.example backend/.env
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">cp frontend/.env.example frontend/.env.local
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1"># サービスを起動&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">docker-compose up --build&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>
&lt;/div>
&lt;/div>
&lt;p>起動後、以下のURLでアクセスできる。&lt;/p>
&lt;table>
&lt;thead>
&lt;tr>
&lt;th>サービス&lt;/th>
&lt;th>URL&lt;/th>
&lt;/tr>
&lt;/thead>
&lt;tbody>
&lt;tr>
&lt;td>Frontend&lt;/td>
&lt;td>&lt;a class="link" href="http://localhost:3000" target="_blank" rel="noopener"
>http://localhost:3000&lt;/a>&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td>Backend API&lt;/td>
&lt;td>&lt;a class="link" href="http://localhost:8003" target="_blank" rel="noopener"
>http://localhost:8003&lt;/a>&lt;/td>
&lt;/tr>
&lt;/tbody>
&lt;/table>
&lt;p>※ AI機能（Chat with Repositoryなど）を使う場合は、&lt;code>backend/.env&lt;/code>にOpenAIやAnthropicなどのAPIキーを設定する必要がある。&lt;br>
詳細は&lt;a class="link" href="https://github.com/adithya-s-k/GitVizz" target="_blank" rel="noopener"
>公式リポジトリのREADME&lt;/a>を参照してほしい。&lt;/p>
&lt;h2 id="参考">参考
&lt;/h2>&lt;ul>
&lt;li>
&lt;p>adithya-s-k / GitVizz&lt;br>
&lt;a class="link" href="https://github.com/adithya-s-k/GitVizz" target="_blank" rel="noopener"
>https://github.com/adithya-s-k/GitVizz&lt;/a>&lt;/p>
&lt;/li>
&lt;li>
&lt;p>GitVizz 公式サイト&lt;br>
&lt;a class="link" href="https://gitvizz.com/" target="_blank" rel="noopener"
>https://gitvizz.com/&lt;/a>&lt;/p>
&lt;/li>
&lt;/ul>
&lt;h2 id="おわりに">おわりに
&lt;/h2>&lt;p>&lt;code>GitVizz&lt;/code>を使うことで、リポジトリの構造を視覚的に把握できるのが良い。&lt;br>
特に、依存関係グラフで全体像をつかめる点や、LLM Context Builderで必要なコンテキストをサッと生成できる点が便利だと感じた。&lt;br>
大規模なOSSのコードを読む際や、新しいプロジェクトにオンボーディングする際に活用できそうである。&lt;br>
今後も使っていきたい。&lt;/p></description></item></channel></rss>