infographic-generator-p5

SKILL.md

Generate interactive educational infographics using p5.js that visualize relationships between concepts through nodes and edges. Infographics are data-driven visualizations that read from JSON files in vis-network format, allowing users to hover over elements to see a short definition in a tooltip and detailed information with links below the drawing area.

Infographics transform complex concept relationships into visual, explorable diagrams. Unlike MicroSims which focus on simulation and interaction controls, infographics emphasize information display and exploration through hover interactions. The control region is dedicated exclusively to displaying detailed information about the currently hovered item.

Create a JSON file following the vis-network format with metadata, groups, nodes, and edges:

此技能使用 p5.js 生成交互式信息图表可视化，该 p5.js 读取 vis 网络兼容的 JSON 数据。在创建具有节点、边缘和悬停交互的教育信息图表时使用此技能，用户可以在其中探索概念之间的关系。每个信息图都显示带有标签的形状，悬停时显示工具提示，并在绘图区域下方的控制面板中显示详细说明。节点放置在绝对坐标中。 输出不是响应式设计。 来源：vishalsachdev/claude-skills。

查看原文