我终于可以骄傲地说：直接从源码分析出程序完整的数据流向图谱，现在成为可能了！

[muchan92]

在线预览： https://rainforesters.github.io/imsure-analyzer/

这个图谱表达了程序完整的功能/业务逻辑，它们都含在数据流向里面。这就是我所说的网状结构的自动状态机，现在终于可以直观展现在大家面前了。

这个天方夜谭的想法此刻终于落地成为现实，若没有声明式语法和 imsure，这个念头我压根不会想，是这种看似怪异的语法让这变为了可能，现在终于可以舒心一笑。

回顾，有很多不解、质疑、甚至谩骂，辛酸是有的，但更多还是自己的原因。因为很多时候文字的表达能力很苍白，之前我很难用文字把它美丽的样子诉说给大家，每个人脑海中都是它各种怪异的样子，现在它美丽的样子终于可以直观展现给大家了。

经历反思、自我质疑、和不断自我博弈后，因为能清晰洞见它的美，所以我还在坚持，更因为在日常工作中的真实实践，它所展现的强壮、坚韧的稳定性和可维护性，带来的收益完全足以抵消语法的不便，让我有底气坚定这是正确的方向。我依然认为从算术方法到方程式方法是正确的选择。

下面是我们一个充斥复杂业务功能和许多“奇妙”需求的真实项目，时至今日依然可以轻易地继续添加或修改各种功能，维护难度与项目创建的第一天毫无分别，从未重构，也从不需要重构。因为把任何两个类型关联起来就像画条线一样简单，也根本不必担心会破坏任何已有的连线，就像一个韧性十足的弹性球，揉不烂、搓不坏。（曾想把图谱渲染为更理想的 3D 球状，但视角切换不利于全局观察，就此作罢，大家可以脑补）

我知道，肯定会有指责声音出现，我接受，但请理性发言，不要谩骂，不要阴阳怪气。今天是儿童节，祝大家开心快乐，儿童的纯真，我想是最可贵，最令人向往的……

备注：若这显得凌乱，是布局算法的问题，你可以把它想象为一个 3D 球。（我真不擅长这个布局算法，示例里的布局我也不甚满意，幸好还可以使用高亮关联）

[corcre]

以前修屎山的时候最希望就是有这个功能😂

[deplives]

pnpm install
Scope: all 3 workspace projects
[WARN] Ignoring broken lockfile at /Users/bob/Developer/github/imsure-analyzer: Lockfile /Users/bob/Developer/github/imsure-analyzer/pnpm-lock.yaml not compatible with current pnpm
[WARN] Tarball download average speed 18 KiB/s (size 20 KiB) is below 50 KiB/s: https://registry.npmjs.org/dockview-vue/-/dockview-vue-6.6.1.tgz (GET)
packages/graph | [WARN] deprecated [email protected]

╭─────────────────────────────────────────╮
│ │
│ Update available! 11.4.0 → 11.5.0. │
│ Changelog: https://pnpm.io/v/11.5.0 │
│ To update, run: pnpm add -g pnpm │
│ │
╰─────────────────────────────────────────╯

[WARN] Tarball download average speed 47 KiB/s (size 228 KiB) is below 50 KiB/s: https://registry.npmjs.org/d3/-/d3-7.9.0.tgz (GET)
[WARN] Tarball download average speed 36 KiB/s (size 47 KiB) is below 50 KiB/s: https://registry.npmjs.org/@vitest/runner/-/runner-4.1.7.tgz (GET)
[WARN] Tarball download average speed 24 KiB/s (size 114 KiB) is below 50 KiB/s: https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz (GET)
[WARN] 2 other warnings
Packages: +311
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Downloading [email protected]: 14.65 MB/14.65 MB, done
Progress: resolved 353, reused 64, downloaded 253, added 311, done
. postinstall$ pnpm run build
[32 lines collapsed]
│ packages/graph build: dist/assets/logo-BuEh7Drd.svg 3.47 kB │ gzip: 1.56 kB
│ packages/graph build: dist/assets/index-DmvL4LxK.css 156.68 kB │ gzip: 16.33 kB
│ packages/graph build: dist/assets/index-Btya9TlM.js 2,254.83 kB │ gzip: 644.67 kB
│ packages/graph build: ✓ built in 895ms
│ packages/graph build: [plugin builtin:vite-reporter]
│ packages/graph build: (!) Some chunks are larger than 500 kB after minification. Consider:
│ packages/graph build: - Using dynamic import() to code-split the application
│ packages/graph build: - Use build.rolldownOptions.output.codeSplitting to improve chunking: https://rolldown.rs/reference/OutputOptions.codeSplitting
│ packages/graph build: - Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
│ packages/graph build: Done
└─ Done in 4.5s
Downloading @rolldown/[email protected]: 8.01 MB/8.01 MB, done

devDependencies:
+ @types/node 25.9.1
+ prettier 3.8.3
+ rimraf 6.1.3
+ typescript 6.0.3
+ vitest 4.1.7

[ERR_PNPM_IGNORED_BUILDS] Ignored build scripts: @parcel/[email protected], [email protected]

Run "pnpm approve-builds" to pick which dependencies should be allowed to run scripts.

[w574495524]

研究研究

[YanSeven]

有过类似的想法，但是交互和展示是个大问题。

[icyalala]

第一张图还能勉强一看，第二张图完全不是给人看的

[tengxun]

赞一个,很棒的想法

[muchan92]

@deplives 升级下 node pnpm 试试

[muchan92]

@tengxun 感谢❤️

[JoeSmith]

https://github.com/cytoscape/cytoscape.js 这个说不定对你有帮助

[thevenin1416]

这是一个什么样的原理呢，我这边主要是前端项目，能分析数据的来龙去脉吗？

[xingzhi95]

很屌啊，可以看数据和业务逻辑的流向

[SilenceLL]

赞，我几年前也因为我们的业务复杂度人工做了一个类似的图，但是后面因为维护的复杂性放弃更新了。最近几个月有强烈的意愿，想要做一个业务全貌的关系图谱，减少或者杜绝需求、设计阶段的业务遗漏。

[zzNaLOGIC]

等会拿我们老系统试试，十多年的屎山，业务揉杂，能分析出来就说明真的有用。

[GPLer]

目前好像只支持 ts ，但是似乎没有明显说明。

[XuanYuan]

为什么一下子想起了晶球盘……

[muchan92]

@thevenin1416
@zzNaLOGIC
@GPLer
只支持声明式语法，使用 imsure 库的源码，README 里有说明。
原理是声明式语法才是支持静态分析的根基，能够在不运行程序就能分析出完整的数据流向。

[th00000]

使用 ```pnpm cli analyze [project-path] -o output.json``` 命令后疯狂报错，无法使用，建议大家不要浪费自己宝贵的时间

[muchan92]

@th00000 README 里说明了使用场景。它不能分析任何项目的源码，个人认为对于传统语法，静态分出数据流向几乎不可能，交给 AI 或许性价比更高。

这能正确运行
pnpm cli analyze ./packages/analyzer/examples/

[kneo]

这玩意需要 AI ？随便基于 lsp 把所有 symbol 和 usage 找出来不就有了？

但是你觉得这种嘈杂的信息有用？可视化技术是用来压缩信息的，不是把垃圾信息展开的。你的行为就像是跑去垃圾站，把垃圾桶里每个垃圾袋戳破，看垃圾铺满一地，露出微笑：看，多美！

[popyui]

@kneo 总要做一些有趣的事情，我觉得这很好。

[yanyiming]

用 ai 分析数据流向后其实有问题直接问 ai 就行了,可视化也是为了解决问题嘛, 干脆一步到位.

[muchan92]

@kneo #19 没错，我也认同仅查找 symbol usage 是嘈杂的信息，所以能根据这些嘈杂信息正确推导数据流向即是信息压缩的过程，但我认为这在传统语法下几乎无法做到，因为 symbol 状态是动态的只能在运行时确定，很难正确推导，所以 #18 才提出交给 AI 。若你觉得可以搞定这个产品，show your code ，我相信很多人都会认可其价值意义。

另外，我不清楚你所描述的垃圾是什么，是嘈杂的 symbol usage ？还是代码本身？无论是哪一个，那是否是在说明代码本身就是垃圾站，那么即使压缩信息得到的也依然是垃圾？岂不是 IDE 的种种功能也是戳破垃圾，压缩垃圾，得到垃圾？

[kneo]

@muchan92 你如果想从项目生成图，那就是一种典型的可视化。你需要对代码，文字，数据，以及图的有一点基本的认知。

数据若水，壮如江海，能知一国之运，微至点滴，也能知一室之疏漏。但没有把江海一点一滴画出来的道理。

什么叫垃圾，无用之物就是垃圾。一盒面巾纸，两百张整整齐齐装在盒子里，不是垃圾。用的时候抽出来也不是垃圾。用完丢了就是垃圾。盒子扯碎丢满地也是垃圾。

你在 IDE 里 find usage 有用吗？有用啊。想看哪个点哪个啊。
如果 IDE 的 find usage 是把一万个 symbol 和它的八万个 usage 随机排序打印到纸上让你找呢，还有用吗？

AI 有用吗？有用啊，想知道哪个数据在代码中的流向，一张嘴它就告诉你了，还能给你画图。
如果 AI 的功能是把所有数据的所有流向随机搅在图一张几亿像素的图片里让你找呢，还有用吗？

垃圾就是无用之物，或者有用之物之无用之用。

现在的 AI ，能为人所用，还没有令人无用。可以说这是程序员最好的时代。在这个最好的时代，你用最好的工具完成了你本不能的无用之事。你真幸运。

[muchan92]

@kneo 若你承认 find usage 有用的话，那你为何不试用一下在线预览里的搜索、详情里的各种高亮呢？
你眼里只容得下这一张图吗？