知识图谱可视化工具

知识图可视化应用

概述

目标

此应用程序使用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小部件，用于按实体类型管理设置，包括可见性控制
• 图形边缘上的标签字体较小，用户可以在不需要时隐藏它们
• 将鼠标悬停在节点上时，会弹出格式化的工具提示，其中显示了清晰的部分和内容
• 将鼠标悬停在节点上时突出显示连接边

用法

1. 获取知识图内存 memory.json.

• 例子： read_graph.sh 与 @modelcontextprotocol/server-memory 参考服务器并调用 read_graph 工具通过stdio。

2. 使用静态服务器提供文件夹，例如在Windows上：

• 使用 start.bat 或
• python python -m http.server -b 127.0.0.1 8080

3. 打开http://127.0.0.1:8080/knowledge_graph.html在您的浏览器中。
4. 页面将获取 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进行任何贡献，只需将您的想法与我联系，我们将讨论进一步的细节。开发分支是强制性的，不要向主分支提交任何内容。