用途
Infographic Generator with P5.js 是一个用于生成交互式教育信息图的技能。它通过节点（nodes）和边（edges）来可视化概念之间的关系，将复杂的概念关系转化为可视化、可探索的图表。与侧重模拟和交互控制的 MicroSims 不同，信息图强调信息展示和通过悬停交互进行探索。
主要能力
- 读取 vis-network 格式的 JSON 数据文件（data.json），包含 metadata、groups、nodes 和 edges。
- 在画布上绘制节点、边、标签和提示框（tooltip）。
- 悬停节点时显示简短描述提示框，并在下方详情面板显示完整描述（可包含链接）。
- 支持节点形状：ellipse、box、diamond、circle、square。
- 支持分组样式（颜色、边框色、形状）。
- 支持边的标签、颜色、宽度、虚线、曲线等属性。
- 响应式设计，画布宽度随容器调整。
使用方式
- 定义信息图需求：确定主题领域、受众水平、节点类型、关系含义、数据来源。
- 准备 data.json 数据文件，遵循 vis-network 格式，包含 metadata、groups、nodes、edges。节点需包含 id、label、x、y、shortDescription、fullDescription 等字段。
- 生成信息图文件，在 /docs/sims/$INFOGRAPHIC_NAME/ 下创建：index.md（含 iframe 的文档页）、main.html（引入 p5.js CDN）、$INFOGRAPHIC_NAME.js（p5.js 代码）、data.json（数据）。
- 部署：将文件夹放入 /docs/sims/，更新 mkdocs.yml 导航，本地用 mkdocs serve 测试，用 mkdocs gh-deploy 部署。
适用场景
- 概念图、思维导图、知识图谱
- 可视化主题、想法或实体之间的关系
- 构建教育内容的交互式图表
- 将 vis-network 数据转换为独立的 p5.js 可视化
- 创建基于悬停和点击的信息探索界面
限制
- 不适合需要完全响应式设计、无论容器大小都保持项目居中的场景。
- 不适合边需要用曲线和多点路径描述的复杂图表。
- 节点位置在数据文件中固定，不自动布局。
- p5.js 不渲染 HTML，详情面板中会剥离 HTML 标签后显示文本。
- 图标（icon）属性为未来用途，当前未实现具体绘制。
质量要求
- 无错误加载和解析 data.json
- 所有节点可见且位置正确
- 提示框保持在绘图区内
- 详情面板正确显示完整描述
- 响应式设计适应容器宽度
- 清晰的视觉层次和可读标签
- 边不遮挡重要信息