SuperAPI AI 工具集

install-learning-graph-viewer

通用与其它

查看项目

更新于 10-16 04:31

技能介绍

用途:把交互式学习图谱查看器安装到智能教科书项目的 /docs/sims/graph-viewer/ 目录,用于浏览概念依赖关系。

前提:/docs/learning-graph/learning-graph.json 必须已存在,且其 metadata 含 title 字段;项目需为 MkDocs 结构。若图谱不存在,需先用 learning-graph-generator 技能生成。

安装流程:先确认文件存在(ls /docs/learning-graph/learning-graph.json);创建目录 mkdir -p /docs/sims/graph-viewer;从技能 assets 目录复制 main.html、script.js、local.css、index.md 到目标目录;用 Python 或 jq 从 JSON 提取标题,缺失时用默认标题;在 main.html 中把两处 TITLE 占位符替换为实际标题(<title> 标签与 <h4> 标题);可选在 mkdocs.yml 的 nav 中加入 sims/graph-viewer/index.md。

查看器能力:带下拉结果的即时搜索并显示节点分类;侧边栏按分类着色、勾选显示/隐藏分类,支持全选与全不选、可折叠;实时统计可见节点数、可见边数与孤立节点数;基于 vis.js 的物理模拟网络图,节点按分类着色,有向边表示依赖,可缩放拖动。

技术细节:script.js 以相对路径 ../../learning-graph/learning-graph.json 加载数据,假定 /docs/sims/ 与 /docs/learning-graph/ 为同级目录;vis-network.js 由 CDN 加载。

测试:运行 mkdocs serve,访问 http://localhost:8000/REPO_NAME/sims/graph-viewer/main.html,或通过站点菜单进入。

限制:除 main.html 的 TITLE 占位符外,模板文件无需修改;资料未提供其他配置项、兼容性或收费信息。