# Iceberg Knowledge Map
> 构建「冰山知识架构」可视化组件——将任意学科/技术领域的知识体系渲染为交互式三维结构： 水面以上是干净的学习主线（线性推进），水面以下是按需下潜的冰山（深度分层）， 冰山底部展示知识节点间的关联网络。适用于：课程体系设计、技术栈学习路径、 知识地图梳理、教学内容可视化。 触发场景： - 用户说「帮我做一个知识地图 / 学习路径 / 知识架构」 - 用户想「把这个领域的知识可视化」 - 用户提供了一组有先后关系的概念，想呈现成交互式结构 - 任何涉及「知识体系 + 可视化 + 初学者友好」的需求
- Skill: `bob798/iceberg-knowledge-map` (Agent Skill)
- Install (CLI): `npx skillmds@latest add bob798/iceberg-knowledge-map`
- Raw SKILL.md: https://api.skillmd.com/api/skills/bob798/iceberg-knowledge-map/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: bob798 (https://skillmd.com/u/bob798)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/bob798/iceberg-knowledge-map
---
# Iceberg Knowledge Map Skill
将知识体系渲染为三维交互结构的 HTML 可视化组件。
---
## 核心设计哲学
书本是一维线性的，但知识本质是多维网状的。本技能将三个维度分离到不同空间，互不干扰：
| 维度 | 承载信息 | 视觉位置 | 出现时机 |
|------|----------|----------|----------|
| **水平轴（主线）** | 节点顺序、学习方向 | 水面以上，永远可见 | 始终 |
| **垂直轴（深度）** | 四层冰山内容 | 水面以下，点击展开 | 下潜后 |
| **关联轴（网络）** | 节点间依赖关系 | 冰山面板底部 | 下潜后，内容之后 |
**关键原则**：主线给方向，冰山给深度，关联给网络感。三者按认知时序依次出现，初学者不会被深度和关联打断主线节奏。
---
## 数据结构
在生成组件前，先将用户提供的知识领域整理为以下结构：
### 节点（nodes）
```js
{
id: 'unique_id',
icon: '🎯', // 单个 emoji，代表该节点性质
label: '短名', // ≤4字，显示在圆圈上
sublabel: '副标题', // ≤4字，圆圈下方
tag: '所属层', // 面板右上角标签
layers: [ // 冰山四层，顺序固定
{ lv:1, label:'表层 — 核心用法', items:[...] }, // 初学必知
{ lv:2, label:'关联 — 横向延伸', items:[...] }, // 同级概念/工具
{ lv:3, label:'原理 — 底层机制', items:[...] }, // why & how
{ lv:4, label:'历史 / 前沿', items:[...] }, // 演化与未来
]
}
```
每层 items 建议 3-5 条，每条 ≤20 字。
### 边（edges）
```js
['node_a', 'node_b', strength_0_to_1, '关系描述']
// strength: 0.9+ 强依赖，0.6-0.9 中等，0.3-0.6 弱关联
```
---
## HTML 呈现模型
```
[1] [2] [3] [4] [5] ← 序号
○────○────○────○────○ ← 主线（永远干净）
─ ─ ─ ─ ─ 水面 ─ ─ ─ ─ ─ ─ ← 水面分界线
┌──────────────────────────┐
│ 🎯 节点名 · 副标题 ✕ │ ← 面板 header
├──────────────────────────┤
│ 🌊 表层 — 核心用法 ▶ │ ← l1 最浅蓝
│ 🐬 关联 — 横向延伸 ▶ │ ← l2
│ 🦑 原理 — 底层机制 ▶ │ ← l3
│ 🌑 历史 / 前沿 ▶ │ ← l4 最深蓝
├──────────────────────────┤
│ 知识关联 │ ← 关联区在最底部
│ [mini辐射图] [强度列表] │
└──────────────────────────┘
```
**关联放在底部而非顶部**：用户点开节点的第一需求是「这是什么/怎么用」，关联是元认知，适合在了解内容后再看。
---
## 完整代码模板
以下是可直接运行的完整 HTML 组件，替换 `DATA_NODES` 和 `DATA_EDGES` 即可：
```html
```
---
## 生成步骤
1. **理解领域** — 询问用户想覆盖哪个领域，有几个主要节点（建议 4-7 个）
2. **整理数据** — 按节点结构填充 layers，每层 3-5 条；按边结构标注关联强度
3. **适配内容** — 根据领域调整 emoji、标签、层标题措辞
4. **输出组件** — 将数据填入模板，通过 `visualize:show_widget` 工具渲染
## 适配要点
- **节点数量**：4-7 个最佳，超过 7 个圆圈会拥挤
- **层内容**：每层聚焦不同认知角度，不要重复，第 1 层最重要
- **关联强度**：0.9+ 表示「学后者必须先学前者」，0.5 左右表示「有关联但可以独立学」
- **emoji 选择**：优先选能代表该知识性质的符号，不要所有节点都用相似的 emoji
- **中英文**：层标题中文，items 中文为主，专有名词保留英文
## 扩展方向
- **多条主线**：同一知识库可以有多条平行学习路径（如「快速入门路线」vs「完整路线」），在节点上方加 tab 切换
- **进度标记**：节点圆圈可叠加「已完成」状态（实心填充），追踪学习进度
- **难度维度**：节点可附加难度色环，让用户在选择下潜前就能感知复杂度