Code Canvas 是个给程序员用的“地图绘制员”，它能在你的代码编辑器里，自动给你画一张项目代码的“关系地图”。
它是个啥？
* 它是 Visual Studio Code（一个很流行的写代码的软件）的一个插件。装上它，你的编辑器里就会多出一个新功能。
它能干啥？
* 画地图：它会自动扫描你项目里的 JavaScript/TypeScript 和 Python 文件，看看谁引用了谁（比如 A.js 文件里有一句 import B from './B.js'），然后把这些文件和他们之间的引用关系画成一张交互式的关系图。你一眼就能看出整个项目的结构和文件是怎么连接的。
这张“地图”有啥厉害的？
* 自动整理：它会把同一个文件夹里的文件自动打包成一个框，这些框还会自动调整大小，看起来非常整洁，像公司的组织架构图一样。
* 能看代码：你把鼠标悬停在任何文件节点上，它就会直接显示那个文件里的一小段代码，而且代码还是高亮、带颜色的，就像在编辑器里看一样。
* 关系很精确：线条（关系）会精确地连到被引用的那行代码上，而不仅仅是连到文件。
* 交互性强：
* 聚焦：你可以选中一个文件，让它只显示和这个文件直接相关的部分，屏蔽其他无关文件，看得更清楚。
* 展开：可以点击一个文件，让它继续展开显示这个文件又引用了哪些新文件，地图会越变越大。
* 跳转：直接在地图上双击文件，就能在编辑器里打开它，非常方便。
* 结合Git（版本控制）：
* 它能显示哪些文件被修改过（比如用不同颜色标记），让你一眼看出这次改动影响了哪些地方。
* 你修改代码或者Git状态变了（比如提交了代码），这张图会实时更新，永远保持最新状态。
* 高级跳转：还能配合编辑器自带的功能，实现“跳转到定义”、“查看谁引用了这个函数”等操作。
举个栗子：
想象一下，你新接手一个很乱的大项目，根本不知道从哪看起。装上这个插件，它“唰”一下就给你生成一张地图。你看到 main.js 这个文件很大，连出去很多线，就知道它是核心。你鼠标放上去预览一下代码，发现它引用了 utils 文件夹里的一个工具函数。你双击 utils 文件夹的分组，展开它，找到那个函数文件，直接双击打开就开始阅读了。整个过程你都不用费劲地去左边文件树里一个个找，非常直观流畅。
总之，它就是帮你“看见”代码结构、理清关系、提高阅读和导航效率的神器。
要求
- Node.js 18+（Vite 7需要Node 18或更高版本）
- VS Code 1.90+（根据扩展引擎）
- Git（可选但推荐;用于检测更改的文件）
- extension/ -VS Code扩展（TypeScript，与tsup捆绑）
- webview/ -webview UI（React，Vite，React Flow，ELK）