Repository navigation

知识图谱可视化功能

功能概述

本次更新为本体模型编辑器添加了知识图谱可视化功能，能够动态生成并展示工作区中所有模型实体之间的关系和依赖。

实现内容

1. 新增文件

`frontend/src/services/graphBuilder.ts`

图数据构建服务
从工作区的 YAML 模型中提取节点和边
支持以下模型类型：
- 对象模型（Object Model）：实体和关系
- 行为模型（Behavior Model）：行为及其与实体、规则的关系
- 规则模型（Rule Model）：业务规则
- 事件模型（Event Model）：事件及其触发者和订阅者
- 场景模型（Scenario Model）：用例和业务流程

`frontend/src/components/KnowledgeGraph.tsx`

知识图谱可视化组件
使用 D3.js v7.9.0 实现力导向图布局
使用 Canvas 渲染以提高性能
支持交互功能：
- 拖拽节点
- 平移画布
- 缩放（鼠标滚轮）
- 重置视图
- 按实体类型筛选

2. 修改文件

`frontend/src/App.tsx`

在工具栏添加"知识图谱"按钮（在"校验"按钮后）
点击按钮时生成知识图谱并在新标签页中显示
添加生成进度提示
支持在标签页中打开和关闭知识图谱

`frontend/package.json`

已包含 d3 和 @types/d3 依赖

功能特性

节点类型

核心对象（紫色，大圆圈）
- 标记为"核心域"的实体
- 带有外圈光晕效果
支撑域对象（绿色）
- 标记为"支撑域"的实体
- 如产品、客户、部门、人员等
行为（橙色）
- 系统中定义的所有行为
- 显示行为类型和触发方式
规则（黄色）
- 业务规则定义
- 显示规则类型
事件（绿色）
- 事件定义
- 连接触发者和订阅者
场景/流程（蓝色）
- 用例和业务流程
- 显示场景编排

边类型

组合关系（红色实线）：强依赖，级联删除
聚合关系（橙色实线）：弱依赖
关联关系（紫色虚线）：引用关系
事件链（绿色虚线）：事件触发
应用规则（黄色虚线）：行为应用规则
触发调用（蓝色实线）：场景调用行为

交互功能

拖拽节点：鼠标按住节点可拖动
平移画布：鼠标按住空白区域可平移
缩放：鼠标滚轮缩放（0.3x - 4x）
筛选：点击右上角按钮按类型筛选显示
- 全部
- 对象
- 行为
- 规则
- 事件
- 场景
重置视图：点击右下角"重置视图"按钮恢复初始状态

力导向布局

使用 D3.js 力导向算法自动布局：

链接力：根据关系类型设置不同距离和强度
排斥力：节点之间相互排斥，避免重叠
中心力：保持图形居中
碰撞检测：防止节点重叠

使用方法

打开工作区（包含模型 YAML 文件）
点击工具栏的"知识图谱"按钮
系统自动解析工作区模型并生成图谱
在新标签页中查看和交互

技术实现

前端框架：React + TypeScript
可视化库：D3.js v7.9.0
渲染方式：Canvas（高性能）
布局算法：Force-directed graph
数据源：工作区 YAML 文件动态解析

与参考实现的差异

相比 sample/contract_management_ontology_graph.html 的静态实现：

动态生成：从工作区 YAML 文件动态解析，而非硬编码数据
事件支持：增加了事件模型的可视化（原实现未包含）
集成到应用：作为编辑器的一部分，而非独立页面
数据同步：与工作区数据保持同步

后续优化建议

添加节点悬停提示（Tooltip）显示详细信息
支持点击节点跳转到对应编辑器
添加搜索和高亮功能
支持导出图谱为图片
添加不同布局算法选项（树形、层次、圆形等）
优化大规模图谱的性能