用途
Venn Diagram Generator 用于生成交互式维恩图可视化内容，底层使用 venn.js 与 D3.js，主要服务于智能教材场景。它会产出完整的 MicroSim 资源包，包含独立 HTML 文件、MkDocs 集成页面和 Dublin Core 元数据。每个图支持自定义配色、交互式提示框，并遵循教育类 MicroSim 模式，方便嵌入教学内容。
适用场景
当用户提出以下需求时可使用该技能：展示集合关系的维恩图、2 至 4 个类别的对比图、重叠概念的可视化、集合论示意、交集与并集可视化、类别关系图以及欧拉图。典型请求示例包括：创建比较 Python、JavaScript 和 Java 的维恩图；制作展示猫和狗的 2 圆维恩图；生成展示 AI、ML 与 Data Science 重叠关系的图；可视化集合 A、B、C 之间的关系。
工作流程
第 1 步：收集图表需求。 若用户未提供标题，需以友好清晰的语言询问。开始前所需信息包括：标题、2-4 个待比较的集合、对重叠关系的理解、教育用途或学科领域，以及每个集合与交集的教育性定义（用于提示框）。在向用户索要定义前，应先检查 /docs/glossary.md 是否存在并包含相关术语定义：读取该文件、提取相关定义、优先使用其中符合 ISO 11179 的定义以保证一致性，仅在定义缺失或不清晰时才询问用户。定义优先级为：先查 /docs/glossary.md，其次使用用户提供的定义，最后基于上下文创建简洁的教育性定义。
第 2 步：设计数据。 参考 references/venn-js-reference.md 获取语法指导。设计决策包括：确定圆的数量（2 个用于简单对比，3 个用于多重重叠的复杂关系，4 个及以上为最大复杂度且应谨慎使用）；定义集合大小（符号性图表使用一致大小，数据驱动图表使用实际比例值，并确保交集不超过最小的包含集合）；选择配色（主色、冷色调、柔和色或匹配教材主题的自定义色）；按 venn.js 格式组织数据。
第 3 步：创建 MicroSim 目录结构。 按 MicroSim 模式创建目录，命名使用 kebab-case、描述性强且简洁（最多 2-4 个词）、避免特殊字符，示例：programming-languages、pet-comparison、ml-ai-overlap。
第 4 步：从模板生成文件。 以 assets/template/ 中的模板文件为起点，替换所有占位符：
- script.js：替换 {{VENN_DATA}}、{{COLOR_SCHEME}}、{{DEFINITIONS}}。
- main.html：替换 {{TITLE}}、{{SUBTITLE}}、{{DESCRIPTION}}。模板已包含来自 CDN 的 D3.js v7.9.0 与 venn.js v0.2.20，以及 style.css 和 script.js 的链接。
- style.css：直接复制，除非要求自定义样式。默认样式保证最小 16px 字号、移动端响应式、交互式提示框样式、整洁专业外观和适合打印的样式。
- index.md：替换 {{TITLE}}、{{META_DESCRIPTION}}、{{OVERVIEW}}、{{DESCRIPTION}}、{{SET_RELATIONSHIPS}}、{{KEY_CONCEPTS}}、{{EDUCATIONAL_APPLICATIONS}}、{{DIAGRAM_NAME}}、{{RELATED_CONCEPTS}}。
- metadata.json：替换 {{TITLE}}、{{DESCRIPTION}}、{{SUBJECT}}、{{DATE}}、{{COVERAGE}}、{{AUDIENCE}}、{{SET_COUNT}}、{{INTERSECTION_COUNT}}、{{CONCEPTS_LIST}}、{{BLOOM_LEVEL}}。
第 5 步：验证与测试。 数据验证：确认交集大小不超过最小包含集合、各文件集合名称一致、颜色数组与集合数量匹配。文件结构：确认 5 个文件齐全（index.md、main.html、style.css、script.js、metadata.json）。占位符替换：确认无残留 {{PLACEHOLDERS}}。JavaScript 语法：确认 sets 数组为有效 JSON。响应式设计：确认图表适配不同屏幕。测试方式为直接在浏览器打开 main.html，检查圆渲染、颜色、悬停提示、标签可读性及控制台无错误。
第 6 步：更新 MkDocs 导航（可选）。 如在含 mkdocs.yml 的教材项目中，可建议将图表加入导航，或集成到相关章节。
第 7 步：告知用户。 提供创建内容的清晰摘要，包括位置、生成的文件、特性、图表说明、查看方式与后续步骤。
教育性提示框（核心最佳实践）
务必在提示框中使用教育性定义而非大小数值。默认 venn.js 示例显示类似“150 users”的数值，缺乏教育价值。解决方案是创建 definitions 对象，将每个集合与交集映射到清晰简洁的教育性定义，并提供 getDefinition 辅助函数在提示框中使用 getDefinition(d.sets) 而非 d.size。
定义准则：简洁（100 字符以内，理想为 1 句话）；有意义（聚焦概念而非数字或技术细节）；有教育性（为交集解释关系）；易理解（使用适合目标读者的语言）；一致（所有定义保持相近语气与结构）。
设计原则
- 清晰优先于复杂：优先 2-3 个圆以保证可读性，仅在绝对必要时用 4 个及以上，可考虑用多个简单图替代一个复杂图。
- 比例大小：数据驱动图使用实际比例，概念图使用符号性一致大小，确保数学有效性。
- 配色：使用高对比度颜色，尽可能采用色盲安全配色，重叠区域保持 0.70-0.85 的一致不透明度，相关图表配色一致。
- 标签有意义：集合名简洁（1-3 个词），使用标题式大小写，教育且清晰，除非适合读者否则避免术语。
- 教育背景：始终说明图表的教学内容，在文档中提供真实示例，与学习目标对齐，包含建议的课堂活动。
可访问性
字号最小 16px；颜色对比符合 WCAG AA（最低 4.5:1）；在 index.md 提供描述性替代文本；图表支持无鼠标操作（由 D3.js 处理）；main.html 使用语义化 HTML 结构。
教育集成
与学习目标对齐；使用 Bloom 分类法标签。更多信息暂未提供。