用途：把纯英文描述的流程转成动画技术图视频，适合流程图、决策树、管道等“节点+边+遍历故事”的场景。若只需静态可编辑图，应改用 excalidraw 技能；本技能面向视频且以动效为核心。
主要能力：流程为 纯英文→Mermaid→解析→dagre 布局→<DiagramBoard/>→可选 CRT 着色器→视频。Claude 负责写 Mermaid，下游布局、样式、节点/边揭示与 trace 事件由 React 组件处理，无需手动摆放方框。支持标准 Mermaid flowchart/graph 子集，方向 TD/TB、BT、LR、RL，节点形状含矩形、菱形、胶囊、六边形、圆角，边可带标签，标签内可用 <br/> 换行。
使用方式：先搭建 Remotion 项目并安装依赖：npm create video@latest（Blank 模板）、cd <project>、npm i @dagrejs/dagre；再把 templates/ 文件复制到 src/diagram/ 并注册 composition，用 npx remotion studio 预览、npx remotion render 渲染。DiagramBoard 接收 mermaid、revealStart、nodeStagger、traces、fit 等属性；traces 用 path、startFrame、segDuration、holdDuration 描述跟随节点并点亮的轨迹点。动画助手命名与口语对应，如 riseIn、fadeIn、scaleIn、drawIn，以及 DURATION.fast/base/slow（10/18/28 帧）和 BEZIER.out/snap/linear/inOut；助手默认 30fps，其他帧率需按 fps/30 缩放。
适用场景：动画化流程图/决策树/管道、制作系统流程讲解视频、展示请求经过分级检查被拒绝等遍历过程。
限制：仅支持资料列出的 Mermaid 子集；CRTShader 为纯 CSS/SVG，无 WebGL；修改优先改 Mermaid 或设计令牌，而非组件内部；新增节点形状或事件类型需扩展对应文件。具体收费、价格、平台与效果资料暂未提供。