Back to skills
extension
Category: Content & MediaNo API key required

知识点图谱

Transform the knowledge system provided by users into a visualized knowledge map, including hierarchical structure diagrams, knowledge point relationship diagrams, and correlation analysis. It is used when users need to organize subject systems, technology stack structures, conceptual relationships, or learning paths. For example, "Help me organize a knowledge map for front-end development", "Generate a Python learning roadmap", "Analyze the relationships between chapters of data structures".

personAuthor: systemdhubgithub

知识点地图生成器

将分散的知识点转化为结构化、可视化的知识地图,帮助用户理解知识体系的全貌和内在联系。

工作流程

1. 接收用户输入

用户提供知识体系的方式可能包括:

  • 列出知识点名称(如"HTML, CSS, JavaScript, React, Vue")
  • 描述学习目标或领域(如"前端开发"、"机器学习入门")
  • 提供现有课程大纲或目录结构
  • 指定特定教材/考试的章节安排

2. 分析知识结构

基于输入,识别以下要素:

层级关系

  • 基础层(前置知识、入门概念)
  • 核心层(主干知识、必备技能)
  • 扩展层(进阶内容、细分领域)
  • 应用层(实践场景、综合项目)

关联类型

  • 依赖关系(A是B的前提)
  • 并列关系(同级概念,可并行学习)
  • 包含关系(A包含B、C)
  • 递进关系(从A到B是进阶)

3. 生成可视化输出

每个知识地图包含三部分:

A. 层级结构图(Mermaid 流程图)

展示知识的纵向层次:

graph TD
    A[基础层] --> B[核心层]
    B --> C[扩展层]
    C --> D[应用层]

B. 知识点关系图(Mermaid 图)

展示知识的横向联系:

  • 简单体系(<10节点):使用 graph LRgraph TD
  • 复杂体系(≥10节点):使用 flowchart 并分组
  • 强调依赖路径:使用 graph LR 配合箭头样式

C. 关联分析说明

文字解释关键联系:

  • 学习顺序建议
  • 核心节点说明
  • 分支选择指南

输出格式规范

Mermaid 图表规则

  1. 节点命名:使用简短标识符(如 html, css, js
  2. 节点文本:使用中文描述(如 HTML基础, CSS样式, JavaScript核心
  3. 箭头含义
    • A --> B:A是B的前置知识
    • A -.-> B:A与B有关联但非必须
    • A ==> B:强烈建议的顺序
  4. 样式区分
    • 核心节点:style A fill:#e1f5fe
    • 基础节点:style B fill:#f1f8e9
    • 进阶节点:style C fill:#fff3e0

文字说明结构

## 知识体系概览

[1-2句总体描述]

## 层级结构

### Level 1: 基础层
- 知识点列表
- 学习时长建议

### Level 2: 核心层
...

## 关联分析

### 核心路径
[描述最主要的学习路径]

### 分支选择
[描述可选的扩展方向]

### 学习建议
[具体的行动建议]

示例:前端开发知识体系

用户输入:"帮我整理前端开发的知识体系地图,包括HTML/CSS/JS的关系"

输出结构:

层级结构图

graph TD
    HTML[HTML基础] --> DOM[DOM操作]
    CSS[CSS样式] --> Layout[布局系统]
    HTML --> WebAPI[Web API]
    CSS --> Responsive[响应式设计]
    JS[JavaScript核心] --> DOM
    JS --> ES6[ES6+新特性]
    DOM --> Framework[前端框架]
    ES6 --> Framework
    Framework --> React[React生态]
    Framework --> Vue[Vue生态]
    React --> SSR[服务端渲染]
    Vue --> SSR
    Responsive --> Mobile[移动端适配]

知识点关系图

flowchart TB
    subgraph Foundation[基础三剑客]
        H[HTML]
        C[CSS]
        J[JavaScript]
    end
    
    subgraph Core[核心技术]
        DOM[DOM/BOM]
        API[Web API]
        ES6[ES6+语法]
    end
    
    subgraph Framework[框架生态]
        R[React]
        V[Vue]
        A[Angular]
    end
    
    H --> DOM
    C --> Layout[布局系统]
    J --> ES6
    J --> DOM
    DOM --> R
    DOM --> V
    ES6 --> R
    ES6 --> V
    API --> Tool[工程化工具]

关联分析

核心学习路径

  1. 基础三剑客(HTML → CSS → JS)可并行学习
  2. JS掌握后学习DOM操作,是框架的基础
  3. ES6+是现代框架的必备前提

分支选择建议

  • 工程化方向:Webpack/Vite + TypeScript
  • 全栈方向:Node.js + 数据库
  • 移动端:React Native / Flutter

学习时长参考

  • 基础层:2-4周
  • 核心层:4-8周
  • 框架层:4-6周/每个

注意事项

  1. 复杂度控制:超过20个节点时,考虑分模块展示或使用子图
  2. 准确性优先:不确定的关系用虚线表示,或询问用户确认
  3. 保持更新:技术领域知识变化快,标注版本信息(如"ES2023")
  4. 响应用户需求:如果用户指定特定教材/考试,优先遵循其结构