🐱 作者介绍

Udon Soba

作为日本的个人开发者,以艺术家的视角开发软件

最后更新日期: 2025年8月29日
CodeGarden 图标

CodeGarden

JavaScript/TypeScript Code Visualizer

简介

CodeGarden是一个桌面应用程序,通过"星星和线条"的可视化来俯瞰和分析JavaScript/TypeScript源代码结构。函数和块被绘制为节点,而层次结构和调用关系被表示为边。您可以通过在多个渲染模式和视觉样式之间切换来快速找到设计和重构的要点。

语言支持: 目前仅完全支持JavaScript/TypeScript。支持ES6+、JSX、TypeScript的高级语法。

快速开始

  1. 启动应用程序,点击左上角的 Open File,或拖放JavaScript/TypeScript文件。
  2. 根据需要选择 Analyzer(Basic / CallGraph / MetricsExt / MultiLang / Category-Aware)和 Render Pattern
  3. 在画布上使用拖拽(移动)、滚轮(缩放)和双击(选择&代码显示)来探索。
支持的文件格式: 支持 .js, .jsx, .ts, .tsx 文件。

屏幕布局

侧边栏

  • 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 放射状
黄金角配置,最适合整体概览。紧凑的骨架。
v2 同心圆
按深度排列层,适合层次比较。
v3 环+微抖动
稍微打破重叠以提高可见性。
v4 螺旋
BFS顺序的增长模式和密度氛围概览。
v5 围绕父级聚集
在父节点附近聚集相关节点。
v6 网格
按深度对齐。最适合检查偏差。

高级模式

v7 太阳爆发
基于权重(行数/后代数)的角度分配。
v8 深度环(保持顺序)
概览而不破坏兄弟关系。
v9 类别带+扩散
类别别带配置抑制重叠。
v10 调用焦点
CallGraph的圆形排列+力导向。

高级模式

v11 TypeScript支持
TypeScript特定语法元素(接口、泛型、装饰器等)的优化布局。
v12 类别强化
重要性基础的带配置、子分组化。基于类别出现频率的自动配置。
v13 扩展黄金角
TypeScript/JavaScript支持的黄金角配置。包含类别别半径调整的优化布局。

视觉样式 (v1..v4)

概述

  • v1: 基础(冷色系)。
  • v2: 温暖日落(暖色+光晕/太阳爆发)。
  • v3: 高对比度(生动的节点/单色霓虹虚线边)。
  • v4: 粉彩(柔和的水彩画表现)。
注意: 根据缩放和节点数量自动优化绘图(保持可见性)。

图例

函数(例如,v1)
条件/分支(例如,v2)
循环(例如,v3)
switch/其他(例如,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, kindhierarchy / call),from, to

详情请参阅应用程序中的"XML Spec (XML_FORMAT.md)"。

数据格式和内部处理

内部数据格式

  • XML格式: 应用程序内部以统一格式(XML v2)管理分析结果。
  • 分析结果保存: 当前版本中,分析结果仅在会话期间保持。
  • 外部导出: 作为未来功能扩展,正在考虑分析结果的外部保存。

技术规格

  • AST分析: 基于各语言语法分析树的结构化数据
  • 指标计算: 复杂度、嵌套深度、行数等统计信息
  • 布局信息: 根据渲染模式的坐标、角度、半径数据
注意: 当前版本不提供分析结果的持久化功能。如需保存分析结果,请在应用程序退出前记录必要信息。

推荐布局

Overview 预设

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

CallGraph 预设

CallGraph - 突出调用关系

Category 预设

Category - 类别带与分组

扩展指标

技术债务与代码异味

技术债务与代码异味总览

问题详细列表

问题详细列表与严重级别

文档

侧边栏文档区域

侧边栏文档区域

手册语言选择

手册语言选择(6种)

Selection Summary

Selection Summary 面板

显示节点/函数/行、平均cc/平均nest、分数和、最大深度

性能和技巧

  • 对于非常大的节点数,使用 v6(网格)v9(类别带) 进行概览→放大感兴趣的领域。
  • 样式v2~v4包含装饰。它们根据缩放和节点数量自动优化(保持可见性)。
  • 当有很多调用线时,切换到 v10 以外的其他内容使其更容易查看。
  • TypeScript文件时,v11(TypeScript支持)v13(扩展黄金角)是最佳的。应用TypeScript特定的优化。

故障排除

  • 没有显示任何内容:源代码结构很少/解析失败。尝试使用不同的文件。
  • 慢:在整体显示期间优化装饰。切换到 v6v9 并放大以检查详细信息。
  • 中心偏移(v6):最新版本修复网格以在原点居中。
  • TypeScript文件分析不完整:尝试MultiLangCategory-Aware分析器。TypeScript特定语法元素将被正确识别。
  • 渲染慢:切换到v1v6等轻量模式。v11-v13由于TypeScript支持可能稍慢。

FAQ

Q. 什么是score?

这是一个整合行数、复杂性等的可见性指标。较大的值被绘制为突出的节点并成为焦点候选。

Q. 我应该使用XML还是JSON?

JSON便于在应用程序外部重用分析。XML是内部标准格式,适合检查规范。

Q. 我应该选择哪个模式?

从v1/v9开始概览→如果密度或关系令人担忧,尝试v10→对于详细比较,使用v2/v6→TypeScript支持使用v11/v13,这个流程很流畅。需要TypeScript特定优化时优先使用v11/v13。

使用的OSS和许可证

本应用程序由以下开源软件支持。我们深深感谢提供社区和贡献者。

许可证 链接
Electron MIT LICENSE
monaco-editor MIT LICENSE
p5 LGPL-2.1-or-later LICENSE
marked MIT LICENSE
@babel/parser MIT LICENSE

分析模式的详细说明

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/TypeScript。其他语言文件可能在语法分析时出错。

当前支持的语言特定特性

  • 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)
💡 测试环境特点: 构建了以Jest为中心的全面测试环境。适当分离单元测试、集成测试、E2E测试,使用针对每种优化的工具。

🔍 测试类型和内容

🧪 测试类型

  • 单元测试: 逐个确认个别功能
  • 集成测试: 确认多个功能协同工作
  • E2E测试: 确认整个应用正常工作
  • 覆盖率测试: 确认代码测试程度

📋 主要测试内容

  • 语法分析: JavaScript/TypeScript语法分析和AST构建
  • 指标计算: 复杂度、行数、嵌套深度计算
  • 渲染引擎: 图形绘制、颜色管理、文本渲染
  • 交互: 鼠标操作、选择功能、缩放功能

📊 测试结果详情

📋 最新测试执行结果

✓ Test Suites: 28 passed, 28 total
✓ Tests: 825 passed, 825 total
✓ Snapshots: 0 total
⏱️ Time: 5.858 s

📊 测试覆盖率详情:
✓ 整体: 66.74% statements, 61.81% branches
✓ 函数: 72.98% (181/248)
✓ 行数: 70.44% (2086/2961)
📁 主要模块:
• Core Analysis: 71.92% statements
• Export Module: 91.12% statements
• Renderer Engine: 63.79% statements
✅ 测试结果可靠性: 825个测试用例全部成功,执行时间仅5.858秒。主要功能(分析·导出·渲染)高覆盖率测试,保证稳定运行。

🧪 E2E测试详情

🚀 Electron集成测试(9测试)

  • 应用程序启动: 主进程·渲染进程正常启动确认
  • IPC通信测试: 进程间通信动作确认和错误处理
  • 窗口管理: 主窗口显示·隐藏·调整大小
  • 文件系统: 文件读取·保存动作确认
  • 菜单操作: 应用程序菜单动作确认

🔧 功能集成测试(32测试)

  • 文件分析管道: 文件读取→分析→显示的一连串流程
  • 分析器切换: Basic/CallGraph/MetricsExt/MultiLang动作确认
  • 渲染模式: v1~v13显示模式动作确认
  • 视觉样式: v1~v4样式应用动作确认
  • 设置管理: 用户设置保存·读取·应用

🎨 渲染器详细测试(14测试)

  • 渲染引擎: 画布绘制·图形绘制·文本渲染
  • 交互: 鼠标操作·键盘操作·触摸操作
  • 布局计算: 节点布局·边绘制·缩放·平移
  • 状态管理: 选择状态·视图状态·动画状态
  • 性能: 大量节点绘制·内存使用量·绘制速度

📊 数据处理测试(16测试)

  • XML导出: 分析结果XML格式输出·数据完整性确认
  • 指标计算: 复杂度·行数·嵌套深度准确性
  • 类别分类: 函数·类·控制流自动识别
  • 依赖关系分析: 函数调用·继承关系·模块依赖
  • 错误处理: 无效输入·异常处理·恢复
✅ E2E测试成果: 825个测试用例全部成功,全面验证应用程序整体动作。特别是主要功能(分析·渲染·导出)高质量测试,实现实用水平的质量保证。

🔄 质量改进挑战

📋 质量管理机制

  • 全面测试: 新功能添加时也确认现有功能动作
  • 自动化测试: 定期动作确认维持质量
  • 用户反馈: 基于实际使用情况改进
  • 持续改进: 持续提高稳定性和可靠性

🎯 质量改进目标

  • 可靠性提高: 持续保证主要功能稳定运行
  • 用户体验: 提高易用性和操作性
  • 性能: 处理速度和响应性优化
  • 兼容性: 各种环境运行保证

⚠️ 质量保证限制

🔍 完美性保证

重要要点: 覆盖率或测试结果是质量指标之一,但由于以下原因不能保证完美性:

  • 测试限制: 完全覆盖所有执行路径或边缘情况现实困难
  • 环境依赖: 不同OS、浏览器、设备运行完全保证困难
  • 用户操作多样性: 完全预测意外用户操作模式困难
  • 外部依赖: 完全应对第三方库或系统环境变化困难

✅ 尽最大努力测试

质量改进挑战: 虽不能保证完美性,但通过以下方法尽最大努力全面测试:

  • 多层测试策略: 单元·集成·E2E测试组合全面验证
  • 主要功能重点测试: 核心功能(分析·渲染·导出)高覆盖率保证
  • 边缘情况考虑: 异常输入·错误状态·边界条件测试
  • 持续改进: 基于测试结果分析持续强化测试
  • 实用性重视: 重点测试实际使用场景可能出现的问题
🎯 现实质量目标: 不追求完美性,而是实用水平的质量保证。重视主要功能稳定性、用户体验、性能,通过持续改进挑战质量提高。

🔮 质量保证持续挑战

此应用程序为了向用户提供可靠服务,持续挑战质量保证。通过825个测试用例全面验证,主要功能高质量保证,重视实际使用场景稳定性。

💡 致用户: 质量保证不是追求完美性,而是提供实用水平的可靠性和稳定性。持续提供日常使用中安心使用的应用程序。