从文字或者图片中学习算法还是一件很无聊的事。当然，现在有许多很棒的网站可以查看各种算法的动画。然而，对于开发人员来说，如果能将实现算法的代码的实际执行操作通过可视化展现出来，那就是最好不过了。推荐一款开源工具：「Algorithm Visualizer」。

Algorithm Visualizer 能做什么
Algorithm Visualizer 是一个交互式在线平台，可从代码中可视化算法。这个在线平台提供各种语言实现的算法的可视化工具，包括 JavaScript、Java 和 C++ 等语言，同时支持回溯、分支定界、分治法、动态规划、贪婪、简单递归等算法。

Algorithm Visualizer 的 UI 由 4 个部分组成：工具栏、侧边栏、查看器和编辑器。工具栏包含用户配置文件和用于控制可视化的按钮。用户还可以将算法保存到 GitHub Gist 或在 Facebook 上分享。除了用户的草稿外，侧边栏还显示了一组其他人贡献的公共算法。查看器是实际可视化发生的地方。还可以在这查看算法的描述。最后，编辑器允许用户写下他们自己的算法以进行可视化。

项目组成
这个项目由 4 个开源库组成：

algorithm：包含边栏上显示的公共算法 （https://github.com/algorithm-visualizer/algorithms）。
tracers：包含以每种支持的语言编写的可视化库（https://github.com/algorithm-visualizer/tracers）。
sever ：为Web 应用程序提供服务并动态提供它需要的 API（https://github.com/algorithm-visualizer/server）。
algorithm-visualizer 仓库是一个用 React 编写的网络应用程序。它包含 UI 组件并将命令解释为可视化。，这也是我们本文的主推的开源库。
当后端编译并运行代码时，可视化库会发出更改日志。后端然后将变更日志传递给前端，前端逐步解释和渲染。

效果
我们一起来看一下几张效果图，就知道 Algorithm Visualizer 有多棒了。

「Algorithm Visualizer」

地址：https://github.com/algorithm-visualizer/algorithm-visualizer

⭐️：27k

语言：JavaScript

官网：https://algorithm-visualizer.org/