CanvasGit — 视觉驱动的代码逻辑演进图

将函数调用关系和逻辑结构绘制成一颗动态生长的树。切换 Git 分支或 Commit 时，树会像植物生长一样发生变形或修剪。

功能

• 实时解析：使用 Tree-sitter 解析 JavaScript/TypeScript 代码
• 调用图可视化：D3.js 力导向图展示函数调用关系
• 分支切换：切换 Git 分支/Commit 时，树动态生长或修剪
• 拖拽交互：可拖拽节点（重构同步开发中）

技术栈

• Tree-sitter (web-tree-sitter) - 代码解析
• D3.js - 力导向树可视化
• File System Access API - 浏览器内读取本地目录
• Node.js + Express - Git 操作后端

快速开始

# 安装依赖
npm install

# 启动（前端 + Git 后端）
npm start

然后打开 http://localhost:5173

仅前端（无 Git）

npm run dev

使用方式

1. 打开代码目录

   • 点击「打开代码目录」
   • 留空并确定 → 使用浏览器目录选择器（需 Chrome/Edge）
   • 输入项目路径 → 通过后端读取（支持 Git 切换）

2. 切换分支/Commit（需使用路径模式且后端已启动）

   • 在下拉框选择分支或 Commit
   • 树将动画切换至新版本

3. 交互

   • 滚轮缩放、拖拽画布平移
   • 拖拽节点调整布局
   • 悬停查看函数详情

项目结构

canvasGit/
├── index.html
├── src/
│   ├── main.js           # 主入口
│   ├── parser/
│   │   └── codeParser.js  # Tree-sitter 解析
│   ├── visualization/
│   │   └── treeView.js    # D3 树视图
│   └── services/
│       └── fileService.js # 文件读取
├── server/
│   └── index.js          # Git API 后端
├── public/               # WASM 等静态资源
└── scripts/
    └── copy-wasm.js      # 复制 Tree-sitter WASM

浏览器支持

• Chrome / Edge：完整支持（File System Access API）
• Firefox / Safari：需使用路径模式 + 后端

License

MIT