https://algorithm-visualizer.org/

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

本地环境搭建 Algorithm Visualizer 

1、从Github或Gitee上clone代码

国内推荐直接从gitee上下载

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

• 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、修改 package.json 配置里 proxy

5、启动项目

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

6、运行成功的效果

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

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

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