knowledge-graph

用于人物、事件或知识等的关系构建工具。

一个功能强大的浏览器端知识图谱可视化工具，支持节点管理、关系连线、数据导入导出等功能。

功能特性

节点管理

• 新增、编辑、删除节点
• 自定义节点类型（人物、事件、物品、地点等）
• 自定义节点颜色、大小、描边
• 支持上传自定义节点图标
• 节点搜索定位
• 展开/收起子层级

关系管理

• 创建、编辑、删除节点间关系
• 自定义关系描述、线条颜色
• 连线模式，可视化创建关系

数据管理

• 数据导入导出（JSON格式）
• 导出图谱（PNG、SVG、PDF格式）
• 撤销/重做功能
• 清空视图

视图控制

• 居中视图
• 缩放、平移画布
• 拖拽节点调整位置
• 点击节点高亮关系链
• 响应式设计

图表设置

• 编辑图例
• 属性表管理
• 多类型节点支持

快速开始

安装

直接下载 knowledge-graph.html 文件，无需任何依赖安装。

使用

1. 使用浏览器打开 knowledge-graph.html 文件
2. 或启动本地服务器：

   python -m http.server 8000
   # 然后访问 http://localhost:8000/knowledge-graph.html

技术栈

• ECharts 5.4.3 - 图表渲染引擎
• jsPDF 2.5.1 - PDF导出功能
• 纯HTML/CSS/JavaScript - 无框架依赖

操作说明

基本操作

• 滚轮 - 缩放视图
• 拖拽画布 - 移动视图
• 拖拽节点 - 调整节点位置
• 点击节点 - 高亮关系链

节点操作

1. 点击左侧工具栏「➕ 新增节点」创建新节点
2. 选中节点后点击「✏️ 编辑选中」编辑节点属性
3. 点击「🗑️ 删除节点」删除选中的节点
4. 使用「🔍 搜索定位」快速找到节点

关系操作

1. 点击「🔗 开始连线」进入连线模式
2. 依次点击两个节点创建关系
3. 选中关系后可以编辑或删除

导出功能

1. 点击「📤 导出」打开导出对话框
2. 选择导出格式（PNG、SVG、PDF）
3. 点击「导出」完成图谱导出

数据格式

导出的JSON数据格式如下：

{
  "nodes": [
    {
      "id": "node1",
      "name": "节点名称",
      "category": "0",
      "symbolSize": 40,
      "itemStyle": {
        "color": "#6496ff",
        "borderColor": "#6496ff",
        "borderWidth": 3
      },
      "x": 0,
      "y": 0
    }
  ],
  "links": [
    {
      "source": "node1",
      "target": "node2",
      "name": "关系描述",
      "lineStyle": {
        "color": "#6496ff"
      },
      "label": {
        "color": "#e0e6ff"
      }
    }
  ]
}

浏览器支持

• Chrome/Edge 90+
• Firefox 88+
• Safari 14+

许可证

GNU General Public License v3.0 (GPLv3)

贡献

欢迎提交 Issue 和 Pull Request！

更新日志

v1.0.0

• 初始版本发布
• 支持节点和关系管理
• 支持数据导入导出
• 支持多种格式导出
• 力导向布局和节点固定
• 视图恢复和居中功能