code-gene-graph产品系统

我要开发同款
叁肆2026年09月21日
2阅读

技术信息

语言技术
ReactTypeScript
系统类型
Web
行业分类
开发工具

作品详情

行业场景

接手大项目时陈旧注释与文档会污染人类与 AI 对代码的理解,因此做一个剥离一切表层文本、只提取变量真实流转并可视化成图谱的工具,用于帮助人类和 AI 更直观的了解真实的数据流,并以此倒推代码真正的产出。

功能介绍

1. 通过理解自解析时不断暴露出来的缺陷的深层原因,不断搭建更泛化的解析方式,最终做出关键决策,明确将一次“读取--操作--赋值”三者的解析分离,在当前阶段通过明确界定解析的作用域,建立初步的跨层匹配机制,确保总体流程的解耦,确立了不同语法模块的解析的高度可复用。
2. 通过深入学习 TypeScript 语言机制,了解当前静态解析的现有技术与思路,并通过联合 TypeScript 语言中实际存在的静态解析模式与本项目对于细分语法解析方式的相同点,抽离出其中可复用模块,以此清晰规划未来的快速迭代与改进方向。

项目实现

1. 使用 ts-morph 解析 TypeScript 源码,并搭建对数据标签的静态解析工具,通过追踪变量的读取与赋值以及这两者之间的操作关系,还原出最真实的数据流。前端使用 React Flow 渲染图谱:以变量与操作函数为核心节点,建立直观的数据流关系,同时通过变量之间的递进分层关系更清晰的展现出数据层级。
2. 通过解析后端所得的数据的数据流流向,建立文件间与总体变量间的双层递进,并同时横向对齐变量与所属文件的关系,实现对两者布局的整体约束。同时明确可视化中的关键信息对象为变量、操作点、类型,通过按需展示三者的信息,确保人类对图的可读性。

示例图片

声明:本文仅代表作者观点,不代表本站立场。如果侵犯到您的合法权益,请联系我们删除侵权资源!如果遇到资源链接失效,请您通过评论或工单的方式通知管理员。未经允许,不得转载,本站所有资源文章禁止商业使用运营!
下载安装【程序员客栈】APP
实时对接需求、及时收发消息、丰富的开放项目需求、随时随地查看项目状态

评论