svg-diagrams

svg-diagrams 是来自 copilotkit/openintelligentui 仓库的一个技能，目标是生成丰富的内联 SVG 图表，用可视化方式解释系统、流程、架构和抽象概念。当图表比纯文字更能帮助用户理解时可使用它。\n\n主要能力\n\n该技能定义了完整的 SVG 绘制约定。画布默认通过 viewBox 设置 680px 坐标宽度，并设置 width="100%" 以实现响应式缩放；高度按最底部元素的 y 加其高度再加 40px 内边距计算。安全内容区为 x=40 到 x=640、y=40 到 y=(H-40)，只输出正文片段，不含 html、head、body 或 DOCTYPE，背景透明由宿主提供。\n\n排版上只用两种字号：14px 用于标题和标签，12px 用于副标题和描述；只用两种字重：400 和 500，不使用 600 或 700。字体建议 system-ui、-apple-system、sans-serif 或继承宿主。文案一律使用句首大写。文字宽度按 14px 每字符约 8px、12px 每字符约 7px 估算，矩形宽度按标题字符数×8 与副标题字符数×7 取较大值再加 48px 内边距计算。\n\n配色提供青、紫、珊瑚、琥珀、蓝、灰、红、绿、粉九组语义色，每组都给出浅色与深色模式下的填充、描边和文字色值，保证两种模式均可读。颜色用来表达含义而非轮换装饰：每张图用 2 到 3 种颜色，并把颜色映射到分类或物理属性。若渲染环境支持 CSS 变量，优先使用 var(--color-text-primary) 等变量。\n\n图形规范包括：边框线宽 0.5px，箭头和连接线 1.5px；圆角 rx="4" 用于轻量圆角、rx="8" 用于强调、rx="20" 用于大容器；盒子间距至少 60px，盒内边距 24px，文字到边缘 12px；单行盒高 44px，两行盒高 56px；680px 宽度下每行最多 4 到 5 个节点，超出则拆成多张图。所有连接线必须设置 fill="none"，否则路径会变成黑色块。文档提供单行节点、两行节点、箭头连接线、虚线流向指示、带标签的引线、大容器等组件模板，以及箭头标记 marker 的定义模板。\n\n使用方式\n\n图表通过 generateSandboxedUi 工具交付：SVG 标记放入 html 参数，逐元素流式发送给用户。展示属性承载全部样式；若图表需要 CSS 动画类，应在 css 参数中声明，不要写在 html 内的 style 块里。静态图表不需要 jsFunctions 或 jsExpressions。\n\n图表类型\n\n技能区分三类图表及适用场景：流程图用于顺序流程、决策树和管道，采用自上而下或从左到右的单一方向布局，箭头不得穿过无关盒子，同类盒子保持等高，单图节点上限 4 到 5 个；结构图用于表达包含关系，如架构、组织图、系统组件，采用嵌套矩形，最多 2 到 3 层嵌套，容器内边距至少 20px，父子使用不同色阶体现层级；说明图用于建立直觉，如注意机制、梯度下降、递归，布局自由，可跟随主题的自然几何形态，用暖色表示活跃、冷色表示静止，标签放在边缘并用引线指向相关部分，描边不得穿过文字。\n\n复杂主题建议拆成多张较小的 SVG，每张 3 到 5 个节点，图与图之间配说明文字，首图为概览，后续图逐层放大。\n\n最终校验\n\n定稿前需检查：viewBox 高度是否等于最低元素底部加 40px；内容是否越出 x=640 或 y=(H-40)；文字是否装得进盒子；每条线是否绕开了矩形；所有 path 连接线是否设置了 fill="none"；所有文字是否显式指定了填充色；硬编码颜色是否同时给出了浅色和深色变体。\n\n适用场景与限制\n\n适用于解释工作原理（加载路径、电路、流水线、算法）、展示架构与结构、描绘流程与数据流、帮助理解抽象概念。技能同时给出可访问性要求：提供 SVG 标题或描述，或相邻的文字等价物；窄屏下保持文字可读，密集图表应简化或重排而非缩小字号；不虚构数据，示例性数值需标注并给出单位；交互控件须支持键盘操作并尊重减少动态效果设置。资料显示该技能不做强制规划或叙述顺序要求，也不强制要求包含图表，纯文本和原生组件同样是有效回答。关于该技能的具体安装方式、收费与价格、支持的平台，资料暂未提供。