[CodeGraph] 这样的代码可视化插件, 是你想要的吗?

[yanyin070321]

介绍

不知道大家在看代码的时候是否有过这样的困扰?

1. 看代码的时候忘记从哪里跳转过来的? 也不知道看了哪些部分? 需要反反复复倒退几遍才能有点印象
2. 分析复杂函数时, 需要仔细浏览一遍代码才能找到关键调用链路?
3. 当查看方法被哪些函数调用时, 好不容易把所有调用关系点了一遍, 发现还是脑子很乱, 还得再来一遍?

为了解决上述这些困扰, 我开发了一款名为 code graph 的 jetbrains 插件, 可以实现将代码之间的调用关系可视化, 帮助我们更快更简单的阅读和理解代码.

Features

关键特性:

1. 代码和图双向联动. 在代码中跳转时, 调用图会自动联动, 反之依然. 在不破坏大家阅读代码习惯的基础上提供了可视化的能力.
2. 代码访问路径高亮. 所有点击过的代码会在调用图中高亮显示, 让大家可以清晰的观察到哪些看过了哪些没看过.
3. 强大的过滤能力. 帮助大家快速过滤掉一些大家不关心的节点或者是边, 从而让调用图更加清晰明了.

安装

在 Intellij IDEA 的插件市场搜索 “CodeGraph” 即可安装 注意：目前仅支持 2022.3 及之后的版本

用法

找到需要生成调用关系图的方法, 点击鼠标右键, 选择 "Code Graph / Show Callee Graph For 'xxx'".

---

软件刚刚才发布出来，希望各位老铁们多提一些建议🤗️🤗️🤗️...

[zhuangzhuang1988]

牛逼、

[forvvvv123]

找了，是不是只支持 idea java ，goland 找了没有

[yanyin070321]

@forvvvv123 嗯, 只有 Java 版本

[qczone]

感谢楼主，简单试了一下，感觉还不错。另外提醒大家搜索的时候记得搜 Code Graph ，少了个空格 idea 插件市场搜不出来。

[mine2224]

牛逼，正好需要这样的功能

[stt66]

大佬牛批，就是能把支持的 idea 版本降低一点吗？老版本用不了。建议而已

[mine2224]

@mine2224 #5

安装后报错了：Plugin 'Code Graph' wasn't loaded because it's incompatible with the Kotlin plugin in K2 mode

[forvvvv123]

@yanyin070321 那这么牛逼的插件我岂不是用不了了

[Geekerstar]

搜不到这个插件呢

[harrisonkang]

感谢楼主

在使用过程中，发现在图中进行双击，是能联动跳转到相关方法的。但是通过点击代码之间的调用，图上相关方法并没有高亮。「`在代码中跳转时, 调用图会自动联动` 通过这个描述，我认为是有这个特性的，如果没有希望能加一个」

IDEA 版本：IntelliJ IDEA 2023.2.4 (Ultimate Edition)

[harrisonkang]

@Geekerstar #9
`Code Graph` 需要中间加个空格

[fFeeOps]

好使的老哥

[freefcw]

最新的 2024.2 还不支持呀

[freefcw]

给点建议

1. 支持拖曳，目前看好像不行
2. 缩放可以用 ctrl+鼠标滚轮，这个不错
3. 点击 caller 能跳到 caller 调用的那一行，而不是直接调 caller 的声明（或者可以选择跳 caller 还是 caller 调用的那一行）
4.默认的二级字体太小了，必须要缩放才能看清楚。缩放后又不能拖动，很麻烦

其他目前看好评

[ageovb]

如何清空 History

[PainAndLove]

支持 webstorm (ts) 吗？

[baskbull]

支持楼主，目前查看 caller 是有层级限制么？ 这个可以调整吗

[yanyin070321]

@freefcw 我还没注意到已经发布 2024.2 了, 我下个版本补上

[yanyin070321]

@ageovb 为啥要清空 history?

[yanyin070321]

@mine2224 看起来是和 kotlin 插件冲突了, 我研究一下啥问题导致的

[yanyin070321]

@harrisonkang 现在这个版本在 caller 模式下高亮有点问题, 目前已经修复, 这周会发布第二个小版本

[yanyin070321]

@baskbull 没有层级限制, 只是第一次展示默认只会展开 3 层, 如果要查看更多层, 可以通过节点的“+”按钮展开

[yanyin070321]

@PainAndLove 目前只支持了 intellij, 等功能完善一点我再开始支持其他的 IDE

[Nasei]

我感觉 vs 的就很好，甚至可以 debug 时显示

[yanyin070321]

@forvvvv123 感谢认可, 暂时还来不及弄 golang, 等功能完善一点我再扩展其他的语言🙏

[yanyin070321]

@freefcw 感谢建议
1. 由于采用了自动布局, 所以没有开放拖动功能, 不然会破坏自动布局
3. 可以点击里面的线, 可以跳转到对应的代码行; 点击节点只会跳转到对应的方法
4. 现在这个版本默认会启用自动适应窗口大小, 导致默认情况下字体很小, 下个版本就没有这个问题了

[yanyin070321]

@Nasei 老哥, 是哪个插件? 我学习一下

[zhangdafoye]

mark ，导出功能来一波

[freefcw]

@yanyin070321 你说的拖动是指拖动节点吗？

我指的是拖动画布，主要是有时候要去看一部分，整体有时候太多，字又小，不好弄。比如放大了，不能拖动，就只能看到一小部分节点

[Scarb]

这个说白了就是 idea 的 hierarchy 可视化了。其实直接用 ctrl+alt+H 打开 hierarchy 效果也差不多。
建议一个我个人觉得有用的功能，支持隐藏某些方法（右键-隐藏），因为很多方法并不是很重要。隐藏了之后把主链路的方法调用导出，可以作为文章的配图

[jorneyr]

只能说，很牛逼。

[yanyin070321]

@freefcw 有道理，下个版本支持一波

[yanyin070321]

@Scarb 是的，我做的时候发现 intellij 已经有类似的功能了，但是体验了一下，没法完全满足我的预期

[ageovb]

@yanyin070321 #19 强迫症

[yanyin070321]

@stt66 我验证一下有没有兼容性问题吧, 改动不大的话我支持一下

[Nasei]

@yanyin070321 是 vs 自带的，手头没有设备，大概是这个 https://learn.microsoft.com/zh-cn/visualstudio/modeling/use-code-maps-to-debug-your-applications?view=vs-2022

[freemyspace]

有一款收费的 SequenceDiagram 插件

[4ra1n]

题主是代码层面，我主要做 CLASS 层面，可以看下我的开源项目：

https://github.com/jar-analyzer/jar-analyzer

不过我也想做一下类似的图效果，学习下

[yanyin070321]

@4ra1n 你这个很强, 功能也比较完善了, 我的这个还是一个原型产品