← 返回列表

新工具 GitHub · haydenschmitty/floorplan

用 floorplan 插件让 Claude Code/Codex 把代码库画成可交互地图

对现有项目说一句“Make me a floorplan of this app.”，得到可缩放、可提问的交互式代码库地图，看清每个部分、文件与请求如何相连。

开始尝试

效果

README 展示了 Ask 问答结果、按页面起点的调用链、最近改动看板、健康检查与分页下钻等截图；网页还提供无需安装的在线 demo（Brewline 示例地图）。本站不托管截图或视频。

这是什么

新在哪里：以前理解代码库靠让 agent 写文字说明或手工画架构图；现在一句提示词就得到可缩放、可提问、跨仓库连线的交互地图，并附健康检查与最近改动高亮。

怎么做到的：在 Claude Code 或 Codex 中通过插件市场安装 floorplan（Claude Code 用 claude plugin marketplace add / claude plugin install；Codex 用 codex plugin marketplace add / codex plugin add），在包含前后端仓库的目录打开会话，让 agent 生成 floorplan；地图在本机生成，可双击下钻到部件、文件、端点，用 Ask 栏提问，健康检查给出待修项与修复提示词。

适合谁
已在自己的项目里使用 Claude Code 或 Codex、想搞清应用结构怎么拼起来的人和团队。
能帮你
把 agent 读代码的理解变成可缩放、可提问、可随时刷新的交互地图，省去读代码和手画架构图。

评分 三项分开看，不合成总分；热度不等于好用

新颖性
全新做法 · 2026-10-27 出现
热度
未知
易上手
需要一些准备
怎么评的

三项都由本站记录的事实按固定规则算出，编辑不能直接改档位；规则改动会写进更新说明。

新颖性

  • ●●● 全新做法，且有来源依据的出现时间在最近 30 天内
  • ●●○ 老工具新用法或近期刚开放，且有来源依据的时间在最近 30 天内
  • ●○○ 出现时间超过 30 天、未核实到精确日期，或已不再是新做法
  • 其他 出现时间未核实、晚于今天，或新颖类型未核实时按最低一档处理，不靠猜测加分

热度

  • ●●● 最近一次每周人工确认为“热门”：最近 14 天里独立讨论、实际案例、持续时间、传播平台、相对关注五项门槛全部满足（规则 heat-v1）
  • ●●○ 最近一次人工确认为“观察中”：前三项至少一项达到，或讨论增长 ≥ 50%，且至少 2 个独立案例
  • ●○○ 最近一次人工确认为“未进入跟踪”
  • 其他 还没有人工确认过的热度记录时显示“未知”。热度只统计本站已接入的信源，不代表全网

易上手

  • ●●● 准备门槛低且难度入门：不需要新账号或付费，首次尝试不超过 30 分钟，公开可用，会复制粘贴即可
  • ●●○ 准备门槛中等，或门槛低但需要改少量代码或配置
  • ●○○ 准备门槛高：需要商业软件或付费服务、首次尝试超过 2 小时、特殊硬件或网络、排队或邀请且无替代方案，或需要专业知识
  • 其他 只有介绍、还没有站内步骤，或关键步骤已失效时显示“暂不可试”；门槛未核实时显示“未核实”

怎么尝试

  • 时间 首次约 15 分钟
  • 费用 免费（模型调用另计）：README 写明 Floorplan 运行在你已有的 Claude Code 或 Codex 套餐上，无需 API 密钥；项目本身为 MIT 许可，但需自备对应订阅。
  • 账号 不需要新账号
  • 环境 本机需 Node.js 18+；Claude Code 桌面应用或 CLI，或 Codex 应用/ChatGPT 登录；也可只开浏览器访问在线 demo 无需安装。
  • 准备 Node.js 18+：运行 Floorplan 插件
  • 准备 Claude Code（桌面应用或 CLI）或 Codex：作为 agent 读取代码库并生成地图，地图 Ask 栏也依赖其登录态
  • 准备 Claude Code 订阅或 ChatGPT 登录的 Codex：Floorplan 使用已有套餐、不需要 API 密钥
  • 准备 浏览器：打开在线 demo 或查看生成的地图
  • 准备 待分析的项目代码目录：若前后端分处两个仓库，需打开同时包含二者的上级文件夹

替代方案：在线 demo（仅体验，不分析自己的代码）。能做到：不想安装时可在浏览器直接打开 Brewline 示例地图体验分页缩放、问答和健康检查。；差别：demo 只展示作者准备的示例项目，无法绘制你自己的代码库；要分析自己的项目仍需 Node.js 18+ 与 Claude Code 或 Codex。。

完成替代方案不算复现本实践。

按下面的步骤就能做出第一个结果。复制命令不会自动执行。

  1. 先看在线 demo 确认要什么效果

    打开 https://haydenschmitty.github.io/floorplan-demo/ ，找一个真实用户路径点击下钻，并试一次 Ask。

    预期结果：能在浏览器里看到 Brewline 的交互地图，覆盖部件、文件、请求与健康检查。

  2. 在 Claude Code 安装插件

    在 Claude Code 桌面应用的 Code 标签或 CLI 中依次执行两条命令，然后新建一个会话。

    bash原始来源命令 
    claude plugin marketplace add haydenschmitty/floorplan && claude plugin install floorplan@floorplan

    预期结果：插件安装成功，新会话中可以使用 floorplan。

  3. （Codex 用户）改用插件市场安装

    在 Codex 应用中打开 Plugins，选 Add a marketplace，Source 填 haydenschmitty/floorplan 并 Add marketplace，然后点 + 安装 Floorplan；或在终端执行 command。

    bash原始来源命令 
    codex plugin marketplace add haydenschmitty/floorplan && codex plugin add floorplan@floorplan

    预期结果：Floorplan 出现在 Codex 插件中，新会话里可调用。

  4. 打开项目并生成地图

    在 Claude Code 或 Codex 中打开项目目录（前后端分仓时打开同时包含两者的上级目录），然后输入提示词；Codex 里也可输入 $floorplan。

    终端原始来源命令 
    Make me a floorplan of this app.

    预期结果：几分钟后得到该应用的地图，可双击进入部件、文件与端点。

  5. 对地图提问并做健康检查

    在地图 Ask 栏提一个具体流程问题，例如退款如何到达用户卡上；再打开 Health check 查看代码中的密码、未鉴权端点等项。

    预期结果：Ask 返回答案加相关部件的迷你地图与分步说明；健康检查列出问题项并附可直接粘贴的修复提示词。

原始来源：haydenschmitty/floorplan ↗