企业官网建设流程全解析

如何读懂动画图表系统：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-scratch

ai-engineering-from-scratch 是一个"边学边做"的开源 AI 工程课程项目，它的亮点之一，是把每节课的核心概念都变成了会动的动画图表系统。你在课程里看到的 BPE 分词合并过程、Transformer 注意力矩阵、KV Cache 增长动画，都不是静态图片，而是由figures.js这套零依赖的 SVG 图表引擎在浏览器里实时绘制的。本文带你完整看懂这套 SVG 图表与 figures.js 的实现架构，不需要任何前端经验。

三种图表资产：动画图、蓝图 SVG、交互式控件

项目里的图表分为三类，各司其职：

动画 SVG 图是最有"灵魂"的一类。site/figures.js 文件头部的注释就是一个完整的"图表目录"，记录了 10 个内置图表，例如：

• tokenizer-bpe：一行文本像传送带一样滑过三条轨道，你看着 BPE 字节对规则被"现场学会"；
• attention-matrix：N×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.js

site/lesson-figures.js（约 1300 行）是系统的"心脏"，负责四件事：

1. 水合（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 在发布时会做三件事：

   1. 扫描 phases/ 和 certifications/ 下所有课程 Markdown，找出其中出现过的图表 ID；
   2. 把每个 ID 路由到注册了它的脚本，生成figure-manifest.js映射表；
   3. 浏览器打开某节课时，运行时只加载这节课真正用到的图表脚本（懒加载），并按内容哈希给脚本加版本号，缓存永不失效。

   课程作者如何嵌入一张动画图表？

   对课程作者来说，接入成本只有 3 行 Markdown 围栏块——在文档里写：

   ​```figure kv-cache ​```

   构建后，它就会被渲染成一个data-figure="kv-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 图的规范浓缩为四条：

   1. 米色纸底 + 蓝图蓝单色描边，不引入其他颜色；
   2. JetBrains Mono 等宽字体、大写标签，配引线指向几何体；
   3. 文件名用NNN-slug.svg递增编号，并在 INDEX.md 登记一行；
   4. 在 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