V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
yanyin070321
V2EX  ›  程序员

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

  •  1
     
  •   yanyin070321 · 94 天前 · 2174 次点击
    这是一个创建于 94 天前的主题,其中的信息可能已经有所发展或是发生改变。

    介绍

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

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

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

    Imgur

    Features

    关键特性:

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

    Imgur

    Imgur

    安装

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

    用法

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


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

    39 条回复    2024-08-08 11:14:25 +08:00
    zhuangzhuang1988
        1
    zhuangzhuang1988  
       94 天前
    牛逼、
    forvvvv123
        2
    forvvvv123  
       94 天前
    找了,是不是只支持 idea java ,goland 找了没有
    yanyin070321
        3
    yanyin070321  
    OP
       94 天前
    @forvvvv123 嗯, 只有 Java 版本
    qczone
        4
    qczone  
       94 天前
    感谢楼主,简单试了一下,感觉还不错。另外提醒大家搜索的时候记得搜 Code Graph ,少了个空格 idea 插件市场搜不出来。
    mine2224
        5
    mine2224  
       94 天前
    牛逼,正好需要这样的功能
    stt66
        6
    stt66  
       94 天前
    大佬牛批,就是能把支持的 idea 版本降低一点吗?老版本用不了。建议而已
    mine2224
        7
    mine2224  
       94 天前
    @mine2224 #5

    安装后报错了:Plugin 'Code Graph' wasn't loaded because it's incompatible with the Kotlin plugin in K2 mode
    forvvvv123
        8
    forvvvv123  
       94 天前
    @yanyin070321 那这么牛逼的插件我岂不是用不了了
    Geekerstar
        9
    Geekerstar  
       94 天前
    搜不到这个插件呢
    harrisonkang
        10
    harrisonkang  
       94 天前
    感谢楼主

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

    IDEA 版本:IntelliJ IDEA 2023.2.4 (Ultimate Edition)
    harrisonkang
        11
    harrisonkang  
       94 天前
    @Geekerstar #9
    `Code Graph` 需要中间加个空格
    fFeeOps
        12
    fFeeOps  
       94 天前
    好使的老哥
    freefcw
        13
    freefcw  
       94 天前
    最新的 2024.2 还不支持呀
    freefcw
        14
    freefcw  
       94 天前
    给点建议

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

    其他目前看好评
    ageovb
        15
    ageovb  
       94 天前
    如何清空 History
    PainAndLove
        16
    PainAndLove  
       93 天前
    支持 webstorm (ts) 吗?
    baskbull
        17
    baskbull  
       93 天前
    支持楼主,目前查看 caller 是有层级限制么? 这个可以调整吗
    yanyin070321
        18
    yanyin070321  
    OP
       93 天前
    @freefcw 我还没注意到已经发布 2024.2 了, 我下个版本补上
    yanyin070321
        19
    yanyin070321  
    OP
       93 天前
    @ageovb 为啥要清空 history?
    yanyin070321
        20
    yanyin070321  
    OP
       93 天前
    @mine2224 看起来是和 kotlin 插件冲突了, 我研究一下啥问题导致的
    yanyin070321
        21
    yanyin070321  
    OP
       93 天前
    @harrisonkang 现在这个版本在 caller 模式下高亮有点问题, 目前已经修复, 这周会发布第二个小版本
    yanyin070321
        22
    yanyin070321  
    OP
       93 天前
    @baskbull 没有层级限制, 只是第一次展示默认只会展开 3 层, 如果要查看更多层, 可以通过节点的“+”按钮展开
    yanyin070321
        23
    yanyin070321  
    OP
       93 天前
    @PainAndLove 目前只支持了 intellij, 等功能完善一点我再开始支持其他的 IDE
    Nasei
        24
    Nasei  
       93 天前
    我感觉 vs 的就很好,甚至可以 debug 时显示
    yanyin070321
        25
    yanyin070321  
    OP
       93 天前
    @forvvvv123 感谢认可, 暂时还来不及弄 golang, 等功能完善一点我再扩展其他的语言🙏
    yanyin070321
        26
    yanyin070321  
    OP
       93 天前
    @freefcw 感谢建议
    1. 由于采用了自动布局, 所以没有开放拖动功能, 不然会破坏自动布局
    3. 可以点击里面的线, 可以跳转到对应的代码行; 点击节点只会跳转到对应的方法
    4. 现在这个版本默认会启用自动适应窗口大小, 导致默认情况下字体很小, 下个版本就没有这个问题了
    yanyin070321
        27
    yanyin070321  
    OP
       93 天前
    @Nasei 老哥, 是哪个插件? 我学习一下
    zhangdafoye
        28
    zhangdafoye  
       93 天前
    mark ,导出功能来一波
    freefcw
        29
    freefcw  
       93 天前
    @yanyin070321 你说的拖动是指拖动节点吗?

    我指的是拖动画布,主要是有时候要去看一部分,整体有时候太多,字又小,不好弄。比如放大了,不能拖动,就只能看到一小部分节点
    Scarb
        30
    Scarb  
       93 天前
    这个说白了就是 idea 的 hierarchy 可视化了。其实直接用 ctrl+alt+H 打开 hierarchy 效果也差不多。
    建议一个我个人觉得有用的功能,支持隐藏某些方法(右键-隐藏),因为很多方法并不是很重要。隐藏了之后把主链路的方法调用导出,可以作为文章的配图
    jorneyr
        31
    jorneyr  
       93 天前
    只能说,很牛逼。
    yanyin070321
        32
    yanyin070321  
    OP
       93 天前 via Android
    @freefcw 有道理,下个版本支持一波
    yanyin070321
        33
    yanyin070321  
    OP
       93 天前 via Android
    @Scarb 是的,我做的时候发现 intellij 已经有类似的功能了,但是体验了一下,没法完全满足我的预期
    ageovb
        34
    ageovb  
       93 天前
    @yanyin070321 #19 强迫症
    yanyin070321
        35
    yanyin070321  
    OP
       93 天前
    @stt66 我验证一下有没有兼容性问题吧, 改动不大的话我支持一下
    Nasei
        36
    Nasei  
       93 天前
    freemyspace
        37
    freemyspace  
       93 天前
    有一款收费的 SequenceDiagram 插件
    4ra1n
        38
    4ra1n  
       93 天前
    题主是代码层面,我主要做 CLASS 层面,可以看下我的开源项目:

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

    不过我也想做一下类似的图效果,学习下
    yanyin070321
        39
    yanyin070321  
    OP
       92 天前
    @4ra1n 你这个很强, 功能也比较完善了, 我的这个还是一个原型产品
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2878 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 11:14 · PVG 19:14 · LAX 03:14 · JFK 06:14
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.