近期很多读者在使用网站的算法可视化的功能,给我提出了不少有价值的意见,我都抽空实现出来了。
目前一个比较大的的更新是可视化面板的颜色系统,可以通过代码注释或者 UI 页面修改任意数据结构的颜色,更直观地展示算法执行。
之前只支持用代码注释来控制颜色的,不过考虑到使用起来有一定的门槛,所以我把颜色控制整合到了前端页面上,只需要点几下鼠标即可修改颜色。
如下图,可以点击左侧的代码中的颜色块修改变量的颜色;也可以点击右侧的数据结构修改任意节点的颜色:

详细使用文档见:
https://labuladong.online/algo/intro/visualize/
颜色系统可以更直观地展现算法的执行过程,下面简单列举几个例子。
1、动态规划递推过程,直观地展示状态转移:

2、二分搜索过程:
3、树结构的遍历过程:

4、滑动窗口的滑动过程:
5、复杂数据结构的可视化讲解:

6、分而治之求解子问题的过程,已计算出结果的节点和未计算出结果的节点有不同的颜色:

7、排序算法:

以上功能,已同时支持 labuladong.online 所有教程,以及配套 Chrome/vscode/Jetbrain 刷题插件,欢迎体验:
http://labuladong.online/algo/home/