如何用Crabviz快速生成交互式调用图？VS Code插件安装与使用指南
【免费下载链接】crabvizA tool to generate interactive call graphs for multiple languages项目地址: https://gitcode.com/gh_mirrors/cr/crabviz
Crabviz是一款功能强大的工具，能够为多种编程语言生成交互式调用图，帮助开发者更直观地理解代码结构和函数调用关系。通过其VS Code插件，用户可以轻松在熟悉的开发环境中使用这一强大功能，提升代码分析效率。
🦀 Crabviz简介：让代码调用关系一目了然
Crabviz的核心功能是生成交互式调用图，支持Go、JavaScript/TypeScript、Rust等多种编程语言。它通过分析代码结构，将函数之间的调用关系以图形化方式展示，让复杂的代码逻辑变得清晰可见。无论是大型项目的代码梳理，还是学习新代码库，Crabviz都能成为开发者的得力助手。
Crabviz插件的红色螃蟹图标，象征着它能像螃蟹一样敏锐地捕捉代码间的联系
🔧 两种安装方式：快速上手Crabviz
方式一：从VS Code扩展商店安装（推荐）
- 打开VS Code
- 点击左侧扩展图标（或按下
Ctrl+Shift+X） - 在搜索框中输入"Crabviz"
- 找到对应插件并点击"安装"按钮
这种方式最为简单，适合大多数用户快速安装使用。
方式二：手动编译安装
如果你需要使用最新开发版本，可以通过源码编译安装：
git clone https://gitcode.com/gh_mirrors/cr/crabviz cd crabviz/editors/code npm install npm run package编译完成后，在VS Code中通过"从VSIX安装"功能选择生成的.vsix文件即可。
🚀 开始使用：三步生成你的第一个调用图
1. 打开项目并激活Crabviz
在VS Code中打开你的项目，通过以下任一方式激活Crabviz：
- 按下
Ctrl+Shift+P，输入"Crabviz: Generate Call Graph" - 右键点击编辑器中的代码文件，选择"Crabviz: Generate Call Graph"
2. 配置生成选项
Crabviz会弹出配置面板，你可以：
- 选择要分析的文件或目录
- 设置调用图的深度和范围
- 选择输出格式和样式
核心配置文件位于editors/code/src/command-manager.ts，高级用户可以通过修改此文件自定义更多生成选项。
3. 查看和交互调用图
生成完成后，Crabviz会在新的标签页中展示交互式调用图。你可以：
- 缩放和平移图形
- 点击节点查看详细信息
- 使用顶部工具栏的搜索和筛选功能
- 导出图形为多种格式
调用图的渲染逻辑主要在webview-ui/src/graph/render.ts中实现，如果你对图形展示有特殊需求，可以参考此文件进行定制。
💡 实用技巧：让Crabviz更好用
自定义忽略文件
通过修改editors/code/src/utils/ignore.ts，你可以配置Crabviz忽略特定文件或目录，让生成的调用图更加简洁。
支持的语言扩展
Crabviz目前支持多种主流编程语言，语言支持相关代码位于core/src/lang/目录下，包括：
- Go (go.rs)
- JavaScript/TypeScript (jsts.rs)
- Rust (rust.rs)
导出与分享
生成的调用图可以通过webview-ui/src/export/中提供的功能导出为多种格式，方便在文档或团队会议中分享。
🛠️ 常见问题解决
如果在使用过程中遇到问题，可以查看插件的日志文件，或参考项目中的editors/code/CHANGELOG.md了解版本更新和已知问题。
Crabviz作为一款强大的代码调用图生成工具，通过直观的图形化展示，帮助开发者更好地理解代码结构和调用关系。无论是代码审查、项目重构还是学习新代码库，它都能显著提升工作效率。现在就安装Crabviz，让代码分析变得更加简单高效吧！
【免费下载链接】crabvizA tool to generate interactive call graphs for multiple languages项目地址: https://gitcode.com/gh_mirrors/cr/crabviz
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
