一款超赞的算法可视化工具,让算法过程动态展示出来

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

代码讲故事

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值