技能介绍

要解决的问题

把结构化输入渲染成信息图时，常见痛点是图表类型靠猜、样式散落在代码里、换主题要改很多硬编码颜色。@org-1wxsh60v/infographic-skill 的目标是把这件事变成一条可复现的渲染流程：输入数据符合 schema 后，按规则匹配图表，再通过 token 注入主题，最终输出一个自包含 HTML。

工作方式

图表匹配：优先读取 type 字段；没有 type 时从标题或自然语言中检测关键词，例如「甘特/进度/roadmap」匹配 gantt，「ER/实体/表关系」匹配 erd。命中即停，冲突按优先级表消解；完全未匹配时会列出支持类型并要求明确指定。
渲染流程：解析输入 → 对照 schemas/*.md 校验必填字段和类型 → 加载主题 → token 注入 → 组装 HTML。token 会同时注入 CSS 变量、Mermaid %%{init}%% 的 themeVariables 或 SVG 属性。
支持图表：覆盖 Gantt、ERD、Timeline、Venn、Sankey、Radar、Treemap、Wardley、Ishikawa、WordCloud、Bar、Line、Pie、Scatter、Heatmap、Funnel、Dashboard。Mermaid 图表走 CDN + mermaid.initialize()；d3/ECharts 图表走 d3.v7、d3-sankey、ECharts 5.5；Venn、Wardley、Ishikawa 使用 inline SVG。
主题系统：token 分为 color、typography、geometry 和按图表类型的 overrides。新建主题只需覆盖差异字段，继承链是自定义 → default → tokens/schema.json。reference 中的颜色、字体、尺寸原则上都引用 CSS 变量，图表代码不写死颜色。
输出：生成一个包含包装器、标题区、渲染代码和脚注的自包含 HTML，方便嵌入文档或直接预览。

边界与注意点

它不负责自动从非结构化资料里提取业务事实，输入需要先整理成结构化字段。不同图表有独立 schema，必填字段缺失或类型错误时会返回具体错误，因此应在生成前确认字段定义。未匹配关键词时不要强行猜测图表类型；自定义主题若缺少 token，会回退 schema.json 默认值并给出警告。Mermaid 与 ECharts/d3 图表需要浏览器加载对应 CDN，完全离线场景需自行替换依赖或预打包资源。