codeflow

codeflow — 数秒でコードベースのアーキテクチャを可視化

CodeFlow（braedonsaunders、MIT）は、GitHub リポジトリ、ローカルフォルダー、PR、Markdown／Obsidian の保管庫を、すべてブラウザー上で動作するインタラクティブなアーキテクチャマップに変換します。これは、CDN から固定バージョンのReact 18 + D3.js 7 + Babelを読み込む単一のindex.htmlアプリです。ビルドプロセスも、npm installも、バックエンドも、データ収集もありません。コードは GitHub からブラウザーに直接取得されるか、ローカルファイルから読み込まれ、マシンの外に出ることはありません。このスキルは、ルーティングを優先するラッパーです。入力を選び、可視化モードを選択し、分析を確認して、結果をエクスポートします（または、自動更新される CodeFlow Card を README に組み込みます）。

このスキルを使用する場面

• ユーザーがなじみのないコードベースを開き、ドラッグ、ズーム、探索ができるインタラクティブな依存関係グラフで、アーキテクチャの概要を手早く把握したい場合
• ユーザーが**「このファイルを変更したら、何が壊れますか？」**と尋ねた場合 → 依存関係グラフを使った影響範囲分析
• ユーザーがレビューや「誰に聞けばよいか」という判断のために、git の履歴からファイルごとの主要な貢献者を調べ、コードの所有者を確認したい場合
• ユーザーがA～F のコードベース健全性スコア（デッドコード、循環依存、結合度、セキュリティ上の問題）やアクティビティヒートマップを確認したい場合
• ユーザーがヒューリスティックなセキュリティ／パターンスキャンを行いたい場合 — ハードコードされたシークレット、SQL インジェクション、eval()、デバッグ文、シングルトン／ファクトリー／オブザーバー／React フック、アンチパターン（巨大なオブジェクト、高い結合度）
• ユーザーがPR の影響分析を行いたい場合 — PR の URL を貼り付け、影響を受けるファイルと変更の影響範囲を確認します
• ユーザーがObsidian の保管庫／Markdown ディレクトリをノートグラフとして可視化したい場合（[[wiki-links]]と[text](./relative.md)がエッジになります）
• ユーザーが分析結果をエクスポート（JSON／Markdown／テキスト／SVG／PDF）したり、自動更新されるCodeFlow Card SVG を README に追加したりしたい場合

このスキルを使用しない場面

• ユーザーが編集可能な手作業の図（アーキテクチャ図、ERD、UML、シーケンス図、フローチャート）を作成したい場合 → drawioまたはmermaidを使用します

• ユーザーがリポジトリ内を対象に、エージェント向けのトークン効率のよいコード検索（シンボル検索、意味的な関連項目の検索）を行いたい場合 → sembleを使用します

• ユーザーがリファクタリング前に、定義／参照／影響を確認するためのルーティング優先のリポジトリナビゲーションパケットを必要としている場合 → codebase-searchを使用します

• ユーザーが使い捨てのブラウザービューではなく、リポジトリにコミットする永続的で再生成可能なナレッジグラフ（.graphify/）を必要としている場合 → graphifyを使用します

• ユーザーが言語に忠実な詳細な静的解析／呼び出しグラフを必要としている場合 — CodeFlow の依存関係分析はヒューリスティック（ファイルごとにスコープ化し、明示的なインポートを考慮した名前ベースの関数照合）であり、動的インポートや実行時に名前が変更される参照を見逃す可能性があります。これは手早く概要を把握するためのもので、100％正確ではありません

前提条件

要件	備考
最新のブラウザー	アプリ全体がクライアント側で動作し、インストールは不要です
git（任意）	セルフホストする場合のみ必要です。1 ファイルのリポジトリをgit cloneします
GitHub トークン（任意）	プライベートリポジトリや、より高いレート制限を利用する場合に必要です。ブラウザーのメモリ内にのみ保持され、保存されることはありません
Node.js（任意）	npx skillsインストーラーまたはパーサーのユニットテスト（node --test tests/）を実行する場合のみ必要です

手順

ステップ 1 — CodeFlow の実行方法を選択する

モード	用途	起動方法
オンライン（推奨）	最速 — 公開／プライベートリポジトリ	https://codeflow-five.vercel.app/
セルフホスト	オフライン／エアギャップ環境／ソースの監査	git clone + open index.html
CodeFlow Card	README 上に表示する自動更新の健全性 SVG	card/内の GitHub Action

セルフホストは単一のコマンドで実行でき、ビルド手順はありません。

bash git clone https://github.com/braedonsaunders/codeflow.git open codeflow/index.html # または OS に応じて xdg-open / start

このスキルには、リポジトリをローカルにクローン（または更新）して開くscripts/install.shが含まれています。

ステップ 2 — 入力を選択する

入力	方法
公開リポジトリ	facebook/react または GitHub の完全な URL を貼り付け、Enter を押します
プライベートリポジトリ	PAT（repo スコープ）または GitHub App のインストールトークンを Token フィールドに追加します
ローカルファイル	Open Folder をクリック（またはドラッグ＆ドロップ）します — アップロードは行われません
PR の影響範囲	PR の URL を貼り付けると、影響を受けるファイルと影響範囲を確認できます
Markdown ボルト	ノートのグラフを表示するには、Obsidian のボルトまたは Markdown ディレクトリを指定します

ローカルスキャンでは、スキャン前に除外パターン（uploads/**、**/cache/**、 *.png）を設定して、添付ファイル、キャッシュ、生成されたアセットをスキップします。

ステップ 3 — 可視化モードを選択する

モード	ファイルの色分け基準
Folder	ディレクトリ構造
Layer	アーキテクチャレイヤー（UI、Services、Utils、…）
Churn	コミット頻度（ホットスポット）
Blast	ファイルを選択したときの影響（「何が壊れるか？」）

キーボード操作：Enter で分析 · + / - でズーム · Escape でモーダルを閉じます。

ステップ 4 — 分析結果を確認する

CodeFlow は、すべてクライアントサイドで、インタラクティブな依存関係グラフ、 ファイルごとの影響範囲の件数、コードの所有者（Git の主な貢献者）、 セキュリティスキャナー（ハードコードされたシークレット／キー、SQL インジェクション、eval()、デバッグ用ステートメント）、 パターン検出（シングルトン／ファクトリー／オブザーバー／React フックと アンチパターン）、A–F の健全性スコア（デッドコード率、循環依存、結合度、 セキュリティ）、アクティビティヒートマップ、PR 影響分析を表示します。 全機能と 40 以上の対応言語については、 references/features.md を参照してください。

ステップ 5 — エクスポートまたは埋め込む

• 分析後にエクスポートできます：JSON（健全性、ファイル、関数、 依存関係、変更頻度、セキュリティ、パターン、提案、言語の内訳を含む全データ）、 Markdown、プレーンテキスト、SVG（グラフ画像）、PDF（印刷可能なグラフ）、または生の JSON。
• 共有：Share ボタンを押すと、同じ分析を再実行するリンクがコピーされます。
• CodeFlow Card：GitHub Action がマージのたびに健全性／規模／脆弱性を示す SVG を再計算し、 README に表示します（5 種類のスタイル、アクセントのプリセット、オプトイン方式の PR 熱量レシートコメント、ライト／ダークモードへの適応）。上流の card/ を参照してください。

ステップ 6 — jeo-skills と併用するプラグイン形式のインストール

このスキルフォルダーは標準の jeo-skills フローを通じてプラグインとしてインストールできるため、 ラッパー、リファレンス、インストーラーを、対応する任意のランタイムのディスクに配置できます。

bash

プロジェクトにインストール（.agents/skills/codeflow/ に書き込みます）

npx skills add https://github.com/akillness/jeo-skills --skill codeflow

検出されたすべてのエージェントにグローバルインストール

npx skills add -g https://github.com/akillness/jeo-skills --skill codeflow

特定のエージェントを対象にする

npx skills add -g https://github.com/akillness/jeo-skills --skill codeflow -a claude-code -a codex -y

出力形式

ユーザーが codeflow にヘルプを求めた場合、簡潔な概要を返します。

markdown

codeflow ルーティング概要

対象範囲

• 実行モード：online | self-host | card-action | undecided
• 入力：public-repo | private-repo | local-files | pr-url | markdown-vault
• 目的：overview | blast-radius | ownership | health | security | pr-impact | note-graph

推奨する次の操作

• open-online | self-host | open-folder | paste-pr-url | wire-card | export-json

理由

• ユーザーから提供された情報に基づく 2～3 個の箇条書き

別ツールへの案内

• 編集可能な手作成の図には drawio / mermaid
• リポジトリ内のトークン効率の高いエージェント向けコード検索には semble
• リファクタリング前のリポジトリナビゲーション用情報には codebase-search
• 永続化してコミット可能なナレッジグラフには graphify

ベストプラクティス

1. ある程度の処理にはトークンを使用してください — 認証なしの GitHub API は 1 時間あたり 60 リクエストまでですが、PAT または GitHub App を使うと 1 時間あたり 5,000 リクエストまで増え、分析も高速化します（CodeFlow はリクエストごとにファイルの内容を取得します）。
2. トークンはローカルに保管してください — トークンはブラウザーのメモリ内にのみ保存され、タブを閉じると消去されます。コミットしないでください。チームで使う場合は、GitHub App のインストールトークンを推奨します（細かな権限設定が可能で、取り消し可能、監査ログに記録されます）。
3. ローカルスキャンの前に除外パターンを設定してください — node_modules、キャッシュ、ビルド出力、バイナリーアセットをスキップし、グラフの見やすさと速度を保ちます。
4. 依存関係のエッジはヒューリスティックとして扱ってください — ファイルと明示的なインポートの範囲内で、名前が一致する関数を対象にします。動的インポートやリフレクションを使用したリファクタリングで影響範囲についての主張に基づいて作業する前に、必ず確認してください。
5. 機密性の高いコードにはセルフホストを使用してください — 監査可能な index.html が 1 つだけです。ローカルファイルの分析はネットワーク呼び出しなしで完全にオフラインで動作します。
6. 自動化には JSON をエクスポートしてください — JSON レポートは、CI/CD、カスタムレポート、または別のツールへのデータ提供に利用するインテグレーション用インターフェースです。

参考資料

• 上流リポジトリ：https://github.com/braedonsaunders/codeflow
• ライブアプリ：https://codeflow-five.vercel.app/
• CodeFlow Card Action：https://github.com/braedonsaunders/codeflow/tree/main/card
• 機能と言語のリファレンス：references/features.md
• インストーラースクリプト：scripts/install.sh
• 関連するスキル：../drawio/SKILL.md、../semble/SKILL.md、 ../codebase-search/SKILL.md、../graphify/SKILL.md
• ライセンス：MIT