这张图，按下去真的会变
先说清边界：以下判断只针对 Anatomy 官方在线画廊，不是本地安装体验，也不是用提示词重新生成的图。
技术文章常遇到一种尴尬：零件都摆好了，运行过程却要读者自己想象。手绘流程图只能不断加箭头；让 AI 生成一幅插画，想改运行规则又得另想办法。
在官方画廊里打开加力发动机案例，按一下油门键，火焰、喷口、数值会同时改变。画面依旧是浅色底板、细灰线、柔和阴影，看上去就是一台结构明了的机器。加力之后火焰向外扩展到喷口之外，后部机构的位置也跟着变。
Anatomy 服务的是技术科普、教学演示、产品文档配图：它指导编程助手把技术概念变成「有运行机制的实体装置」，再画成斜上方看的等距图。产出可以是放大仍清晰的 SVG 矢量图、能直接打开的独立 HTML 网页，或给网站用的 React / Next.js 组件。
SVG 矢量图
放大不糊，适合当静态插图放进文档与幻灯片。
独立 HTML
交互能保留下来，脱离原站也能按键、拖视角。
React / Next.js
适合已经有前端工程、要把装置接进产品文档的团队。
先整理参数与运行模型，再设计零件、动作与读数，画面风格有固定规则。操作、运动、读数由同一个状态模型控制——程序保存一个当前状态，零件位置与角落里的数字都按这个状态变化，不是各画各的。
抽象淘汰规则，变成书的移动
很多 LRU 文章画一排格子加箭头，读者记住了「近期使用」，却没注意到条目位置怎么变、谁被换掉。
在线案例把它做成书架：上面放四本书，最近用到的放左边；容量不够时，右边那本就移到下面去。原作者为固定截图开了浏览器自带的「减少动态效果」，所以只验证状态，不评价动画流畅度。
| 操作 | 页面状态 | 书的位置变化 |
|---|---|---|
访问 E | 未命中 | A 被移出顶部容量区，掉到下层 |
再访问 C | 命中 | C 被拉到最左边，顶部仍是四个条目 |
Anatomy 的基本思想是：实体装置的工作过程，就是对概念的解释。书架不是隐喻外壳——书的位置、退回动作、读取数量一起把 LRU 的访问顺序摊开给你看。需要留意的是，页面上的命中次数只是示例性计数，不能拿来代替真实的服务器性能测试。
我敲的字，真的出现在屏幕里
第二个案例是一台老式电脑。它不是电脑模拟器，也不跑真实操作系统，重点是演示「装置能接收输入、输出内容、改变状态读数」。
清除初始演示字符后输入 anatomy，屏幕出现 > anatomy，下方读数显示开机状态、7 个字符和当前按键；按下 Escape，屏幕熄灭，读数变成 off。
| 输入 | 屏幕 | 读数 |
|---|---|---|
键入 anatomy | > anatomy | on · 7 字符 · 当前按键 |
Escape | 熄灭，内容消失 | off · 只剩灰黑结构与浅色背景 |
这类图适合放在文档里做交互说明，让读者亲眼看见输入、输出和开关状态之间的联系。想要清晰的静态插图就用 SVG；想保住交互就存成独立 HTML；要接进已有网站，就交给前端工程师用 React / Next.js 组件。
再看火焰和四季，操作能改变什么
回到发动机与四季仪：键盘切状态、鼠标移视角，读数跟着一起变。
- Home 回怠速：喷口内没有外伸火焰，测试台处于低推力状态。
- End 进加力：火焰出现并向外蔓延，喷口与后部装置一起变；再按两次左箭头降低油门。
- 火是 WebGL 画的，结构层仍是 SVG。仓库规定 WebGL 图层与结构共用一个相机、夹在前后两个 SVG 图层之间，不是往机器上贴一段 GIF。
- 四季仪用灯代表太阳，地球仪沿轨道运转，齿轮维持地轴方向：Home 切六月，显示北纬 50° 的白昼长；End 切十二月，同纬度夜变长。鼠标横向移约四分之一、再移七分之一，视角随之改变。
页面上的推力、喷口百分比是解释模型自己算的，不是发动机台架实测，不能用于现实工程判断；四季仪也只是教学模型，未经天文学精度检验，不能直接推广到所有纬度。
它为什么不只是「好看的等距图」
从仓库的规则、绘图代码、示例与检查流程看，Anatomy 在意的是一条完整链条，而不只是出图那一秒。
这套设计有实际用途：改运行规则时，画面和读数有共同依据，不用各自修改。但代码结构合理，不等于所有生成结果都不会错——官方脚本检查主要针对截图、几何、线条端点，并不能证明物理模型、工程参数或业务逻辑正确。
3D 目前仍是试验版本，每帧都要重算视角和明暗，不具备专业机械设计或工程验证能力。看到动态图时，别只检查「稳定前 / 稳定后」，中间的过渡阶段也要人工看一遍：有没有被遮挡、穿帮、读数写错。
想动手，就让助手做一个小而全的模型
右侧栏里的三段都可以一键复制。以下路径为原文提供的参考，本次整理并未实际执行安装与生成。
先装技能
需要支持技能的编程助手、能跑构建脚本的 Node.js 环境，浏览器检测一般用 Chrome / Chromium。绘图库用 Node 内置模块，不必再装一整套代码包；但安装工具对 Node 版本有要求，得按自己环境确认。
给一段小而全的提示词
把概念、容量、请求序列、输出形态一次说清楚，别指望一句话就得到稳定的官方方案。复杂装置会更费模型额度、电脑资源和检查时间。
再提具体的迭代
方向对了之后，针对「淘汰前 / 淘汰后两种状态」「移动时有没有挡住重要内容」这类具体问题继续改，比重新生成一轮更有效。
技能本身是 MIT 开源，但编程助手的订阅或额度、本地运行的成本仍然存在；3D 功能还在试验当中。
边界与适用
公众号里插入的截图只能保存为静态图片，读者不能拖拽。要保住交互，就得用独立 HTML 或自己搭的文档网站来承载；SVG 适合当清晰插图；React / Next.js 组件更适合已经有前端工程的团队。
- 适合：要把机制讲清楚的技术作家、教师、文档组。
- 不适合：只想随意装饰图形，或试图用它替代专业仿真与工程检验的人。