🚀 OpenCode Code Analyzer / 代码分析器

English | 中文

A desktop code analysis tool that visualizes code structure as interactive logic graphs. Built with Rust (Tauri) backend and SolidJS frontend, it automatically extracts variables, functions, classes, and their relationships from your source code and displays them as node-link diagrams.

---

✨ Features

📊 Code Structure Visualization

• Variable Declarations - Detects let, const, var declarations across languages
• Function Call Graph - Maps functionA() → functionB() call relationships
• Variable References - Traces where variables are read/written throughout the codebase
• Import/Dependency - Visualizes file-to-file import dependencies
• Class/Module Hierarchy - Shows contains/implements/extends relationships

🎨 Multi-Language Support

• 🦀 Rust - let x, fn foo(), mod, struct, impl
• 📘 TypeScript / JavaScript - const x, function foo(), class, import
• 🐍 Python - x = val, def foo(), class, import
• 🐹 Go - x := val, func Foo(), type, import

🖼️ Graph Layouts (4 types)

• Force-Directed - Physics-based simulation with attraction + repulsion forces
• Hierarchical - Top-down tree layout for clear parent-child relationships
• Circular - Entities arranged in a circle for balanced overview
• Grid - Organized grid layout for dense codebases

🖥️ Rendering Backends (3 options)

• SVG - Vector-based, scalable, interactive elements
• Canvas - 2D canvas rendering for medium-sized graphs
• WebGL - GPU-accelerated rendering for large graphs

📋 Analysis Metrics

• Total files, lines, entities count
• Language breakdown statistics
• Complexity score calculation
• Entity type distribution

---

🏗️ Architecture

┌─────────────────────────────────────────────┐
│              SolidJS Frontend               │
│  ┌───────────┐  ┌───────────┐  ┌──────────┐ │
│  │  Toolbar  │  │   Graph   │  │  Legend  │ │
│  │           │  │  Canvas   │  │  Panel   │ │
│  └───────────┘  └───────────┘  └──────────┘ │
│  ┌───────────┐  ┌───────────┐               │
│  │ Entities  │  │  Metrics  │               │
│  │    List   │  │   Panel   │               │
│  └───────────┘  └───────────┘               │
└───────────────────┬─────────────────────────┘
                    │ Tauri invoke
┌───────────────────▼─────────────────────────┐
│               Rust Backend                  │
│  ┌──────────────┐  ┌───────────────────┐   │
│  │   parser.rs  │  │    graph.rs       │   │
│  │              │  │                   │   │
│  │ • Variables  │  │ • Force-Directed  │   │
│  │ • Functions  │  │ • Hierarchical    │   │
│  │ • Calls      │  │ • Circular        │   │
│  │ • Imports    │  │ • Grid            │   │
│  └──────────────┘  └───────────────────┘   │
│  ┌──────────────┐  ┌───────────────────┐   │
│  │    ast.rs    │  │   renderer.rs     │   │
│  │              │  │                   │   │
│  │ • Dependency │  │ • SVG Generation  │   │
│  │ • Cycle      │  │ • Canvas          │   │
│  │ • Metrics    │  │ • WebGL           │   │
│  └──────────────┘  └───────────────────┘   │
└─────────────────────────────────────────────┘

---

🚀 Quick Start

Prerequisites

• Node.js >= 18
• npm >= 9 (with catalog: protocol support)
• Rust >= 1.75
• Tauri CLI (cargo install tauri-cli)

Install & Run

# Install dependencies
cd packages/code-analyzer && npm install

# Run desktop app
cd packages/desktop && npm run tauri dev

Using as Standalone Web App

cd packages/code-analyzer && npm run dev

---

📁 Project Structure

OpenCode-Code-Analyzer/
├── packages/
│   ├── code-analyzer/       # SolidJS frontend
│   │   ├── src/
│   │   │   ├── app.tsx             # Main application component
│   │   │   ├── types.ts            # TypeScript type definitions
│   │   │   ├── components/
│   │   │   │   ├── graph-canvas.tsx   # Graph visualization + legend
│   │   │   │   ├── entity-list.tsx    # Entity browser
│   │   │   │   ├── metrics-panel.tsx  # Statistics display
│   │   │   │   └── toolbar.tsx        # Layout & renderer controls
│   │   │   └── styles.css            # Global styles
│   │   ├── index.html
│   │   ├── vite.config.ts
│   │   └── package.json
│   └── desktop/
│       ├── src/                      # Desktop app entry
│       └── src-tauri/
│           └── src/
│               ├── code_analyzer/
│               │   ├── mod.rs         # Core data structures
│               │   ├── parser.rs      # Code parser (multi-language)
│               │   ├── ast.rs         # AST analysis
│               │   ├── graph.rs       # Graph layout engine
│               │   ├── renderer.rs    # Graph renderer
│               │   └── commands.rs    # Tauri commands
│               ├── lib.rs
│               └── main.rs
└── README.md

---

🎯 Legend System

Relationship Types

Type	Color	Description
Calls	🔴 Red	Function A calls function B
Imports	🔵 Blue	File imports another file
Contains	🟢 Green	Class/Module contains function
References	🟠 Orange	Code references a variable
Extends	🟣 Purple	Class extends another class
Implements	💜 Light Purple	Class implements an interface
Depends On	⚫ Gray	File-to-file dependency

Entity Types

Category	Color	Entities
Structure	Purple	Module, Class, Interface
Behavior	Green	Function, Method
Data	Orange	Variable, Constant
Boundary	Blue	Import, Export

---

🔧 Configuration

Available Commands (Tauri IPC)

Command	Description	Input	Output
analyze_code_directory	Scan directory for code analysis	{path, parser_type}	AnalysisResult
get_analysis_result	Get cached analysis result	{dir_path}	AnalysisResult
generate_code_graph	Generate graph visualization	GenerateGraphRequest	string (SVG/JSON)
get_analyze_languages	List supported languages	-	string[]
check_linux_app	Linux app availability check	-	bool

---

📄 License

This project is licensed under the MIT License.

---

---

🚀 OpenCode Code Analyzer / 代码分析器

English | 中文

一款桌面端代码分析工具，将代码结构以交互式逻辑图的形式可视化展示。基于 Rust (Tauri) 后端和 SolidJS 前端构建，自动从源代码中提取变量、函数、类及其关系，并以节点连线图的形式呈现。

---

✨ 功能特性

📊 代码结构可视化

• 变量声明 - 跨语言检测 let、const、var 声明
• 函数调用图 - 映射 functionA() → functionB() 调用关系
• 变量引用追踪 - 追踪变量在整个代码库中的读写位置
• 导入/依赖 - 可视化文件间的导入依赖
• 类/模块层级 - 展示包含/实现/继承关系

🎨 多语言支持

• 🦀 Rust - let x、fn foo()、mod、struct、impl
• 📘 TypeScript / JavaScript - const x、function foo()、class、import
• 🐍 Python - x = val、def foo()、class、import
• 🐹 Go - x := val、func Foo()、type、import

🖼️ 四种图布局

• 力导向布局 - 基于物理模拟的吸引力和排斥力
• 层级布局 - 自上而下的树形布局，父子关系清晰
• 环形布局 - 实体均匀分布在圆环上，整体均衡
• 网格布局 - 有序网格排列，适合密集代码库

🖥️ 三种渲染方式

• SVG - 矢量渲染，可缩放，支持交互元素
• Canvas - 2D 画布渲染，适合中等规模图
• WebGL - GPU 加速渲染，适合大规模图

📋 分析指标

• 文件数、代码行数、实体数量
• 语言分布统计
• 复杂度评分
• 实体类型分布

---

🏗️ 架构设计

┌─────────────────────────────────────────────┐
│              SolidJS 前端                    │
│  ┌───────────┐  ┌───────────┐  ┌──────────┐ │
│  │   工具栏   │  │   图画布   │  │  图例面板 │ │
│  └───────────┘  └───────────┘  └──────────┘ │
│  ┌───────────┐  ┌───────────┐               │
│  │  实体列表  │  │  指标面板  │               │
│  └───────────┘  └───────────┘               │
└───────────────────┬─────────────────────────┘
                    │ Tauri invoke
┌───────────────────▼─────────────────────────┐
│               Rust 后端                      │
│  ┌──────────────┐  ┌───────────────────┐   │
│  │   parser.rs  │  │    graph.rs       │   │
│  │              │  │                   │   │
│  │ • 变量       │  │ • 力导向布局       │   │
│  │ • 函数       │  │ • 层级布局         │   │
│  │ • 调用       │  │ • 环形布局         │   │
│  │ • 导入       │  │ • 网格布局         │   │
│  └──────────────┘  └───────────────────┘   │
│  ┌──────────────┐  ┌───────────────────┐   │
│  │    ast.rs    │  │   renderer.rs     │   │
│  │              │  │                   │   │
│  │ • 依赖分析   │  │ • SVG 生成        │   │
│  │ • 循环检测   │  │ • Canvas 渲染     │   │
│  │ • 指标计算   │  │ • WebGL 渲染      │   │
│  └──────────────┘  └───────────────────┘   │
└─────────────────────────────────────────────┘

---

🚀 快速开始

前置要求

• Node.js >= 18
• npm >= 9（支持 catalog: 协议）
• Rust >= 1.75
• Tauri CLI (cargo install tauri-cli)

安装与运行

# 安装依赖
cd packages/code-analyzer && npm install

# 运行桌面应用
cd packages/desktop && npm run tauri dev

作为独立 Web 应用运行

cd packages/code-analyzer && npm run dev

---

📁 项目结构

OpenCode-Code-Analyzer/
├── packages/
│   ├── code-analyzer/       # SolidJS 前端
│   │   ├── src/
│   │   │   ├── app.tsx             # 主应用组件
│   │   │   ├── types.ts            # TypeScript 类型定义
│   │   │   ├── components/
│   │   │   │   ├── graph-canvas.tsx   # 图可视化 + 图例
│   │   │   │   ├── entity-list.tsx    # 实体浏览器
│   │   │   │   ├── metrics-panel.tsx  # 统计信息展示
│   │   │   │   └── toolbar.tsx        # 布局与渲染控制
│   │   │   └── styles.css            # 全局样式
│   │   ├── index.html
│   │   ├── vite.config.ts
│   │   └── package.json
│   └── desktop/
│       ├── src/                      # 桌面应用入口
│       └── src-tauri/
│           └── src/
│               ├── code_analyzer/
│               │   ├── mod.rs         # 核心数据结构
│               │   ├── parser.rs      # 代码解析器（多语言）
│               │   ├── ast.rs         # AST 分析
│               │   ├── graph.rs       # 图布局引擎
│               │   ├── renderer.rs    # 图渲染器
│               │   └── commands.rs    # Tauri 命令
│               ├── lib.rs
│               └── main.rs
└── README.md

---

🎯 图例系统

关系类型

类型	颜色	说明
函数调用 (Calls)	🔴 红色	函数 A 调用函数 B
导入 (Imports)	🔵 蓝色	文件导入另一个文件
包含 (Contains)	🟢 绿色	类/模块包含函数
变量引用 (References)	🟠 橙色	代码引用了一个变量
继承 (Extends)	🟣 紫色	类继承另一个类
实现 (Implements)	💜 浅紫	类实现一个接口
依赖 (Depends On)	⚫ 灰色	文件间依赖

实体类型

分类	颜色	实体
结构层	紫色	模块、类、接口
行为层	绿色	函数、方法
数据层	橙色	变量、常量
边界层	蓝色	导入、导出

---

🔧 配置

可用命令 (Tauri IPC)

命令	说明	输入	输出
analyze_code_directory	扫描目录进行代码分析	{path, parser_type}	AnalysisResult
get_analysis_result	获取缓存的分析结果	{dir_path}	AnalysisResult
generate_code_graph	生成图可视化	GenerateGraphRequest	string (SVG/JSON)
get_analyze_languages	列出支持的语言	-	string[]
check_linux_app	Linux 应用可用性检查	-	bool

---

📄 许可证

本项目基于 MIT 许可证开源。