如何读懂动画图表系统ai-engineering-from-scratch 的 SVG 图表与 figures.js 架构指南【免费下载链接】ai-engineering-from-scratchLearn it. Build it. Ship it for others.项目地址: https://gitcode.com/GitHub_Trending/ai/ai-engineering-from-scratchai-engineering-from-scratch 是一个边学边做的开源 AI 工程课程项目它的亮点之一是把每节课的核心概念都变成了会动的动画图表系统。你在课程里看到的 BPE 分词合并过程、Transformer 注意力矩阵、KV Cache 增长动画都不是静态图片而是由figures.js这套零依赖的 SVG 图表引擎在浏览器里实时绘制的。本文带你完整看懂这套 SVG 图表与 figures.js 的实现架构不需要任何前端经验。三种图表资产动画图、蓝图 SVG、交互式控件项目里的图表分为三类各司其职类型位置特点动画 SVG 图site/figures.js 及各figures-*.js浏览器实时绘制有播放循环静态蓝图 SVGsite/assets/figures/一次性画好的手绘风示意图交互式控件图site/lesson-figures.js带滑块、选择器可拖拽探索动画 SVG 图是最有灵魂的一类。site/figures.js 文件头部的注释就是一个完整的图表目录记录了 10 个内置图表例如tokenizer-bpe一行文本像传送带一样滑过三条轨道你看着 BPE 字节对规则被现场学会attention-matrixN×N 注意力网格逐格点亮transformer-block数据流过残差、多头注意力和 FFN 各层kv-cache缓存格子从左到右一格格填满。静态蓝图 SVG则遵循一套严格的美学规范米色纸张底色#fafaf5 蓝图蓝描边#3553ff 等宽字体大写标签。编号规则记录在 site/assets/figures/INDEX.md 中——FIG 编号全局递增、永不复用比如005-transformer-attention-heads.svg是多头注意力的爆炸视图006-ai-engineering-learning-paths.svg是课程学习路径总览图。核心架构运行时 注册表 懒加载只有三个概念整套动画图表系统只围绕三个概念运转理解它们就理解了整个架构。1️⃣ 图表运行时lesson-figures.jssite/lesson-figures.js约 1300 行是系统的心脏负责四件事水合hydration扫描页面里所有div>const FIGURES { tokenizer-bpe: tokenizerBPE, /* ... */ }; if (window.LF typeof window.LF.register function) window.LF.register(FIGURES);这种注册表设计让新图表想加就加运行时和课程 Markdown 完全不需要改动。3️⃣ 按需加载只为用到的图表下载脚本课程页面并不会一次性加载 59 个脚本。构建工具 site/build.js 在发布时会做三件事扫描 phases/ 和 certifications/ 下所有课程 Markdown找出其中出现过的图表 ID把每个 ID 路由到注册了它的脚本生成figure-manifest.js映射表浏览器打开某节课时运行时只加载这节课真正用到的图表脚本懒加载并按内容哈希给脚本加版本号缓存永不失效。课程作者如何嵌入一张动画图表对课程作者来说接入成本只有 3 行 Markdown 围栏块——在文档里写​figure kv-cache ​构建后它就会被渲染成一个data-figurekv-cache的空盒子由运行时自动水合。真实例子见开发环境第一课 phases/00-setup-and-tooling/01-dev-environment/docs/en.md​figure s0-env-stack ​如果某个图表 ID 没有对应实现页面会安静地标上data-figure-missing而不是报错崩掉构建阶段则会更严格——找不到提供者的图表 ID 会直接让构建失败从源头杜绝图丢了的事故。给图表设计者的蓝图美学清单site/assets/figures/INDEX.md 中的 How to add 一节是理解整套视觉语言的最佳入口。静态 SVG 图的规范浓缩为四条米色纸底 蓝图蓝单色描边不引入其他颜色JetBrains Mono 等宽字体、大写标签配引线指向几何体文件名用NNN-slug.svg递增编号并在 INDEX.md 登记一行在 480 / 720 / 1200 px 三种视口宽度下验证标签不重叠、引线不偏移。动画图表同样受益于这种工程图纸感单色描边、等宽字体、方格轨道让复杂概念看起来像一张会呼吸的技术蓝图。关键文件速查表文件职责site/figures.js核心图表定义BPE、注意力矩阵等 10 个site/lesson-figures.js图表运行时水合、动效、无障碍、销毁site/build.js构建期图表路由与懒加载清单生成site/assets/figures/静态蓝图 SVG 及编号索引site/assets/figures/INDEX.md图表编号规则与添加流程phases/使用​figure围栏嵌入图表的课程文档小结为什么这套架构值得学习ai-engineering-from-scratch 的动画图表系统用零依赖 注册表 懒加载三板斧把 59 个图表脚本、几百节课的文档和网站运行时解耦得干干净净课程作者写 3 行 Markdown 就能插图图表开发者写一个函数就能上架构建脚本负责保证引用的图一定存在。这正是它作为 AI 工程教学仓库之外的第二重价值——一套可以照搬到你自己文档站里的图表架构模板。【免费下载链接】ai-engineering-from-scratchLearn it. Build it. Ship it for others.项目地址: https://gitcode.com/GitHub_Trending/ai/ai-engineering-from-scratch创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考