绘制动画示意图（滚动进入视口时自绘制）
原理
每个示意图只表达一个核心观点，首先用一句话写下来。绘制过程在示意图进入视口时仅进行一次，按照阅读顺序逐步显现，随后保持静止。墨色（INK）传递核心信息，灰色（LINE）承载辅助内容，所有标签直接标注在图上，无需图例。当用户启用“减少动画”选项时，示意图直接完整显示，无动画效果。
必要背景知识： diagram-storytelling（将概念浓缩为一句话，箭头标注动词，节点代表状态）。emil-design-eng（曲线与动画时序）。
何时不使用
- 数据图表（曲线、柱状图等数值图形）：请使用数据可视化工具。
- 循环播放的动画，用于展示实时运行过程：请使用原型动画，而非示意图。
- 在工具中每日被查看数十次的示意图：无需添加动画效果。
实施步骤
- 一句话核心。将观点浓缩为一句话，明确主语（将会使用墨色强调）。例如：“三种概念被探索，一个原型被选中”。如果一句话包含两个独立观点，则应制作两个独立的示意图。
- 引用组件。将
reference/diagramMotion.ts和reference/DiagramParts.tsx复制到项目中（如果尚未存在）。切勿在本地重新定义Panel、Arrowhead、色调或辅助函数。 - 文本数据。创建一个双语（
en/fr）数据文件：包含title和desc用于无障碍标识，以及每个标签的内容。每个标签应简短（几个词以内）。法语文本需注意：大写字母加变音符号，冒号前加无换行空格，不使用长破折号。 - 几何布局。
viewBox="0 0 960 H"（其中 H 在 300 到 400 之间），坐标使用命名常量表示。左右各保留 60 像素边距用于行末标签（若标签的textAnchor="end"且 x 坐标为 54，则会被裁剪）。Panel的最小宽度为 720（以确保在手机上滚动时可见）。 - 阅读顺序 = 延迟顺序。每个元素根据阅读顺序获得毫秒级延迟：阅读的第一个元素延迟为 0，此后每一步增加 200-300 毫秒，同一系列内元素之间增加 40-110 毫秒。核心消息（墨色元素）最后出现（延迟 1500-2300 毫秒）。总绘制时长控制在 2-3 秒。
- 验证。在本地主机上渲染页面，将示意图滚动到视口中央，等待 3 秒，使用
reference/shoot-diagrams.cjs捕获面板截图（运行命令：NODE_PATH=<项目>/node_modules）。检查每张截图：标签是否被边缘裁剪、标签是否被白色块遮挡、两个相邻标签是否重叠。修正问题后重新截图。同时以 390 像素宽度再次验证。
快速参考
| 元素 | 辅助函数 | 值范围 |
|---|---|---|
| 线条、箭头 | draw(shown, delay, duration) 应用于 path，配合 pathLength={1} | 400-900 毫秒 |
| 虚线 | 无法绘制：使用 rise（淡入） | |
| 块、标签 | rise(shown, delay)：向上移动 8 像素 | 500 毫秒 |
| 时间条 | grow(shown, delay, duration)：从左向右扩展 | 500-800 毫秒 |
| 边框、透镜 | open(shown, delay)：从 0.96 缩放至 1 | 600 毫秒 |
| 箭头尖端 | <Arrowhead x y angle style={rise(...)}> 紧跟在 draw 之后 | |
| 色调 | INK #111827 核心消息，LINE #D1D5DB 边框，PALE #E5E7EB 背景，#6B7280 辅助标签，#9CA3AF 被排除元素 | |
| 文本 | 节点标题 14 像素 600 字重，标签 11-13 像素，最小不小于 10 像素 | |
| 曲线 | cubic-bezier(0.22, 1, 0.36, 1)（已包含在辅助函数中） |
所有 CSS 变换应应用于包裹 <g> 元素，切勿应用于已包含 SVG transform 属性的形状（否则会替换原有变换）。
不同观点类型对应的图形形式
- 逐步收敛：节点排列成行，分支扇状展开，仅一条持续路径使用墨色，其余使用
LINE色调并标注“被排除”。 - 时间节奏：顶部为周刻度轴，每个参与者一行，时间条使用
grow，一个墨色箭头表示关键关系。 - 先发散后收敛：使用一个透镜（先
open再draw轮廓）位于按持续时间比例缩放的时间条上方。 - 状态与转换：节点代表状态（探索阶段使用虚线，中间状态使用灰色，最终确定状态使用实心墨色），箭头标注转换动词，箭头置于行上方以避免与节点接触。
- 对象分解：对象位于左侧，虚线切割线，箭头指向右侧的卡片表示分解后的部件，第一个部件使用墨色强调。
每种形式的完整示例请参见 reference/exemple-TemplateDiagrams.tsx 及其数据文件 reference/exemple-templateDiagramsData.ts。
示意图缩略图（卡片、列表形式）
同一个组件也可以渲染静态、裁剪的缩略图用于卡片展示：thumb 模式会禁用面板和滚动揭示功能，并且 viewBox 变为 520×400（13:10 比例，与卡片图片一致），内容居中于核心消息。每个示意图对应一个缩略图，定义在 FRAMES 中。需以 350 像素宽度进行截图验证：确保示意图内文本在 11 像素以上仍清晰可读。详见 reference/exemple-TemplateDiagrams.tsx 中的 Drawing 和 TemplateDiagramThumb。
常见错误
| 错误 | 修正 |
|---|---|
| 添加循环动画（如旋转的点、闪烁的状态）“让示意图更生动” | 绘制过程本身就是运动。仅当时间本身是示意图的主题时才使用循环动画，且最多一个，在绘制完成后通过 useLoop 实现 |
| 使用强调色、绿色/红色表示成功/失败 | 仅使用墨色和灰色；通过图形形式（实心、虚线、排除）或文字来表达判断结果 |
| 在图形旁边放置图例 | 所有文字直接标注在图形上，靠近它们所指示的元素 |
| 箭头标签使用目标状态名称 | 应使用表示转换的动作动词（如“已验证”、“未采纳”） |
| 标签居中放置在间距仅 60 像素的两个节点之间 | 标签会溢出到节点上：应将其放置在节点行上方 |
| 延迟时间仅为了视觉效果 | 延迟应遵循阅读顺序，核心消息最后出现 |
| 未进行截图即宣布完成 | 滚动后等待至少 3 秒再进行截图，并仔细阅读截图内容 |