为什么要做算法可视化？
刷 LeetCode 的时候，经常遇到一种情况：思路看懂了，代码写出来了，但算法在内存里到底是怎么跑的，总感觉有点抽象。
特别是链表反转、树的遍历、动态规划状态转移这些——文字描述总觉得隔了一层。于是就有了这个想法：把算法的每一步执行过程用动画画出来。
技术选型
项目定位是纯前端单页应用，不需要后端，部署简单。
- 渲染引擎：纯 Canvas + requestAnimationFrame，没有用 Three.js 这类重型库，因为算法可视化不需要 3D
- 构建工具：Vite + TypeScript
- 四种渲染器：
- strip：数组、DP 表格、回溯路径——用彩色条带展示数据变化
- nodes：链表节点、树节点——节点连线图
- grid：矩阵、二维 DP——格子着色
- text：字符串匹配、括号生成——文字逐步展示
每个算法题对应一个独立的渲染逻辑文件，注册到 registry 中统一管理。
从 20 道到 100 道
最初只有 20 道题，覆盖的题型有限。后来花了一个周末，用脚本批量生成了 80 道高频题，最终覆盖了 LeetCode Top 100 高频题的全部题型：
- 数组与哈希表
- 链表操作
- 树与二叉树
- 动态规划
- 字符串
- 栈与队列
- 位运算
- 矩阵
- 回溯与递归
构建过程中最大的坑是 TypeScript 类型检查——一次改 80 个文件，类型错误层出不穷。最后写了 fix 脚本批量修复，npm run build 一次通过的感觉很爽。
部署
- 域名：algo.dancebanana.com
- 服务器：阿里云 ECS（4核 7.8G）
- 证书：Let’s Encrypt 通配符证书
- 打包后用 nginx 做静态文件服务，配置了 30 天浏览器缓存
成果
目前 100 道题全部支持动画演示，覆盖 Java 和 Python 双语言代码展示。虽然 UI 偏简洁，但核心功能已经跑通了。
后续计划加的 feature：
- 搜索和筛选功能
- 速度调节滑块
- 代码编辑与实时运行
- 更多趣味题型