CAlM123451 考研图表生成 Skill
生成考研/医学场景的可视化图表，输出为独立 HTML 文件。
支持的图表类型（6 种）：
- Architecture - 系统架构图（用于医学 AI 系统、数据处理流程）
- Flowchart - 流程图（用于诊疗流程、决策逻辑）
- Sequence - 时序图（用于数据流程、API 调用）
- Timeline - 时间线（用于复习计划、历史事件）
- Tree - 树形图（用于知识点层级、分类体系）
- ER - 实体关系图（用于数据模型、数据库设计）
1. 设计理念
简洁优先：每个节点代表一个独立概念，两个总是一起出现的节点应该合并。
目标密度：4/10：足够技术完整，但不至于需要指南。超过 9 个节点时，考虑拆分为两个图。
配色方案：
- 主色：医学蓝
#2563eb - 辅助色：青色
#0891b2 - 强调色：珊瑚色
#eb6c36（用于 1-2 个焦点节点） - 背景：浅灰
#f5f5f5 - 文字：深灰
#2d3142
2. 使用场景
| 场景 | 推荐图表类型 |
|---|---|
| 医学 AI 系统架构 | Architecture |
| 诊疗流程/决策逻辑 | Flowchart |
| API 调用/数据流转 | Sequence |
| 复习计划/历史事件 | Timeline |
| 知识点层级/分类体系 | Tree |
| 数据模型/数据库设计 | ER |
3. 图表类型详解
3.1 Architecture（系统架构图）
用途：展示系统组件及其连接关系。
考研场景示例：
- 医学 AI 系统架构（数据层 → 模型层 → 应用层）
- 考研备考工作台架构（前端 → 后端 → 数据库）
布局规则：
- 组件用圆角矩形表示
- 连接用箭头表示数据流向
- 分层布局：从上到下或从左到右
参考：type-architecture.md
3.2 Flowchart（流程图）
用途：展示决策逻辑和分支流程。
考研场景示例：
- 诊疗流程（症状 → 检查 → 诊断 → 治疗）
- 错题分析流程（错题 → 分类 → 原因 → 复习）
布局规则：
- 开始/结束用圆角矩形
- 决策用菱形
- 流程用矩形
- 箭头表示流向
参考：type-flowchart.md
3.3 Sequence（时序图）
用途：展示时间顺序的消息传递。
考研场景示例：
- API 调用流程（前端 → 后端 → 数据库）
- 数据流转流程（上传 → 处理 → 分析 → 输出）
布局规则：
- 参与者用垂直线表示
- 消息用水平箭头表示
- 时间从上到下
参考：type-sequence.md
3.4 Timeline（时间线）
用途：展示事件在时间轴上的位置。
考研场景示例：
- 复习计划（基础 → 强化 → 冲刺）
- 医学发展史（里程碑事件）
布局规则：
- 时间轴水平或垂直
- 事件用圆点标记
- 标签在圆点上方或下方
参考：type-timeline.md
3.5 Tree（树形图）
用途：展示层级关系和分类体系。
考研场景示例：
- 知识点层级（科目 → 章节 → 知识点）
- 医学分类（系统 → 器官 → 疾病）
布局规则：
- 根节点在顶部或左侧
- 子节点向下或向右展开
- 用连线表示父子关系
参考：type-tree.md
3.6 ER（实体关系图）
用途：展示数据实体及其关系。
考研场景示例：
- 错题本数据模型（错题 → 科目 → 知识点）
- 用户系统数据模型（用户 → 学习计划 → 进度）
布局规则：
- 实体用矩形表示
- 属性用椭圆表示（可选）
- 关系用菱形表示
- 标注基数（1:1, 1:N, M:N）
参考：type-er.md
4. 输出规范
文件格式：独立 HTML 文件，内嵌 SVG 和 CSS。
文件结构：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>图表标题</title>
<style>
/* 内嵌 CSS */
</style>
</head>
<body>
<svg>
<!-- 图表内容 -->
</svg>
</body>
</html>
样式规范：
- 字体：
-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif - 圆角：
rx="4" - 阴影：
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)) - 动画：可选，默认静态
5. 使用示例
示例 1：医学 AI 系统架构图
输入：
请生成一个医学 AI 系统架构图，包括：
- 数据层：电子病历、医学影像、检验报告
- 模型层：NLP 模型、图像识别模型、预测模型
- 应用层：辅助诊断、智能问诊、病历分析
输出：example-medical-ai-architecture.html
示例 2：复习计划时间线
输入：
请生成一个考研复习计划时间线：
- 基础阶段（3-6月）：过一遍所有考点
- 强化阶段（7-9月）：刷题 + 专项突破
- 冲刺阶段（10-12月）：真题 + 查漏补缺
输出：example-study-timeline.html
6. 注意事项
- 不要过度设计：如果一段文字就能说清楚，就不要画图。
- 保持一致性：同一项目中的图表使用相同的配色和样式。
- 可访问性：使用高对比度颜色，避免仅靠颜色传达信息。
- 响应式：SVG 应该能在不同屏幕尺寸下正常显示。
7. 参考资源
- diagram-design - 原始图表设计 Skill
- SVG 教程 - MDN SVG 文档
- 考研备考 - 考研 AI 备考工作台
作者：CALM
日期：2026-08-27
许可证：MIT