# Kaoyan Diagram
> 生成考研/医学场景的可视化图表，包括系统架构图、诊疗流程图、数据时序图、复习时间线、知识点树形图、数据实体关系图。输出为独立 HTML 文件，内嵌 SVG 和 CSS，可直接在浏览器中打开。
- Skill: `calm123451/kaoyan-diagram` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add calm123451/kaoyan-diagram`
- Raw SKILL.md: https://api.skillmd.com/api/skills/calm123451/kaoyan-diagram/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT
- Author: CAlM123451 (https://skillmd.com/u/calm123451)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/calm123451/kaoyan-diagram
---
# 考研图表生成 Skill
生成考研/医学场景的可视化图表，输出为独立 HTML 文件。
**支持的图表类型（6 种）**：
1. **Architecture** - 系统架构图（用于医学 AI 系统、数据处理流程）
2. **Flowchart** - 流程图（用于诊疗流程、决策逻辑）
3. **Sequence** - 时序图（用于数据流程、API 调用）
4. **Timeline** - 时间线（用于复习计划、历史事件）
5. **Tree** - 树形图（用于知识点层级、分类体系）
6. **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](references/type-architecture.md)
### 3.2 Flowchart（流程图）
**用途**：展示决策逻辑和分支流程。
**考研场景示例**：
- 诊疗流程（症状 → 检查 → 诊断 → 治疗）
- 错题分析流程（错题 → 分类 → 原因 → 复习）
**布局规则**：
- 开始/结束用圆角矩形
- 决策用菱形
- 流程用矩形
- 箭头表示流向
**参考**：[type-flowchart.md](references/type-flowchart.md)
### 3.3 Sequence（时序图）
**用途**：展示时间顺序的消息传递。
**考研场景示例**：
- API 调用流程（前端 → 后端 → 数据库）
- 数据流转流程（上传 → 处理 → 分析 → 输出）
**布局规则**：
- 参与者用垂直线表示
- 消息用水平箭头表示
- 时间从上到下
**参考**：[type-sequence.md](references/type-sequence.md)
### 3.4 Timeline（时间线）
**用途**：展示事件在时间轴上的位置。
**考研场景示例**：
- 复习计划（基础 → 强化 → 冲刺）
- 医学发展史（里程碑事件）
**布局规则**：
- 时间轴水平或垂直
- 事件用圆点标记
- 标签在圆点上方或下方
**参考**：[type-timeline.md](references/type-timeline.md)
### 3.5 Tree（树形图）
**用途**：展示层级关系和分类体系。
**考研场景示例**：
- 知识点层级（科目 → 章节 → 知识点）
- 医学分类（系统 → 器官 → 疾病）
**布局规则**：
- 根节点在顶部或左侧
- 子节点向下或向右展开
- 用连线表示父子关系
**参考**：[type-tree.md](references/type-tree.md)
### 3.6 ER（实体关系图）
**用途**：展示数据实体及其关系。
**考研场景示例**：
- 错题本数据模型（错题 → 科目 → 知识点）
- 用户系统数据模型（用户 → 学习计划 → 进度）
**布局规则**：
- 实体用矩形表示
- 属性用椭圆表示（可选）
- 关系用菱形表示
- 标注基数（1:1, 1:N, M:N）
**参考**：[type-er.md](references/type-er.md)
---
## 4. 输出规范
**文件格式**：独立 HTML 文件，内嵌 SVG 和 CSS。
**文件结构**：
```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](assets/example-medical-ai-architecture.html)
### 示例 2：复习计划时间线
**输入**：
```
请生成一个考研复习计划时间线：
- 基础阶段（3-6月）：过一遍所有考点
- 强化阶段（7-9月）：刷题 + 专项突破
- 冲刺阶段（10-12月）：真题 + 查漏补缺
```
**输出**：[example-study-timeline.html](assets/example-study-timeline.html)
---
## 6. 注意事项
1. **不要过度设计**：如果一段文字就能说清楚，就不要画图。
2. **保持一致性**：同一项目中的图表使用相同的配色和样式。
3. **可访问性**：使用高对比度颜色，避免仅靠颜色传达信息。
4. **响应式**：SVG 应该能在不同屏幕尺寸下正常显示。
---
## 7. 参考资源
- [diagram-design](https://github.com/cathrynlavery/diagram-design) - 原始图表设计 Skill
- [SVG 教程](https://developer.mozilla.org/zh-CN/docs/Web/SVG) - MDN SVG 文档
- [考研备考](https://github.com/CAlM123451/kaoyan-ai-toolkit) - 考研 AI 备考工作台
---
**作者**：CALM
**日期**：2026-08-27
**许可证**：MIT