如何一张交互地图看懂整个代码库:Fallow viz 依赖图与树状图完整指南

如何一张交互地图看懂整个代码库:Fallow viz 依赖图与树状图完整指南【免费下载链接】fallowCodebase intelligence for TypeScript and JavaScript. Free static analysis of code and styles: unused code, duplication, circular deps, complexity hotspots, architecture boundaries, design-system drift. Optional paid runtime layer (Fallow Runtime): hot-path review and cold-path deletion evidence from real production traffic.项目地址: https://gitcode.com/gh_mirrors/fa/fallowFallow 是一款面向 TypeScript / JavaScript 的免费代码库智能分析工具,它的fallow viz命令能一键把整个代码库渲染成一张自包含的交互地图:既有用文件体积表示权重的树状图(Treemap),也有展示模块间引用关系的依赖图(Dependency Graph),还能叠加未使用代码、重复代码、架构边界等 6 种分析视角(Lens)。无需服务器、无需外部依赖,分析完成后双击一个 HTML 文件就能浏览整个项目的全貌。30 秒上手:生成你的第一张代码地图在任意 TypeScript / JavaScript 项目根目录运行:fallow vizFallow 会执行一次完整的项目分析(未使用代码 重复代码 复杂度 依赖图),然后把分析结果与可视化前端一起内嵌进一个单文件 HTML: 输出文件默认为项目根目录的fallow-viz.html,用--out可以指定路径; 整个页面没有任何外部资源,可以离线打开、可以直接发给同事,也可以提交到内部 wiki;生成完成后会自动用默认浏览器打开,加--no-open可跳过。这个一个文件 一张地图的设计,让代码库可视化第一次变得像分享一个截图一样简单。树状图视图:一眼看清项目体量分布打开页面默认进入**树状图(Treemap)**视图(快捷键t或m切换回来):面积即体量:每个矩形代表一个文件或目录,大小与文件字节数成正比。哪个目录又肥又重,扫一眼就知道;点击下钻:点击任意目录矩形就会放大进入该目录,顶部面包屑可以跳回任意层级,按0一键回到根目录;悬停提示:鼠标悬停会显示文件名、目录下的文件数、总大小,以及当前视角下的问题数(如12 个文件有克隆代码);右侧排行榜:面板按当前视角列出问题最多的文件,点击某一行,地图会自动下钻并定位到对应文件。对于刚接手的新项目,树状图是最好的城市航拍图——先找到最大的几个街区,再决定往哪儿钻。依赖图视图:谁引用谁,一图到底按g切换到依赖图视图,模块变成节点、import 关系变成连线:️节点即文件:节点颜色同样跟随当前视角(例如 Unused 视角下,红色 整个文件未使用,黄色 存在未使用的导出,绿色 入口文件);️道路聚合:同一对文件之间的多条 import 会合并成一条道路,悬停可查看聚合的引用数量、是否违反架构边界、是否属于循环依赖;聚簇模式:文件太多时可以开启聚簇,把同一目录的文件收拢成簇,先看街区级依赖,再放大看细节;️小地图:右下角内嵌缩略小地图,点击即可快速平移镜头,0键复位视野;Shift 点击:在两个节点之间按住 Shift 点击,可以追踪它们之间的完整引用路径;自我视角(Ego Mode):点击某个文件后,镜头会聚焦到它的邻居网络,快速回答改这个文件会影响谁。拖拽任意位置即可平移画布,滚轮缩放——和浏览任何一张电子地图一样自然。6 个分析镜头:同一张图,6 种问法顶部的镜头按钮(快捷键1–6)会即时重着色整张地图,而不需要重新分析:快捷键镜头回答的问题1Overview项目整体结构长什么样?2Unused哪些文件和导出是死代码?3Duplication哪些地方存在复制粘贴的克隆代码?4Architecture哪里违反了架构边界?哪里有循环依赖?5Health哪些文件是维护性热点、复杂度最高?6Security有哪些静态安全候选问题和检测盲区?另外还有 Dependencies(依赖卫生)、Frameworks(框架约定)、Styling(样式体系)、Feature flags(功能开关)4 个次级分析可以从 More 菜单进入。切换镜头时颜色是渐变过渡的,两种视图(Treemap / Graph)始终展示同一份数据,所以在树状图里发现的黄色文件,切到依赖图里还是黄色的——心智模型非常统一。小技巧:按?随时唤起帮助浮层,按/直接聚焦搜索框,输入文件名回车即可在依赖图中定位并聚焦该文件。不止 HTML:导出 DOT 与 Mermaid 文本图如果不想看交互页面,fallow viz也可以把依赖图导出为纯文本,方便嵌入文档和 CI 报告:fallow viz --viz-format dot # Graphviz DOT 格式 fallow viz --viz-format mermaid # Mermaid 格式,可粘贴进 Markdown两种文本格式都会按文件状态着色(红 未使用,黄 有未使用导出,绿 入口),并且跳过健康度等与图无关的分析,速度更快。对在 README 里贴一张依赖关系图这种需求,Mermaid 是最省事的路线。延伸阅读:可视化在源码中的位置 命令入口与 HTML/DOT/Mermaid 渲染逻辑:crates/cli/src/viz.rs,内嵌的前端资源在 crates/cli/viz-assets/; 树状图布局与下钻交互:viz-frontend/src/treemap.ts; 依赖图视图(构建、渲染、相机、聚簇、自我视角):viz-frontend/src/graph/; 镜头定义与快捷键体系:viz-frontend/src/lenses.ts; 官方内部文档对 viz 视角可用性的说明:docs/reference/cli-internals.md。总结:为什么值得试一张fallow viz命令,换来的是一个可离线、可分享、零配置的代码库交互地图:树状图回答代码都在哪儿、有多大,依赖图回答谁和谁纠缠在一起,6 个镜头再叠加未使用代码、重复、架构、健康度、安全等维度。对于接手陌生仓库、评估删除死代码、或是想给团队做一次架构分享的场景,它基本是打开就看懂的程度。【免费下载链接】fallowCodebase intelligence for TypeScript and JavaScript. Free static analysis of code and styles: unused code, duplication, circular deps, complexity hotspots, architecture boundaries, design-system drift. Optional paid runtime layer (Fallow Runtime): hot-path review and cold-path deletion evidence from real production traffic.项目地址: https://gitcode.com/gh_mirrors/fa/fallow创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考