【免费下载链接】noodlesYour codebase was probably AI-generated. Get a better handle on it. Noodles creates interactive diagrams that visualize how your code actually works, so you can understand what the AI built without reading every line.项目地址https://gitcode.com/gh_mirrors/nood/noodles点击查看免费下载Noodles是一款 AI 驱动的代码可视化开源工具它的核心能力是通过tree-sitter对代码进行AST 解析从中精准提取函数调用关系构建出完整的函数调用图Call Graph并渲染成交互式 mermaid 图表。本文带你深入源码看看它是如何钓出每一条调用边的——即使你不熟悉静态分析也能轻松读懂这套三阶段流水线的设计思路。 Noodles 是什么你的代码库很可能由 AI 生成但你并不完全了解它。Noodles 的价值在于不用逐行读代码就能看清代码实际是怎么运转的。它做四件事能力说明调用图构建用 tree-sitter 解析 AST找出函数之间谁调用谁Mermaid 图表生成主图 子图节点按角色分类着色交互式查看器支持平移、缩放、点[]下钻子图双模式分析repo模式分析整个仓库pr模式只聚焦 PR 改动最终效果长这样——从一条命令到一张可交互的代码流程图 核心文件与三阶段流水线整套 AST 分析逻辑集中在这一个文件里约 700 行但结构非常清晰调用图构建核心call_graph_builder.py仓库分析编排repo_analyzer.py图表生成diagram_builder.pybuild_call_graph() 是整个流程的入口分三个阶段执行Phase 1: 遍历所有源文件 → 收集函数定义和import 表 Phase 2: 逐个函数扫描函数体 → 提取直接调用 → 过滤外部库调用 Phase 3: 反向汇总调用者 → 按入度/出度给节点分类支持的语言由扩展名映射表决定EXTENSION_TO_LANG.py、.js、.jsx、.ts、.tsx。 阶段一从 AST 里捞出所有函数定义Noodles 通过 tree-sitter-language-pack 拿到各语言的 parser对每个源文件执行parser.parse(source)得到一棵语法树。真正的捞动作在 _walk_for_funcs() 中完成——它递归遍历 AST按节点类型识别函数语言AST 节点类型对应写法Pythonfunction_definitiondef foo():Pythonclass_definition记录类名拼进限定名JS/TSfunction_declarationfunction foo() {}JS/TSmethod_definition类方法JS/TSvariable_declaratorarrow_functionconst foo () {}有两个巧妙设计值得注意限定名带类上下文遇到class_definition时会把类名压入栈产出Class.method形式的限定名最终索引为路径::限定名如api.py::APIClient.get天然避免同名函数冲突。跳过.gitignore与node_modules_iter_source_files() 用 pathspec 匹配 gitignore 规则只扫描真正需要分析的源码。与此同时_collect_file_imports() 会为每个文件收集一份本地名 → 来源模块的 import 表——这是后面精准过滤的弹药库。注意它会跳过相对导入from . import utils因为相对导入指向项目内部不该被当成外部依赖。 阶段二精准提取调用并滤掉假匹配拿到函数 AST 节点后_get_direct_calls() 只扫描函数体内的调用遇到嵌套函数定义就停止递归——保证嵌套函数里的调用不会被错误记到外层函数头上。调用节点长什么样不同语言的调用在 AST 中的节点类型不同见 _collect_calls()PythoncallJS/TScall_expression关键一步拆出方法名 接收者_extract_callee_info() 通过child_by_field_name(function)定位被调对象再按类型拆解requests.get(url) # → 方法名 get接收者 requests self.helper() # → 方法名 helper接收者 self os.path.join(a, b) # → 方法名 join接收者 os.path链式拼接 helper() # → 方法名 helper接收者 None链式接收者由 _get_full_receiver_name() 递归拼出这也是它能正确识别os.path这种多级引用的原因。为什么必须过滤外部库调用这是 Noodles 在 v0.4.1 专门修复的坑见 CHANGELOG.md如果项目里既有内部方法APIClient.get()代码里又调用了requests.get()朴素匹配会把两者连成一条不存在的边。Noodles 用两道过滤器解决_is_external_receiver()接收者根名在 import 表里 → 是外部库丢弃。但self/cls/this开头的接收者永远不算外部那是实例方法。_is_imported_function()处理from subprocess import run这类裸函数调用——没有接收者、且名字在 import 表里 → 是外部函数丢弃。这套规则有完整的单元测试覆盖包括requests.get()不误连、self.helper()正确连接等场景见 tests/test_call_graph_builder.py。匹配策略优先同文件调用名解析时_build_call_graph 第二阶段 会先找同文件的候选函数同文件找不到才放开到全局。这符合就近原则进一步降低误连率。 阶段三按度数给节点分类有了每条谁调用谁的边_phase 3 反向汇总出每个函数的调用者列表然后按入度/出度四分类类型含义图表形状start_point只出不进入口函数六边形end_point只进不出叶子函数圆角矩形process既被调用又调用别人矩形orphan无任何连接不画进主图这个分类直接决定了图表结构build_diagrams() 以所有start_point为起点展开主图把 test 和 orphan 节点剔除大扇出的部分拆成可下钻的子图。⚛️ 彩蛋JSX 组件也算调用React/Next.js 项目里MyComponent /并不是传统函数调用但 Noodles 在 _collect_calls() 中额外识别了jsx_self_closing_element和jsx_opening_element节点并用 _is_custom_component() 按首字母大写 自定义组件的 React 约定过滤掉div、span这类 HTML 元素——于是组件层级图能正确出现在调用图里。 自己动手验证git clone https://gitcode.com/gh_mirrors/nood/noodles cd noodles pip install -e . noodles repo repo-url分析产物中有 call_graph.json每个节点都带callers/callees列表和源码行号——行号正是从 AST 节点的start_point换算来的代码注释 说明了 0 起始的坑。⚠️ 诚实的边界AST 分析抓不住什么按 README 的官方说明以下模式无法被检测动态调用getattr(obj, method)()、obj[key]()通过装饰器/框架注册的回调如路由处理器这正是静态 AST 分析的固有边界。Noodles 的应对思路是把 AST 做不到的部分交给 LLM 做描述增强enrich但调用边本身永远来自 tree-sitter——确定性部分绝不靠模型猜。 总结Noodles 的调用图精度来自三个层层递进的设计限定名 类上下文从源头解决同名函数歧义接收者拆分 import 表双重过滤精准区分内部调用与外部库调用同文件优先匹配 度数分类让每条边和每个节点都有清晰的语义角色。理解这套流程后你甚至可以参考 tests/test_call_graph_builder.py 的写法把同样的思路移植到其他语言的 AST 分析工具中——毕竟从树里钓鱼的技巧是相通的。 赞分享【免费下载链接】noodlesYour codebase was probably AI-generated. Get a better handle on it. Noodles creates interactive diagrams that visualize how your code actually works, so you can understand what the AI built without reading every line.项目地址https://gitcode.com/gh_mirrors/nood/noodles点击查看免费下载相关推荐Turbo插件开发指南从零构建自定义流程节点与扩展能力Turbo插件开发指南从零构建自定义流程节点与扩展能力 Turbo是一款轻量级流程引擎服务框架支持BPMN2.0规范可作为底层服务支持各类流程设计、低代码Ripple语法解析器深度解析Tree-sitter如何实现精准语法高亮Ripple语法解析器深度解析Tree sitter如何实现精准语法高亮 Ripple是一个优雅的TypeScript UI框架它通过Tree sitter前端Web框架SSR如何在 10 分钟内开始使用 Tree-sitter快速入门教程如何在 10 分钟内开始使用 Tree sitter快速入门教程 Tree sitter 是一个强大的增量解析系统专为编程工具设计。它能够为源代码文件构建具开发工具创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考