前言
在构建 Industrial RAG (工业检索增强生成) 应用时，最大的痛点在于如何将复杂的 P&ID 工程图纸转化为结构化的图数据。本文分享一个基于 React 18 + AntV X6 + Neo4j 开发的开源项目，它解决的核心问题是：赋予图形物理语义。
项目简介
chemical-graph-editor 是一个专为化工场景设计的 Web 编辑器。它利用 AntV X6 强大的图形能力实现可视化交互，并通过自定义的数据模型，将图形拓扑实时映射为 Neo4j 图数据库中的节点与关系。
技术栈
- 前端框架: React 18 (Vite + TypeScript)
- 图形引擎: AntV X6 (2.x)
- 图数据库: Neo4j (通过 neo4j-driver 连接)
- AI 辅助: 100% Code by Gemini 3
核心技术实现点
1. 物理感知的端口设计 (Physics-Aware Ports)
不同于通用的流程图，化工设备的端口具有强物理属性。我们在 X6 的 Port 数据结构中注入了自定义属性：
code TypeScript
// 示例：定义一个换热器的端口
ports: {
groups: {
'shell-in': {
attrs: {
dataPhase: 'vapor', // 气相
dataRegion: 'ShellSide' // 壳程
}
}
}
}
这样，当管线连接时，我们就能通过 edge.getTargetNode() 自动推导出整条管路的介质属性和流向逻辑。
2. 智能交互 (Smart Interaction)
- 正交路由 (Manhattan Routing) : 使用 X6 内置路由算法，实现管线自动避让设备。
- 自动吸附与打断: 模拟 CAD 体验，当阀门节点落在管线上时，自动触发 Split 逻辑，将一条 Edge 分裂为两条，并插入阀门节点。
3. 图谱数据同步 (Graph Sync)
这是本项目的核心价值。我们没有止步于 JSON 画布数据，而是编写了一个转换层，将 X6 的 Cells转换为 Cypher 语句：
- Node 映射: X6 Node -> Neo4j :Equipment / :Instrument
- Edge 映射: X6 Edge -> Neo4j :PIPING_CONNECT
- 属性携带: 自动将设备的位号 (Tag)、材质等属性写入图数据库。
开源地址
项目已采用 MIT 协议开源。如果你正在做知识图谱构建、工业软件开发或X6 深度定制，欢迎交流！
🔗 GitHub: github.com/ssnchenfeng…
(此处插入 2-3 张代码截图或编辑器界面图)
