Visual Diagrams 是面向 Remotion 讲解视频的专业图表设计系统，主要用于在视频场景中制作架构图、组件关系图和技术栈可视化。资料将其定位为替代“线框质量方框与连线”的方案，通过渐变填充、景深阴影、发光连接线、品牌 Logo 和视觉层次，让图表更接近可直接用于视频发布的成品效果。
一、用途 该技能适用于第 4 阶段场景构建中需要架构/系统图的场景、展示组件关系的场景（中心辐射、流程、分层）、基础设施或技术栈可视化、前后对比或竞品对比布局，以及数据流或管道图。
二、主要能力与组件 系统提供多类组件：InfographicFlow 用于多阶段流程（文档首选），以柔和色带形式展示企业风信息图，并支持 Lucide 图标；HubAndSpoke 用于中心元素加周边服务；FlowDiagram 用于简单的 3-5 节点管道；LayeredArchitecture 用于 UI/API/DB 等层叠架构；ComparisonDiagram 用于并排对比；GitBranching 用于 Git 分支、CI/CD 和合并模式可视化。DiagramIcon 可将任意 Lucide 图标包装为带颜色背景和阴影的圆形或圆角图标，并支持品牌 Logo 图片和字母徽章，优先级为 Lucide 图标高于品牌 Logo，品牌 Logo 高于字母徽章。
InfographicFlow 支持 light 和 dark 两种模式，浅色为企业信息图风，深色匹配视频暗色主题，还可通过 getDiagramPalette() 和 getStagePalette() 获取调色板。
三、设计规则 文档给出多条硬性设计规范：节点必须使用渐变填充而非纯色；每个节点至少两层盒阴影；边框至少 2-3px；图标尺寸、节点尺寸、字号都有最低值，如中心节点最低 180x120px、流程节点最低 200x100px、图层条最低高 90px、节点标签字号 24px；连接线至少 2.5px 粗，并具备发光和描边动画；每张图表 SVG 需加入高斯模糊发光滤镜和箭头 marker；背景可叠加低透明度程序噪点和径向渐变增强氛围。
四、使用方式 组件从 ../shared/components/diagrams 导入，图标从 lucide-react 导入。InfographicFlow 通过 stages 数组配置阶段标签、图标、节点、连接符和描述。品牌 Logo 应下载到 public/images/<composition>/ 并使用 Img 配合 staticFile 引用，避免使用 Unicode emoji，因为无头 Chromium 中会渲染成不可见或黑色字形。构建完成后可运行 /validate-scene 检查视觉质量问题。
五、限制与约束 资料主要描述设计规范与组件用法，未提供具体安装命令、依赖版本、性能数据或完整 API 文档；分类上更接近视频图表设计组件，而非通用建站或数据分析工具。