44.3k Stars霸榜Github：可视化算法代码的交互式平台

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

项目在 Github 上已经有 44.3K 个 Stars，足以可见该项目的受欢迎程度，这里推荐给要学习算法的各位。

官网：

https://algorithm-visualizer.org/

Algorithm Visualizer 动态演示算法如下图所示，可以很清楚的看到算法的整个运行过程，非常直观，便于大家学习和理解。让算法学习不在无聊。对于我们编写程序来说，没有什么比可视化实际工作代码更容易理解了。

本地环境搭建 Algorithm Visualizer 

1、从Github或Gitee上clone代码

国内推荐直接从gitee上下载

Github开源代码:

https://github.com/algorithm-visualizer/algorithm-visualizer

Gitee开源镜像地址:

https://gitee.com/mirrors/algorithm-visualizer

这个项目由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 组件并将命令解释为可视化。这也是我们本文的主推的开源库。

2、安装python

项目需要用到python，本地环境需要安装python2.7，并配置环境变量

3、修改 package.json 配置里 node-sass 版本

4.14.0

4、修改 package.json 配置里 proxy

https://algorithm-visualizer.org/

5、启动项目

当后端编译并运行代码时，可视化库会发出更改日志。后端然后将变更日志传递给前端，前端逐步解释和渲染。

6、运行成功的效果

点击工具栏的  play  按钮，在中间区域可以看到算法的完整运行过程，非常直观。

Algorithm Visualizer 的 UI 由 4 个部分组成：工具栏、侧边栏、查看器和编辑器。

工具栏 包含用户配置文件和用于控制可视化的按钮，用户可以将算法保存到 GitHub Gist 上分享。

侧边栏 显示了一组其他人贡献的公共算法。用户可以选择自己感兴趣的算法，目前已经包括了很多算法了，比如二叉树、图、排序算法、动态规划等等经典算法 。

查看器 是实际可视化发生的地方，可以在这查看算法的描述。

编辑器 允许用户写下自己的算法以进行可视化。 

👨‍🎓聊一聊

• 公众号推送改版，务必点击【爱编程爱技术】右上角【设为星标🌟】，这样才不会错过推送。

• 如果侵犯了您的权益，请点击菜单栏联系公众号，一经核实，我们会在最短的时间内删除！感谢理解！

点点关注不迷路

关注【爱编程爱技术】公众号

您可能喜欢：