算法代码可视化平台

lezhu — Fri, 17 Jan 2025 20:03:05 +0800

最近在做一个代码可视化的工具，在此之前，实际上真正意义上能够可视化代码的工具几乎是没有的，我见过的唯一一个跟我想象中的功能比较接近的是 VS Code Debug Visualizer，不过这个插件想要真的运行起来看到效果可以说是相当麻烦了，而且似乎不能往回走（或许是我不会用）。所以我在做这个工具的时候会有一些最基本的要求

简单: 最好可以不需要任何额外的配置，把原来的代码直接复制过来就能立刻看到可视化的效果
自由: 可以随意控制前进后退
丝滑: 整个可视化的效果要以动画的形式表现出来，每次代码跳转都要 smooth~~
多语言: 最好可以支持多种语言，然后可以在不同的代码之间无缝切换

目前来看差不多都实现了，不过语言这块现在只有 python&javascript 两种，后续应该会加上其他的语言吧。

简单介绍一下这个工具：代码可视化平台

主要功能

1. 交互式可视化

实时更新：可以实时观看代码执行过程，观察数据结构在每一步操作中的变化。
逐步播放：可以控制执行速度，逐步查看操作细节，深入理解每一步的变化。
高亮状态变化：工具会用清晰的视觉指示器显示每一步的变化，帮助你更好地理解。
直观的表示：每个数据结构都有精心设计的可视化表示，使复杂概念一目了然。

2. 目前支持的数据结构

数组：支持一维和二维数组的元素级可视化，帮助你理解数据的组织方式。
链表：可视化节点连接和指针移动，让你清晰看到链表的操作过程。
栈：垂直可视化，展示 LIFO（后进先出）操作和 push/pop 动画，直观理解栈的特性。
队列：水平可视化，展示 FIFO（先进先出）操作和 enqueue/dequeue 动画，轻松掌握队列的工作原理。
二叉树：通过节点链接图，展示清晰的父子关系，支持遍历可视化，帮助你掌握二叉树的结构和操作。
哈希表：通过键值对可视化，让你轻松理解哈希表的存储和检索机制。

3. 代码集成

语言支持：目前支持 JavaScript 和 Python，未来计划支持更多语言

4.辅助函数

提供了一组辅助函数，用于创建和转换数据结构，方便你将代码与可视化工具集成。这些函数能够简化你的操作，提高工作效率。

5. 注释与自定义

可以使用特殊注释来自定义代码的可视化方式。例如，@ignore-function-tree 注释可以防止可视化工具在可视化树中绘制函数调用节点。

6. 代码跳转功能

点击代码元素，自动跳转到相关的执行步骤。这个功能特别适合理解循环迭代、条件分支和变量状态变化。

局限性

这个工具开发的初衷是帮助理解算法的执行逻辑，或者给初学者一些视觉上的引导，所以在这些应用场景之外就会有一些局限性

每次只能支持一段代码，不能支持项目级别的代码可视化。不过我目前也想不出项目级的代码可视化出来到底应该是什么样的。
执行步数的限制，这个是我认为设置的，现在是 500 步，我想对于理解算法来说应该够用了，后续可能视情况增加。

lezhu (lezhu)