初めて触るコードベースで、どのファイルから読み始めればいいか迷った経験は誰にでもあります。「CodeFlow」は、GitHubリポジトリのURLを貼り付けるだけでファイル間の依存関係をインタラクティブなグラフとして表示するOSSツールです。

この記事でわかること：

  • CodeFlowの概要とインストール不要で使える仕組み
  • 依存グラフ・ブラスト半径分析・セキュリティスキャンなど主な機能
  • オンライン・セルフホスト・ローカルファイルの3通りの使い方
  • GitHub APIのレート制限と対処法

https://github.com/braedonsaunders/codeflow

新しいコードベースに迷わない

大規模なリポジトリを開いたとき、どのファイルがどこに依存しているかをソースコードから読み解くのは時間がかかります。CodeFlowはこの課題を解決します。

GitHubのURLをフォームに貼り付けてEnterを押すだけで、コードベース全体の依存グラフがブラウザ上に表示されます。インストールは不要で、アカウントの登録も必要ありません。ブラウザが直接GitHub APIを呼び出して処理するため、コードが外部サーバーに送信されることもありません。

主な機能

依存グラフでファイルのつながりを把握する

ノードをクリックすると、そのファイルが依存しているファイルと、逆にそのファイルに依存しているファイルが強調表示されます。ドラッグ・ズームで自由に探索でき、大規模なコードベースでも全体像を素早く把握できます。

変更の影響範囲を即座に確認する

「このファイルを変更したら何が壊れるか？」という問いに即座に答えるのが、ブラスト半径分析（Blast Radius Analysis）です。ファイルを選択すると、変更によって影響を受けるファイルの数が表示されます。リファクタリング前の確認や、テスト範囲の見極めに使えます。

セキュリティ問題を自動検出する

コードを読み込むと同時に、以下の問題を自動スキャンします。

  • ハードコードされたシークレットやAPIキー
  • SQLインジェクションの脆弱性
  • 危険な eval() の使用
  • 本番コード内のデバッグ文

静的解析ツールを別途導入しなくても、手軽なチェックポイントとして機能します。

コードのヘルススコアを確認する

デッドコードの割合、循環依存、結合度、セキュリティ問題をもとに、コードベース全体にA〜Fのグレードを付けます。スコアの詳細内訳も表示されるため、改善の優先順位を立てやすくなります。

コードオーナーシップをgit履歴から確認する

ファイルを選択すると、そのファイルへの貢献が多いコントリビュータが表示されます。コードレビュー時に誰に相談すればいいかが即座にわかります。

ローカルファイルをオフラインで分析する

「Open Folder」ボタンからローカルのフォルダを選択すると、インターネット接続なしでコードを分析できます。GitHubに公開していないプライベートプロジェクトや、機密性の高いコードにも安全に使えます。すべての処理がブラウザ内で完結し、ファイルが外部に送信されることはありません。

可視化モードを切り替えて見方を変える

グラフの色分けを目的に合わせて切り替えられます。Folderモードはディレクトリ構造で色分けし、Layerモードはアーキテクチャ層（UI・Services・Utilsなど）で色分けします。Churnモードはコミット頻度でホットスポットを表示し、Blastモードは選択したファイルの影響範囲を色で示します。

3通りの使い方

オンラインで試す

CodeFlow — Visualize Your Codebase Architecture
Turn any GitHub repo into an interactive architecture map in seconds. Zero setup, privacy-first, runs in your browser.
codeflow-five.vercel.app

上記のURLを開き、フォームにGitHubリポジトリのURLを貼り付けてEnterを押すだけです。facebook/react のようなオーナー/リポジトリ形式でも、フルURLでも動作します。

セルフホストする

git clone https://github.com/braedonsaunders/codeflow.git
open index.html

ビルドプロセスもnpm installも不要です。React 18・D3.js 7・BabelはすべてCDNから読み込まれます。index.html をブラウザで開くだけで動作します。

ローカルファイルを分析する

  1. CodeFlowをブラウザで開く
  2. 「Open Folder」ボタンをクリックする
  3. 分析したいフォルダを選択する

選択後すぐにグラフが生成されます。すべての処理がブラウザ内で完結するため、オフライン環境でも使えます。

GitHub APIのレート制限

トークンなしで使うと、1時間あたり60リクエストまでに制限されます。大きなリポジトリでは分析が途中で止まる場合があります。GitHub Personal Access Token（repoスコープ）をToken欄に入力すると、上限が5,000リクエスト/時に上がります。トークンはタブを閉じると自動的に消去されます。

プライベートリポジトリを分析する場合も、同様にPersonal Access Tokenを使います。

対応言語と出力形式

JavaScript・TypeScript・Python・Go・Rust・Java・C/C++・C#・Swift・Kotlin・Scalaなど30以上の言語に対応しています。ObsidianのvaultにあるMarkdownファイルを指定すると、wikiリンクをグラフとして可視化することもできます。

分析後は「Export」ボタンからJSON・Markdown・プレーンテキスト・SVGの形式でレポートをエクスポートできます。JSONにはリポジトリのメタデータ・ヘルススコア・セキュリティ問題・パターン検出結果などが含まれており、CI/CDパイプラインへの組み込みや独自のレポートツールへの入力として活用できます。「Share」ボタンを押すと、同じ分析を再現できる共有リンクも生成できます。

読み解く前に全体像をつかむ

コードを一行ずつ読む前に、まず構造を把握する。CodeFlowはその習慣をブラウザ一つで実現します。インストールも登録も不要で、いますぐ試せます。新しいプロジェクトに参加したときや、大規模なPRのレビュー範囲を確認したいときの最初の一手として有効です。GitHubスター数は2,593（2026年4月時点）で、MITライセンスで公開されています。