Source: https://staying.fun/zh
最近在做一个代码可视化的工具，在此之前，实际上真正意义上能够可视化代码的工具几乎是没有的，我见过的唯一一个跟我想象中的功能比较接近的是 VS Code Debug Visualizer， 不过这个插件想要真的运行起来看到效果可以说是相当麻烦了，而且似乎不能往回走（或许是我不会用）。所以我在做这个工具的时候会有一些最基本的要求
- 简单: 最好可以不需要任何额外的配置，把原来的代码直接复制过来就能立刻看到可视化的效果
- 自由: 可以随意控制前进后退
- 丝滑: 整个可视化的效果要以动画的形式表现出来，每次代码跳转都要 smooth~~
- 多语言: 最好可以支持多种语言，然后可以在不同的代码之间无缝切换
目前来看差不多都实现了，不过语言这块现在只有 python&javascript 两种，后续应该会加上其他的语言吧。
简单介绍一下这个工具：[代码可视化平台](https://staying.fun/zh)
## 主要功能
### 1. 交互式可视化
- 实时更新：可以实时观看代码执行过程，观察数据结构在每一步操作中的变化。
- 逐步播放：可以控制执行速度，逐步查看操作细节，深入理解每一步的变化。
- 高亮状态变化：工具会用清晰的视觉指示器显示每一步的变化，帮助你更好地理解。
- 直观的表示：每个数据结构都有精心设计的可视化表示，使复杂概念一目了然。
### 2. 目前支持的数据结构
- 数组：支持一维和二维数组的元素级可视化，帮助你理解数据的组织方式。
- 链表：可视化节点连接和指针移动，让你清晰看到链表的操作过程。
- 栈：垂直可视化，展示 LIFO（后进先出）操作和 push/pop 动画，直观理解栈的特性。
- 队列：水平可视化，展示 FIFO（先进先出）操作和 enqueue/dequeue 动画，轻松掌握队列的工作原理。
- 二叉树：通过节点链接图，展示清晰的父子关系，支持遍历可视化，帮助你掌握二叉树的结构和操作。
- 哈希表：通过键值对可视化，让你轻松理解哈希表的存储和检索机制。
### 3. 代码集成
语言支持：目前支持 JavaScript 和 Python，未来计划支持更多语言
### 4.辅助函数
提供了一组辅助函数，用于创建和转换数据结构，方便你将代码与可视化工具集成。这些函数能够简化你的操作，提高工作效率。
### 5. 注释与自定义
可以使用特殊注释来自定义代码的可视化方式。例如，@ignore-function-tree 注释可以防止可视化工具在可视化树中绘制函数调用节点。
### 6. 代码跳转功能
点击代码元素，自动跳转到相关的执行步骤。这个功能特别适合理解循环迭代、条件分支和变量状态变化。
## 局限性
这个工具开发的初衷是帮助理解算法的执行逻辑，或者给初学者一些视觉上的引导，所以在这些应用场景之外就会有一些局限性
- 每次只能支持一段代码， 不能支持项目级别的代码可视化。不过我目前也想不出项目级的代码可视化出来到底应该是什么样的。
- 执行步数的限制，这个是我认为设置的，现在是 500 步，我想对于理解算法来说应该够用了，后续可能视情况增加。
