夜雨聆风学习资料网

ARTICLE · 1355238

4.1K Star!又一神级插件:让 Claude / Codex 读取代码库,并将其变成一个交互式地图

发布时间：2026-11-14 13:53:23 最近访问：2026-11-14 13:53:23
4.1K Star!又一神级插件:让 Claude / Codex 读取代码库,并将其变成一个交互式地图
这两年，用 AI 写代码的人越来越多，生成出来的东西也能顺利跑起来。
可要是你找一位这样的朋友问他，改一张表会怎样，他大概率说不清楚。
原因也很简单，代码只要能跑，很多细节就容易被忽略。
时间一长，整个项目连作者自己看着都像个黑盒。
而今天介绍的开源项目：floorplan，正是为了解决这个问题而生。
01 项目介绍
floorplan 的官方定位是：
See how your app actually fits together.
简单点说：
装上它，Claude Code / Codex 会读取代码库，并将其变成一张交互式地图。
每个部分、文件、接口都有一个简单的名字，并且它们之间的所有连接都会被展示出来。
作者：Hayden Smith。
02 项目亮点
1.直接询问地图问题：
地图底下有个叫：Ask 的输入框。
我们想知道什么，直接打字询问即可，如：退款如何退到用户卡里的？
它会给出答案，并画出一张相关部分的小地图。
当然，它也可以逐步演示。
2.健康检查：
AI 构建的应用经常会有几类经典错误，如：写在代码里的密钥......
floorplan 自带了个 Health check，就盯着这几类问题扫，
扫出来的问题下面都有一段解释，并附带一条现成的修复提示。
我们只需要点一下，就能让 Claude 或者 Codex 去改。
PS：官方强调这是快速自动检查，不是安全审计。
3.一眼辨别近期改动：
floorplan 有个 Recent work 面板：
AI 刚改过的卡片会亮成绿色，每张卡片上写明改动是为了实现哪个需求。
4.地图更新：
代码改完后，只需要说一句：
update the floorplan
它就会只重新读有变化的部分，当然，打开的地图会自己刷新。
PS：我们之前手动改过的名字，更新的时候会保留。
03 快速入门
1.前置：
Node.js 18+、Claude Code / Codex。
PS：走的是已有的订阅，不用再去申请什么 API key。
2.安装：
（1）Claude Code：
claude plugin marketplace add haydenschmitty/floorplanclaude plugin install floorplan@floorplan
（2）Codex：
用 ChatGPT 登录。无需终端：
在 Codex 应用中，打开插件并选择添加市场 。
在来源中输入：haydenschmitty/floorplan，然后点击添加市场。
找到 Floorplan，点击 + 进行安装。
或者，从终端运行：
codex plugin marketplace add haydenschmitty/floorplancodex plugin add floorplan@floorplan
3.使用：
用 Claude Code / Codex打开项目。
PS：如果前端和后端分别存在于不同的仓库，打开包含两者的文件夹。
然后说：
给我做一个这个应用的平面图。
等几分钟，地图会自己弹出来。
当然，如果还没有写代码，也可以：
把 PRD、需求文档丢给它，并提出问题：
给我画个我们需要建造的平面图。
然后，我们就会得到一个规划系统的蓝图，明确标注为一个计划。
04 结语
如果你也喜欢用 AI 写代码，又希望重新获得对代码库的掌控感和理解力，不妨试试。
# 开源地址：https://github.com/haydenschmitty/floorplan
我是繁星，关注我，获取更多好玩有趣的开源仓库！
谢谢你阅读我的文章~
我们下期再见！

回首页，搜索你想要的文档

在首页搜索框输入关键词，快速定位资料

文库首页搜索指引 立即搜索

相关学习资料