知识图可视化应用
概述
目标
此应用程序使用D3.js和Bootstrap 5在单个HTML和CSS文件中可视化知识图。
可用于可视化Github Copilot或Claude Desktop辅助期间使用的MCP/服务器内存知识图 开发和研究工作。
用户可以通过以下功能与节点和边进行交互：
- 节点拖动
- 节点固定
- 缩放与平移
- 节点详细信息的工具提示
- 实体类型图例
可折叠的左侧边栏提供了用于自定义图形外观和行为的控件。
特性
服务和文件
- 轻量级Python HTTP服务器（或任何静态服务器）
- 应用程序现在获取
memory.json并通过以下方式将其转换为客户端的D3.js图形convert_to_d3.js
错误处理
- 验证JSON图形数据
- 用户友好的错误消息
- 重试数据加载功能
- 优雅地处理丢失或格式错误的数据
- 用形状不同的占位符节点替换缺失的节点，并用简洁的描述说明它是一个占位符
- 导航栏上的徽章显示节点计数、链接计数、类型计数以及使用经济实惠的颜色编码创建的占位符数量
演出
- 针对大型图形（>500个节点）进行了优化
- 自动隐藏节点数大于1000的图形的标签
- 强制标签可见性的选项
交互式功能
- 具有全局和每个实体类型设置的高级图形力控制
- According小部件，用于按实体类型管理设置，包括可见性控制
- 图形边缘上的标签字体较小，用户可以在不需要时隐藏它们
- 将鼠标悬停在节点上时，会弹出格式化的工具提示，其中显示了清晰的部分和内容
- 将鼠标悬停在节点上时突出显示连接边
用法
- 获取知识图内存
memory.json.
- 例子：
read_graph.sh与@modelcontextprotocol/server-memory参考服务器并调用read_graph工具通过stdio。
- 使用静态服务器提供文件夹，例如在Windows上：
- 使用
start.bat或 - python
python -m http.server -b 127.0.0.1 8080
- 打开http://127.0.0.1:8080/knowledge_graph.html在您的浏览器中。
- 页面将获取
memory.json，动态转换它，验证，为缺少的引用节点插入占位符，并渲染图形。
笔记：
- 前一个预转换步骤(
convert_to_d3.py→d3_graph.json)页面不再需要。 - Python脚本仍然反映了逻辑，可以离线使用或导出静态
d3_graph.json如果需要的话。
故障排除
- 如果数据加载失败，应用程序将回退到内置的示例数据集以保持可用性。
- 确保
memory.json坐在旁边knowledge_graph.html当服务。 memory.json格式：它应该包含result.content[].text哪里text是一个JSON字符串{ entities: [...], relations: [...] }.- 使用本地服务器以避免浏览器CORS/安全限制。
客户端转换器API（供参考）
- 文件：
convert_to_d3.js - 功能：
window.convertMemoryJsonToD3Graph(memoryJson)
- 输入：导出 memory.json 对象 - 输出： { nodes: [...], links: [...], metadata: {...} } - 然后，主HTML在呈现之前运行自己的验证/规范化和占位符插入。
贡献
欢迎通过修改分叉和打开PR进行任何贡献，只需将您的想法与我联系，我们将讨论进一步的细节。开发分支是强制性的，不要向主分支提交任何内容。