GitHubリポジトリをインタラクティブなアーキテクチャ図や約1分のナレーション付き解説動画に変換し、AIエージェント向けのMCPサーバーも提供します。
haydenschmitty/floorplan
Claude CodeまたはCodexが作成する、構成要素・ファイル・エンドポイントとそれらのつながりを示す、コードベースのインタラクティブな平易な言葉のマップ。
- スター
- 3,062
- フォーク
- 233
- 未解決の Issue
- 7
- 最終コミット
- 4 日前
これは何?
Floorplanは、既存のアプリを読み込み、拡大・縮小できる平易な言葉のマップを生成するClaude CodeおよびCodex向けプラグインです。構成要素、ファイル、Webエンドポイントには内容が分かる名前が付けられ、importやフロントエンドからバックエンドへのリクエストが、別々のリポジトリにまたがる場合も含めて、つながりとして描画されます。
マップに加えて、AIで作られたアプリによくある問題を検出するHealth checkも備えています。コード内に残されたキー、誰でも読み取れるデータベーステーブル、公開状態のFirebaseルール、未検証のStripe Webhook、サインイン不要のエンドポイントなどを検出し、それぞれ修正案を提示します。Recent workビューでは、AIアシスタントが直近で変更した内容を確認できます。また、まだ存在しないアプリについて、PRDや仕様書からブループリントを作成することもできます。
スキャンとレイアウトのスクリプトは依存関係のない素のNode.jsで動作し、出力は自分のマシン上でのみ配信されるローカルHTMLファイルです。更新時には変更されたファイルだけを再読み込みし、生成フォルダはgitの管理対象外になります。
主な機能
- 01アプリ全体から個々のファイルやエンドポイントまで拡大・縮小できるマップ
- 02importをたどり、別々のリポジトリにまたがるフロントエンドのリクエストとバックエンドのエンドポイントを対応付け
- 03外部に露出したキー、公開状態のデータベースルール、未検証のWebhook、認証不要のエンドポイントを検出するHealth check
- 04AIアシスタントが変更した構成要素を表示するRecent workビュー
- 05PRDや仕様書をもとに、計画中のシステムのブループリントを作成するモード
ユースケース
- コードをすべて読まずに、AIの支援を多く受けて作られたアプリの構成を把握する
- 複数リポジトリにまたがるプロジェクトで、新しいチームメンバーを受け入れる
- AIによるコーディングセッションで何が変更され、なぜ変更されたのかを確認する
- リリース前に、よくあるセキュリティ設定の不備を見つける
クイックスタート
- 1
Claude Code に Floorplan マーケットプレイスを追加する
claude plugin marketplace add haydenschmitty/floorplan - 2
Floorplan プラグインをインストールする
claude plugin install floorplan@floorplan - 3
新しいセッションで、アプリのフロアプランを作成するよう Claude Code に依頼する
- 4
ブラウザーに表示されたマップを開いて、探索する
使う前に知っておきたいこと
- Node.js 18 以降と、Claude Code または Codex のいずれかが必要です。
- デスクトップアプリでマップの Ask バーを使って実際のコードを読み取るには、Claude Code CLI のインストールが必要です。
収録されている特集
トピック
よくある質問
- floorplan とは?
- Claude CodeまたはCodexが作成する、構成要素・ファイル・エンドポイントとそれらのつながりを示す、コードベースのインタラクティブな平易な言葉のマップ。 Floorplanは、既存のアプリを読み込み、拡大・縮小できる平易な言葉のマップを生成するClaude CodeおよびCodex向けプラグインです。構成要素、ファイル、Webエンドポイントには内容が分かる名前が付けられ、importやフロントエンドからバックエンドへのリクエストが、別々のリポジトリにまたがる場合も含めて、つながりとして描画されます。
- floorplan は無料で使えますか?ライセンスは?
- floorplan は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
- floorplan は今もメンテナンスされていますか?
- 活発にメンテナンス中。floorplan の最終コミットは 2026年11月2日 です。
- floorplan は何に使えますか?
- コードをすべて読まずに、AIの支援を多く受けて作られたアプリの構成を把握する 複数リポジトリにまたがるプロジェクトで、新しいチームメンバーを受け入れる AIによるコーディングセッションで何が変更され、なぜ変更されたのかを確認する リリース前に、よくあるセキュリティ設定の不備を見つける
- floorplan のインストール方法は?
- Claude Code に Floorplan マーケットプレイスを追加する: claude plugin marketplace add haydenschmitty/floorplan Floorplan プラグインをインストールする: claude plugin install floorplan@floorplan 新しいセッションで、アプリのフロアプランを作成するよう Claude Code に依頼する ブラウザーに表示されたマップを開いて、探索する
- floorplan はどこで入手できますか?
- ソースコードとインストール手順は GitHub にあります:https://github.com/haydenschmitty/floorplan
概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。
関連プロジェクト
AIコーディングのトークン使用量と費用を、ツール・モデル・プロジェクト・タスク別に分析するローカルCLI/デスクトップアプリ。
複数プロジェクトのClaude CodeとCodexのエージェントセッションを1つのウィンドウで実行できる、軽量なクロスプラットフォームAIコーディングIDEです。
AIコーディングエージェントに、再利用と最小限の実装を優先し、必要なコードだけを書かせるプロンプト型スキル。
次の行動を先に示し、番号付きの手順で余計な前置きを省く、コーディングアシスタント向けスキル。
Claude Codeにライブのステータスラインを追加するプラグインで、コンテキスト使用量、レート制限、実行中のツール、稼働中のエージェント、Todoの進捗を表示します。