算法教程有一个很难绕开的毛病：代码是静态的，图也是静态的，而算法本身是动态的。

一段快排代码、一张复杂度表、一句「如图所示」，剩下的全靠读者在脑子里跑一遍。可算法的全部信息恰恰藏在「状态怎么一步步变化」里——枢轴换到哪、指针为什么停在这里、这一格 DP 是从左上还是从上方转移过来的。这些事，一张静态图讲不清楚。

所以我做了 AlgoAtlas：99 个算法与数据结构条目，每一个都配一套可以播放、单步、拖拽的演示。

它长什么样

打开是一个深色界面，左边是分类树，中间是正文，首页第一屏直接给了一个能点的快速排序。

目录页把 99 个条目按 12 个分类铺开，每个卡片上三个维度：难度、重要程度、流行度。这三个不是装饰——学算法的顺序基本由它们决定。一个 L1 但流行度 5 的结构（比如哈希表），就该比一个 L4 但只在竞赛里出现的结构先学。

查找 4 个、图结构 3 个、高级结构 4 个，AI 算法 14 个。数字不均衡是故意的：越靠后的东西，需要的先修知识越多，条目就该更少、更厚。

一个条目里放了什么

每个条目被拆成九个页签：演示、详解、复杂度、历史、实现、应用、陷阱、深入、相关。

演示排第一个，因为它是最短的入口。一个完全不了解红黑树的人，应该能在 40 秒内看到「插入一个节点之后树怎么旋转」，而不是先读三百字定义。

演示下面那段「演示说明」是我特意加的。很多可视化站的问题不是没有动效，是动效看完了不知道在动什么。所以每个演示都配一段话，说清楚这一帧该看哪个量：橙色是什么、青色是什么、这一步之后哪个区间缩小了。

复杂度页签里有表格和增长曲线。表格给的是平均、最坏、摊还三列，曲线把当前条目的阶和相邻几个阶画在一起——O(n log n) 比 O(n²) 好在哪，看图比看公式快。

演示不是动画，是把状态转移画出来

这是整个项目里我最在意的一点。

常见的做法是写一段 canvas 动画，用 setInterval 推动画帧。这样做的直接后果是：你没法精确地停在某一帧。想回看第三步？只能重新播放一遍再掐时间。想验证这个演示算得对不对？没办法验证，因为它根本没有「状态」这个东西。

AlgoAtlas 里每个演示都是一串完整的帧。每一帧是那一刻的全部状态快照：数组长什么样、哪个下标高亮、当前距离数组是多少、这一格的转移来源是哪里。播放器只做一件事——把帧索引从 0 走到 n-1。

这个模型换来三件事：可以拖着进度条乱跳；可以单步停在任意一步；可以在测试里直接取最后一帧，断言「排序结果有序」「背包最优值是 12」「Dijkstra 的距离和 Bellman-Ford 一致」。

代价是内存。99 个演示，每个几十到几百帧，每帧一个快照。但对这个体量来说，完全不值得优化。

哈夫曼这个演示，我重做了两次

第一版画的是「森林的柱状图」：六根柱子代表六个字符，每次合并就把两根柱子叠成一根。逻辑没错，但读者看不到树——而哈夫曼编码的全部意义就在那棵树上：频率高的字符离根近，码就短。

第二版才把树真正画出来。每次合并，森林里少两棵树、多一个父节点；合并到只剩一棵，这棵树就是编码树，左分支记 0、右分支记 1，从根到叶的路径就是编码。

图里 a=0、b=101、c=100、d=111、e=1101、f=1100，平均码长 2.24 bit。这个数字是可以手算验证的：0.45×1 + 0.13×3 + 0.12×3 + 0.16×3 + 0.09×4 + 0.05×4。

同一个毛病在背包问题上也犯过。第一版只画了一张二维表格，格子里的数字随着帧变化。问题是一样的：光看数字跳，不知道它在算什么。改完之后每一帧都写明「不选 = 7，选 = 10，取 10」，并用金色虚线框标出这个值是从哪一格转移过来的。

AI 算法也是同样的做法

新加的 14 个 AI 条目没有另起一套东西。梯度下降是损失曲线上的参数轨迹，K-Means 是散点加簇心的迭代，注意力机制是一张权重热力图加右边的输出矩阵。

注意力这张图我想让它讲清楚一件事：softmax 之后每一行的权重和是 1，这个 1 决定了「这个词该看谁」。左边矩阵第 3 行（算法）在「算法」这一列的权重最高，说明它主要看自己；右边 O = A·V 就是把权重当系数，对 value 向量做加权平均。

我一开始也想过直接上 Transformer 的结构图，后来放弃了。结构图讲的是「有哪些部件」，热力图讲的是「数怎么变」——后者才是公众号里那些讲注意力的文章普遍缺的东西。

99 个条目是怎么排的

12 个分类：线性结构 9、树与堆 14、图结构 3、排序 11、查找 4、图算法 10、字符串 6、动态规划 8、算法思想 10、数学与数论 6、高级结构 4、AI 算法 14。

每个条目有 L1 到 L5 的难度标记。L1 是「知道它存在就能用」，L5 是「实现之前先想清楚要不要自己实现」。重要程度是另一根轴——有些东西难但可以永远调库（比如最大流），有些东西简单但绕不开（比如哈希表的冲突处理）。

除了单条目，还有 8 个综合专题，用来讲那些跨结构的东西：数据库索引为什么最终落在 B+ 树和 LSM 之间、缓存系统里 LRU 和一致性哈希怎么配合、搜索引擎的倒排加 Trie、导航的最短路怎么从 Dijkstra 走到收缩层次、Top-K 的流式统计、压缩、任务调度、竞赛里的组合技巧。

单条目讲「这个东西是什么」，专题讲「这几个东西为什么必须一起出现」。后者更难写，但更接近真实工程。

手机上能用吗

能，而且我没有为移动端单独做一套。

390px 宽度下，左侧目录变成抽屉，筛选条可以横滑，正文单列。演示部分保留了原始画布宽度、允许横向滑动，并默认滚到中间——宁可让读者滑一下，也不要把 760px 宽的树压成 390px 高糊。

为什么做成纯静态

整个站点没有后端、没有构建步骤、没有外部请求。双击 index.html 就能在本地跑，收藏、笔记、掌握进度都存在 localStorage 里。

这不是偷懒，是因为这类工具的使用场景很碎：地铁上想起来某个结构忘了，打开看一眼；面试前十分钟翻两个条目。为了这种场景去要求登录、要求联网、要求等一个 SPA 首屏，不划算。

代价也很直接：换设备不同步，清缓存就没了。我权衡之后接受了这个代价——如果要同步，那 99 个条目的内容反而成了次要问题，真正要维护的是账号体系。

还有一些明确的缺口：B+ 树的演示展示的是「已经建好的树」上的点查和范围扫描，插入时的页分裂只写在正文和代码里，没有做成动画。这不是遗漏，是没想好用二维画面把「分裂 + 父节点上溢」讲清楚，宁可不做也不做一个糊弄的。

现在就可以打开

地址在这里，直接点，不用注册：

https://algo-atlas.app.workbuddy.host/?sharecode=IU7ZESDAK4

建议的打开方式：先点右上角「随机漫游」，随便落在一个条目上；再看一眼演示，拖一下进度条；最后去「学习路线」看看自己现在该补哪一段。

如果你发现某个演示讲得不清楚、或者某个条目该有却没有，欢迎在公众号里告诉我。这类工具的价值不在条目数量，在于每一个条目是不是真的让人「看懂了」。

参考资料

• AlgoAtlas 在线地址：https://algo-atlas.app.workbuddy.host/?sharecode=IU7ZESDAK4
• 文中涉及的算法条目：快速排序、哈夫曼编码、0-1 背包、Self-Attention、Dijkstra、B+ 树
• 复杂度记号沿用 CLRS《算法导论》的约定，摊还复杂度另作标注

微信公众号

欢迎关注「字与码」

如果这篇文章对你有用，也欢迎在微信里继续关注后续更新。

X

X / Twitter

关注 @ax2_zicode

更即时的技术观察、新文章提醒和一些短想法会发在 X 上。