🐱 作者介绍

CodeGarden
JavaScript/TypeScript Code Visualizer
简介
CodeGarden是一个桌面应用程序,通过"星星和线条"的可视化来俯瞰和分析JavaScript/TypeScript源代码结构。函数和块被绘制为节点,而层次结构和调用关系被表示为边。您可以通过在多个渲染模式和视觉样式之间切换来快速找到设计和重构的要点。
快速开始
- 启动应用程序,点击左上角的 Open File,或拖放JavaScript/TypeScript文件。
- 根据需要选择 Analyzer(Basic / CallGraph / MetricsExt / MultiLang / Category-Aware)和 Render Pattern。
- 在画布上使用拖拽(移动)、滚轮(缩放)和双击(选择&代码显示)来探索。
屏幕布局
侧边栏
- Controls: Open File / Save JSON / Reset View / Analyzer / Render Pattern / Visual Style
- Summary: 文件路径、行数、函数数、最大深度
- Selection Summary: 选定节点组的统计信息(行数、cc、nest、score总和、最大深度等)
- Documents: 各种文档(XML规范/渲染模式指南)
- Language: 英语 / 日语 / 中文 / 德语 / 印地语 / 韩语切换
画布
- 节点和边绘制在白色星空背景上。
- 选择时显示标签和元信息(cc/nest/lines/score)。
- 选定的子树被淡亮高亮显示,使整个更容易跟踪。
操作和控制
文件操作
- Open File: 打开JS/TS文件进行分析。
- Drag & Drop: 拖放到左侧面板也可以工作。
- Save JSON: 将当前分析结果保存为JSON。
视图操作
- Reset View: 将相机重置到中心并1:1比例。
- Esc: 取消选择。双击: 子树选择和代码显示。
分析和渲染
- Analyzer:
- Basic: 基本结构和复杂性(cc/nest 等)。执行基础 AST 分析,计算函数、类、块的层次结构与复杂度。
- CallGraph: 函数调用关系与依赖。生成调用与层次边,输出扇入/扇出等指标。
- MetricsExt: 语句、分支、循环等的详细指标,输出扩展质量统计并检测语言特有结构。
- MultiLang: TypeScript 友好的语言特性检测,识别接口、泛型、装饰器、枚举、类型别名等。
- Category-Aware: 类别感知分析,根据节点重要度自动聚合统计。
- Render Pattern: v1..v10 排列(稍后描述)。
- Visual Style: v1..v4 颜色、形状和线条表示(稍后描述)。
- 布局洞察: 侧边栏在切换后即时显示当前渲染模式、所选分析器与星密度,便于确认状态或与团队共享。
- 布局预设: Overview / CallGraph / Category 三个预设一次性应用分析器、渲染模式、视觉样式和密度;若已加载文件,会自动重新执行对应分析。
- 扩展指标: 技术债务与代码异味摘要卡配合详细列表,与 Quality Report 数据一致,帮助追踪热点及成因。
- 调用图面板: 当存在调用图数据时出现,最多列出 20 条调用关系(被调函数、调用者、行号),便于快速检查依赖。
渲染模式 (v1..v13)
以下是关键点的摘要。详情请参阅应用程序中的"Render Pattern Spec"。
基本模式
高级模式
高级模式
视觉样式 (v1..v4)
概述
- v1: 基础(冷色系)。
- v2: 温暖日落(暖色+光晕/太阳爆发)。
- v3: 高对比度(生动的节点/单色霓虹虚线边)。
- v4: 粉彩(柔和的水彩画表现)。
图例
摘要/选择摘要
摘要面板
- File: 分析文件的路径
- Lines: 总行数
- Functions: 函数数
- Max depth: 树的最大深度
- Language: 检测到的编程语言(JavaScript, TypeScript, Java, C++, Go, Rust, Python等)
- Categories: 主要类别的统计信息(显示前3个类别)
选择摘要
- Nodes / Blocks / Functions
- Total lines 和 排除重复的唯一行数
- Avg cc(平均圈复杂度),Avg nest(平均嵌套深度)
- Score sum(可见性的复合指标),Max depth(最大深度)
- Category breakdown(类别别的详细统计)
- 重复去除算法: 合并连续行范围以计算准确的唯一行数
分析数据XML(摘要)
在内部,应用程序将分析结果转换为统一格式(XML v2)并在渲染期间重建它们。
summary
totalLines
,filePath
,functionCount
,maxDepth
,deadCodeCount
node
- 属性:
id
,kind
,category
,name
- loc:
start
,end
,lines
- complexity:
cyclomatic
,nestingDepth
- layout:
depth
,angle
,radius
- metrics(扩展): 语句数、分支数、循环数、调用数、return语句数、异常处理数、switch语句数等
- language: 检测到的编程语言
- category: 函数、类、接口、特征、结构体、枚举、块、控制流、数据结构、宏、模板、装饰器、lambda、协程、测试等
edge
- 属性:
id
,kind
(hierarchy
/call
),from
,to
详情请参阅应用程序中的"XML Spec (XML_FORMAT.md)"。
数据格式和内部处理
内部数据格式
- XML格式: 应用程序内部以统一格式(XML v2)管理分析结果。
- 分析结果保存: 当前版本中,分析结果仅在会话期间保持。
- 外部导出: 作为未来功能扩展,正在考虑分析结果的外部保存。
技术规格
- AST分析: 基于各语言语法分析树的结构化数据
- 指标计算: 复杂度、嵌套深度、行数等统计信息
- 布局信息: 根据渲染模式的坐标、角度、半径数据
推荐布局

Overview - 强调复杂度与扩展指标

CallGraph - 突出调用关系

Category - 类别带与分组
扩展指标

技术债务与代码异味总览

问题详细列表与严重级别
文档

侧边栏文档区域

手册语言选择(6种)
Selection Summary

显示节点/函数/行、平均cc/平均nest、分数和、最大深度
性能和技巧
- 对于非常大的节点数,使用 v6(网格) 或 v9(类别带) 进行概览→放大感兴趣的领域。
- 样式v2~v4包含装饰。它们根据缩放和节点数量自动优化(保持可见性)。
- 当有很多调用线时,切换到 v10 以外的其他内容使其更容易查看。
- TypeScript文件时,v11(TypeScript支持)或v13(扩展黄金角)是最佳的。应用TypeScript特定的优化。
故障排除
- 没有显示任何内容:源代码结构很少/解析失败。尝试使用不同的文件。
- 慢:在整体显示期间优化装饰。切换到 v6 或 v9 并放大以检查详细信息。
- 中心偏移(v6):最新版本修复网格以在原点居中。
- TypeScript文件分析不完整:尝试MultiLang或Category-Aware分析器。TypeScript特定语法元素将被正确识别。
- 渲染慢:切换到v1或v6等轻量模式。v11-v13由于TypeScript支持可能稍慢。
FAQ
Q. 什么是score?
这是一个整合行数、复杂性等的可见性指标。较大的值被绘制为突出的节点并成为焦点候选。
Q. 我应该使用XML还是JSON?
JSON便于在应用程序外部重用分析。XML是内部标准格式,适合检查规范。
Q. 我应该选择哪个模式?
从v1/v9开始概览→如果密度或关系令人担忧,尝试v10→对于详细比较,使用v2/v6→TypeScript支持使用v11/v13,这个流程很流畅。需要TypeScript特定优化时优先使用v11/v13。
使用的OSS和许可证
分析模式的详细说明
Basic分析器
执行基本的AST分析,计算函数、类、块的层次结构和复杂度(圈复杂度、嵌套深度)。最轻量且高速的分析。包含语言检测和类别确定。
CallGraph分析器
分析函数间的调用关系,构建依赖图。提供函数的入度·出度、扇入·扇出等指标。生成层次边和调用边。
MetricsExt分析器
计算详细指标。语句数、分支数、循环数、return语句数、异常处理数、switch语句数等,将代码质量指标数值化。检测语言特定语法元素。
MultiLang分析器
执行TypeScript支持分析,正确识别TypeScript特定语法元素(接口、泛型、装饰器、枚举、类型别名等)。支持JavaScript和TypeScript的语言特性。
Category-Aware分析器
执行类别感知的智能分析,提供考虑节点重要性和相关性的分析结果。包含类别统计自动计算和JavaScript/TypeScript特定类别映射。
语言支持
完全支持语言
JavaScript (ES6+)
- 基本语法: 函数、类、对象、数组
- ES6+功能: 箭头函数、类、模块、模板字面量
- JSX支持: 完全支持React等的JSX语法
- 高级功能: 异步处理(async/await)、装饰器、动态导入
TypeScript
- 类型系统: 接口、枚举、泛型、类型别名
- 高级语法: 装饰器、命名空间、模块扩展
- JavaScript兼容: 继承所有JavaScript功能
- 类型安全: 编译时类型检查和错误检测
当前支持的语言特定特性
- JavaScript: ES6+功能、动态类型、基于原型的继承、异步处理、箭头函数、展开/剩余运算符、解构赋值
- TypeScript: 静态类型、高级类型系统、接口、泛型、装饰器、异步处理、TS特定语法、类型注解
质量评分系统
技术债务
基于复杂性、嵌套深度、函数长度和参数数量计算技术债务。总量随代码库增长,自动分类为 info / minor / major / critical 级别以指导优先级:
- info: 0.00–1.99 — 观察阶段
- minor: 2.00–4.99 — 中等优先级改进
- major: 5.00–9.99 — 应尽快解决
- critical: ≥10.00 — 需要立即行动
代码异味
自动检测以下代码异味:
- 长函数: 50+ 行 (S138)
- 复杂函数: 圈复杂度 10+ (S1541)
- 深度嵌套: 嵌套深度 5+ (S134)
- 参数过多: 5+ 个 (S107)
- 魔法数字: 硬编码数字 (S109)
- 未使用变量: 定义但未使用 (S1481)
可维护性指数
基于 Halstead Volume、复杂性、函数长度、函数数量和类别多样性的 0-100 可维护性指数。更高的值表示更好的可维护性。
其他指标
- 代码重复率: 基于函数名和行的重复检测
- 耦合度: 模块间依赖关系的强度
- 内聚性: 模块内关系的强度
- 安全分数: 危险函数名和模式检测
实际质量报告屏幕

质量报告屏幕 - 详细的代码质量分析,提供改进建议
质量保证和测试结果
📊 测试结果概述
✅ 测试结果
- 测试套件: 28个全部成功
- 测试用例: 825个全部成功
- 执行时间: 5.858秒
- 快照: 0个
📈 测试覆盖率
- 语句: 66.74%
- 分支: 61.81%
- 函数: 72.98%
- 行: 70.44%
🔧 测试环境和库
🧪 测试框架
- Jest: 主测试框架(v30.0.5)
- Babel Jest: ES6+语法测试支持
- Jest Environment JSDOM: 浏览器环境模拟
- @types/jest: TypeScript类型定义支持
⚙️ 开发·测试环境
- Node.js: JavaScript运行环境
- Electron: 桌面应用框架(v38.1.2)
- Cross-env: 环境变量跨平台支持
- Playwright: E2E测试浏览器自动化(v1.54.2)
🔍 测试类型和内容
🧪 测试类型
- 单元测试: 逐个确认个别功能
- 集成测试: 确认多个功能协同工作
- E2E测试: 确认整个应用正常工作
- 覆盖率测试: 确认代码测试程度
📋 主要测试内容
- 语法分析: JavaScript/TypeScript语法分析和AST构建
- 指标计算: 复杂度、行数、嵌套深度计算
- 渲染引擎: 图形绘制、颜色管理、文本渲染
- 交互: 鼠标操作、选择功能、缩放功能
📊 测试结果详情
📋 最新测试执行结果
🧪 E2E测试详情
🚀 Electron集成测试(9测试)
- 应用程序启动: 主进程·渲染进程正常启动确认
- IPC通信测试: 进程间通信动作确认和错误处理
- 窗口管理: 主窗口显示·隐藏·调整大小
- 文件系统: 文件读取·保存动作确认
- 菜单操作: 应用程序菜单动作确认
🔧 功能集成测试(32测试)
- 文件分析管道: 文件读取→分析→显示的一连串流程
- 分析器切换: Basic/CallGraph/MetricsExt/MultiLang动作确认
- 渲染模式: v1~v13显示模式动作确认
- 视觉样式: v1~v4样式应用动作确认
- 设置管理: 用户设置保存·读取·应用
🎨 渲染器详细测试(14测试)
- 渲染引擎: 画布绘制·图形绘制·文本渲染
- 交互: 鼠标操作·键盘操作·触摸操作
- 布局计算: 节点布局·边绘制·缩放·平移
- 状态管理: 选择状态·视图状态·动画状态
- 性能: 大量节点绘制·内存使用量·绘制速度
📊 数据处理测试(16测试)
- XML导出: 分析结果XML格式输出·数据完整性确认
- 指标计算: 复杂度·行数·嵌套深度准确性
- 类别分类: 函数·类·控制流自动识别
- 依赖关系分析: 函数调用·继承关系·模块依赖
- 错误处理: 无效输入·异常处理·恢复
🔄 质量改进挑战
📋 质量管理机制
- 全面测试: 新功能添加时也确认现有功能动作
- 自动化测试: 定期动作确认维持质量
- 用户反馈: 基于实际使用情况改进
- 持续改进: 持续提高稳定性和可靠性
🎯 质量改进目标
- 可靠性提高: 持续保证主要功能稳定运行
- 用户体验: 提高易用性和操作性
- 性能: 处理速度和响应性优化
- 兼容性: 各种环境运行保证
⚠️ 质量保证限制
🔍 完美性保证
重要要点: 覆盖率或测试结果是质量指标之一,但由于以下原因不能保证完美性:
- 测试限制: 完全覆盖所有执行路径或边缘情况现实困难
- 环境依赖: 不同OS、浏览器、设备运行完全保证困难
- 用户操作多样性: 完全预测意外用户操作模式困难
- 外部依赖: 完全应对第三方库或系统环境变化困难
✅ 尽最大努力测试
质量改进挑战: 虽不能保证完美性,但通过以下方法尽最大努力全面测试:
- 多层测试策略: 单元·集成·E2E测试组合全面验证
- 主要功能重点测试: 核心功能(分析·渲染·导出)高覆盖率保证
- 边缘情况考虑: 异常输入·错误状态·边界条件测试
- 持续改进: 基于测试结果分析持续强化测试
- 实用性重视: 重点测试实际使用场景可能出现的问题
🔮 质量保证持续挑战
此应用程序为了向用户提供可靠服务,持续挑战质量保证。通过825个测试用例全面验证,主要功能高质量保证,重视实际使用场景稳定性。