From 1946deb75138f5ea9f58f53cd3cec8c236c1f78f Mon Sep 17 00:00:00 2001
From: zichun <26684461+reporkey@users.noreply.github.com>
Date: Fri, 24 Jul 2026 11:11:51 +0800
Subject: [PATCH] feat: 模型可视化 + 结构化/源码编辑工作台

---
 engine/src/main/java/com/onto/engine/model/ModelRepository.java |  36 ++++++++++++++++++++++++++++++++++++
 engine/src/main/java/com/onto/engine/web/MetaController.java    |  44 +++++++++++++++++++++++++++++++++++++++-----
 web/package-lock.json                                           | 700 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++----
 web/package.json                                                |  10 +++++++++-
 web/src/App.tsx                                                 | 189 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------------------------------------------------
 web/src/api.ts                                                  |  10 ++++++++--
 web/src/model/ModelEditor.tsx                                   | 559 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 web/src/model/editSession.ts                                    |  75 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 web/src/ontology/bpmn.ts                                        |  91 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 web/src/ontology/build.ts                                       | 302 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 web/src/ontology/types.ts                                       | 126 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 web/src/viz/ERDiagram.tsx                                       | 243 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 web/src/viz/NetworkGraph.tsx                                    | 614 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 web/src/viz/OntologyCanvas.tsx                                  |  55 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 web/src/viz/ProcessDiagram.tsx                                  | 216 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 web/vite.config.ts                                              |   2 +-
 16 files changed, 3187 insertions(+), 85 deletions(-)
 create mode 100644 web/src/model/ModelEditor.tsx
 create mode 100644 web/src/model/editSession.ts
 create mode 100644 web/src/ontology/bpmn.ts
 create mode 100644 web/src/ontology/build.ts
 create mode 100644 web/src/ontology/types.ts
 create mode 100644 web/src/viz/ERDiagram.tsx
 create mode 100644 web/src/viz/NetworkGraph.tsx
 create mode 100644 web/src/viz/OntologyCanvas.tsx
 create mode 100644 web/src/viz/ProcessDiagram.tsx

diff --git a/engine/src/main/java/com/onto/engine/model/ModelRepository.java b/engine/src/main/java/com/onto/engine/model/ModelRepository.java
index 65db532..94d14e7 100644
--- a/engine/src/main/java/com/onto/engine/model/ModelRepository.java
+++ b/engine/src/main/java/com/onto/engine/model/ModelRepository.java
@@ -96,6 +96,42 @@ public class ModelRepository {
     /** 返回某层解析后的原始对象（供模型查看器/前端"运行原理"面板展示）。 */
     public Object rawLayer(String code) { return layers.get(code); }
 
+    /** 返回某层 YAML 源文件的原始文本（保留注释/顺序，供模型编辑器编辑）。 */
+    public String rawFileText(String code) {
+        String fileName = LAYER_FILES.get(code);
+        if (fileName == null) return null;
+        Path dir = resolvedDir != null ? resolvedDir : resolveModelsDir();
+        try {
+            return Files.readString(dir.resolve(fileName));
+        } catch (Exception ex) {
+            log.warn("读取模型源文件失败: {} -> {}", code, ex.getMessage());
+            return null;
+        }
+    }
+
+    /**
+     * 覆盖写入某层 YAML 源文件（模型编辑器保存用）。先校验能被解析，避免把源文件写坏、
+     * 导致后续 reload 全线失败。写入后需由调用方触发 reload 才会生效。返回写入的文件路径。
+     */
+    public synchronized Path writeRawLayer(String code, String yamlText) {
+        String fileName = LAYER_FILES.get(code);
+        if (fileName == null) throw new IllegalArgumentException("未知模型层: " + code);
+        try {
+            new Yaml(new LoaderOptions()).load(yamlText); // 解析校验：不通过则拒绝写入
+        } catch (Exception ex) {
+            throw new IllegalArgumentException("YAML 解析失败，未写入: " + ex.getMessage(), ex);
+        }
+        Path dir = resolvedDir != null ? resolvedDir : resolveModelsDir();
+        Path f = dir.resolve(fileName);
+        try {
+            Files.writeString(f, yamlText);
+        } catch (Exception ex) {
+            throw new IllegalStateException("写入模型文件失败: " + f + " -> " + ex.getMessage(), ex);
+        }
+        log.info("模型层已保存: {} -> {}", code, f.toAbsolutePath());
+        return f;
+    }
+
     @SuppressWarnings("unchecked")
     static Map<String, Object> asMap(Object o) {
         return o instanceof Map ? (Map<String, Object>) o : Collections.emptyMap();
diff --git a/engine/src/main/java/com/onto/engine/web/MetaController.java b/engine/src/main/java/com/onto/engine/web/MetaController.java
index 1fde2ea..920f809 100644
--- a/engine/src/main/java/com/onto/engine/web/MetaController.java
+++ b/engine/src/main/java/com/onto/engine/web/MetaController.java
@@ -90,6 +90,35 @@ public class MetaController {
         out.put("code", code);
         out.put("fileName", models.fileNameOf(code));
         out.put("content", models.rawLayer(code));
+        out.put("raw", models.rawFileText(code)); // 源文件原文（保留注释），供模型编辑器编辑
+        return out;
+    }
+
+    /**
+     * 保存某一层模型 YAML 源文件（模型编辑器用），写入后立即热重载生效。
+     * 请求体：{ "content": "<完整 YAML 文本>" }。与热重载同级：仅管理员可保存。
+     */
+    @PutMapping("/model/{code}")
+    public Map<String, Object> saveModel(@PathVariable String code,
+                                         @RequestBody Map<String, Object> body,
+                                         @RequestHeader(value = "X-Principal", required = false) String principal) {
+        requireAdmin(principal, "保存模型");
+        Object content = body == null ? null : body.get("content");
+        if (!(content instanceof String yaml) || yaml.isBlank()) {
+            throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "缺少 content（YAML 文本）");
+        }
+        try {
+            models.writeRawLayer(code, yaml);
+        } catch (IllegalArgumentException ex) {
+            throw new ResponseStatusException(HttpStatus.BAD_REQUEST, ex.getMessage());
+        }
+        models.reload();          // 写入后立即生效（含 M1/M3 变更 → 补表）
+        schemaInitializer.refresh();
+        Map<String, Object> out = new LinkedHashMap<>();
+        out.put("saved", true);
+        out.put("code", code);
+        out.put("fileName", models.fileNameOf(code));
+        out.put("message", "模型 " + code + " 已保存并热重载生效");
         return out;
     }
 
@@ -99,11 +128,7 @@ public class MetaController {
      */
     @PostMapping("/reload")
     public Map<String, Object> reload(@RequestHeader(value = "X-Principal", required = false) String principal) {
-        List<Object> admins = asList(models.frontGlobalConfig().get("dragRolePermission"));
-        if (!admins.isEmpty() && !admins.contains(principal)) {
-            throw new ResponseStatusException(HttpStatus.FORBIDDEN,
-                    "仅管理员 " + admins + " 可热重载模型（当前主体：" + principal + "）");
-        }
+        requireAdmin(principal, "热重载模型");
         models.reload();
         schemaInitializer.refresh();
         Map<String, Object> out = new LinkedHashMap<>();
@@ -113,6 +138,15 @@ public class MetaController {
         return out;
     }
 
+    /** 仅 M8 dragRolePermission 声明的管理员可执行敏感操作（保存/热重载）。 */
+    private void requireAdmin(String principal, String action) {
+        List<Object> admins = asList(models.frontGlobalConfig().get("dragRolePermission"));
+        if (!admins.isEmpty() && !admins.contains(principal)) {
+            throw new ResponseStatusException(HttpStatus.FORBIDDEN,
+                    "仅管理员 " + admins + " 可" + action + "（当前主体：" + principal + "）");
+        }
+    }
+
     @SuppressWarnings("unchecked")
     private static List<Object> asList(Object o) {
         return o instanceof List ? (List<Object>) o : java.util.Collections.emptyList();
diff --git a/web/package-lock.json b/web/package-lock.json
index 4dc5f3d..8241323 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -9,10 +9,18 @@
       "version": "2.0.0",
       "dependencies": {
         "@ant-design/icons": "^5.5.1",
+        "@dagrejs/dagre": "^3.0.0",
+        "@xyflow/react": "^12.11.2",
         "antd": "^5.21.6",
+        "bpmn-elk-layout": "^1.4.0",
+        "bpmn-js": "^18.22.0",
+        "cytoscape": "^3.34.0",
+        "cytoscape-fcose": "^2.2.0",
         "dayjs": "^1.11.13",
+        "js-yaml": "^4.3.0",
         "react": "^18.3.1",
-        "react-dom": "^18.3.1"
+        "react-dom": "^18.3.1",
+        "yaml": "^2.9.0"
       },
       "devDependencies": {
         "@types/react": "^18.3.12",
@@ -410,6 +418,31 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@bpmn-io/diagram-js-ui": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/@bpmn-io/diagram-js-ui/-/diagram-js-ui-0.2.4.tgz",
+      "integrity": "sha512-I678ZGtoH7z7FgzFhzzppM9ThsJ3Lh83kW3GjhjG3xyYciIPYHMaHK1MABP8F69H9pFZpViM6t4qUo8dwrVz0w==",
+      "license": "MIT",
+      "dependencies": {
+        "htm": "^3.1.1",
+        "preact": "^10.29.2"
+      }
+    },
+    "node_modules/@dagrejs/dagre": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@dagrejs/dagre/-/dagre-3.0.0.tgz",
+      "integrity": "sha512-ZzhnTy1rfuoew9Ez3EIw4L2znPGnYYhfn8vc9c4oB8iw6QAsszbiU0vRhlxWPFnmmNSFAkrYeF1PhM5m4lAN0Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@dagrejs/graphlib": "4.0.1"
+      }
+    },
+    "node_modules/@dagrejs/graphlib": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@dagrejs/graphlib/-/graphlib-4.0.1.tgz",
+      "integrity": "sha512-IvcV6FduIIAmLwnH+yun+QtV36SC7mERqa86aClNqmMN09WhmPPYU8ckHrZBozErf+UvHPWOTJYaGYiIcs0DgA==",
+      "license": "MIT"
+    },
     "node_modules/@emotion/hash": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
@@ -1451,6 +1484,55 @@
         "@babel/types": "^7.28.2"
       }
     },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-drag": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.7.tgz",
+      "integrity": "sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-selection": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.11.tgz",
+      "integrity": "sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-transition": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.9.tgz",
+      "integrity": "sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-zoom": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.8.tgz",
+      "integrity": "sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-interpolate": "*",
+        "@types/d3-selection": "*"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",
@@ -1462,14 +1544,14 @@
       "version": "15.7.15",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
       "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/@types/react": {
       "version": "18.3.31",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.31.tgz",
       "integrity": "sha512-vfEqpXTvwT91yhmwdfouStN2hSKwTvyRs8qpLfADyrq/kxDw0hZM7Wk9Ug1FELj8hIby+S/+kQCSRFF32nv2Qw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@types/prop-types": "*",
@@ -1480,7 +1562,7 @@
       "version": "18.3.7",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz",
       "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "peerDependencies": {
         "@types/react": "^18.0.0"
@@ -1507,6 +1589,48 @@
         "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
       }
     },
+    "node_modules/@xyflow/react": {
+      "version": "12.11.2",
+      "resolved": "https://registry.npmjs.org/@xyflow/react/-/react-12.11.2.tgz",
+      "integrity": "sha512-eLAlDWJfWnQEhJwGMjlWdAXO9eYllKpliUmPQlAmOLxz6mExXuzMVDUKLMquixgkrtmMFFtug3jGKmYYld12cA==",
+      "license": "MIT",
+      "dependencies": {
+        "@xyflow/system": "0.0.79",
+        "classcat": "^5.0.3",
+        "zustand": "^4.4.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=17",
+        "@types/react-dom": ">=17",
+        "react": ">=17",
+        "react-dom": ">=17"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@xyflow/system": {
+      "version": "0.0.79",
+      "resolved": "https://registry.npmjs.org/@xyflow/system/-/system-0.0.79.tgz",
+      "integrity": "sha512-czLyOh91NF0hIzbNzwi8I6GlqG23BHh2435OddfI6uiaLH3xdrdygO93gqgH1Bv9mhy8XPFQJOBn1FTq4LvEWA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-drag": "^3.0.7",
+        "@types/d3-interpolate": "^3.0.4",
+        "@types/d3-selection": "^3.0.10",
+        "@types/d3-transition": "^3.0.8",
+        "@types/d3-zoom": "^3.0.8",
+        "d3-drag": "^3.0.0",
+        "d3-interpolate": "^3.0.1",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0"
+      }
+    },
     "node_modules/antd": {
       "version": "5.29.3",
       "resolved": "https://registry.npmjs.org/antd/-/antd-5.29.3.tgz",
@@ -1572,6 +1696,12 @@
         "react-dom": ">=16.9.0"
       }
     },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "license": "Python-2.0"
+    },
     "node_modules/baseline-browser-mapping": {
       "version": "2.10.43",
       "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.43.tgz",
@@ -1585,6 +1715,113 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/bpmn-elk-layout": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/bpmn-elk-layout/-/bpmn-elk-layout-1.4.0.tgz",
+      "integrity": "sha512-FKcZIbSa2PPCV/KbLiSCg4fqvHf2BUBPVp2nX3+dC5+gWpKIg2ICQZ4xdkIdi+IV9cwzQQ4M7d+7hZsZRPAT+Q==",
+      "license": "MIT",
+      "dependencies": {
+        "bpmn-moddle": "^9.0.1",
+        "commander": "^12.1.0",
+        "elkjs": "^0.9.3",
+        "kiwi.js": "1.1.3",
+        "pathfinding": "0.4.18",
+        "web-worker": "1.5.0"
+      },
+      "bin": {
+        "bpmn-elk-layout": "dist/bin/bpmn-elk-layout.js"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/bpmn-js": {
+      "version": "18.22.0",
+      "resolved": "https://registry.npmjs.org/bpmn-js/-/bpmn-js-18.22.0.tgz",
+      "integrity": "sha512-hM5aOiyLVdVGA80nveJLXFVQMpsaST7RilErjeKfXMhpZQJTnzU+yLDaenIJsq2f90+9inyktVPqsS1Ersik2A==",
+      "license": "SEE LICENSE IN LICENSE",
+      "dependencies": {
+        "bpmn-moddle": "^10.0.0",
+        "diagram-js": "^15.23.0",
+        "diagram-js-direct-editing": "^3.5.1",
+        "ids": "^3.0.2",
+        "inherits-browser": "^0.1.0",
+        "min-dash": "^5.1.0",
+        "min-dom": "^5.3.0",
+        "tiny-svg": "^4.1.4"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/bpmn-js/node_modules/bpmn-moddle": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/bpmn-moddle/-/bpmn-moddle-10.0.0.tgz",
+      "integrity": "sha512-vXePD5jkatcILmM3zwJG/m6IIHIghTGB7WvgcdEraEw8E8VdJHrTgrvBUhbzqaXJpnsGQz15QS936xeBY6l9aA==",
+      "license": "MIT",
+      "dependencies": {
+        "min-dash": "^5.0.0",
+        "moddle": "^8.0.0",
+        "moddle-xml": "^12.0.0"
+      },
+      "engines": {
+        "node": ">= 20.12"
+      }
+    },
+    "node_modules/bpmn-js/node_modules/moddle": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/moddle/-/moddle-8.2.0.tgz",
+      "integrity": "sha512-okP9kfyOJrUxCVkwy9xpTQ54UmrEkMkjNWsyZNU9+uhdjYO43BLftUrgmaOBBBGZ7hUbJSevJFfRamxiCzaQlw==",
+      "license": "MIT",
+      "dependencies": {
+        "min-dash": "^5.1.0"
+      }
+    },
+    "node_modules/bpmn-js/node_modules/moddle-xml": {
+      "version": "12.1.0",
+      "resolved": "https://registry.npmjs.org/moddle-xml/-/moddle-xml-12.1.0.tgz",
+      "integrity": "sha512-+m50j9/MFGhvWbLJoKSSjQj3uv7SYm2w5i2lfv6goWarlWW1Nd0A31NYUXmKuWnEZ8Mm/bH1RZYtuf4x8ptY7g==",
+      "license": "MIT",
+      "dependencies": {
+        "min-dash": "^5.1.0",
+        "saxen": "^11.1.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "moddle": ">= 6.2.0"
+      }
+    },
+    "node_modules/bpmn-js/node_modules/saxen": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/saxen/-/saxen-11.1.0.tgz",
+      "integrity": "sha512-GOxBOAmiWVAytOHBuMlgFMZ4MAk+2Ny5QJpzM9I4IozfPLXq3FsDdIHNviTQGZGIx7G2mBkA+uySiJlYmSU1Gg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 20.12"
+      }
+    },
+    "node_modules/bpmn-moddle": {
+      "version": "9.0.4",
+      "resolved": "https://registry.npmjs.org/bpmn-moddle/-/bpmn-moddle-9.0.4.tgz",
+      "integrity": "sha512-dr5s3vtOG8NkVSwa8CC55XBIKKwajomSZRb0RiMOOOF6TpqZBZvtbDjpzWICvdd/plDF6uOtaRfSgblPQLAioQ==",
+      "license": "MIT",
+      "dependencies": {
+        "min-dash": "^4.2.1",
+        "moddle": "^7.0.0",
+        "moddle-xml": "^11.0.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/bpmn-moddle/node_modules/min-dash": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/min-dash/-/min-dash-4.2.3.tgz",
+      "integrity": "sha512-VLMYQI5+FcD9Ad24VcB08uA83B07OhueAlZ88jBK6PyupTvEJwllTMUqMy0wPGYs7pZUEtEEMWdHB63m3LtEcg==",
+      "license": "MIT"
+    },
     "node_modules/browserslist": {
       "version": "4.28.6",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.6.tgz",
@@ -1640,12 +1877,36 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/classcat": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/classcat/-/classcat-5.0.5.tgz",
+      "integrity": "sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w==",
+      "license": "MIT"
+    },
     "node_modules/classnames": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
       "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
       "license": "MIT"
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/commander": {
+      "version": "12.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-12.1.0.tgz",
+      "integrity": "sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/compute-scroll-into-view": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-3.1.1.tgz",
@@ -1668,12 +1929,147 @@
         "toggle-selection": "^1.0.6"
       }
     },
+    "node_modules/cose-base": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/cose-base/-/cose-base-2.2.0.tgz",
+      "integrity": "sha512-AzlgcsCbUMymkADOJtQm3wO9S3ltPfYOFD5033keQn9NJzIbtnZj+UdBJe7DYml/8TdbtHJW3j58SOnKhWY/5g==",
+      "license": "MIT",
+      "dependencies": {
+        "layout-base": "^2.0.0"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
       "license": "MIT"
     },
+    "node_modules/cytoscape": {
+      "version": "3.34.0",
+      "resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.34.0.tgz",
+      "integrity": "sha512-62rNSrioXw93uliKFBwjukeQyeWwH2PqDrTac31r2P6464u3AUvTk0xS4LVvT251g7IgkFunrI48ZEZGjywSOg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/cytoscape-fcose": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/cytoscape-fcose/-/cytoscape-fcose-2.2.0.tgz",
+      "integrity": "sha512-ki1/VuRIHFCzxWNrsshHYPs6L7TvLu3DL+TyIGEsRcvVERmxokbf5Gdk7mFxZnTdiGtnA4cfSmjZJMviqSuZrQ==",
+      "license": "MIT",
+      "dependencies": {
+        "cose-base": "^2.2.0"
+      },
+      "peerDependencies": {
+        "cytoscape": "^3.2.0"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
+      }
+    },
+    "node_modules/d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/dayjs": {
       "version": "1.11.21",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.21.tgz",
@@ -1698,6 +2094,63 @@
         }
       }
     },
+    "node_modules/diagram-js": {
+      "version": "15.23.0",
+      "resolved": "https://registry.npmjs.org/diagram-js/-/diagram-js-15.23.0.tgz",
+      "integrity": "sha512-cCgL+4Ep0xrLe6TtdvRVgo6bWYjUbrQg+ES/9rpltqmTD2YaPoC+NYcRsKYw/fDO+1RN0q16NzErP1svVZhNQg==",
+      "license": "MIT",
+      "dependencies": {
+        "@bpmn-io/diagram-js-ui": "^0.2.4",
+        "clsx": "^2.1.1",
+        "didi": "^11.0.0",
+        "inherits-browser": "^0.1.0",
+        "min-dash": "^5.1.0",
+        "min-dom": "^5.3.0",
+        "object-refs": "^0.4.0",
+        "path-intersection": "^4.1.0",
+        "tiny-svg": "^4.1.4"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/diagram-js-direct-editing": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/diagram-js-direct-editing/-/diagram-js-direct-editing-3.5.1.tgz",
+      "integrity": "sha512-fEQCQ/x5oKVV0m7Nmgv7i85Vhw+kJkKNXF8zcV5Vm0KwF8x/8e3Ax0aJgdXt8/fDPymEkY8HmZweXIipCeeh+g==",
+      "license": "MIT",
+      "dependencies": {
+        "min-dash": "^5.0.0",
+        "min-dom": "^5.3.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "peerDependencies": {
+        "diagram-js": "*"
+      }
+    },
+    "node_modules/didi": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/didi/-/didi-11.0.0.tgz",
+      "integrity": "sha512-PzCfRzQttvFpVcYMbSF7h8EsWjeJpVjWH4qDhB5LkMi1ILvHq4Ob0vhM2wLFziPkbUBi+PAo7ODbe2sacR7nJQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 20.12"
+      }
+    },
+    "node_modules/domify": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/domify/-/domify-3.0.0.tgz",
+      "integrity": "sha512-bs2yO68JDFOm6rKv8f0EnrM2cENduhRkpqOtt/s5l5JBA/eqGBZCzLPmdYoHtJ6utgLGgcBajFsEQbl12pT0lQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.393",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.393.tgz",
@@ -1705,6 +2158,12 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/elkjs": {
+      "version": "0.9.3",
+      "resolved": "https://registry.npmjs.org/elkjs/-/elkjs-0.9.3.tgz",
+      "integrity": "sha512-f/ZeWvW/BCXbhGEf1Ujp29EASo/lk1FDnETgNKwJrsVvGZhUWCZyg3xLJjAsxfOmt8KjswHmI5EwCQcPMpOYhQ==",
+      "license": "EPL-2.0"
+    },
     "node_modules/esbuild": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
@@ -1779,12 +2238,60 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/heap": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/heap/-/heap-0.2.5.tgz",
+      "integrity": "sha512-G7HLD+WKcrOyJP5VQwYZNC3Z6FcQ7YYjEFiFoIj8PfEr73mu421o8B1N5DKUcc8K37EsJ2XXWA8DtrDz/2dReg=="
+    },
+    "node_modules/htm": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/htm/-/htm-3.1.1.tgz",
+      "integrity": "sha512-983Vyg8NwUE7JkZ6NmOqpCZ+sh1bKv2iYTlUkzlWmA5JD2acKoxd4KVxbMmxX/85mtfdnDmTFoNKcg5DGAvxNQ==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/ids": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/ids/-/ids-3.0.2.tgz",
+      "integrity": "sha512-t6YJP4mdC+GHF96Nbis/4FEANhP/8VWmYMvUuYpXvSdrhg5hpIVbq2XZlOA3UWTbtdwPCi0q7jEXOdHkAnqOnw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 20.12"
+      }
+    },
+    "node_modules/inherits-browser": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/inherits-browser/-/inherits-browser-0.1.0.tgz",
+      "integrity": "sha512-CJHHvW3jQ6q7lzsXPpapLdMx5hDpSF3FSh45pwsj6bKxJJ8Nl8v43i5yXnr3BdfOimGHKyniewQtnAIp3vyJJw==",
+      "license": "ISC"
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
       "license": "MIT"
     },
+    "node_modules/js-yaml": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.3.0.tgz",
+      "integrity": "sha512-1td788aAnnZ5qs7V2QIRl1owjtYpbKt749Y3xauqQgwIIGF/xXWz1wMTEBx5O3LK3lXLVuqXPdPxj2BoFHaW9Q==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/puzrin"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/nodeca"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
     "node_modules/jsesc": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
@@ -1820,6 +2327,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/kiwi.js": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/kiwi.js/-/kiwi.js-1.1.3.tgz",
+      "integrity": "sha512-aBA32N0LjuF0RIeV+OVhT8wnGAwdLYynKxkHbRvatI7yajOBM3OUjzTuzt3w9UnY9TYt7U65oe7U8EXlUHuTrQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/layout-base": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/layout-base/-/layout-base-2.0.1.tgz",
+      "integrity": "sha512-dp3s92+uNI1hWIpPGH3jK2kxE2lMjdXdr+DH8ynZHpd6PUlH6x6cbuXnoMmiNumznqaNO31xu9e79F0uuZ0JFg==",
+      "license": "MIT"
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -1842,6 +2361,59 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/min-dash": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/min-dash/-/min-dash-5.1.0.tgz",
+      "integrity": "sha512-HAvN6XzmCQj+js43G9sJRRw8kj/7DvoxN7qhoIN9Xo5ZN1NMljtpyKs/NunXmw0QSWwlgZzNv6tLeEa4xaZ0tg==",
+      "license": "MIT"
+    },
+    "node_modules/min-dom": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/min-dom/-/min-dom-5.3.0.tgz",
+      "integrity": "sha512-0w5FEBgPAyHhmFojW3zxd7we3D+m5XYS3E/06OyvxmbHJoiQVa4Nagj6RWvoAKYRw5xth6cP5TMePc5cR1M9hA==",
+      "license": "MIT",
+      "dependencies": {
+        "domify": "^3.0.0",
+        "min-dash": "^5.0.0"
+      }
+    },
+    "node_modules/moddle": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/moddle/-/moddle-7.2.0.tgz",
+      "integrity": "sha512-x1+JREThy7JBOBR3g2hbOnOfrlC/YAWXX9RzrSZS5HhqeuBly9H/PCtOBtcQs+Y2sjRAXF+WTNSgHvn8Uq+6Yw==",
+      "license": "MIT",
+      "dependencies": {
+        "min-dash": "^4.2.1"
+      }
+    },
+    "node_modules/moddle-xml": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/moddle-xml/-/moddle-xml-11.0.0.tgz",
+      "integrity": "sha512-L3Sseepfcq9Uy0iIfqEDTXSoYLva1Y/JGbN/4AMOeQ6cqbu8Ma/SDJIdOFm7smsAa64j2z3SwCGG3FIilQVnUg==",
+      "license": "MIT",
+      "dependencies": {
+        "min-dash": "^4.0.0",
+        "saxen": "^10.0.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "moddle": ">= 6.2.0"
+      }
+    },
+    "node_modules/moddle-xml/node_modules/min-dash": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/min-dash/-/min-dash-4.2.3.tgz",
+      "integrity": "sha512-VLMYQI5+FcD9Ad24VcB08uA83B07OhueAlZ88jBK6PyupTvEJwllTMUqMy0wPGYs7pZUEtEEMWdHB63m3LtEcg==",
+      "license": "MIT"
+    },
+    "node_modules/moddle/node_modules/min-dash": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/min-dash/-/min-dash-4.2.3.tgz",
+      "integrity": "sha512-VLMYQI5+FcD9Ad24VcB08uA83B07OhueAlZ88jBK6PyupTvEJwllTMUqMy0wPGYs7pZUEtEEMWdHB63m3LtEcg==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -1878,6 +2450,32 @@
         "node": ">=18"
       }
     },
+    "node_modules/object-refs": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/object-refs/-/object-refs-0.4.0.tgz",
+      "integrity": "sha512-6kJqKWryKZmtte6QYvouas0/EIJKPI1/MMIuRsiBlNuhIMfqYTggzX2F1AJ2+cDs288xyi9GL7FyasHINR98BQ==",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/path-intersection": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/path-intersection/-/path-intersection-4.1.0.tgz",
+      "integrity": "sha512-urUP6WvhnxbHPdHYl6L7Yrc6+1ny6uOFKPCzPxTSUSYGHG0o94RmI7SvMMaScNAM5RtTf08bg4skc6/kjfne3A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.20"
+      }
+    },
+    "node_modules/pathfinding": {
+      "version": "0.4.18",
+      "resolved": "https://registry.npmjs.org/pathfinding/-/pathfinding-0.4.18.tgz",
+      "integrity": "sha512-R0TGEQ9GRcFCDvAWlJAWC+KGJ9SLbW4c0nuZRcioVlXVTlw+F5RvXQ8SQgSqI9KXWC1ew95vgmIiyaWTlCe9Ag==",
+      "dependencies": {
+        "heap": "0.2.5"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -1914,6 +2512,24 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/preact": {
+      "version": "10.29.7",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.29.7.tgz",
+      "integrity": "sha512-DCHYrK/B10yUD3ZjLfhZ3WIE/9Vf9VFUODcRE2dRomTYDpJk6z6L9wecSfhfE6M9ZTHUdyQkoC46arIDhEV84Q==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/preact"
+      },
+      "peerDependencies": {
+        "preact-render-to-string": ">=5"
+      },
+      "peerDependenciesMeta": {
+        "preact-render-to-string": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/rc-cascader": {
       "version": "3.34.0",
       "resolved": "https://registry.npmjs.org/rc-cascader/-/rc-cascader-3.34.0.tgz",
@@ -2612,6 +3228,15 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/saxen": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/saxen/-/saxen-10.0.0.tgz",
+      "integrity": "sha512-RXsmWok/SAWqOG/f5ADEz51DN9WtZEzqih3e08ranldcaXekxjx8NBKjGh/y5hlowjo0JH/LekBu6gtPFD1G6g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 18"
+      }
+    },
     "node_modules/scheduler": {
       "version": "0.23.2",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
@@ -2671,6 +3296,15 @@
         "node": ">=12.22"
       }
     },
+    "node_modules/tiny-svg": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/tiny-svg/-/tiny-svg-4.1.4.tgz",
+      "integrity": "sha512-cBaEACCbouYrQc9RG+eTXnPYosX1Ijqty/I6DdXovwDd89Pwu4jcmpOR7BuFEF9YCcd7/AWwasE0207WMK7hdw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 20"
+      }
+    },
     "node_modules/toggle-selection": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
@@ -2722,6 +3356,15 @@
         "browserslist": ">= 4.21.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/vite": {
       "version": "5.4.21",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.21.tgz",
@@ -2782,12 +3425,61 @@
         }
       }
     },
+    "node_modules/web-worker": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/web-worker/-/web-worker-1.5.0.tgz",
+      "integrity": "sha512-RiMReJrTAiA+mBjGONMnjVDP2u3p9R1vkcGz6gDIrOMT3oGuYwX2WRMYI9ipkphSuE5XKEhydbhNEJh4NY9mlw==",
+      "license": "Apache-2.0"
+    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
       "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
       "dev": true,
       "license": "ISC"
+    },
+    "node_modules/yaml": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.9.0.tgz",
+      "integrity": "sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA==",
+      "license": "ISC",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/eemeli"
+      }
+    },
+    "node_modules/zustand": {
+      "version": "4.5.7",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.7.tgz",
+      "integrity": "sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==",
+      "license": "MIT",
+      "dependencies": {
+        "use-sync-external-store": "^1.2.2"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8",
+        "immer": ">=9.0.6",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
     }
   }
 }
diff --git a/web/package.json b/web/package.json
index b7e4ed6..3f88f33 100644
--- a/web/package.json
+++ b/web/package.json
@@ -11,10 +11,18 @@
   },
   "dependencies": {
     "@ant-design/icons": "^5.5.1",
+    "@dagrejs/dagre": "^3.0.0",
+    "@xyflow/react": "^12.11.2",
     "antd": "^5.21.6",
+    "bpmn-elk-layout": "^1.4.0",
+    "bpmn-js": "^18.22.0",
+    "cytoscape": "^3.34.0",
+    "cytoscape-fcose": "^2.2.0",
     "dayjs": "^1.11.13",
+    "js-yaml": "^4.3.0",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "yaml": "^2.9.0"
   },
   "devDependencies": {
     "@types/react": "^18.3.12",
diff --git a/web/src/App.tsx b/web/src/App.tsx
index 99f54f0..5975334 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -1,15 +1,35 @@
-import { useEffect, useState } from 'react'
-import { Layout, Card, Tabs, Button, Space, Typography, Tag, message, Spin, Modal, Select } from 'antd'
+import { useEffect, useState, lazy, Suspense } from 'react'
+import { Layout, Card, Tabs, Button, Space, Typography, Tag, message, Spin, Modal, Select, Menu } from 'antd'
 import { ReloadOutlined, ThunderboltOutlined, BranchesOutlined, UserOutlined } from '@ant-design/icons'
 import { api } from './api'
 import type { SceneSchema } from './types'
 import { SceneForm } from './engine/SceneForm'
 import { TracePanel, ProvenancePanel, ModelViewer, OrdersEventsPanel } from './panels'
 
+// 重量级视图（模型编辑器 + 三张可视化图，含 cytoscape/xyflow/bpmn-js）按需懒加载，
+// 让默认「场景运行台」的首屏包保持轻量。
+const ModelEditor = lazy(() => import('./model/ModelEditor').then((m) => ({ default: m.ModelEditor })))
+const OntologyCanvas = lazy(() => import('./viz/OntologyCanvas').then((m) => ({ default: m.OntologyCanvas })))
+
+const LazyFallback = () => (
+  <div style={{ padding: 60, textAlign: 'center' }}><Spin tip="加载视图…"><div style={{ width: 120, height: 60 }} /></Spin></div>
+)
+
 const { Header, Sider, Content } = Layout
 const { Title, Text, Paragraph } = Typography
 
+type View = 'runner' | 'editor' | 'er' | 'network' | 'process'
+
+const VIEW_ITEMS = [
+  { key: 'runner', label: '场景运行台' },
+  { key: 'editor', label: '模型编辑器' },
+  { key: 'er', label: '数据结构图' },
+  { key: 'network', label: '本体网络图' },
+  { key: 'process', label: '场景流程图' },
+]
+
 export default function App() {
+  const [view, setView] = useState<View>('runner')
   const [scenes, setScenes] = useState<any[]>([])
   const [sceneId, setSceneId] = useState<string>('') // 初始不硬编码，待场景列表返回后取首个可渲染场景
   const [schema, setSchema] = useState<SceneSchema | null>(null)
@@ -17,7 +37,7 @@ export default function App() {
   const [result, setResult] = useState<any>(null)
   const [refreshKey, setRefreshKey] = useState(0)
   const [formKey, setFormKey] = useState(0)
-  // 演示态主体（M5 principal）：随手切换以观察权限"通过/拒绝"分支；管理员方可热重载/新增客户
+  // 演示态主体（M5 principal）：随手切换以观察权限"通过/拒绝"分支；管理员方可热重载/保存模型/新增客户
   const [principal, setPrincipal] = useState<string>('backend_admin')
 
   // 拉取场景列表（首个可渲染场景兜底选中；已有选择则保留，以便热重载后停留在当前场景）
@@ -35,12 +55,17 @@ export default function App() {
     api.sceneSchema(sceneId).then(setSchema).catch((e) => message.error('加载场景失败：' + e.message)).finally(() => setLoading(false))
   }, [sceneId, formKey])
 
+  // 模型（含热重载/保存）变化后：重拉场景列表 + 重挂当前表单，让改动即时反映
+  const afterModelChange = async () => {
+    await loadScenes()
+    setFormKey((k) => k + 1)
+  }
+
   async function reloadModels() {
     try {
       const r = await api.reload(principal)
       message.success(r.message)
-      await loadScenes()       // 重新拉取场景列表：模板增删 / hasTemplate 变化即时反映到侧栏
-      setFormKey((k) => k + 1) // 强制重新拉取当前场景 schema + 重挂载表单
+      await afterModelChange()
     } catch (e: any) { message.error('热重载失败：' + e.message) }
   }
 
@@ -48,79 +73,99 @@ export default function App() {
 
   return (
     <Layout style={{ minHeight: '100vh' }}>
-      <Header style={{ background: '#001529', display: 'flex', alignItems: 'center', gap: 16 }}>
+      <Header style={{ background: '#001529', display: 'flex', alignItems: 'center', gap: 16, paddingInline: 20 }}>
         <BranchesOutlined style={{ color: '#69b1ff', fontSize: 22 }} />
-        <Title level={4} style={{ color: '#fff', margin: 0 }}>本体驱动 DDD+EDA · 元数据引擎 Demo</Title>
-        <Tag color="blue">改 YAML → 页面与行为随之变</Tag>
-        <div style={{ flex: 1 }} />
+        <Title level={4} style={{ color: '#fff', margin: 0, whiteSpace: 'nowrap' }}>本体驱动 DDD+EDA · 元数据引擎</Title>
+        <Menu
+          mode="horizontal"
+          theme="dark"
+          selectedKeys={[view]}
+          onClick={(e) => setView(e.key as View)}
+          items={VIEW_ITEMS}
+          style={{ flex: 1, minWidth: 0, background: 'transparent', borderBottom: 'none' }}
+        />
         <Space>
           <UserOutlined style={{ color: '#69b1ff' }} />
-          <Select size="small" value={principal} onChange={setPrincipal} style={{ width: 140 }}
+          <Select size="small" value={principal} onChange={setPrincipal} style={{ width: 130 }}
             options={[{ value: 'backend_admin', label: '后台管理员' }, { value: 'normal_user', label: '普通用户' }]} />
         </Space>
-        <Button icon={<ReloadOutlined />} onClick={reloadModels} ghost>热重载模型</Button>
+        <Button icon={<ReloadOutlined />} onClick={reloadModels} ghost>热重载</Button>
         <HelpButton />
       </Header>
-      <Layout>
-        <Sider width={260} theme="light" style={{ padding: 12 }}>
-          <Text type="secondary">业务场景（M4）</Text>
-          <div style={{ marginTop: 8 }}>
-            {scenes.map((s) => {
-              const active = sceneId === s.sceneId
-              return (
-                <div
-                  key={s.sceneId}
-                  onClick={() => setSceneId(s.sceneId)}
-                  style={{
-                    padding: '10px 12px',
-                    marginBottom: 8,
-                    borderRadius: 8,
-                    cursor: 'pointer',
-                    background: active ? '#e6f4ff' : '#fff',
-                    border: `1px solid ${active ? '#91caff' : '#f0f0f0'}`,
-                    transition: 'all .2s',
-                  }}
-                >
-                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                    <ThunderboltOutlined style={{ color: active ? '#1677ff' : '#999' }} />
-                    <span style={{ fontWeight: 500, color: active ? '#1677ff' : 'inherit' }}>{s.sceneName}</span>
-                  </div>
-                  <div style={{ fontSize: 11, color: '#999', marginTop: 4, marginLeft: 22 }}>
-                    {s.hasTemplate ? s.templateName : '无表单 · 直接运行 flowSteps'}
+
+      {view === 'runner' && (
+        <Layout>
+          <Sider width={260} theme="light" style={{ padding: 12 }}>
+            <Text type="secondary">业务场景（M4）</Text>
+            <div style={{ marginTop: 8 }}>
+              {scenes.map((s) => {
+                const active = sceneId === s.sceneId
+                return (
+                  <div
+                    key={s.sceneId}
+                    onClick={() => setSceneId(s.sceneId)}
+                    style={{
+                      padding: '10px 12px', marginBottom: 8, borderRadius: 8, cursor: 'pointer',
+                      background: active ? '#e6f4ff' : '#fff',
+                      border: `1px solid ${active ? '#91caff' : '#f0f0f0'}`, transition: 'all .2s',
+                    }}
+                  >
+                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                      <ThunderboltOutlined style={{ color: active ? '#1677ff' : '#999' }} />
+                      <span style={{ fontWeight: 500, color: active ? '#1677ff' : 'inherit' }}>{s.sceneName}</span>
+                    </div>
+                    <div style={{ fontSize: 11, color: '#999', marginTop: 4, marginLeft: 22 }}>
+                      {s.hasTemplate ? s.templateName : '无表单 · 直接运行 flowSteps'}
+                    </div>
                   </div>
-                </div>
-              )
-            })}
-          </div>
-          <Paragraph type="secondary" style={{ fontSize: 12, marginTop: 16 }}>
-            业务场景均由 M8 模板动态渲染并端到端执行（订单/客户/商品/审核…）。
-            末位「演示：全部 stepType」无表单，点开可直接运行、观察引擎逐类步骤的通用解释。
-            部分场景需管理员主体（M5 权限，可在右上切换）。
-          </Paragraph>
-        </Sider>
+                )
+              })}
+            </div>
+            <Paragraph type="secondary" style={{ fontSize: 12, marginTop: 16 }}>
+              业务场景均由 M8 模板动态渲染并端到端执行。「模型编辑器」可视化查看/编辑本体；
+              「数据结构图 / 本体网络图 / 场景流程图」由 M0–M8 本体动态合成渲染。
+            </Paragraph>
+          </Sider>
+
+          <Content style={{ padding: 16 }}>
+            <Spin spinning={loading}>
+              <div style={{ display: 'flex', gap: 16, alignItems: 'flex-start' }}>
+                <Card style={{ flex: '1 1 62%' }} title={<Space><b>{schema?.sceneName || '加载中'}</b><Tag color="green">{sceneId}</Tag></Space>}>
+                  {schema?.template ? <SceneForm key={formKey + sceneId} schema={schema} onExecuted={onExecuted} principal={principal} />
+                    : schema ? <RunOnlyScene key={sceneId} schema={schema} onExecuted={onExecuted} principal={principal} />
+                    : null}
+                </Card>
+
+                <Card style={{ flex: '1 1 38%', position: 'sticky', top: 16 }} styles={{ body: { paddingTop: 8 } }}>
+                  <Tabs
+                    items={[
+                      { key: 'trace', label: '执行追踪', children: <TracePanel result={result} /> },
+                      { key: 'prov', label: '溯源/规则', children: schema ? <ProvenancePanel schema={schema} /> : null },
+                      { key: 'orders', label: '数据/事件', children: <OrdersEventsPanel refreshKey={refreshKey} aggregateId={schema?.template?.masterAggregate || schema?.aggregateScope?.[0]} /> },
+                      { key: 'model', label: '模型查看器', children: <ModelViewer /> },
+                    ]} />
+                </Card>
+              </div>
+            </Spin>
+          </Content>
+        </Layout>
+      )}
 
+      {view === 'editor' && (
         <Content style={{ padding: 16 }}>
-          <Spin spinning={loading}>
-            <div style={{ display: 'flex', gap: 16, alignItems: 'flex-start' }}>
-              <Card style={{ flex: '1 1 62%' }} title={<Space><b>{schema?.sceneName || '加载中'}</b><Tag color="green">{sceneId}</Tag></Space>}>
-                {schema?.template ? <SceneForm key={formKey + sceneId} schema={schema} onExecuted={onExecuted} principal={principal} />
-                  : schema ? <RunOnlyScene key={sceneId} schema={schema} onExecuted={onExecuted} principal={principal} />
-                  : null}
-              </Card>
-
-              <Card style={{ flex: '1 1 38%', position: 'sticky', top: 16 }} styles={{ body: { paddingTop: 8 } }}>
-                <Tabs
-                  items={[
-                    { key: 'trace', label: '执行追踪', children: <TracePanel result={result} /> },
-                    { key: 'prov', label: '溯源/规则', children: schema ? <ProvenancePanel schema={schema} /> : null },
-                    { key: 'orders', label: '数据/事件', children: <OrdersEventsPanel refreshKey={refreshKey} aggregateId={schema?.template?.masterAggregate || schema?.aggregateScope?.[0]} /> },
-                    { key: 'model', label: '模型查看器', children: <ModelViewer /> },
-                  ]} />
-              </Card>
-            </div>
-          </Spin>
+          <Suspense fallback={<LazyFallback />}>
+            <ModelEditor principal={principal} onReloaded={afterModelChange} />
+          </Suspense>
+        </Content>
+      )}
+
+      {(view === 'er' || view === 'network' || view === 'process') && (
+        <Content>
+          <Suspense fallback={<LazyFallback />}>
+            <OntologyCanvas which={view} />
+          </Suspense>
         </Content>
-      </Layout>
+      )}
     </Layout>
   )
 }
@@ -170,12 +215,12 @@ function HelpButton() {
       <Modal open={open} onCancel={() => setOpen(false)} footer={null} width={720} title="如何验证：改了模型文件，操作定义同时改变">
         <Paragraph>本 Demo 的核心是<b>元数据驱动</b>：前端表单与后端行为都由 <Text code>models/*.yaml</Text> 实时解释，改模型即改行为，无需改任何代码。试试：</Paragraph>
         <ol style={{ lineHeight: 2 }}>
-          <li>编辑 <Text code>models/M8-front-schema.yaml</Text>：给订单主信息卡片再加一个绑定 M1 字段的组件（如 totalAmount 旁加一个 input 绑 totalCurrency 的副本），或删掉某字段 → 点顶部<b>「热重载模型」</b> → 表单立即多/少一个字段。</li>
-          <li>编辑 <Text code>models/MetaRule-business.yaml</Text>：把 <Text code>single_order_max_amount</Text> 从 50000 改为 100 → 热重载 → 普通用户下单超 100 即被 <Tag color="red">REJECT</Tag>。</li>
-          <li>编辑 <Text code>models/M1-domain.yaml</Text>：把某字段 type 由 string 改为 int → 热重载 → 该组件输入类型随之改变；配合 M3 增列后可落库。</li>
-          <li>编辑 <Text code>models/M5-security.yaml</Text> 的 maskRules → 热重载 → 脱敏展示规则随之变化。</li>
+          <li>进入<b>「模型编辑器 · 源码编辑」</b>，选 <Text code>M8-front-schema.yaml</Text> 给订单主信息卡片加/删一个绑定 M1 字段的组件 → <b>保存并热重载</b> → 回「场景运行台」，表单立即多/少一个字段。</li>
+          <li>编辑 <Text code>MetaRule-business.yaml</Text>：把 <Text code>single_order_max_amount</Text> 从 50000 改为 100 → 保存 → 普通用户下单超 100 即被 <Tag color="red">REJECT</Tag>。</li>
+          <li>编辑 <Text code>M1-domain.yaml</Text>：把某字段 type 由 string 改为 int → 保存 → 组件输入类型随之改变；<b>「数据结构图」</b>同步更新。</li>
+          <li><b>「本体网络图 / 场景流程图」</b>亦由本体动态合成，改模型后点视图内「刷新」即见变化。</li>
         </ol>
-        <Paragraph type="secondary">「模型查看器」标签页可实时查看引擎当前加载的各层模型内容。</Paragraph>
+        <Paragraph type="secondary">保存需管理员主体（右上切换为「后台管理员」）。</Paragraph>
       </Modal>
     </>
   )
diff --git a/web/src/api.ts b/web/src/api.ts
index 6499ad5..826e634 100644
--- a/web/src/api.ts
+++ b/web/src/api.ts
@@ -9,11 +9,15 @@ async function get<T = any>(path: string): Promise<T> {
 }
 
 async function post<T = any>(path: string, body: any, principal?: string): Promise<T> {
+  return send('POST', path, body, principal)
+}
+
+async function send<T = any>(method: string, path: string, body: any, principal?: string): Promise<T> {
   const headers: Record<string, string> = { 'Content-Type': 'application/json' }
   if (principal) headers['X-Principal'] = principal
-  const r = await fetch(BASE + path, { method: 'POST', headers, body: JSON.stringify(body) })
+  const r = await fetch(BASE + path, { method, headers, body: JSON.stringify(body) })
   if (!r.ok) {
-    let msg = `POST ${path} -> ${r.status}`
+    let msg = `${method} ${path} -> ${r.status}`
     try { const j = await r.json(); if (j?.message) msg = j.message } catch { /* ignore */ }
     throw new Error(msg)
   }
@@ -26,6 +30,8 @@ export const api = {
   aggregate: (aggregateId: string) => get(`/meta/aggregate/${aggregateId}`),
   models: () => get('/meta/models'),
   model: (code: string) => get(`/meta/model/${code}`),
+  saveModel: (code: string, content: string, principal?: string) =>
+    send('PUT', `/meta/model/${code}`, { content }, principal),
   reload: (principal?: string) => post('/meta/reload', {}, principal),
   options: (aggregateId: string) => get(`/data/${aggregateId}`),
   list: (aggregateId: string) => get(`/data/${aggregateId}/list`),
diff --git a/web/src/model/ModelEditor.tsx b/web/src/model/ModelEditor.tsx
new file mode 100644
index 0000000..94bbf4d
--- /dev/null
+++ b/web/src/model/ModelEditor.tsx
@@ -0,0 +1,559 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import {
+  Tree, Card, Descriptions, Tag, Table, Select, Button, Space, message, Alert,
+  Segmented, Empty, Typography, Input, Spin, Tooltip, InputNumber, Checkbox, Popconfirm, Popover,
+} from 'antd'
+import {
+  SaveOutlined, ReloadOutlined, ApartmentOutlined, CodeOutlined, EditOutlined, EyeOutlined,
+  PlusOutlined, DeleteOutlined,
+} from '@ant-design/icons'
+import { api } from '../api'
+import { loadOntology } from '../ontology/build'
+import type { Ontology, OntoObject, OntoBehavior, OntoRule, OntoEvent } from '../ontology/types'
+import { EditSession, type Path } from './editSession'
+
+const { Text, Paragraph } = Typography
+
+const ATTR_TYPES = ['string', 'int', 'decimal', 'boolean', 'date', 'datetime', 'enum']
+const EFFECTS = ['REJECT', 'ALERT', 'COMPENSATE']
+const EDIT_LAYERS = ['M1', 'MetaRule', 'ME'] // 结构化可编辑的层（对象/规则/事件）
+
+/**
+ * 模型编辑器：models/*.yaml 是唯一事实源。既可在「结构预览」里可视化浏览 / 结构化编辑，
+ * 也可在「源码编辑」里改 YAML 原文。两种编辑都保存即写盘并热重载。等价 onto-app 的「本体模型」页。
+ */
+export function ModelEditor({ principal, onReloaded }: { principal: string; onReloaded?: () => void }) {
+  const [mode, setMode] = useState<'structure' | 'source'>('structure')
+  return (
+    <div>
+      <Segmented
+        value={mode}
+        onChange={(v) => setMode(v as any)}
+        style={{ marginBottom: 12 }}
+        options={[
+          { label: '结构预览 / 编辑', value: 'structure', icon: <ApartmentOutlined /> },
+          { label: '源码编辑', value: 'source', icon: <CodeOutlined /> },
+        ]}
+      />
+      {mode === 'structure' ? <StructureBrowser principal={principal} onReloaded={onReloaded} /> : <SourceEditor principal={principal} onReloaded={onReloaded} />}
+    </div>
+  )
+}
+
+// ============================================================
+// 结构预览 + 结构化编辑：本体导航树 + 详情（可切换编辑）
+// ============================================================
+function StructureBrowser({ principal, onReloaded }: { principal: string; onReloaded?: () => void }) {
+  const [onto, setOnto] = useState<Ontology | null>(null)
+  const [err, setErr] = useState('')
+  const [sel, setSel] = useState<string>('')
+  const [editing, setEditing] = useState(false)
+  const [entering, setEntering] = useState(false)
+  const [saving, setSaving] = useState(false)
+  const sessionRef = useRef(new EditSession())
+  const [, setVer] = useState(0)
+  const bump = () => setVer((v) => v + 1)
+
+  const reloadOnto = () => loadOntology().then(setOnto).catch((e) => setErr(String(e?.message || e)))
+  useEffect(() => { reloadOnto() }, [])
+
+  const treeData = useMemo(() => (onto ? buildTree(onto) : []), [onto])
+  const dirty = [...sessionRef.current.dirty]
+
+  async function enterEdit() {
+    setEntering(true)
+    try {
+      await Promise.all(EDIT_LAYERS.map((c) => sessionRef.current.ensure(c)))
+      setEditing(true); bump()
+    } catch (e: any) { message.error('进入编辑失败：' + e.message) } finally { setEntering(false) }
+  }
+
+  async function save() {
+    setSaving(true)
+    try {
+      const saved = await sessionRef.current.saveAll(principal)
+      message.success('已保存并热重载：' + (saved.join(', ') || '（无改动）'))
+      await reloadOnto()
+      onReloaded?.()
+      bump()
+    } catch (e: any) { message.error('保存失败：' + e.message) } finally { setSaving(false) }
+  }
+
+  function exitEdit() {
+    if (dirty.length && !window.confirm('有未保存的结构改动，退出将丢弃。确定？')) return
+    sessionRef.current.reset()
+    setEditing(false); bump()
+  }
+
+  if (err) return <Alert type="error" showIcon message="加载本体失败" description={err} />
+  if (!onto) return <div style={{ padding: 40, textAlign: 'center' }}><Spin /></div>
+
+  return (
+    <div>
+      <Space style={{ marginBottom: 10 }} wrap>
+        <Segmented
+          value={editing ? 'edit' : 'view'}
+          onChange={(v) => (v === 'edit' ? enterEdit() : exitEdit())}
+          options={[
+            { label: '预览', value: 'view', icon: <EyeOutlined /> },
+            { label: '编辑', value: 'edit', icon: <EditOutlined /> },
+          ]}
+        />
+        {entering && <Spin size="small" />}
+        {editing && (
+          <>
+            <Button type="primary" icon={<SaveOutlined />} loading={saving} disabled={!dirty.length} onClick={save}>
+              保存并热重载
+            </Button>
+            {dirty.length > 0 && <span>改动层：{dirty.map((c) => <Tag key={c} color="orange">{c}</Tag>)}</span>}
+            <Text type="secondary" style={{ fontSize: 12 }}>结构化编辑对象(M1)/规则(MetaRule)/事件(ME)；只改被编辑的节点，其余原文（含注释）不动。保存需管理员（当前 {principal}）。</Text>
+          </>
+        )}
+      </Space>
+      <div style={{ display: 'flex', gap: 16, alignItems: 'flex-start' }}>
+        <Card size="small" style={{ width: 300, flex: 'none', maxHeight: 560, overflow: 'auto' }} styles={{ body: { padding: 8 } }}>
+          <Tree
+            treeData={treeData}
+            defaultExpandedKeys={['g-obj', 'g-beh', 'g-rule', 'g-evt', 'g-scene']}
+            selectedKeys={sel ? [sel] : []}
+            onSelect={(k) => setSel((k[0] as string) || '')}
+            showLine
+            blockNode
+          />
+        </Card>
+        <Card size="small" style={{ flex: 1, minHeight: 300 }}>
+          {editing
+            ? <EditDetail session={sessionRef.current} sel={sel} bump={bump} />
+            : <Detail onto={onto} sel={sel} />}
+        </Card>
+      </div>
+    </div>
+  )
+}
+
+const TYPE_TAG: Record<string, { color: string; text: string }> = {
+  REJECT: { color: 'red', text: 'REJECT' }, ALERT: { color: 'orange', text: 'ALERT' },
+  COMPENSATE: { color: 'purple', text: 'COMPENSATE' },
+}
+
+function buildTree(onto: Ontology): any[] {
+  const roots = onto.objects.filter((o) => o.is_aggregate_root)
+  const objChildren = roots.map((r) => ({
+    key: `obj:${r.id}`,
+    title: <span>{r.name} <Text type="secondary" style={{ fontSize: 11 }}>{r.alias}</Text></span>,
+    children: onto.objects.filter((o) => o.parent_id === r.id).map((e) => ({
+      key: `obj:${e.id}`,
+      title: <span>{e.name} <Text type="secondary" style={{ fontSize: 11 }}>子实体</Text></span>,
+    })),
+  }))
+  const behByOwner = new Map<string, OntoBehavior[]>()
+  onto.behaviors.forEach((b) => { const k = b.owner_object_id; behByOwner.set(k, [...(behByOwner.get(k) || []), b]) })
+  const behChildren = [...behByOwner.entries()].map(([owner, list]) => ({
+    key: `bg:${owner}`, selectable: false, title: <Text type="secondary">{owner}</Text>,
+    children: list.map((b) => ({ key: `beh:${b.id}`, title: b.name })),
+  }))
+  const evtByAgg = new Map<string, OntoEvent[]>()
+  onto.events.forEach((e) => { const k = e.aggregate || '其他'; evtByAgg.set(k, [...(evtByAgg.get(k) || []), e]) })
+  const evtChildren = [...evtByAgg.entries()].map(([agg, list]) => ({
+    key: `eg:${agg}`, selectable: false, title: <Text type="secondary">{agg}</Text>,
+    children: list.map((e) => ({ key: `evt:${e.id}`, title: e.name })),
+  }))
+  return [
+    { key: 'g-obj', selectable: false, title: <b>对象模型 ({onto.objects.length})</b>, children: objChildren },
+    { key: 'g-beh', selectable: false, title: <b>行为模型 ({onto.behaviors.length})</b>, children: behChildren },
+    { key: 'g-rule', selectable: false, title: <b>规则模型 ({onto.rules.length})</b>, children: onto.rules.map((r) => ({ key: `rule:${r.id}`, title: r.name })) },
+    { key: 'g-evt', selectable: false, title: <b>事件模型 ({onto.events.length})</b>, children: evtChildren },
+    { key: 'g-scene', selectable: false, title: <b>场景流程 ({onto.processModels.length})</b>, children: onto.processModels.map((p) => ({ key: `scene:${p.id}`, title: p.name })) },
+  ]
+}
+
+function splitSel(sel: string): [string, string] {
+  const i = sel.indexOf(':')
+  return [sel.slice(0, i), sel.slice(i + 1)]
+}
+
+// ============================================================
+// 只读详情
+// ============================================================
+function Detail({ onto, sel }: { onto: Ontology; sel: string }) {
+  if (!sel) return <Empty description="从左侧选择一个对象 / 行为 / 规则 / 事件 / 场景查看结构" />
+  const [kind, id] = splitSel(sel)
+  if (kind === 'obj') { const o = onto.objects.find((x) => x.id === id); return o ? <ObjectDetail o={o} /> : null }
+  if (kind === 'beh') { const b = onto.behaviors.find((x) => x.id === id); return b ? <BehaviorDetail b={b} onto={onto} /> : null }
+  if (kind === 'rule') { const r = onto.rules.find((x) => x.id === id); return r ? <RuleDetail r={r} /> : null }
+  if (kind === 'evt') { const e = onto.events.find((x) => x.id === id); return e ? <EventDetail e={e} /> : null }
+  if (kind === 'scene') {
+    const p = onto.processModels.find((x) => x.id === id)
+    if (!p) return null
+    return (
+      <div>
+        <Space style={{ marginBottom: 8 }}><b style={{ fontSize: 16 }}>{p.name}</b><Tag color="purple">{p.id}</Tag></Space>
+        <Paragraph type="secondary">流程节点（由 M4 flowSteps 合成，完整可视化见「场景流程图」视图）：</Paragraph>
+        <Table size="small" pagination={false} rowKey="id" dataSource={p.nodes}
+          columns={[
+            { title: '节点', dataIndex: 'name' },
+            { title: '类型', dataIndex: 'type', render: (t: string) => <Tag>{t}</Tag> },
+            { title: '关联命令', dataIndex: 'behaviorId', render: (v: string) => v || '—' },
+          ]} />
+      </div>
+    )
+  }
+  return null
+}
+
+function ObjectDetail({ o }: { o: OntoObject }) {
+  return (
+    <div>
+      <Space style={{ marginBottom: 10 }}>
+        <b style={{ fontSize: 16 }}>{o.name}</b>
+        <Tag color="blue">{o.alias}</Tag>
+        <Tag color={o.is_aggregate_root ? 'gold' : 'default'}>{o.is_aggregate_root ? '聚合根' : `子实体 · 属于 ${o.parent_id}`}</Tag>
+      </Space>
+      {o.description && <Paragraph type="secondary">{o.description}</Paragraph>}
+      <Text strong>属性（{o.attributes.length}）</Text>
+      <Table size="small" pagination={false} rowKey="name" style={{ marginTop: 6 }} dataSource={o.attributes}
+        columns={[
+          {
+            title: '字段', dataIndex: 'name', render: (v: string, a: any) => (
+              <Space size={4}>
+                {a.is_primary_key && <Tooltip title="主键"><span>🔑</span></Tooltip>}
+                {a.is_foreign_key && <Tooltip title="外键/引用"><span>🔗</span></Tooltip>}
+                <span className="om-mono">{v}</span>
+              </Space>
+            ),
+          },
+          { title: '类型', dataIndex: 'type' },
+          { title: '引用', dataIndex: 'ref', render: (r: any) => (r ? <Tag color="purple">→ {r.root}.{r.identifier}</Tag> : '—') },
+          {
+            title: '约束/标注', key: 'c', render: (_: any, a: any) => (
+              <Space size={4} wrap>
+                {a.transient && <Tag color="magenta">瞬态</Tag>}
+                {a.unique && <Tag>唯一</Tag>}
+                {a.constraints && Object.entries(a.constraints).filter(([k]) => k !== 'patternMessage').map(([k, v]) => <Tag key={k}>{k}={String(v)}</Tag>)}
+              </Space>
+            ),
+          },
+        ]} />
+      {o.relationships.length > 0 && (
+        <>
+          <Text strong style={{ display: 'block', marginTop: 12 }}>关系（{o.relationships.length}）</Text>
+          <Space direction="vertical" style={{ marginTop: 6, width: '100%' }}>
+            {o.relationships.map((r, i) => (
+              <div key={i}>
+                <Tag color={r.refType === 'composition' ? 'purple' : 'blue'}>{r.refType === 'composition' ? '组合' : '引用'}</Tag>
+                <Text>{r.fk_field ? `${r.fk_field} → ` : ''}{r.target_object_id}</Text>
+                <Text type="secondary" style={{ marginLeft: 8 }}>{r.kind}</Text>
+              </div>
+            ))}
+          </Space>
+        </>
+      )}
+    </div>
+  )
+}
+
+function BehaviorDetail({ b, onto }: { b: OntoBehavior; onto: Ontology }) {
+  const item = (label: string, node: any) => <Descriptions.Item label={label}>{node}</Descriptions.Item>
+  return (
+    <div>
+      <Space style={{ marginBottom: 10 }}><b style={{ fontSize: 16 }}>{b.name}</b><Tag color="green">COMMAND</Tag><Tag>{b.commandType}</Tag></Space>
+      <Descriptions size="small" column={1} bordered>
+        {item('归属对象', b.owner_object_id)}
+        {b.description && item('说明', b.description)}
+        {b.produced_events.length > 0 && item('产出事件', b.produced_events.map((e) => <Tag key={e} color="magenta">{e}</Tag>))}
+        {b.applied_rules.length > 0 && item('适用规则', b.applied_rules.map((r) => <Tag key={r} color="red">{onto.rules.find((x) => x.id === r)?.name || r}</Tag>))}
+        {b.preconditions.length > 0 && item('前置校验', <ul style={{ margin: 0, paddingLeft: 18 }}>{b.preconditions.map((p, i) => <li key={i} className="om-mono">{p}</li>)}</ul>)}
+        {b.effects.length > 0 && item('派生/副作用', <ul style={{ margin: 0, paddingLeft: 18 }}>{b.effects.map((e, i) => <li key={i} className="om-mono">{e}</li>)}</ul>)}
+      </Descriptions>
+    </div>
+  )
+}
+
+function RuleDetail({ r }: { r: OntoRule }) {
+  const t = TYPE_TAG[r.type] || { color: 'default', text: r.type }
+  return (
+    <div>
+      <Space style={{ marginBottom: 10 }}><b style={{ fontSize: 16 }}>{r.name}</b><Tag color={t.color}>{t.text}</Tag><Text code>{r.id}</Text></Space>
+      <Descriptions size="small" column={1} bordered>
+        <Descriptions.Item label="匹配条件"><span className="om-mono">{r.expression}</span></Descriptions.Item>
+        <Descriptions.Item label="提示信息">{r.description}</Descriptions.Item>
+        <Descriptions.Item label="绑定场景">{r.bindScene || '—'}</Descriptions.Item>
+      </Descriptions>
+    </div>
+  )
+}
+
+function EventDetail({ e }: { e: OntoEvent }) {
+  return (
+    <div>
+      <Space style={{ marginBottom: 10 }}><b style={{ fontSize: 16 }}>{e.name}</b><Tag color="magenta">事件</Tag></Space>
+      <Descriptions size="small" column={1} bordered>
+        <Descriptions.Item label="归属聚合">{e.aggregate}</Descriptions.Item>
+        <Descriptions.Item label="topic"><span className="om-mono">{e.topic}</span></Descriptions.Item>
+        <Descriptions.Item label="载荷">{(e.payload || []).map((p) => <Tag key={p}>{p}</Tag>)}</Descriptions.Item>
+        <Descriptions.Item label="消费方">{(e.consumers || []).map((c) => <Tag key={c} color="blue">{c}</Tag>)}</Descriptions.Item>
+      </Descriptions>
+    </div>
+  )
+}
+
+// ============================================================
+// 结构化编辑详情：对象(M1) / 规则(MetaRule) / 事件(ME)
+// ============================================================
+function EditDetail({ session, sel, bump }: { session: EditSession; sel: string; bump: () => void }) {
+  if (!sel) return <Empty description="从左侧选择一个对象 / 规则 / 事件进行结构化编辑" />
+  const [kind, id] = splitSel(sel)
+  if (kind === 'obj') return <ObjectEditForm session={session} id={id} bump={bump} />
+  if (kind === 'rule') return <RuleEditForm session={session} id={id} bump={bump} />
+  if (kind === 'evt') return <EventEditForm session={session} id={id} bump={bump} />
+  return <Alert type="info" showIcon message="该节点暂不支持结构化编辑"
+    description="行为(M2 bizSteps) / 场景(M4 flowSteps) 结构复杂，请切到「源码编辑」修改；对象、规则、事件可在此结构化编辑。" />
+}
+
+function locateObject(m1: any, id: string): { aggIdx: number; kind: 'root' | 'entity'; entIdx?: number; node: any; agg: any } | null {
+  const aggs = m1?.aggregates || []
+  for (let ai = 0; ai < aggs.length; ai++) {
+    const root = aggs[ai].aggregateRoot || {}
+    if (root.name === id) return { aggIdx: ai, kind: 'root', node: root, agg: aggs[ai] }
+    const ents = aggs[ai].entities || []
+    for (let ei = 0; ei < ents.length; ei++) if (ents[ei].name === id) return { aggIdx: ai, kind: 'entity', entIdx: ei, node: ents[ei], agg: aggs[ai] }
+  }
+  return null
+}
+
+/** 约束编辑：展示全部现有约束（与预览一致）+ 弹层编辑全集（唯一/min/max/exclusiveMin/exclusiveMax/pattern/patternMessage）。 */
+function ConstraintCell({ session, path, a, bump }: { session: EditSession; path: Path; a: any; bump: () => void }) {
+  const cons = a.constraints || {}
+  const setC = (key: string, val: any) => { session.setConstraint('M1', path, key, val); bump() }
+  // v ?? undefined 保留 0（min:0 / exclusiveMin:0 均为合法值），清空(null)才删除该约束键
+  const num = (key: string) => (
+    <span style={{ whiteSpace: 'nowrap' }}>
+      <Text type="secondary" style={{ fontSize: 12, marginRight: 4 }}>{key}</Text>
+      <InputNumber size="small" style={{ width: 84 }} value={cons[key] ?? null} onChange={(v) => setC(key, v ?? undefined)} />
+    </span>
+  )
+  const content = (
+    <div style={{ width: 320, display: 'flex', flexDirection: 'column', gap: 10 }}>
+      <Checkbox checked={!!cons.unique} onChange={(e) => setC('unique', e.target.checked)}>唯一 unique</Checkbox>
+      <Space wrap>{num('min')}{num('max')}</Space>
+      <Space wrap>{num('exclusiveMin')}{num('exclusiveMax')}</Space>
+      <div>
+        <Text type="secondary" style={{ fontSize: 12 }}>正则 pattern</Text>
+        <Input size="small" className="om-mono" value={cons.pattern || ''} onChange={(e) => setC('pattern', e.target.value)} placeholder="如 ^\d{11}$" />
+      </div>
+      <div>
+        <Text type="secondary" style={{ fontSize: 12 }}>校验提示 patternMessage</Text>
+        <Input size="small" value={cons.patternMessage || ''} onChange={(e) => setC('patternMessage', e.target.value)} placeholder="不满足正则时的提示语" />
+      </div>
+    </div>
+  )
+  const keys = Object.keys(cons)
+  return (
+    <Space size={4} wrap>
+      {keys.length === 0 && <Text type="secondary">—</Text>}
+      {keys.filter((k) => k !== 'patternMessage').map((k) => <Tag key={k} style={{ margin: 0 }} className="om-mono">{k}={String(cons[k])}</Tag>)}
+      {a.refAggregate && <Tag color="purple" style={{ margin: 0 }}>→ {a.refRoot}.{a.refIdentifier}</Tag>}
+      <Popover trigger="click" placement="leftTop" title="编辑约束" content={content}>
+        <Button size="small" type="link" style={{ padding: '0 4px' }} icon={<EditOutlined />} />
+      </Popover>
+    </Space>
+  )
+}
+
+function ObjectEditForm({ session, id, bump }: { session: EditSession; id: string; bump: () => void }) {
+  const m1 = session.toJS('M1')
+  const loc = locateObject(m1, id)
+  if (!loc) return <Alert type="warning" message={`在 M1 中找不到对象 ${id}（可能刚被改名，请重新选择）`} />
+  const basePath: Path = loc.kind === 'root' ? ['aggregates', loc.aggIdx, 'aggregateRoot'] : ['aggregates', loc.aggIdx, 'entities', loc.entIdx!]
+  const attrsPath: Path = [...basePath, 'attributes']
+  const idField = loc.kind === 'root' ? 'identifier' : 'localIdentifier'
+  const attrs: any[] = loc.node.attributes || []
+  const set = (p: Path, v: any) => { session.setIn('M1', p, v); bump() }
+
+  return (
+    <div>
+      <Space style={{ marginBottom: 10 }} wrap>
+        <b style={{ fontSize: 16 }}>{loc.node.name}</b>
+        <Tag color={loc.kind === 'root' ? 'gold' : 'default'}>{loc.kind === 'root' ? '聚合根' : '子实体'}</Tag>
+        <Tag color="blue">{loc.agg.aggregateId}</Tag>
+        <Text type="secondary" style={{ fontSize: 12 }}>（对象改名请用源码编辑，避免跨层引用错乱）</Text>
+      </Space>
+
+      <Descriptions size="small" column={1} bordered style={{ marginBottom: 12 }}>
+        <Descriptions.Item label={<Space>🔑 主键字段名</Space>}>
+          <Input size="small" value={loc.node[idField] || ''} onChange={(e) => set([...basePath, idField], e.target.value)} style={{ maxWidth: 260 }} />
+        </Descriptions.Item>
+        {loc.kind === 'root' && (
+          <Descriptions.Item label="聚合描述">
+            <Input.TextArea size="small" autoSize value={loc.agg.description || ''} onChange={(e) => set(['aggregates', loc.aggIdx, 'description'], e.target.value)} />
+          </Descriptions.Item>
+        )}
+      </Descriptions>
+
+      <Space style={{ marginBottom: 6 }}>
+        <Text strong>属性（{attrs.length}）</Text>
+        <Button size="small" icon={<PlusOutlined />} onClick={() => { session.addIn('M1', attrsPath, { name: 'newField', type: 'string' }); bump() }}>添加属性</Button>
+      </Space>
+      <Table size="small" pagination={false} rowKey={(_, i) => String(i)} dataSource={attrs}
+        columns={[
+          {
+            title: '字段名', width: 200, render: (_: any, a: any, j: number) => (
+              <Space size={4}>
+                {loc.node[idField] === a.name && <Tooltip title="主键"><span>🔑</span></Tooltip>}
+                {a.refAggregate && <Tooltip title={`引用 ${a.refRoot}.${a.refIdentifier}`}><span>🔗</span></Tooltip>}
+                <Input size="small" className="om-mono" value={a.name || ''} onChange={(e) => set([...attrsPath, j, 'name'], e.target.value)} />
+              </Space>
+            ),
+          },
+          {
+            title: '类型', width: 130, render: (_: any, a: any, j: number) => (
+              <Select size="small" style={{ width: 118 }} value={a.type || 'string'} options={ATTR_TYPES.map((t) => ({ value: t, label: t }))}
+                onChange={(v) => set([...attrsPath, j, 'type'], v)} />
+            ),
+          },
+          {
+            title: '约束 / 引用', render: (_: any, a: any, j: number) => (
+              <ConstraintCell session={session} path={[...attrsPath, j]} a={a} bump={bump} />
+            ),
+          },
+          {
+            title: '', width: 40, render: (_: any, __: any, j: number) => (
+              <Popconfirm title="删除该属性？" onConfirm={() => { session.deleteIn('M1', [...attrsPath, j]); bump() }}>
+                <Button size="small" type="text" danger icon={<DeleteOutlined />} />
+              </Popconfirm>
+            ),
+          },
+        ]} />
+      <Text type="secondary" style={{ fontSize: 12, display: 'block', marginTop: 8 }}>
+        提示：改字段类型 / 增删字段后点上方「保存并热重载」，「数据结构图」「场景运行台」表单会同步变化。
+      </Text>
+    </div>
+  )
+}
+
+function locateRule(mr: any, id: string): { gIdx: number; rIdx: number; node: any } | null {
+  const groups = mr?.metaRuleModel?.ruleGroups || []
+  for (let g = 0; g < groups.length; g++) {
+    const rules = groups[g].rules || []
+    for (let r = 0; r < rules.length; r++) if (rules[r].ruleId === id) return { gIdx: g, rIdx: r, node: rules[r] }
+  }
+  return null
+}
+
+function RuleEditForm({ session, id, bump }: { session: EditSession; id: string; bump: () => void }) {
+  const mr = session.toJS('MetaRule')
+  const loc = locateRule(mr, id)
+  if (!loc) return <Alert type="warning" message={`在 MetaRule 中找不到规则 ${id}`} />
+  const base: Path = ['metaRuleModel', 'ruleGroups', loc.gIdx, 'rules', loc.rIdx]
+  const set = (field: string, v: any) => { session.setIn('MetaRule', [...base, field], v); bump() }
+  return (
+    <div>
+      <Space style={{ marginBottom: 10 }}><b style={{ fontSize: 16 }}>{loc.node.ruleName}</b><Text code>{loc.node.ruleId}</Text></Space>
+      <Descriptions size="small" column={1} bordered>
+        <Descriptions.Item label="规则名"><Input size="small" value={loc.node.ruleName || ''} onChange={(e) => set('ruleName', e.target.value)} /></Descriptions.Item>
+        <Descriptions.Item label="效果">
+          <Select size="small" style={{ width: 180 }} value={loc.node.effect} options={EFFECTS.map((x) => ({ value: x, label: x }))} onChange={(v) => set('effect', v)} />
+        </Descriptions.Item>
+        <Descriptions.Item label="匹配条件 (Aviator)"><Input.TextArea size="small" autoSize className="om-mono" value={loc.node.matchCondition || ''} onChange={(e) => set('matchCondition', e.target.value)} /></Descriptions.Item>
+        <Descriptions.Item label="提示信息"><Input.TextArea size="small" autoSize value={loc.node.message || ''} onChange={(e) => set('message', e.target.value)} /></Descriptions.Item>
+      </Descriptions>
+      <Text type="secondary" style={{ fontSize: 12, display: 'block', marginTop: 8 }}>提示：改匹配条件/阈值后保存，前后端规则即时生效（如把大额订单阈值改小，普通用户下单更易被 REJECT）。</Text>
+    </div>
+  )
+}
+
+function locateEvent(me: any, id: string): { dIdx: number; name: string; node: any } | null {
+  const defs = me?.eventModel?.aggregateEventDefinitions || []
+  for (let d = 0; d < defs.length; d++) {
+    const events = defs[d].events || {}
+    if (id in events) return { dIdx: d, name: id, node: events[id] }
+  }
+  return null
+}
+
+function EventEditForm({ session, id, bump }: { session: EditSession; id: string; bump: () => void }) {
+  const me = session.toJS('ME')
+  const loc = locateEvent(me, id)
+  if (!loc) return <Alert type="warning" message={`在 ME 中找不到事件 ${id}`} />
+  const base: Path = ['eventModel', 'aggregateEventDefinitions', loc.dIdx, 'events', loc.name]
+  const set = (field: string, v: any) => { session.setIn('ME', [...base, field], v); bump() }
+  return (
+    <div>
+      <Space style={{ marginBottom: 10 }}><b style={{ fontSize: 16 }}>{loc.name}</b><Tag color="magenta">事件</Tag></Space>
+      <Descriptions size="small" column={1} bordered>
+        <Descriptions.Item label="topic"><Input size="small" className="om-mono" value={loc.node.topic || ''} onChange={(e) => set('topic', e.target.value)} /></Descriptions.Item>
+        <Descriptions.Item label="载荷字段">
+          <Select size="small" mode="tags" style={{ width: '100%' }} value={loc.node.payload || []} onChange={(v) => set('payload', v)} placeholder="回车添加字段" />
+        </Descriptions.Item>
+        <Descriptions.Item label="消费方">
+          <Select size="small" mode="tags" style={{ width: '100%' }} value={loc.node.consumers || []} onChange={(v) => set('consumers', v)} placeholder="回车添加消费方服务" />
+        </Descriptions.Item>
+      </Descriptions>
+    </div>
+  )
+}
+
+// ============================================================
+// 源码编辑：逐层编辑 YAML 原文，保存即热重载
+// ============================================================
+function SourceEditor({ principal, onReloaded }: { principal: string; onReloaded?: () => void }) {
+  const [layers, setLayers] = useState<{ code: string; fileName: string }[]>([])
+  const [code, setCode] = useState('M1')
+  const [text, setText] = useState('')
+  const [orig, setOrig] = useState('')
+  const [dir, setDir] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [saving, setSaving] = useState(false)
+
+  useEffect(() => { api.models().then((d) => { setLayers(d.layers); setDir(d.modelsDir) }) }, [])
+
+  const loadLayer = (c: string) => {
+    setLoading(true)
+    api.model(c).then((d) => { setText(d.raw ?? ''); setOrig(d.raw ?? '') }).finally(() => setLoading(false))
+  }
+  useEffect(() => { if (code) loadLayer(code) }, [code])
+
+  const dirty = text !== orig
+
+  const switchLayer = (c: string) => {
+    if (dirty && !window.confirm('当前层有未保存的修改，切换将丢弃。确定切换？')) return
+    setCode(c)
+  }
+
+  async function save() {
+    setSaving(true)
+    try {
+      const r = await api.saveModel(code, text, principal)
+      message.success(r.message || '已保存')
+      setOrig(text)
+      onReloaded?.()
+    } catch (e: any) {
+      message.error('保存失败：' + e.message)
+    } finally { setSaving(false) }
+  }
+
+  return (
+    <div>
+      <Space style={{ marginBottom: 8 }} wrap>
+        <Select value={code} style={{ width: 300 }} onChange={switchLayer}
+          options={layers.map((l) => ({ value: l.code, label: `${l.code} · ${l.fileName}` }))} />
+        <Button type="primary" icon={<SaveOutlined />} loading={saving} disabled={!dirty} onClick={save}>
+          保存并热重载
+        </Button>
+        <Button icon={<ReloadOutlined />} disabled={!dirty} onClick={() => setText(orig)}>撤销修改</Button>
+        {dirty && <Tag color="orange">未保存</Tag>}
+      </Space>
+      <Alert style={{ marginBottom: 8 }} type="info" showIcon
+        message={<span>直接编辑 <Text code>{dir}/{layers.find((l) => l.code === code)?.fileName}</Text> 的 YAML 原文；保存即写盘并热重载（含 M1/M3 变更自动补表）。<b>仅管理员主体可保存</b>（当前：{principal}）。</span>} />
+      <Spin spinning={loading}>
+        <Input.TextArea
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          spellCheck={false}
+          style={{ fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace', fontSize: 12.5, lineHeight: 1.5, minHeight: 480, whiteSpace: 'pre', overflowX: 'auto' }}
+          autoSize={{ minRows: 22, maxRows: 40 }}
+        />
+      </Spin>
+    </div>
+  )
+}
diff --git a/web/src/model/editSession.ts b/web/src/model/editSession.ts
new file mode 100644
index 0000000..cf4982c
--- /dev/null
+++ b/web/src/model/editSession.ts
@@ -0,0 +1,75 @@
+// 结构化编辑会话：每个模型层持有一份 yaml Document（保留注释），编辑走「按路径改节点」，
+// 只动被编辑的节点、其余原文（含注释/顺序）不变。保存时把脏层逐个 PUT 回后端。
+import { parseDocument, type Document } from 'yaml'
+import { api } from '../api'
+
+export type Path = (string | number)[]
+
+export class EditSession {
+  private docs = new Map<string, Document>()
+  dirty = new Set<string>()
+
+  /** 懒加载某层的 Document（用后端返回的源文件原文，保留注释）。 */
+  async ensure(code: string): Promise<Document> {
+    if (!this.docs.has(code)) {
+      const d = await api.model(code)
+      this.docs.set(code, parseDocument(d.raw ?? ''))
+    }
+    return this.docs.get(code)!
+  }
+
+  has(code: string) { return this.docs.has(code) }
+  toJS(code: string): any { return this.docs.get(code)?.toJS() }
+
+  setIn(code: string, path: Path, value: any) {
+    const doc = this.docs.get(code); if (!doc) return
+    doc.setIn(path, value)
+    this.dirty.add(code)
+  }
+
+  deleteIn(code: string, path: Path) {
+    const doc = this.docs.get(code); if (!doc) return
+    doc.deleteIn(path)
+    this.dirty.add(code)
+  }
+
+  /** 在某数组末尾追加一个节点。 */
+  addIn(code: string, arrayPath: Path, value: any) {
+    const doc = this.docs.get(code); if (!doc) return
+    doc.addIn(arrayPath, doc.createNode(value))
+    this.dirty.add(code)
+  }
+
+  /** 设置一个约束键；value 为空/假时删除该键，并在约束对象空了时删除整个 constraints。 */
+  setConstraint(code: string, attrPath: Path, key: string, value: any) {
+    const doc = this.docs.get(code); if (!doc) return
+    const consPath = [...attrPath, 'constraints']
+    if (value === undefined || value === null || value === '' || value === false) {
+      doc.deleteIn([...consPath, key])
+      const cons = doc.getIn(consPath) as any
+      if (cons && typeof cons.toJSON === 'function') {
+        const j = cons.toJSON()
+        if (!j || Object.keys(j).length === 0) doc.deleteIn(consPath)
+      }
+    } else {
+      if (doc.getIn(consPath) === undefined) doc.setIn(consPath, doc.createNode({}))
+      doc.setIn([...consPath, key], value)
+    }
+    this.dirty.add(code)
+  }
+
+  // lineWidth:0 关闭自动折行，避免把未编辑的长字符串（如 description）重新折行造成无谓 diff。
+  render(code: string): string { return this.docs.get(code)?.toString({ lineWidth: 0 }) ?? '' }
+
+  async saveAll(principal: string): Promise<string[]> {
+    const saved: string[] = []
+    for (const code of [...this.dirty]) {
+      await api.saveModel(code, this.render(code), principal)
+      saved.push(code)
+    }
+    this.dirty.clear()
+    return saved
+  }
+
+  reset() { this.docs.clear(); this.dirty.clear() }
+}
diff --git a/web/src/ontology/bpmn.ts b/web/src/ontology/bpmn.ts
new file mode 100644
index 0000000..e41ae03
--- /dev/null
+++ b/web/src/ontology/bpmn.ts
@@ -0,0 +1,91 @@
+// ProcessModel → ELK-BPMN JSON（bpmn-elk-layout 的输入）+ 点击详情表。
+// 节点 id 重编为合法 NCName（Node_N），序列流端点按映射改写，与详情表 id 完全一致。
+
+import type { Ontology, ProcessModel, ProcessNode } from './types'
+
+const EVENT_TYPES = new Set(['startEvent', 'endEvent', 'intermediateCatchEvent'])
+const GATEWAY_TYPES = new Set(['exclusiveGateway', 'parallelGateway'])
+
+function elkNode(n: ProcessNode, nid: string) {
+  const bpmn: any = {}
+  if (EVENT_TYPES.has(n.type)) { bpmn.type = n.type; bpmn.eventDefinitionType = 'none' }
+  else if (GATEWAY_TYPES.has(n.type)) bpmn.type = n.type
+  else bpmn.type = n.type === 'userTask' ? 'userTask' : 'task'
+  if (n.name) bpmn.name = n.name
+  return { id: nid, bpmn }
+}
+
+// 仅加大层间距，给分支条件标签留位置；其余布局用库默认。
+const ELK_OPTS = { 'elk.layered.spacing.nodeNodeBetweenLayers': 90 }
+
+/** ProcessModel → ELK-BPMN JSON。 */
+export function toElkBpmn(pm: ProcessModel): any {
+  const idmap = new Map<string, string>()
+  pm.nodes.forEach((n, i) => idmap.set(n.id, `Node_${i + 1}`))
+
+  const edges = pm.flows.flatMap((f, i) => {
+    const s = idmap.get(f.source), t = idmap.get(f.target)
+    if (!s || !t) return []
+    const b: any = { type: 'sequenceFlow' }
+    const label = f.name || f.condition
+    if (label) b.name = label
+    if (f.condition) b.conditionExpression = { body: f.condition }
+    return [{ id: `Flow_${i + 1}`, sources: [s], targets: [t], bpmn: b }]
+  })
+
+  return {
+    id: 'definitions',
+    children: [{
+      id: 'Process_1',
+      bpmn: { type: 'process' },
+      layoutOptions: { ...ELK_OPTS },
+      children: pm.nodes.map((n) => elkNode(n, idmap.get(n.id)!)),
+      edges,
+    }],
+  }
+}
+
+const KIND_TEXT: Record<string, string> = {
+  startEvent: '开始事件', endEvent: '结束事件', task: '任务', userTask: '人工任务',
+  exclusiveGateway: '排他网关（分支判断）', parallelGateway: '并行网关', intermediateCatchEvent: '中间事件',
+}
+
+/** bpmn 元素 id → 详情（点击查看：任务关联行为、网关分支、连线条件）。 */
+export function detailMap(pm: ProcessModel, onto: Ontology): Record<string, any> {
+  const idmap = new Map<string, string>()
+  pm.nodes.forEach((n, i) => idmap.set(n.id, `Node_${i + 1}`))
+  const nameOf = (id: string) => pm.nodes.find((n) => n.id === id)?.name || id
+  const details: Record<string, any> = {}
+
+  for (const n of pm.nodes) {
+    const d: any = { kind: n.type, kindLabel: KIND_TEXT[n.type] || n.type, name: n.name || '', lane: n.lane || '' }
+    if (n.behaviorId) {
+      const b = onto.behaviors.find((x) => x.id === n.behaviorId)
+      if (b) {
+        const owner = onto.objects.find((o) => o.id === b.owner_object_id)
+        d.behavior = {
+          id: b.id, name: b.name, type: b.type, commandType: b.commandType,
+          owner: owner ? owner.name : b.owner_object_id, description: b.description || '',
+          preconditions: b.preconditions, effects: b.effects,
+          produced_events: b.produced_events,
+          applied_rules: b.applied_rules.map((rid) => onto.rules.find((r) => r.id === rid)?.name || rid),
+        }
+      }
+    }
+    if (GATEWAY_TYPES.has(n.type)) {
+      d.branches = pm.flows.filter((f) => f.source === n.id).map((f) => ({
+        to: nameOf(f.target), label: f.name || '', condition: f.condition || '',
+      }))
+    }
+    details[idmap.get(n.id)!] = d
+  }
+
+  pm.flows.forEach((f, i) => {
+    if (!idmap.get(f.source) || !idmap.get(f.target)) return
+    details[`Flow_${i + 1}`] = {
+      kind: 'sequenceFlow', kindLabel: '连线 / 分支', name: f.name || '', condition: f.condition || '',
+      from: nameOf(f.source), to: nameOf(f.target),
+    }
+  })
+  return details
+}
diff --git a/web/src/ontology/build.ts b/web/src/ontology/build.ts
new file mode 100644
index 0000000..292d476
--- /dev/null
+++ b/web/src/ontology/build.ts
@@ -0,0 +1,302 @@
+// 本体 IR 合成器：从后端 /api/meta/model/{code}（解析后的 YAML→JSON）在浏览器端合成统一 IR。
+// 等价于 onto-app 里 Python codegen 的 IR 构建，改为 TypeScript 实现（“换一种方式重写”）。
+// 仅读取现有只读接口，不改后端；三个视图（ER / 网络图 / 流程图）共用产物。
+
+import { api } from '../api'
+import type {
+  Ontology, OntoObject, OntoAttribute, OntoRelationship,
+  OntoBehavior, OntoRule, OntoEvent, ProcessModel, ProcessNode, ProcessFlow,
+} from './types'
+
+const A = <T = any>(x: any): T[] => (Array.isArray(x) ? x : [])
+const S = (x: any): string => (x == null ? '' : String(x))
+
+/** 拉取相关本体层并合成 IR。 */
+export async function loadOntology(): Promise<Ontology> {
+  const [m1, m2, me, mr, m4] = await Promise.all([
+    api.model('M1'), api.model('M2'), api.model('ME'), api.model('MetaRule'), api.model('M4'),
+  ])
+  return buildOntology(m1.content, m2.content, me.content, mr.content, m4.content)
+}
+
+export function buildOntology(m1: any, m2: any, me: any, mr: any, m4: any): Ontology {
+  const objects = buildObjects(m1)
+  const events = buildEvents(me)
+  const rules = buildRules(mr)
+  const behaviors = buildBehaviors(m2)
+  linkRulesToBehaviors(behaviors, rules, m4)
+  const processModels = buildProcessModels(m4)
+  return {
+    domain: '销售订单交易（M 系列本体）',
+    version: '2.0',
+    objects, behaviors, rules, events,
+    navigations: [], // 本项目无显式导航树，网络图退化为按聚合平铺
+    processModels,
+  }
+}
+
+// ============================================================
+// M1 → objects（聚合根 + 组合子实体，含属性/主键/外键/引用/组合关系）
+// ============================================================
+function buildObjects(m1: any): OntoObject[] {
+  const out: OntoObject[] = []
+  for (const agg of A(m1?.aggregates)) {
+    const aggregateId = S(agg.aggregateId)
+    const root = agg.aggregateRoot || {}
+    const rootId = S(root.name) || aggregateId
+    const rootAttrs = mapAttributes(root.identifier, A(root.attributes))
+    const rootRels: OntoRelationship[] = []
+
+    // 跨聚合引用（refAggregate 字段）→ 引用关系
+    for (const a of rootAttrs) {
+      if (a.ref) rootRels.push({
+        name: a.ref.root, label: a.name, target_object_id: a.ref.root,
+        kind: 'MANY_TO_ONE', refType: 'reference', fk_field: a.name,
+      })
+    }
+    // 组合关系（relations[relationType=composition]）→ 子实体
+    const childNames = A(root.relations).filter((r: any) => S(r.relationType) === 'composition').map((r: any) => S(r.ref))
+    for (const cn of childNames) rootRels.push({
+      name: cn, label: '组合', target_object_id: cn, kind: 'ONE_TO_MANY', refType: 'composition',
+    })
+
+    out.push({
+      id: rootId, name: rootId, alias: aggregateId, description: S(root.description) || S(agg.description),
+      is_aggregate_root: true, parent_id: null, aggregateId, attributes: rootAttrs, relationships: rootRels,
+    })
+
+    // 子实体
+    for (const ent of A(agg.entities)) {
+      const entId = S(ent.name)
+      const entAttrs = mapAttributes(ent.localIdentifier, A(ent.attributes))
+      const entRels: OntoRelationship[] = []
+      for (const a of entAttrs) {
+        if (a.ref) entRels.push({
+          name: a.ref.root, label: a.name, target_object_id: a.ref.root,
+          kind: 'MANY_TO_ONE', refType: 'reference', fk_field: a.name,
+        })
+      }
+      out.push({
+        id: entId, name: entId, alias: `${aggregateId}.${entId}`, description: S(ent.description),
+        is_aggregate_root: false, parent_id: rootId, aggregateId, attributes: entAttrs, relationships: entRels,
+      })
+    }
+  }
+  return out
+}
+
+/** identifier（主键，M1 中单列于外层）前置为合成主键属性 + 其余字段。 */
+function mapAttributes(identifier: any, attrs: any[]): OntoAttribute[] {
+  const out: OntoAttribute[] = []
+  const idName = S(identifier)
+  if (idName) out.push({ name: idName, label: idName, type: 'string', is_primary_key: true, required: true })
+  for (const a of attrs) {
+    const ref = a.refAggregate ? { aggregate: S(a.refAggregate), root: S(a.refRoot), identifier: S(a.refIdentifier) } : undefined
+    const cons = a.constraints || undefined
+    const desc = S(a.description)
+    out.push({
+      name: S(a.name), label: S(a.name), type: S(a.type) || 'string',
+      is_foreign_key: !!ref, ref, constraints: cons,
+      required: cons?.required || undefined, unique: cons?.unique || undefined,
+      transient: /瞬态|不落库/.test(desc) || undefined,
+      description: desc || undefined,
+    })
+  }
+  return out
+}
+
+// ============================================================
+// M2 → behaviors（命令）
+// ============================================================
+function buildBehaviors(m2: any): OntoBehavior[] {
+  const out: OntoBehavior[] = []
+  for (const beh of A(m2?.behaviors)) {
+    const owner = S(beh.aggregateRoot)
+    for (const cmd of A(beh.commands)) {
+      out.push({
+        id: S(cmd.cmdId), name: S(cmd.cmdId), owner_object_id: owner,
+        type: 'COMMAND', commandType: S(cmd.commandType) || 'create',
+        description: S(cmd.desc),
+        applied_rules: [],
+        produced_events: A(cmd.emitEvents).map(S),
+        preconditions: A(cmd.validations).map(S),
+        effects: A(cmd.derivations).map((d: any) => `${S(d.targetField)} = ${S(d.expression)}`)
+          .concat(cmd.effect ? [`${S(cmd.effect.op)} ${S(cmd.effect.targetField)}`] : []),
+      })
+    }
+  }
+  return out
+}
+
+// ============================================================
+// MetaRule → rules；并按 bindScene→绑定命令，回填 behavior.applied_rules
+// ============================================================
+function buildRules(mr: any): OntoRule[] {
+  const out: OntoRule[] = []
+  for (const g of A(mr?.metaRuleModel?.ruleGroups)) {
+    for (const r of A(g.rules)) {
+      out.push({
+        id: S(r.ruleId), name: S(r.ruleName), type: S(r.effect),
+        expression: S(r.matchCondition), enforced: true, bindScene: S(g.bindScene),
+        description: S(r.message),
+      })
+    }
+  }
+  return out
+}
+
+function linkRulesToBehaviors(behaviors: OntoBehavior[], rules: OntoRule[], m4: any) {
+  const byId = new Map(behaviors.map((b) => [b.id, b]))
+  const scenes = A(m4?.sceneModel?.sceneDefinitions)
+  for (const rule of rules) {
+    if (!rule.bindScene) continue
+    const scene = scenes.find((s: any) => S(s.sceneId) === rule.bindScene)
+    if (!scene) continue
+    for (const cmdId of collectBindCommands(A(scene.flowSteps))) {
+      const b = byId.get(cmdId)
+      if (b && !b.applied_rules.includes(rule.id)) b.applied_rules.push(rule.id)
+    }
+  }
+}
+
+/** 递归收集 flowSteps 里所有 bindCommand 的命令 id（含 then/else/body/branches/cases/default 嵌套）。 */
+function collectBindCommands(steps: any[]): string[] {
+  const acc: string[] = []
+  const walk = (arr: any[]) => {
+    for (const st of A(arr)) {
+      if (S(st.stepType) === 'bindCommand' && st.bindCommand) acc.push(S(st.bindCommand))
+      walk(st.then); walk(st.else); walk(st.body); walk(st.default)
+      for (const br of A(st.branches)) walk(br.steps)
+      for (const c of A(st.cases)) walk(c.steps)
+    }
+  }
+  walk(steps)
+  return acc
+}
+
+// ============================================================
+// ME → events
+// ============================================================
+function buildEvents(me: any): OntoEvent[] {
+  const out: OntoEvent[] = []
+  for (const def of A(me?.eventModel?.aggregateEventDefinitions)) {
+    const aggregate = S(def.aggregateId)
+    const events = def.events || {}
+    for (const name of Object.keys(events)) {
+      const e = events[name] || {}
+      out.push({
+        id: name, name, aggregate,
+        topic: S(e.topic), payload: A(e.payload).map(S), consumers: A(e.consumers).map(S),
+      })
+    }
+  }
+  return out
+}
+
+// ============================================================
+// M4 flowSteps → ProcessModel[]（BPMN 语义骨架，供 bpmn-elk-layout 布局）
+// ============================================================
+function buildProcessModels(m4: any): ProcessModel[] {
+  const scenes = A(m4?.sceneModel?.sceneDefinitions)
+  return scenes.map((sc: any) => synthProcess(sc)).filter((p: ProcessModel) => p.nodes.length > 1)
+}
+
+/** 单场景 flowSteps → 节点 + 序列流（递归处理控制流）。 */
+function synthProcess(scene: any): ProcessModel {
+  const nodes: ProcessNode[] = []
+  const flows: ProcessFlow[] = []
+  let c = 0
+  const nid = (p: string) => `${p}_${++c}`
+  const push = (n: ProcessNode) => { nodes.push(n); return n.id }
+  const connect = (froms: string[], to: string, opts?: Partial<ProcessFlow>) =>
+    froms.forEach((f) => flows.push({ id: nid('Flow'), source: f, target: to, ...opts }))
+
+  const start = push({ id: nid('Start'), type: 'startEvent', name: '开始' })
+
+  // build：把一段 steps 接到 incoming 之后，firstEdge 修饰 incoming→首节点的连线；返回“尾部”节点集合
+  const build = (steps: any[], incoming: string[], firstEdge?: Partial<ProcessFlow>): string[] => {
+    let tails = incoming
+    let edge = firstEdge
+    for (const st of A(steps)) {
+      const r = node(st, tails, edge)
+      tails = r
+      edge = undefined // 仅第一段带修饰
+    }
+    return tails
+  }
+
+  const node = (st: any, incoming: string[], firstEdge?: Partial<ProcessFlow>): string[] => {
+    const t = S(st.stepType)
+    const simple = (type: ProcessNode['type'], name: string, extra?: Partial<ProcessNode>): string[] => {
+      const id = push({ id: nid('Node'), type, name, ...extra }); connect(incoming, id, firstEdge); return [id]
+    }
+    switch (t) {
+      case 'start': return incoming
+      case 'return': case 'end': case 'errorEnd': {
+        const id = push({ id: nid('End'), type: 'endEvent', name: t === 'errorEnd' ? '异常结束' : '结束' })
+        connect(incoming, id, firstEdge); return []
+      }
+      case 'bindCommand':
+        return simple('task', S(st.bindCommand), { behaviorId: S(st.bindCommand), lane: S(st.bindAggregate) })
+      case 'readOnlyCheck': return simple('task', `只读校验 ${S(st.bindAggregate)}`)
+      case 'validate': return simple('task', '校验')
+      case 'derive': return simple('task', '派生')
+      case 'assign': {
+        const label = A(st.assignments).length
+          ? `赋值 ${A(st.assignments).map((x: any) => S(x.targetField)).join(', ')}`
+          : `赋值 ${S(st.targetField)}`
+        return simple('task', label)
+      }
+      case 'script': return simple('task', `脚本 → ${S(st.assignTo) || S(st.expression)}`)
+      case 'transform': return simple('task', '转换')
+      case 'callService': return simple('task', `调用服务 ${S(st.method)} ${S(st.endpoint)}`)
+      case 'userTask': return simple('userTask', `人工任务 ${S(st.role) ? '· ' + S(st.role) : ''}`)
+      case 'timer': return simple('intermediateCatchEvent', `定时 ${S(st.delayMs)}ms`)
+      case 'waitEvent': return simple('intermediateCatchEvent', `等待事件 ${S(st.waitEvent)}`)
+      case 'emitEvent': return simple('intermediateCatchEvent', `发事件 ${S(st.event)}`)
+      case 'condition': {
+        const g = push({ id: nid('Gw'), type: 'exclusiveGateway', name: '判断' })
+        connect(incoming, g, firstEdge)
+        const thenT = build(A(st.then), [g], { name: '是', condition: S(st.when) })
+        const elseT = build(A(st.else), [g], { name: '否' })
+        return [...thenT, ...elseT]
+      }
+      case 'switch': {
+        const g = push({ id: nid('Gw'), type: 'exclusiveGateway', name: `分派 ${S(st.switchOn)}` })
+        connect(incoming, g, firstEdge)
+        const tails: string[] = []
+        for (const cs of A(st.cases)) tails.push(...build(A(cs.steps), [g], { name: `= ${S(cs.equals)}` }))
+        tails.push(...build(A(st.default), [g], { name: 'default' }))
+        return tails.length ? tails : [g]
+      }
+      case 'while': {
+        const g = push({ id: nid('Gw'), type: 'exclusiveGateway', name: '循环判断' })
+        connect(incoming, g, firstEdge)
+        const bodyT = build(A(st.body), [g], { name: '循环', condition: S(st.when) })
+        connect(bodyT, g) // 回边
+        return [g] // 退出边由后续步骤接出
+      }
+      case 'parallel': {
+        const split = push({ id: nid('Gw'), type: 'parallelGateway', name: '并行分叉' })
+        connect(incoming, split, firstEdge)
+        const join = push({ id: nid('Gw'), type: 'parallelGateway', name: '并行汇合' })
+        for (const br of A(st.branches)) {
+          const bt = build(A(br.steps), [split])
+          connect(bt, join)
+        }
+        return [join]
+      }
+      case 'retry': {
+        const id = push({ id: nid('Node'), type: 'task', name: `重试 ×${S(st.maxAttempts)}` })
+        connect(incoming, id, firstEdge)
+        return build(A(st.body), [id])
+      }
+      case 'compensate': return simple('task', `补偿 ${S(st.compensateCommand)}`)
+      default: return simple('task', t || '步骤')
+    }
+  }
+
+  const tails = build(A(scene.flowSteps), [start])
+  if (tails.length) { const end = push({ id: nid('End'), type: 'endEvent', name: '结束' }); connect(tails, end) }
+  return { id: S(scene.sceneId), name: S(scene.sceneName) || S(scene.sceneId), nodes, flows }
+}
diff --git a/web/src/ontology/types.ts b/web/src/ontology/types.ts
new file mode 100644
index 0000000..cc1df4e
--- /dev/null
+++ b/web/src/ontology/types.ts
@@ -0,0 +1,126 @@
+// 本体可视化中间表示（IR）。
+// 这是把当前项目的 M0–M8 / ME / MetaRule 本体“投影”成一份统一、视图友好的对象模型；
+// 由 build.ts 从后端 /api/meta/model/{code} 返回的解析后 YAML（JSON）在浏览器端合成，
+// 供 ER 图 / 本体网络图 / 场景流程图三个视图共用（等价于 onto-app 里 Python 侧的 IR，改为 TS 实现）。
+
+export type RelKind = 'ONE_TO_ONE' | 'ONE_TO_MANY' | 'MANY_TO_ONE' | 'MANY_TO_MANY'
+
+/** 属性（字段）。identifier / localIdentifier 会被前置成 is_primary_key 的合成属性。 */
+export interface OntoAttribute {
+  name: string
+  label?: string
+  type: string
+  required?: boolean
+  unique?: boolean
+  is_primary_key?: boolean
+  is_foreign_key?: boolean
+  /** 跨聚合引用目标（来自 M1 refAggregate/refRoot/refIdentifier）。 */
+  ref?: { aggregate: string; root: string; identifier: string }
+  constraints?: Record<string, any>
+  /** 瞬态字段：无 M3 列，不落库（据 description 启发式识别，仅作展示标注）。 */
+  transient?: boolean
+  description?: string
+}
+
+/** 对象间关联：跨聚合引用（reference）或聚合内组合（composition）。 */
+export interface OntoRelationship {
+  name: string
+  label?: string
+  target_object_id: string
+  kind: RelKind
+  refType: 'reference' | 'composition'
+  /** reference 时为持有外键的字段名（在源对象 attributes 内）。 */
+  fk_field?: string
+}
+
+/** 一个业务对象：聚合根（parent_id 为空）或其组合子实体（parent_id 指向根）。 */
+export interface OntoObject {
+  id: string
+  name: string
+  alias: string
+  description?: string
+  is_aggregate_root: boolean
+  parent_id?: string | null
+  aggregateId: string
+  attributes: OntoAttribute[]
+  relationships: OntoRelationship[]
+}
+
+/** 行为（M2 命令）。 */
+export interface OntoBehavior {
+  id: string
+  name: string
+  owner_object_id: string
+  type: 'COMMAND' | 'QUERY'
+  commandType?: string
+  description?: string
+  applied_rules: string[]
+  produced_events: string[]
+  preconditions: string[]
+  effects: string[]
+}
+
+/** 规则（MetaRule ruleGroups[].rules[]）。 */
+export interface OntoRule {
+  id: string
+  name: string
+  type: string        // effect: REJECT / ALERT / COMPENSATE
+  expression?: string // matchCondition
+  enforced?: boolean
+  bindScene?: string
+  description?: string
+}
+
+/** 领域事件（ME aggregateEventDefinitions）。 */
+export interface OntoEvent {
+  id: string
+  name: string
+  description?: string
+  topic?: string
+  aggregate?: string
+  payload?: string[]
+  consumers?: string[]
+}
+
+/** 导航目录节点（本项目无显式导航树，可为空；网络图退化为按聚合平铺）。 */
+export interface NavNode {
+  id: string
+  name: string
+  zh: string
+  link?: string | null
+  children: NavNode[]
+}
+
+/** BPMN 语义骨架（由 M4 flowSteps 合成，不含坐标）。 */
+export interface ProcessNode {
+  id: string
+  type: 'startEvent' | 'endEvent' | 'task' | 'userTask' | 'exclusiveGateway' | 'parallelGateway' | 'intermediateCatchEvent'
+  name: string
+  behaviorId?: string
+  lane?: string
+}
+export interface ProcessFlow {
+  id: string
+  source: string
+  target: string
+  name?: string
+  condition?: string
+}
+export interface ProcessModel {
+  id: string
+  name: string
+  nodes: ProcessNode[]
+  flows: ProcessFlow[]
+}
+
+/** 顶层：一个本体 = 全部建模产物的视图投影。 */
+export interface Ontology {
+  domain: string
+  version: string
+  objects: OntoObject[]
+  behaviors: OntoBehavior[]
+  rules: OntoRule[]
+  events: OntoEvent[]
+  navigations: NavNode[]
+  processModels: ProcessModel[]
+}
diff --git a/web/src/viz/ERDiagram.tsx b/web/src/viz/ERDiagram.tsx
new file mode 100644
index 0000000..54e90e3
--- /dev/null
+++ b/web/src/viz/ERDiagram.tsx
@@ -0,0 +1,243 @@
+import { useMemo, useEffect } from 'react'
+import {
+  ReactFlow,
+  Background,
+  Controls,
+  MiniMap,
+  Handle,
+  Position,
+  useNodesState,
+  useEdgesState,
+  MarkerType,
+  BaseEdge,
+  EdgeLabelRenderer,
+  getSmoothStepPath,
+  type Node,
+  type Edge,
+  type NodeProps,
+  type EdgeProps,
+} from '@xyflow/react'
+import dagre from '@dagrejs/dagre'
+import '@xyflow/react/dist/style.css'
+import type { Ontology, OntoObject, OntoAttribute, RelKind } from '../ontology/types'
+
+// 交互式 ER 图：表 = React Flow 自定义节点（字段级 handle），外键 = 节点间连线（蓝色基数样式）；
+// 组合（composition）= 父对象 → 子实体的紫色含义连线（含菱形标记，读作 containment）。
+// 拖拽 / 缩放 / 平移 / 小地图均由 React Flow 内置。首屏用 dagre 做有向布局（按依赖左右排开）。
+
+const NODE_W = 232
+const HDL: React.CSSProperties = { width: 9, height: 9, background: '#5b7fe0', border: '2px solid #fff' }
+
+// ---- 节点/边 data 负载类型 ----------------------------------------------------
+interface TableAttr {
+  name: string
+  type: string
+  pk: boolean
+  fk: boolean
+}
+interface TableNodeData {
+  name: string
+  alias: string
+  attributes: TableAttr[]
+  [key: string]: unknown
+}
+interface CardinalityEdgeData {
+  srcCard: string
+  tgtCard: string
+  name: string
+  [key: string]: unknown
+}
+interface CompositionEdgeData {
+  name: string
+  [key: string]: unknown
+}
+
+type TableFlowNode = Node<TableNodeData, 'table'>
+type CardinalityFlowEdge = Edge<CardinalityEdgeData, 'cardinality'>
+type CompositionFlowEdge = Edge<CompositionEdgeData, 'composition'>
+
+// 自定义节点：一张表卡片，每行字段左右各一个 handle（外键行出右侧 source，主键行出左侧 target）
+function TableNode({ data }: NodeProps<TableFlowNode>) {
+  return (
+    <div style={{ width: NODE_W, borderRadius: 8, background: '#fff', boxShadow: '0 2px 12px rgba(0,0,0,.10)' }}>
+      <div style={{ background: '#5b7fe0', color: '#fff', fontWeight: 700, fontSize: 13, textAlign: 'center', padding: '8px', borderRadius: '8px 8px 0 0' }}>
+        {data.name} <span style={{ fontWeight: 500, opacity: 0.85 }}>({data.alias})</span>
+      </div>
+      <div style={{ border: '1px solid #e6ecf8', borderTop: 0, borderRadius: '0 0 8px 8px' }}>
+        {data.attributes.map((a) => (
+          <div key={a.name} style={{ position: 'relative', display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '6px 12px', fontSize: 11.5, borderBottom: '1px solid #f4f6fb' }}>
+            <Handle type="target" position={Position.Left} id={`${a.name}__target`} style={{ ...HDL, opacity: a.pk ? 1 : 0 }} isConnectable={false} />
+            <span className="om-mono" style={{ color: a.pk ? '#d99a1a' : a.fk ? '#c2528a' : '#3f3f46', whiteSpace: 'nowrap' }}>{a.pk ? '🔑 ' : a.fk ? '🔗 ' : ''}{a.name}</span>
+            <span style={{ color: '#b4b4ba', marginLeft: 8 }}>{a.type}</span>
+            <Handle type="source" position={Position.Right} id={`${a.name}__source`} style={{ ...HDL, opacity: a.fk ? 1 : 0 }} isConnectable={false} />
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+const nodeTypes = { table: TableNode }
+
+// 关系型基数：ONE_TO_MANY 的 FK 一般在“多”侧，故按 源→目标 方向给两端基数
+const CARD: Record<RelKind, [string, string]> = {
+  ONE_TO_ONE: ['1', '1'],
+  ONE_TO_MANY: ['1', 'N'],
+  MANY_TO_ONE: ['N', '1'],
+  MANY_TO_MANY: ['N', 'N'], // 关系库里无直接 N-N（经中间表实现），此处仅兜底
+}
+
+// 自定义边：平滑折线 + 两端基数徽标（1 / N）+ 中间关系名（蓝色，reference/外键）
+function CardinalityEdge({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, markerEnd, style, data }: EdgeProps<CardinalityFlowEdge>) {
+  const [path] = getSmoothStepPath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, borderRadius: 10 })
+  const dx = targetX - sourceX, dy = targetY - sourceY
+  const len = Math.hypot(dx, dy) || 1
+  const ux = dx / len, uy = dy / len
+  const badge = (x: number, y: number, text: string, extra?: React.CSSProperties) => (
+    <div style={{ position: 'absolute', transform: `translate(-50%,-50%) translate(${x}px,${y}px)`, pointerEvents: 'none', fontSize: 10.5, fontWeight: 700, lineHeight: 1, padding: '2px 5px', borderRadius: 6, background: '#fff', border: '1px solid #cdd6ee', color: '#4a6fd6', ...extra }}>{text}</div>
+  )
+  return (
+    <>
+      <BaseEdge id={id} path={path} markerEnd={markerEnd} style={style} />
+      <EdgeLabelRenderer>
+        {badge(sourceX + ux * 20, sourceY + uy * 20, data?.srcCard ?? '')}
+        {badge(targetX - ux * 20, targetY - uy * 20, data?.tgtCard ?? '')}
+        {data?.name && badge((sourceX + targetX) / 2, (sourceY + targetY) / 2, data.name, { color: '#8a93ad', fontWeight: 500, borderColor: '#e6e9f2', background: 'rgba(255,255,255,.9)' })}
+      </EdgeLabelRenderer>
+    </>
+  )
+}
+
+// 组合边：父 → 子实体（聚合内 composition）。紫色虚线 + 源端菱形（containment）+ “组合 (1:N)”标签。
+const COMP_COLOR = '#7c4dcf'
+function CompositionEdge({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, markerEnd, style, data }: EdgeProps<CompositionFlowEdge>) {
+  const [path] = getSmoothStepPath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, borderRadius: 10 })
+  const dx = targetX - sourceX, dy = targetY - sourceY
+  const len = Math.hypot(dx, dy) || 1
+  const ux = dx / len, uy = dy / len
+  return (
+    <>
+      <BaseEdge id={id} path={path} markerEnd={markerEnd} style={style} />
+      <EdgeLabelRenderer>
+        {/* 源端（父/整体）菱形标记：旋转 45° 的实心方块，读作 UML 组合 */}
+        <div style={{ position: 'absolute', transform: `translate(-50%,-50%) translate(${sourceX + ux * 12}px,${sourceY + uy * 12}px) rotate(45deg)`, width: 11, height: 11, background: COMP_COLOR, border: '2px solid #fff', boxShadow: '0 0 0 1px rgba(124,77,207,.4)', pointerEvents: 'none' }} />
+        {/* 关系标签 */}
+        <div style={{ position: 'absolute', transform: `translate(-50%,-50%) translate(${(sourceX + targetX) / 2}px,${(sourceY + targetY) / 2}px)`, pointerEvents: 'none', fontSize: 10.5, fontWeight: 700, lineHeight: 1, padding: '2px 6px', borderRadius: 6, background: 'rgba(255,255,255,.92)', border: `1px solid ${COMP_COLOR}`, color: COMP_COLOR, whiteSpace: 'nowrap' }}>
+          {data?.name ? `◆ ${data.name}` : '◆ 组合 (1:N)'}
+        </div>
+      </EdgeLabelRenderer>
+    </>
+  )
+}
+
+const edgeTypes = { cardinality: CardinalityEdge, composition: CompositionEdge }
+
+// 主键 / 首字段的锚定 handle（组合边用节点级锚点，无需专门字段 handle）
+function anchorAttr(o: OntoObject): OntoAttribute | undefined {
+  return (o.attributes || []).find((a) => a.is_primary_key) || (o.attributes || [])[0]
+}
+
+// 由本体对象模型构建 React Flow 的 nodes/edges，并用 dagre 计算初始坐标
+function buildGraph(ontology: Ontology): { nodes: TableFlowNode[]; edges: (CardinalityFlowEdge | CompositionFlowEdge)[] } {
+  const objects: OntoObject[] = (ontology && ontology.objects) || []
+  const byId = (id: string) => objects.find((o) => o.id === id)
+
+  const g = new dagre.graphlib.Graph()
+  g.setGraph({ rankdir: 'LR', nodesep: 36, ranksep: 96, marginx: 24, marginy: 24 })
+  g.setDefaultEdgeLabel(() => ({}))
+  objects.forEach((o) => g.setNode(o.id, { width: NODE_W, height: 40 + (o.attributes || []).length * 25 }))
+
+  const edges: (CardinalityFlowEdge | CompositionFlowEdge)[] = []
+  objects.forEach((o) => (o.relationships || []).forEach((r, i) => {
+    const tgt = byId(r.target_object_id)
+    if (!tgt) return
+
+    if (r.refType === 'composition') {
+      // 组合：父对象 → 子实体（无 fk_field，node 级连线，锚在双方 PK/首字段 handle）
+      const src = anchorAttr(o)
+      const dst = anchorAttr(tgt)
+      g.setEdge(o.id, tgt.id)
+      edges.push({
+        id: `c-${o.id}-${tgt.id}-${i}`,
+        source: o.id, sourceHandle: src ? `${src.name}__source` : undefined,
+        target: tgt.id, targetHandle: dst ? `${dst.name}__target` : undefined,
+        type: 'composition',
+        data: { name: r.label || r.name || '组合 (1:N)' },
+        style: { stroke: COMP_COLOR, strokeWidth: 1.8, strokeDasharray: '6 4' },
+        markerEnd: { type: MarkerType.ArrowClosed, color: COMP_COLOR, width: 15, height: 15 },
+      })
+      return
+    }
+
+    // reference：外键连线（需源侧持有 fk_field 且目标有主键）
+    if (!r.fk_field) return
+    const hasFk = (o.attributes || []).some((a) => a.name === r.fk_field)
+    const pk = (tgt.attributes || []).find((a) => a.is_primary_key)
+    if (!hasFk || !pk) return
+    g.setEdge(o.id, tgt.id)
+    const [srcCard, tgtCard] = CARD[r.kind] || ['N', '1']
+    edges.push({
+      id: `e-${o.id}-${r.fk_field}-${tgt.id}-${i}`,
+      source: o.id, sourceHandle: `${r.fk_field}__source`,
+      target: tgt.id, targetHandle: `${pk.name}__target`,
+      type: 'cardinality',
+      data: { srcCard, tgtCard, name: r.name || '' },
+      style: { stroke: '#8aa2e6', strokeWidth: 1.6 },
+      markerEnd: { type: MarkerType.ArrowClosed, color: '#8aa2e6', width: 15, height: 15 },
+    })
+  }))
+  dagre.layout(g)
+
+  const nodes: TableFlowNode[] = objects.map((o) => {
+    const n = g.node(o.id)
+    const fkSet = new Set((o.relationships || []).map((r) => r.fk_field).filter(Boolean) as string[])
+    return {
+      id: o.id,
+      type: 'table',
+      position: { x: (n ? n.x : 0) - NODE_W / 2, y: (n ? n.y - n.height / 2 : 0) },
+      data: {
+        name: o.name,
+        alias: o.alias,
+        attributes: (o.attributes || []).map((a) => ({
+          name: a.name,
+          type: a.type,
+          pk: !!a.is_primary_key,
+          fk: !!a.is_foreign_key || fkSet.has(a.name),
+        })),
+      },
+    }
+  })
+  return { nodes, edges }
+}
+
+export default function ERDiagram({ ontology }: { ontology: Ontology }) {
+  const graph = useMemo(() => buildGraph(ontology), [ontology])
+  const [nodes, setNodes, onNodesChange] = useNodesState<TableFlowNode>(graph.nodes)
+  const [edges, setEdges, onEdgesChange] = useEdgesState<CardinalityFlowEdge | CompositionFlowEdge>(graph.edges)
+  // 本体变化时重建（重新布局并复位）
+  useEffect(() => { setNodes(graph.nodes); setEdges(graph.edges) }, [graph, setNodes, setEdges])
+
+  return (
+    <div style={{ position: 'absolute', inset: 0 }}>
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        nodeTypes={nodeTypes}
+        edgeTypes={edgeTypes}
+        fitView
+        fitViewOptions={{ padding: 0.2 }}
+        minZoom={0.2}
+        maxZoom={2.5}
+        nodesConnectable={false}
+        elementsSelectable
+        proOptions={{ hideAttribution: false }}
+      >
+        <Background gap={18} size={1} color="#e9ecf3" />
+        <MiniMap pannable zoomable nodeColor="#c7d3f0" nodeStrokeColor="#5b7fe0" maskColor="rgba(240,242,247,.6)" />
+        <Controls showInteractive={false} />
+      </ReactFlow>
+    </div>
+  )
+}
diff --git a/web/src/viz/NetworkGraph.tsx b/web/src/viz/NetworkGraph.tsx
new file mode 100644
index 0000000..65f4270
--- /dev/null
+++ b/web/src/viz/NetworkGraph.tsx
@@ -0,0 +1,614 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import cytoscape from 'cytoscape';
+// @ts-ignore cytoscape-fcose ships no type declarations
+import fcose from 'cytoscape-fcose';
+import type { Ontology, NavNode } from '../ontology/types';
+
+// 用成熟的 Cytoscape.js + fCoSE 力导向布局渲染本体网络图。
+// fCoSE 是官方推荐的“最小化交叉、聚类清晰”的力导向布局。
+// 节点模型:
+//   - 实体 = compound(复合)框;框内只保留自身「标识(主键)」子节点(显示自己模块内的名字)。
+//   - 普通属性 = 独立节点(卫星),用连线挂到实体框外,不再嵌进框内。
+//   - 跨聚合引用 = 独立「引用节点」(专色 C 紫),落在引用方与被引用实体之间,
+//     显示的是「引用地的表述」(引用方 fk 字段的 zh,如 客户编号2),常驻可见。
+//   - 标识被隐藏后,实体框变空,模块名回到框内居中(不再浮在空框上方)。
+// 左侧目录内置为组件自身的左栏(不再 portal 到外部侧边栏),严格按本体的 navigations(M3 导航树)
+// 组织;无导航时退化为按聚合平铺。
+cytoscape.use(fcose);
+
+const COL: Record<string, string[]> = {
+  entity: ['#eef2fd', '#5b7fe0', '#33529e'],
+  behavior: ['#e9f7ee', '#4fae6e', '#2f7d4c'],
+  rule: ['#fdf3e8', '#e0944a', '#9a5e1d'],
+  event: ['#fbe3ef', '#e8579b', '#b83b7e'],
+  nav: ['#f2f3f5', '#8e8e96', '#3f3f46'],
+  identifier: ['#fdf3d6', '#caa011', '#7a5c00'],   // 标识 A(金)
+  attribute: ['#eef0f3', '#9298a3', '#4b5058'],    // 属性 B(灰)——与标识同形不同色
+  bridge: ['#efe7fb', '#7c4dcf', '#4d2a94'],       // 引用节点 C(紫)——跨实体引用的落点
+};
+const TYPE_CN: Record<string, string> = { entity: '实体', behavior: '行为', rule: '规则', event: '事件', nav: '目录', identifier: '标识', attribute: '属性', bridge: '引用' };
+
+// 属性 / 标识作为独立节点:合成 id = attr::<对象id>::<字段名>(字段名仅在对象内唯一,故带上对象 id 前缀)。
+// 标识 = is_primary_key 的属性(M1 导入时被放到 attributes 首位),其余为普通属性。
+const attrNodeId = (oid: string, name: string) => `attr::${oid}::${name}`;
+const attrNodeType = (a: any) => (a.is_primary_key ? 'identifier' : 'attribute');
+// 跨聚合引用列(relationship.fk_field):不单独成普通属性节点,而是生成一个「引用节点」,
+// 显示引用方对该外键列的表述(如订单里的 客户编号2),落在引用方与被引用实体之间。
+const fkFields = (o: any) => new Set((o.relationships || []).filter((r: any) => r.fk_field).map((r: any) => r.fk_field));
+const attrNodeIds = (o: any) => { const fk = fkFields(o); return (o.attributes || []).filter((a: any) => !fk.has(a.name)).map((a: any) => attrNodeId(o.id, a.name)); };
+// 引用节点 id:按(引用方对象, 关系)唯一。每条跨聚合引用一个,互不共享。
+const refNodeId = (ownerId: string, rel: any) => `ref::${ownerId}::${rel.fk_field || rel.name}`;
+// 引用方对该外键列的表述(引用地的 zh);取不到时退回关系名。
+const refLabel = (o: any, rel: any) => {
+  const a = (o.attributes || []).find((x: any) => x.name === rel.fk_field);
+  return a?.label || rel.label || rel.name;
+};
+
+// M3 导航节点是“空节点”:自身无实体/行为内容,只作为界面目录入口。
+function findNav(nodes: NavNode[] | undefined, id: string): NavNode | null {
+  for (const n of nodes || []) { if (`nav__${n.id}` === id) return n; const f = findNav(n.children, id); if (f) return f; }
+  return null;
+}
+
+function nameOf(ontology: Ontology, id: string): string {
+  if (typeof id === 'string' && id.startsWith('nav__')) { const n = findNav(ontology.navigations, id); if (n) return n.zh || n.name || n.id; }
+  return ontology.objects.find((o) => o.id === id)?.name
+    || ontology.behaviors.find((b) => b.id === id)?.name
+    || ontology.rules.find((r) => r.id === id)?.name
+    || ontology.events.find((e) => e.id === id)?.name || id;
+}
+function describe(ontology: Ontology, id: string): any {
+  // 引用节点:显示引用地的表述 + 引用方 / 指向
+  if (typeof id === 'string' && id.startsWith('ref::')) {
+    const [, ownerId, fk] = id.split('::');
+    const owner = ontology.objects.find((x) => x.id === ownerId);
+    const rel = owner && (owner.relationships || []).find((r) => (r.fk_field || r.name) === fk);
+    const target = rel && ontology.objects.find((x) => x.id === rel.target_object_id);
+    return {
+      type: 'bridge',
+      title: owner && rel ? refLabel(owner, rel) : fk,
+      lines: [
+        '跨实体引用(连接点)',
+        owner ? `引用方: ${owner.name}` : null,
+        target ? `指向: ${target.name}` : null,
+        rel?.fk_field ? `字段 ${rel.fk_field}` : null,
+      ].filter(Boolean),
+    };
+  }
+  if (typeof id === 'string' && id.startsWith('attr::')) {
+    const rest = id.slice('attr::'.length);
+    const sep = rest.indexOf('::');
+    const oid = rest.slice(0, sep), fname = rest.slice(sep + 2);
+    const o = ontology.objects.find((x) => x.id === oid);
+    const a: any = o && (o.attributes || []).find((x) => x.name === fname);
+    if (a) {
+      const referenced = a.is_primary_key && ontology.objects.some((x) => (x.relationships || []).some((r) => r.fk_field && r.target_object_id === oid));
+      return {
+        type: attrNodeType(a),
+        title: a.label || a.name,
+        lines: [
+          `字段 ${a.name} · ${a.type}`,
+          a.is_primary_key ? '主键(标识)' : null,
+          referenced ? '被其他实体引用' : null,
+          [a.required ? '必填' : null, a.unique ? '唯一' : null].filter(Boolean).join(' · ') || null,
+          a.enum_values?.length ? `枚举: ${a.enum_values.join('、')}` : null,
+          o ? `属于: ${o.name}` : null,
+          a.description,
+        ].filter(Boolean),
+      };
+    }
+  }
+  if (typeof id === 'string' && id.startsWith('nav__')) {
+    const n = findNav(ontology.navigations, id);
+    if (n) { const kids = (n.children || []).map((c) => c.zh || c.name).filter(Boolean);
+      return { type: 'nav', title: n.zh || n.name || n.id, lines: [
+        n.link ? `入口 → ${nameOf(ontology, n.link)}` : '分组节点(空节点)',
+        kids.length ? `子项: ${kids.join('、')}` : null,
+      ].filter(Boolean) }; }
+  }
+  const o = ontology.objects.find((x) => x.id === id);
+  if (o) {
+    // 关系已由图上的连线表达,卡片内不再重复列出
+    return { type: 'entity', title: `${o.name} (${o.alias})`, lines: [o.description].filter(Boolean) };
+  }
+  const b = ontology.behaviors.find((x) => x.id === id);
+  if (b) return { type: 'behavior', title: b.name, lines: [
+    `作用于: ${nameOf(ontology, b.owner_object_id)}`,
+    b.applied_rules?.length ? `规则: ${b.applied_rules.map((r) => nameOf(ontology, r)).join(', ')}` : null,
+    b.produced_events?.length ? `事件: ${b.produced_events.map((e) => nameOf(ontology, e)).join(', ')}` : null,
+  ].filter(Boolean) };
+  const r = ontology.rules.find((x) => x.id === id);
+  if (r) return { type: 'rule', title: r.name, lines: [`${r.type} · ${r.enforced ? '可强制' : '仅说明'}`, r.expression].filter(Boolean) };
+  const e = ontology.events.find((x) => x.id === id);
+  if (e) { const by = ontology.behaviors.filter((x) => (x.produced_events || []).includes(id)).map((x) => x.name);
+    return { type: 'event', title: e.name, lines: [by.length ? `由 ${by.join(', ')} 产出` : null, e.description].filter(Boolean) }; }
+  return null;
+}
+
+function buildElements(ontology: Ontology): any[] {
+  const els: any[] = [];
+  const clen = (s: string) => [...s].length;
+  ontology.objects.forEach((o) => {
+    const bw = Math.max(56, Math.min(120, clen(o.name) * 14 + 22));
+    els.push({ data: { id: o.id, label: o.name, type: 'entity', bw, bh: 34, bfont: 12, btw: bw - 14, bmy: 0 } });
+    const fk = fkFields(o);
+    (o.attributes || []).forEach((a) => {
+      if (fk.has(a.name)) return;                       // 外键引用列不成普通属性节点(由引用节点表达)
+      const nid = attrNodeId(o.id, a.name);
+      const lb = a.label || a.name;
+      const w = Math.max(44, Math.min(116, clen(lb) * 11 + 16));
+      const base = { id: nid, label: lb, type: attrNodeType(a), bw: w, bh: 24, bfont: 9, btw: w - 12, bmy: 0 };
+      // 标识(主键)→ 嵌进实体框(compound 子节点);普通属性 → 独立卫星节点(连线在下方补)
+      els.push({ data: a.is_primary_key ? { ...base, parent: o.id } : base });
+    });
+  });
+  ontology.behaviors.forEach((b) => els.push({ data: { id: b.id, label: b.name, type: 'behavior', bw: 58, bh: 58, bfont: 9.5, btw: 46, bmy: 0 } }));
+  ontology.rules.forEach((r) => els.push({ data: { id: r.id, label: r.name, type: 'rule', bw: 68, bh: 68, bfont: 8.5, btw: 42, bmy: 0 } }));
+  ontology.events.forEach((e) => els.push({ data: { id: e.id, label: e.name, type: 'event', bw: 56, bh: 56, bfont: 8.5, btw: 34, bmy: 8 } }));
+  // M3 导航:每个目录节点作为“空节点”入图,按层级相连,叶子连到所引用的聚合根。
+  // 层级连线标注级别:顶层→子=一级,再往下=二级……(取子节点深度)
+  const CN_NUM = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'];
+  const levelLabel = (d: number) => `${CN_NUM[d - 1] || d}级`;
+  const navMeta: any[] = [];
+  const walkNav = (n: NavNode, parentGid: string | null, depth: number) => {
+    const gid = `nav__${n.id}`;
+    const label = n.zh || n.name || n.id;
+    const bw = Math.max(56, Math.min(150, clen(label) * 14 + 22));
+    els.push({ data: { id: gid, label, type: 'nav', bw, bh: 32, bfont: 11, btw: bw - 14, bmy: 0 } });
+    navMeta.push({ gid, parentGid, link: n.link || null, depth });
+    (n.children || []).forEach((c) => walkNav(c, gid, depth + 1));
+  };
+  (ontology.navigations || []).forEach((n) => walkNav(n, null, 0));
+  const ids = new Set(els.map((e) => e.data.id));
+  const edge = (s: string, t: string, label: string, kind: string, i: any) => els.push({ data: { id: `${s}_${kind}_${t}_${i}`, source: s, target: t, label, hlcolor: COL[kind][1] } });
+  ontology.behaviors.forEach((b, i) => {
+    if (ids.has(b.owner_object_id)) edge(b.id, b.owner_object_id, 'ownerEntity', 'behavior', i);
+    (b.applied_rules || []).forEach((r, j) => ids.has(r) && edge(b.id, r, 'appliedRules', 'rule', `${i}${j}`));
+    (b.produced_events || []).forEach((e, j) => ids.has(e) && edge(b.id, e, 'produces', 'event', `${i}${j}`));
+  });
+  // 普通属性(卫星)→ 实体框:连线(标识在框内由 compound 包含表达,不连线)
+  ontology.objects.forEach((o, i) => (o.attributes || []).forEach((a, j) => {
+    if (a.is_primary_key || fkFields(o).has(a.name)) return;
+    const nid = attrNodeId(o.id, a.name);
+    if (ids.has(nid)) edge(o.id, nid, '', 'attribute', `a${i}_${j}`);
+  }));
+  ontology.objects.forEach((o, i) => (o.relationships || []).forEach((rel, j) => {
+    if (!ids.has(rel.target_object_id)) return;
+    // 跨聚合引用:引用方 →〔引用节点(引用地表述,如 客户编号2)〕→ 被引用实体
+    if (rel.fk_field) {
+      const rid = refNodeId(o.id, rel);
+      const lb = refLabel(o, rel);
+      const w = Math.max(44, Math.min(120, clen(lb) * 11 + 16));
+      els.push({ data: { id: rid, label: lb, type: 'attribute', bridge: true, bw: w, bh: 24, bfont: 9, btw: w - 12, bmy: 0 } });
+      edge(o.id, rid, '引用', 'bridge', `${i}${j}`);
+      edge(rid, rel.target_object_id, '', 'bridge', `${i}${j}b`);
+      return;
+    }
+    edge(o.id, rel.target_object_id, rel.label || rel.name, 'entity', `${i}${j}`);
+  }));
+  navMeta.forEach((m, i) => {
+    if (m.parentGid) edge(m.parentGid, m.gid, levelLabel(m.depth), 'nav', `nv${i}`);
+    if (m.link && ids.has(m.link)) edge(m.gid, m.link, '入口', 'nav', `nl${i}`);
+  });
+  return els;
+}
+
+// 聚合层级:聚合根 → 子实体 / 跨聚合引用 / 行为(→ 规则、事件)。
+function buildTree(ontology: Ontology) {
+  const roots = ontology.objects.filter((o) => !o.parent_id);
+  const usedRules = new Set<string>(); const usedEvents = new Set<string>();
+  const tree = roots.map((root) => {
+    const subs = ontology.objects.filter((o) => o.parent_id === root.id);
+    const subIds = new Set(subs.map((s) => s.id));
+    const refs: any[] = [];
+    [root, ...subs].forEach((o) => (o.relationships || []).forEach((rel) => {
+      if (subIds.has(rel.target_object_id) || rel.target_object_id === root.id) return; // 组合已列为子实体
+      const t = ontology.objects.find((x) => x.id === rel.target_object_id);
+      if (t) refs.push({ key: `${o.id}_${rel.name}`, target: t.id, label: `${rel.fk_field || rel.name} → ${t.name}`, refNode: rel.fk_field ? refNodeId(o.id, rel) : null });
+    }));
+    const behaviors = ontology.behaviors
+      .filter((b) => b.owner_object_id === root.id || subIds.has(b.owner_object_id))
+      .map((b) => {
+        const rules = (b.applied_rules || []).map((id) => ontology.rules.find((r) => r.id === id)).filter(Boolean) as any[];
+        const events = (b.produced_events || []).map((id) => ontology.events.find((e) => e.id === id)).filter(Boolean) as any[];
+        rules.forEach((r) => usedRules.add(r.id)); events.forEach((e) => usedEvents.add(e.id));
+        return { b, rules, events };
+      });
+    return { root, subs, refs, behaviors };
+  });
+  // 挂不上任何聚合的节点兜底展示,保证目录覆盖图上每个节点
+  const knownObj = new Set(ontology.objects.map((o) => o.id));
+  const others = [
+    ...ontology.behaviors.filter((b) => !knownObj.has(b.owner_object_id)).map((b) => ({ id: b.id, label: b.name, type: 'behavior' })),
+    ...ontology.rules.filter((r) => !usedRules.has(r.id)).map((r) => ({ id: r.id, label: r.name, type: 'rule' })),
+    ...ontology.events.filter((e) => !usedEvents.has(e.id)).map((e) => ({ id: e.id, label: e.name, type: 'event' })),
+  ];
+  return { tree, others };
+}
+
+// 聚合簇覆盖的全部节点 id(根 + 子实体 + 跨聚合引用节点/目标 + 行为 + 规则 + 事件)。
+// 引用目标(如 订单明细→产品)纳入本簇:选中本模块时,即使产品属于别的模块也一并显示。
+function clusterIds(t: any): any[] {
+  const ids = [t.root.id, ...attrNodeIds(t.root),
+    ...t.subs.flatMap((s: any) => [s.id, ...attrNodeIds(s)]),
+    ...t.refs.map((r: any) => r.target), ...t.refs.map((r: any) => r.refNode).filter(Boolean)];
+  t.behaviors.forEach(({ b, rules, events }: any) => ids.push(b.id, ...rules.map((r: any) => r.id), ...events.map((e: any) => e.id)));
+  return ids;
+}
+
+// 一行:缩进由外层 nest() 容器提供,这里只管内容与选中态。
+function Row({ type = 'entity', label, alias, note, bold, selected, chev, onChev, onPick }: any) {
+  const c = COL[type] || COL.entity;
+  return (
+    <div onClick={onPick} title={label}
+      style={{ display: 'flex', alignItems: 'center', gap: 7, padding: '4px 8px', borderRadius: 7, cursor: 'pointer', background: selected ? c[0] : 'transparent', fontSize: 12, color: '#3f3f46', lineHeight: 1.45, userSelect: 'none' }}>
+      <span onClick={onChev ? (e: any) => { e.stopPropagation(); onChev(); } : undefined}
+        style={{ width: 12, textAlign: 'center', color: '#b4b4ba', fontSize: 9, flex: 'none', cursor: onChev ? 'pointer' : 'default' }}>
+        {chev === 'open' ? '▾' : chev === 'closed' ? '▸' : ''}
+      </span>
+      <span style={{ width: 8, height: 8, borderRadius: type === 'entity' || type === 'nav' ? 2 : 8, background: c[1], flex: 'none' }} />
+      <span style={{ flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', fontWeight: bold ? 600 : 400 }}>
+        {label}{alias && <span style={{ color: '#b8b8be', fontWeight: 400, marginLeft: 6, fontSize: 11 }}>{alias}</span>}
+      </span>
+      {note && <span style={{ fontSize: 10, color: '#b4b4ba', flex: 'none' }}>{note}</span>}
+    </div>
+  );
+}
+
+const GroupLabel = ({ text, count }: any) => (
+  <div style={{ padding: '5px 6px 2px 8px', fontSize: 10, fontWeight: 600, letterSpacing: '.03em', color: '#aeaeb4', userSelect: 'none' }}>{text}{count != null ? ` · ${count}` : ''}</div>
+);
+
+// 按类型 + 孤儿 + 目录折叠 过滤:用 display:none(可逆),连线随端点自动隐藏。
+// 孤儿 = 没有任何连到“类型可见”邻居的边(含 0 边的独立节点)。
+// dirHidden = 目录里被折叠的聚合/导航分组所覆盖的全部节点 id。
+function applyFilter(cy: any, hiddenTypes: Record<string, boolean>, hideOrphans: boolean, dirHidden: Set<any> = new Set()) {
+  if (!cy) return;
+  cy.batch(() => {
+    cy.nodes().forEach((n: any) => {
+      const t = n.data('type');
+      let disp = 'element';
+      // 引用节点常驻显示——即使隐藏了“标识/属性”类型,也保留两实体之间的连接点
+      if (n.data('bridge')) { n.style('display', 'element'); return; }
+      if (hiddenTypes[t] || dirHidden.has(n.id())) disp = 'none';
+      else if (hideOrphans) {
+        const hasNbr = n.connectedEdges().some((e: any) => {
+          const other = e.source().id() === n.id() ? e.target() : e.source();
+          return !hiddenTypes[other.data('type')] && !dirHidden.has(other.id());
+        });
+        if (!hasNbr) disp = 'none';
+      }
+      n.style('display', disp);
+    });
+    // 标识(框内)被隐藏后,实体框变空 → 让模块名回到框内居中(不再浮在空框上方)
+    cy.nodes('[type = "entity"]').forEach((n: any) => {
+      const hasVisibleChild = n.children().some((c: any) => c.style('display') !== 'none');
+      n.toggleClass('entity-empty', !hasVisibleChild);
+    });
+  });
+  // 不调用 fit:筛选时保持当前视图位置与缩放不变
+}
+
+const STYLE: any[] = [
+  { selector: 'node', style: { label: 'data(label)', 'text-wrap': 'wrap', 'border-width': 1.6, 'transition-property': 'opacity', 'transition-duration': '0.15s' } },
+  // 叶子节点(属性/标识/行为/规则/事件/目录)用固定基准尺寸,标签居中
+  { selector: 'node[type != "entity"]', style: { width: 'data(bw)', height: 'data(bh)', 'font-size': 'data(bfont)', 'text-max-width': 'data(btw)', 'text-valign': 'center', 'text-halign': 'center' } },
+  // 实体 = compound 父节点:自动裹住框内标识,半透明底,标签置顶
+  { selector: 'node[type="entity"]', style: { shape: 'round-rectangle', 'background-color': COL.entity[0], 'background-opacity': 0.4, 'border-color': COL.entity[1], color: COL.entity[2], 'text-valign': 'top', 'text-halign': 'center', 'font-size': 12, 'font-weight': 700, 'text-margin-y': 3, padding: '12px', 'min-width': 44, 'min-height': 22 } },
+  { selector: 'node[type="behavior"]', style: { shape: 'ellipse', 'background-color': COL.behavior[0], 'border-color': COL.behavior[1], color: COL.behavior[2] } },
+  { selector: 'node[type="rule"]', style: { shape: 'diamond', 'background-color': COL.rule[0], 'border-color': COL.rule[1], color: COL.rule[2] } },
+  { selector: 'node[type="event"]', style: { shape: 'triangle', 'background-color': COL.event[0], 'border-color': COL.event[1], color: COL.event[2], 'text-margin-y': 'data(bmy)' } },
+  // 目录节点=空节点:白底虚线边框,视觉上“空”
+  { selector: 'node[type="nav"]', style: { shape: 'round-rectangle', 'background-color': '#ffffff', 'border-color': COL.nav[1], 'border-style': 'dashed', color: COL.nav[2] } },
+  // 标识 A(金)与属性 B(灰)同形(圆角矩形),只靠颜色区分
+  { selector: 'node[type="identifier"]', style: { shape: 'round-rectangle', 'background-color': COL.identifier[0], 'border-color': COL.identifier[1], color: COL.identifier[2] } },
+  { selector: 'node[type="attribute"]', style: { shape: 'round-rectangle', 'background-color': COL.attribute[0], 'border-color': COL.attribute[1], color: COL.attribute[2] } },
+  // 引用节点用属性灰(type=attribute),不再单独着色
+  // 实体框内标识被隐藏 → 空框:回到固定尺寸、实底、标签居中(模块名回到框内)
+  { selector: 'node.entity-empty', style: { 'min-width': 'data(bw)', 'min-height': 'data(bh)', 'text-valign': 'center', 'text-halign': 'center', 'text-margin-y': 0, 'background-opacity': 1, padding: '0px' } },
+  { selector: 'edge', style: { width: 1.3, 'line-color': '#dfe1e8', 'curve-style': 'bezier', label: 'data(label)', 'font-size': 8, color: '#b8bac4', 'text-rotation': 'autorotate', 'text-background-color': '#fbfbfc', 'text-background-opacity': 0.85, 'text-background-padding': 1 } },
+  { selector: '.faded', style: { opacity: 0.12, 'text-opacity': 0.06 } },
+  { selector: 'node.hl', style: { 'border-width': 3.5 } },
+  { selector: 'edge.hl', style: { 'line-color': 'data(hlcolor)', color: 'data(hlcolor)' } },
+];
+
+export default function NetworkGraph({ ontology }: { ontology: Ontology }) {
+  const boxRef = useRef<HTMLDivElement | null>(null);
+  const cyRef = useRef<any>(null);
+  const tipRef = useRef<HTMLDivElement | null>(null);
+  const activeRef = useRef<any>(null);
+  const selRef = useRef(false);
+  const [tip, setTip] = useState<any>(null);
+  const [hiddenTypes, setHiddenTypes] = useState<Record<string, boolean>>({ nav: true });   // 默认隐藏目录节点(可在筛选面板点「目录」显示)
+  const [hideOrphans, setHideOrphans] = useState(false);
+  const filterRef = useRef<any>({ hiddenTypes: { nav: true }, hideOrphans: false, dirHidden: new Set() });
+
+  // ---- 目录数据:M3 导航树 + 聚合层级 ----
+  const { tree, others } = useMemo(() => buildTree(ontology), [ontology]);
+  const navs = useMemo(() => ontology.navigations || [], [ontology]);
+  const byRoot = useMemo(() => Object.fromEntries(tree.map((t) => [t.root.id, t])), [tree]);
+  // 未被任何导航叶子引用的聚合,兜底列在目录底部
+  const restTree = useMemo(() => {
+    if (!navs.length) return [];
+    const used = new Set<string>();
+    const mark = (n: NavNode) => { if (n.link) used.add(n.link); (n.children || []).forEach(mark); };
+    navs.forEach(mark);
+    return tree.filter((t) => !used.has(t.root.id));
+  }, [navs, tree]);
+
+  const [closedNavs, setClosedNavs] = useState<Set<string>>(() => new Set());   // 折叠的导航节点(含叶子)
+  const [closedRoots, setClosedRoots] = useState<Set<string>>(() => new Set()); // 无导航退化模式下折叠的聚合
+  const [openBehs, setOpenBehs] = useState<Set<string>>(() => new Set());
+  const [selId, setSelId] = useState<string | null>(null);
+  const pickRef = useRef<((id: string) => void) | null>(null);
+  const pick = (id: string) => pickRef.current && pickRef.current(id);
+  // 每个节点 → 它的“底层全部节点”id 列表(点击 → 高亮整簇);图与目录共用同一份。
+  const descRef = useRef<Map<any, any>>(new Map());
+  useEffect(() => {
+    const m = new Map<any, any>();
+    tree.forEach((t) => {
+      m.set(t.root.id, clusterIds(t));
+      t.subs.forEach((s) => {
+        const obj = ontology.objects.find((o) => o.id === s.id);
+        const refT = (obj?.relationships || []).map((r) => r.target_object_id).filter((id) => id && id !== t.root.id);
+        const refNodes = (obj?.relationships || []).filter((r) => r.fk_field).map((r) => refNodeId(s.id, r));
+        m.set(s.id, [s.id, ...attrNodeIds(s), ...refT, ...refNodes]);
+      });
+      t.behaviors.forEach(({ b, rules, events }) => {
+        m.set(b.id, [b.id, ...rules.map((r) => r.id), ...events.map((e) => e.id)]);
+        rules.forEach((r) => m.has(r.id) || m.set(r.id, [r.id]));
+        events.forEach((e) => m.has(e.id) || m.set(e.id, [e.id]));
+      });
+    });
+    const walk = (n: NavNode) => {
+      const ids: any[] = [];
+      const w2 = (node: NavNode) => { ids.push(`nav__${node.id}`); if (node.link && byRoot[node.link]) ids.push(...clusterIds(byRoot[node.link])); (node.children || []).forEach(w2); };
+      w2(n);
+      m.set(`nav__${n.id}`, ids);
+      (n.children || []).forEach(walk);
+    };
+    navs.forEach(walk);
+    descRef.current = m;
+  }, [ontology, tree, navs, byRoot]);
+
+  // 目录折叠只作用于目录本身(展开/合并树行),不再隐藏图上节点;
+  // 图的聚焦改由“点击任意节点 → 高亮它旗下的全部底层节点”实现(见 descRef / highlightById)。
+  const dirHidden = useMemo(() => new Set(), []);
+
+  useEffect(() => {
+    const cy = cytoscape({
+      container: boxRef.current,
+      elements: buildElements(ontology),
+      style: STYLE,
+      minZoom: 0.2, maxZoom: 4, wheelSensitivity: 0.25,
+    });
+    cyRef.current = cy;
+
+    // 布局在挂载后(容器与节点尺寸就绪)才跑,避免首帧节点重叠/漏画
+    const LAYOUT: any = { name: 'fcose', quality: 'proof', randomize: true, animate: false, fit: true, padding: 45, nodeSeparation: 110, idealEdgeLength: 120, nodeRepulsion: 8000, gravity: 0.28, packComponents: true, nestingFactor: 0.6 };
+    const runLayout = () => { cy.resize(); cy.layout(LAYOUT).run(); };
+    requestAnimationFrame(runLayout);
+    cy.on('layoutstop', () => { applyFilter(cy, filterRef.current.hiddenTypes, filterRef.current.hideOrphans, filterRef.current.dirHidden); });
+    const ro = new ResizeObserver(() => cy.resize());
+    if (boxRef.current) ro.observe(boxRef.current);
+
+    const place = () => {
+      const n = activeRef.current, el = tipRef.current;
+      if (!n || !el || !boxRef.current) return;
+      const p = n.renderedPosition();
+      const flip = p.x > boxRef.current.clientWidth * 0.58;
+      el.style.left = `${flip ? p.x - 300 : p.x + 30}px`;
+      el.style.top = `${Math.max(8, p.y - 12)}px`;
+    };
+    const showTip = (n: any) => { activeRef.current = n; setTip(describe(ontology, n.id())); requestAnimationFrame(place); };
+    const hideTip = () => { activeRef.current = null; setTip(null); };
+
+    // 高亮一组节点(整簇):淡化其余,连线仅保留簇内。
+    const highlightCluster = (idsArr: any[], focusId: string | null, doFit?: boolean) => {
+      const eles = cy.collection();
+      idsArr.forEach((id) => { const n = cy.$id(id); if (n && n.nonempty() && n.style('display') !== 'none') eles.merge(n); });
+      if (eles.empty()) return;
+      selRef.current = true;
+      cy.elements().removeClass('faded hl');
+      cy.elements().addClass('faded');
+      eles.removeClass('faded');
+      const inner = eles.edgesWith(eles);
+      inner.removeClass('faded').addClass('hl');
+      eles.addClass('hl');
+      setSelId(focusId || null);
+      hideTip();
+      if (doFit && eles.length > 1) cy.animate({ fit: { eles: eles.union(inner), padding: 60 }, duration: 260 });
+      else if (focusId) { const f = cy.$id(focusId); if (f.nonempty()) cy.animate({ center: { eles: f }, duration: 220 }); }
+    };
+    // 任意节点点击(图内或目录)→ 高亮它的“底层全部节点”,而非仅相邻节点
+    const highlightById = (id: string, doFit?: boolean) => highlightCluster(descRef.current.get(id) || [id], id, doFit);
+    cy.on('tap', 'node', (evt: any) => highlightById(evt.target.id(), true));
+    cy.on('tap', (evt: any) => { if (evt.target === cy) { selRef.current = false; cy.elements().removeClass('faded hl'); setSelId(null); hideTip(); } });
+    pickRef.current = (id: string) => highlightById(id, true);
+    cy.on('mouseover', 'node', (evt: any) => { if (!selRef.current) showTip(evt.target); });
+    cy.on('mouseout', 'node', () => { if (!selRef.current) hideTip(); });
+    cy.on('render', place);
+
+    return () => { ro.disconnect(); cy.destroy(); };
+  }, [ontology]);
+
+  // 过滤变化时重新应用(类型筛选 / 孤儿 / 目录折叠)
+  useEffect(() => {
+    filterRef.current = { hiddenTypes, hideOrphans, dirHidden };
+    if (cyRef.current) applyFilter(cyRef.current, hiddenTypes, hideOrphans, dirHidden);
+  }, [hiddenTypes, hideOrphans, dirHidden]);
+
+  const zoom = (f: number) => { const cy = cyRef.current; if (cy) cy.zoom({ level: cy.zoom() * f, renderedPosition: { x: cy.width() / 2, y: cy.height() / 2 } }); };
+  const fit = () => { const cy = cyRef.current; if (cy) { const v = cy.elements(':visible'); cy.fit(v.length ? v : undefined, 40); } };
+  const TYPES: [string, string][] = [['entity', '实体'], ['identifier', '标识'], ['attribute', '属性'], ['behavior', '行为'], ['rule', '规则'], ['event', '事件'], ['nav', '目录']];
+  const toggleType = (t: string) => setHiddenTypes((h) => ({ ...h, [t]: !h[t] }));
+  const btn: React.CSSProperties = { width: 30, height: 30, borderRadius: 8, border: '1px solid #e6e6e6', background: '#fff', color: '#52525b', fontSize: 16, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' };
+  const toggleSet = (setter: React.Dispatch<React.SetStateAction<Set<string>>>) => (id: string) => setter((s) => { const n = new Set(s); if (n.has(id)) n.delete(id); else n.add(id); return n; });
+  const toggleNav = toggleSet(setClosedNavs);
+  const toggleRoot = toggleSet(setClosedRoots);
+  const toggleBeh = toggleSet(setOpenBehs);
+  const allNavIds = useMemo(() => { const s: string[] = []; const walk = (n: NavNode) => { s.push(n.id); (n.children || []).forEach(walk); }; navs.forEach(walk); return s; }, [navs]);
+  const expandAll = () => { setClosedNavs(new Set()); setClosedRoots(new Set()); setOpenBehs(new Set(ontology.behaviors.map((b) => b.id))); };
+  const collapseAll = () => { setClosedNavs(new Set(allNavIds)); setClosedRoots(new Set(tree.map((t) => t.root.id))); setOpenBehs(new Set()); };
+
+  // ---- 目录渲染(树线样式) ----
+  // 一层缩进容器,画竖直引导线
+  const nest = (children: React.ReactNode) => (
+    <div style={{ marginLeft: 9, paddingLeft: 7, borderLeft: '1px solid #e8e8ea' }}>{children}</div>
+  );
+  // 顶层模块标题:点标题=图上高亮整簇;点三角=展开/合并目录
+  const moduleHeader = (label: string, open: boolean, onToggle: () => void, onPick: () => void, note: any) => (
+    <div onClick={onPick} style={{ display: 'flex', alignItems: 'center', gap: 7, cursor: 'pointer', userSelect: 'none', padding: '6px 8px', margin: '3px 0 1px', borderRadius: 6, fontSize: 13, fontWeight: 700, color: '#27272a' }}>
+      <span onClick={(e) => { e.stopPropagation(); onToggle(); }} style={{ width: 12, textAlign: 'center', color: '#9a9aa0', fontSize: 10, cursor: 'pointer' }}>{open ? '▾' : '▸'}</span>
+      <span style={{ flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{label}</span>
+      {note && <span style={{ fontSize: 10, color: '#b4b4ba', fontWeight: 400 }}>{note}</span>}
+    </div>
+  );
+
+  // 聚合内部:子实体 / 引用 / 行为(→ 规则、事件),不含根行(根由上层承载)。
+  // 这些是具体节点,点击走 pick():居中并高亮邻域(看单节点关系)。
+  const renderAggInner = (t: any) => (
+    <>
+      {t.subs.length > 0 && <GroupLabel text="子实体" count={t.subs.length} />}
+      {t.subs.map((s: any) => <Row key={s.id} type="entity" label={s.name} selected={selId === s.id} onPick={() => pick(s.id)} />)}
+      {t.refs.length > 0 && <GroupLabel text="引用" count={t.refs.length} />}
+      {t.refs.map((r: any) => <Row key={r.key} type="entity" label={r.label} selected={selId === r.target} onPick={() => pick(r.target)} />)}
+      {t.behaviors.length > 0 && <GroupLabel text="行为" count={t.behaviors.length} />}
+      {t.behaviors.map(({ b, rules, events }: any) => {
+        const kids = rules.length + events.length;
+        const bOpen = openBehs.has(b.id);
+        return (
+          <React.Fragment key={b.id}>
+            <Row type="behavior" label={b.name} chev={kids ? (bOpen ? 'open' : 'closed') : null} onChev={kids ? () => toggleBeh(b.id) : null} selected={selId === b.id} onPick={() => pick(b.id)} />
+            {bOpen && nest(
+              <>
+                {rules.map((r: any) => <Row key={r.id} type="rule" label={r.name} selected={selId === r.id} onPick={() => pick(r.id)} />)}
+                {events.map((e: any) => <Row key={e.id} type="event" label={e.name} selected={selId === e.id} onPick={() => pick(e.id)} />)}
+              </>
+            )}
+          </React.Fragment>
+        );
+      })}
+    </>
+  );
+
+  // 聚合根实体行 + 内部。根实体(如 订单)在图里是独立节点,目录里也单列一行,
+  // 作为叶子目录(如 销售订单明细)的子节点,与图完全对齐。
+  const renderAggRootAndInner = (t: any) => {
+    const open = !closedRoots.has(t.root.id);
+    return (
+      <>
+        <Row type="entity" label={t.root.name} bold note={`${t.subs.length + t.refs.length}子·${t.behaviors.length}行为`}
+          chev={open ? 'open' : 'closed'} onChev={() => toggleRoot(t.root.id)}
+          selected={selId === t.root.id} onPick={() => pick(t.root.id)} />
+        {open && nest(renderAggInner(t))}
+      </>
+    );
+  };
+
+  // 非顶层导航节点:点标题=高亮该目录旗下全部底层节点;点三角=展开/合并目录
+  const renderNav = (n: NavNode) => {
+    const open = !closedNavs.has(n.id);
+    const t = n.link ? byRoot[n.link] : null;
+    const label = n.zh || n.name || n.id;
+    return (
+      <React.Fragment key={n.id}>
+        <Row type="nav" label={label} bold
+          note={t ? `${t.subs.length + t.refs.length}子·${t.behaviors.length}行为` : null}
+          chev={open ? 'open' : 'closed'} onChev={() => toggleNav(n.id)}
+          selected={selId === `nav__${n.id}`} onPick={() => pick(`nav__${n.id}`)} />
+        {open && nest(t ? renderAggRootAndInner(t) : (n.children || []).map(renderNav))}
+      </React.Fragment>
+    );
+  };
+
+  // 顶层模块(M3 第一层)
+  const renderTopModule = (n: NavNode) => {
+    const open = !closedNavs.has(n.id);
+    const t = n.link ? byRoot[n.link] : null;
+    const label = n.zh || n.name || n.id;
+    const note = t ? `${t.subs.length + t.refs.length}子·${t.behaviors.length}行为` : null;
+    return (
+      <React.Fragment key={n.id}>
+        {moduleHeader(label, open, () => toggleNav(n.id), () => pick(`nav__${n.id}`), note)}
+        {open && nest(t ? renderAggRootAndInner(t) : (n.children || []).map(renderNav))}
+      </React.Fragment>
+    );
+  };
+
+  // 顶层聚合(无 M3 导航 / 未入目录时的兜底)
+  const renderAggTop = (t: any) => (
+    <div key={t.root.id} style={{ marginBottom: 2 }}>{renderAggRootAndInner(t)}</div>
+  );
+
+  const dirLink: React.CSSProperties = { cursor: 'pointer', color: '#6b6b72', userSelect: 'none' };
+  const directory = (
+    <div style={{ padding: '2px 4px 12px' }}>
+      <div style={{ display: 'flex', gap: 12, padding: '2px 8px 8px', fontSize: 11 }}>
+        <span onClick={expandAll} style={dirLink}>全部展开</span>
+        <span onClick={collapseAll} style={dirLink}>全部合并</span>
+      </div>
+      {navs.length ? (
+        <>
+          {navs.map(renderTopModule)}
+          {restTree.length > 0 && <GroupLabel text="未入目录" count={restTree.length} />}
+          {restTree.map(renderAggTop)}
+        </>
+      ) : tree.map(renderAggTop)}
+      {others.length > 0 && <GroupLabel text="未归组" count={others.length} />}
+      {others.map((o) => <Row key={o.id} type={o.type} label={o.label} selected={selId === o.id} onPick={() => pick(o.id)} />)}
+    </div>
+  );
+
+  return (
+    <div style={{ position: 'absolute', inset: 0, display: 'flex', overflow: 'hidden' }}>
+      {/* 左侧目录(内置为组件自身的左栏,不再 portal 到外部侧边栏) */}
+      <div style={{ width: 260, flex: 'none', overflow: 'auto', borderRight: '1px solid #ececec', background: '#fff' }}>
+        {directory}
+      </div>
+
+      {/* 右侧:本体网络图 + 悬浮控件 */}
+      <div style={{ flex: 1, position: 'relative', overflow: 'hidden' }}>
+        <div ref={boxRef} style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at 55% 42%,#fdfdfe,#f6f7f9)' }} />
+
+        {/* 筛选面板:按类型显示/隐藏 + 隐藏孤儿节点 */}
+        <div style={{ position: 'absolute', top: 12, left: 14, width: 236, zIndex: 4 }}>
+          <div style={{ background: '#fff', border: '1px solid #ececec', borderRadius: 10, padding: '8px 10px', boxShadow: '0 1px 8px rgba(0,0,0,.06)' }}>
+            <div style={{ display: 'flex', gap: 6, alignItems: 'center', flexWrap: 'wrap' }}>
+              <span style={{ fontSize: 11, color: '#a6a6ac' }}>显示</span>
+              {TYPES.map(([t, label]) => {
+                const hid = !!hiddenTypes[t]; const c = COL[t];
+                return (
+                  <span key={t} onClick={() => toggleType(t)} title={hid ? '点击显示' : '点击隐藏'}
+                    style={{ cursor: 'pointer', fontSize: 11.5, padding: '3px 9px', borderRadius: 12, userSelect: 'none', border: `1px solid ${hid ? '#e6e6e6' : c[1]}`, background: hid ? '#f4f4f5' : c[0], color: hid ? '#b4b4ba' : c[2], textDecoration: hid ? 'line-through' : 'none' }}>{label}</span>
+                );
+              })}
+            </div>
+            <label style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 7, fontSize: 12, color: '#52525b', cursor: 'pointer', userSelect: 'none' }}>
+              <input type="checkbox" checked={hideOrphans} onChange={(e) => setHideOrphans(e.target.checked)} style={{ cursor: 'pointer' }} /> 隐藏孤儿节点
+            </label>
+          </div>
+        </div>
+
+        <div style={{ position: 'absolute', bottom: 16, left: 14, fontSize: 11, color: '#c4c4cc', pointerEvents: 'none' }}>滚轮缩放 · 拖拽平移 · 单击节点看关系</div>
+        <div style={{ position: 'absolute', top: 12, right: 14, display: 'flex', flexDirection: 'column', gap: 6 }}>
+          <div style={btn} onClick={() => zoom(1.25)}>＋</div>
+          <div style={btn} onClick={() => zoom(1 / 1.25)}>－</div>
+          <div style={{ ...btn, fontSize: 13 }} onClick={fit} title="适应画布">⤢</div>
+        </div>
+
+        <div ref={tipRef} style={{ position: 'absolute', width: 282, background: '#fff', border: '1px solid #ececec', borderRadius: 12, padding: '12px 14px', boxShadow: '0 6px 24px rgba(0,0,0,.12)', pointerEvents: 'none', display: tip ? 'block' : 'none', zIndex: 5 }}>
+          {tip && (
+            <>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
+                <span style={{ fontSize: 10.5, fontWeight: 600, color: '#fff', background: COL[tip.type][1], padding: '2px 8px', borderRadius: 5 }}>{TYPE_CN[tip.type]}</span>
+                <span style={{ fontSize: 14.5, fontWeight: 700 }}>{tip.title}</span>
+              </div>
+              {tip.lines.map((l: any, i: number) => (<div key={i} style={{ fontSize: 12, color: '#52525b', lineHeight: 1.65 }}>{l}</div>))}
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/web/src/viz/OntologyCanvas.tsx b/web/src/viz/OntologyCanvas.tsx
new file mode 100644
index 0000000..91bb65b
--- /dev/null
+++ b/web/src/viz/OntologyCanvas.tsx
@@ -0,0 +1,55 @@
+import { useEffect, useState } from 'react'
+import { Spin, Alert, Button, Typography } from 'antd'
+import { ReloadOutlined } from '@ant-design/icons'
+import { loadOntology } from '../ontology/build'
+import type { Ontology } from '../ontology/types'
+import NetworkGraph from './NetworkGraph'
+import ERDiagram from './ERDiagram'
+import ProcessDiagram from './ProcessDiagram'
+
+const { Title, Text } = Typography
+
+const META: Record<string, { title: string; desc: string }> = {
+  network: { title: '本体网络图', desc: '对象 + 行为 + 规则 + 事件的关联网络（M1/M2/ME/MetaRule 动态合成）' },
+  er: { title: '数据结构图（ER）', desc: '聚合根/子实体的字段结构、外键引用与组合关系（M1 动态合成）' },
+  process: { title: '场景流程图（BPMN）', desc: '端到端场景流程（M4 flowSteps → bpmn-elk-layout 自动布局 → bpmn-js 渲染）' },
+}
+
+/** 可视化画布宿主：加载一次本体 IR，全高渲染选中的视图。 */
+export function OntologyCanvas({ which }: { which: 'network' | 'er' | 'process' }) {
+  const [onto, setOnto] = useState<Ontology | null>(null)
+  const [err, setErr] = useState('')
+  const [key, setKey] = useState(0)
+
+  useEffect(() => {
+    setOnto(null); setErr('')
+    loadOntology().then(setOnto).catch((e) => setErr(String(e?.message || e)))
+  }, [key])
+
+  const m = META[which]
+  return (
+    <div style={{ padding: 16 }}>
+      <div style={{ display: 'flex', alignItems: 'center', marginBottom: 10 }}>
+        <div>
+          <Title level={4} style={{ margin: 0 }}>{m.title}</Title>
+          <Text type="secondary" style={{ fontSize: 13 }}>{m.desc}</Text>
+        </div>
+        <div style={{ flex: 1 }} />
+        <Button icon={<ReloadOutlined />} onClick={() => setKey((k) => k + 1)}>刷新</Button>
+      </div>
+      <div style={{ position: 'relative', height: 'calc(100vh - 190px)', minHeight: 420, border: '1px solid #f0f0f0', borderRadius: 10, background: '#fff', overflow: 'hidden' }}>
+        {err ? (
+          <div style={{ padding: 24 }}><Alert type="error" showIcon message="加载本体失败" description={err} /></div>
+        ) : !onto ? (
+          <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Spin tip="合成本体视图…"><div style={{ width: 80, height: 40 }} /></Spin></div>
+        ) : which === 'network' ? (
+          <NetworkGraph ontology={onto} />
+        ) : which === 'er' ? (
+          <ERDiagram ontology={onto} />
+        ) : (
+          <ProcessDiagram ontology={onto} />
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/web/src/viz/ProcessDiagram.tsx b/web/src/viz/ProcessDiagram.tsx
new file mode 100644
index 0000000..21f1de8
--- /dev/null
+++ b/web/src/viz/ProcessDiagram.tsx
@@ -0,0 +1,216 @@
+// 场景流程图（BPMN）视图 —— 通用渲染引擎，数据全在前端合成，无后端依赖。
+//   ProcessModel(M4 flowSteps 投影) → toElkBpmn 出 ELK-BPMN JSON(含泳道语义)
+//   → bpmn-elk-layout(elkjs) 自动横向布局 → 按类型着色 → bpmn-js NavigatedViewer 渲染。
+//   点击任意节点/连线 → 用 detailMap(按 element.id 索引)弹出详情(完整条件、关联行为、网关分支等)。
+// 从 onto-app 的 BpmnDiagram.jsx 移植而来(JSX→TSX);唯一区别:ELK JSON + 详情表由本地
+// toElkBpmn / detailMap 合成,而非后端 api.getBpmn 拉取。
+import React, { useEffect, useRef, useState } from 'react'
+// @ts-ignore bpmn-js 的 NavigatedViewer 附带自身类型声明;此处兜底防止解析差异。
+import NavigatedViewer from 'bpmn-js/lib/NavigatedViewer'
+import { BpmnElkLayout } from 'bpmn-elk-layout'
+import 'bpmn-js/dist/assets/diagram-js.css'
+import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
+import type { Ontology } from '../ontology/types'
+import { toElkBpmn, detailMap } from '../ontology/bpmn'
+
+// 按 BPMN 元素类型上色(bpmn-js 认 bioc/color 两套 DI 着色扩展)。配色对齐本体网络图。
+const NODE_COLOR: Record<string, { fill: string; stroke: string }> = {
+  startEvent: { fill: '#e9f7ee', stroke: '#3f9d63' },
+  endEvent: { fill: '#fdecef', stroke: '#d6486a' },
+  intermediateCatchEvent: { fill: '#fbe3ef', stroke: '#c2528a' },
+  userTask: { fill: '#eef2fd', stroke: '#5b7fe0' },
+  task: { fill: '#eef2fd', stroke: '#5b7fe0' },
+  exclusiveGateway: { fill: '#fff4e3', stroke: '#e0944a' },
+  parallelGateway: { fill: '#fff4e3', stroke: '#e0944a' },
+}
+
+function colorize(xml: string): string {
+  const doc = new DOMParser().parseFromString(xml, 'application/xml')
+  const typeOf: Record<string, string> = {} // 元素 id -> BPMN 类型(从语义部分收集)
+  for (const el of Array.from(doc.getElementsByTagName('*'))) {
+    const id = el.getAttribute && el.getAttribute('id')
+    if (id && NODE_COLOR[el.localName]) typeOf[id] = el.localName
+  }
+  for (const el of Array.from(doc.getElementsByTagName('*'))) {
+    if (el.localName !== 'BPMNShape') continue
+    const be = el.getAttribute('bpmnElement')
+    const c = be ? NODE_COLOR[typeOf[be]] : undefined
+    if (!c) continue // 泳道/池保持白底
+    el.setAttribute('bioc:fill', c.fill)
+    el.setAttribute('bioc:stroke', c.stroke)
+    el.setAttribute('color:background-color', c.fill)
+    el.setAttribute('color:border-color', c.stroke)
+  }
+  const defs = doc.documentElement
+  defs.setAttribute('xmlns:bioc', 'http://bpmn.io/schema/bpmn/biocolor/1.0')
+  defs.setAttribute('xmlns:color', 'http://www.omg.org/spec/BPMN/non-normative/color/1.0')
+  return new XMLSerializer().serializeToString(doc)
+}
+
+export default function ProcessDiagram({ ontology }: { ontology: Ontology }) {
+  const boxRef = useRef<HTMLDivElement | null>(null)
+  const viewerRef = useRef<any>(null)
+  const xmlRef = useRef<string>('')
+  const [status, setStatus] = useState<'loading' | 'ok' | 'error'>('loading') // loading | ok | error
+  const [err, setErr] = useState('')
+  const [active, setActive] = useState(0) // 当前显示的场景下标
+  const [selected, setSelected] = useState<any>(null) // 点中的图元详情(节点/连线)
+
+  const scenes = ontology.processModels || []
+  const empty = scenes.length === 0
+
+  // 切本体时复位到第一张
+  useEffect(() => { setActive(0) }, [ontology])
+
+  useEffect(() => {
+    if (empty || !boxRef.current) return
+    let cancelled = false
+    const viewer: any = new NavigatedViewer({ container: boxRef.current })
+    viewerRef.current = viewer
+    setSelected(null)
+    ;(async () => {
+      try {
+        setStatus('loading')
+        const pm = scenes[active]
+        if (!pm) return
+        const elk = toElkBpmn(pm) // ProcessModel → ELK-BPMN JSON(前端合成,替代后端)
+        const details = detailMap(pm, ontology) // bpmn 元素 id → 点击详情(前端合成)
+        const laid = await new BpmnElkLayout().to_bpmn(elk) // elkjs 布局 → 带坐标+泳道的原生横向 BPMN XML
+        const xml = colorize(laid) // 只按类型着色(标签由布局库摆放)
+        if (cancelled) return
+        xmlRef.current = xml
+        await viewer.importXML(xml)
+        if (cancelled) return
+        viewer.get('canvas').zoom('fit-viewport', 'auto') // 'auto' = 缩放后在视口内居中(否则窄图会贴左)
+        // 点击节点/连线 → 查详情;点空白/泳道(无 details)则关闭面板
+        viewer.get('eventBus').on('element.click', (ev: any) => {
+          const d = details[ev.element?.id]
+          setSelected(d ? { ...d, _id: ev.element.id } : null)
+        })
+        setStatus('ok')
+      } catch (e: any) {
+        if (!cancelled) { setErr(String(e?.message || e)); setStatus('error') }
+      }
+    })()
+    return () => { cancelled = true; viewer.destroy() }
+  }, [ontology, active, empty])
+
+  const zoom = (f: number) => { const c = viewerRef.current?.get('canvas'); if (c) c.zoom(c.zoom() * f) }
+  const fit = () => { const c = viewerRef.current?.get('canvas'); if (c) c.zoom('fit-viewport', 'auto') }
+  const download = () => {
+    if (!xmlRef.current) return
+    const blob = new Blob([xmlRef.current], { type: 'application/xml' })
+    const a = document.createElement('a')
+    a.href = URL.createObjectURL(blob)
+    a.download = (scenes[active]?.name || 'process') + '.bpmn'
+    a.click()
+    URL.revokeObjectURL(a.href)
+  }
+
+  const btn: React.CSSProperties = { width: 30, height: 30, borderRadius: 8, border: '1px solid #e6e6e6', background: '#fff', color: '#52525b', fontSize: 16, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }
+
+  // ---- 详情面板 ----
+  const KIND_LABEL: Record<string, string> = { startEvent: '开始事件', endEvent: '结束事件', task: '任务', userTask: '任务', exclusiveGateway: '排他网关(分支判断)', parallelGateway: '并行网关', intermediateCatchEvent: '中间事件', sequenceFlow: '连线 / 分支' }
+  const dRow = (k: string, v: any, mono?: boolean) => (
+    <div style={{ marginBottom: 9 }}>
+      <div style={{ fontSize: 11, color: '#a0a0a6', marginBottom: 2 }}>{k}</div>
+      <div className={mono ? 'om-mono' : ''} style={{ fontSize: 12.5, color: '#27272a', whiteSpace: 'pre-wrap', lineHeight: 1.5 }}>{(v ?? '') !== '' ? v : '—'}</div>
+    </div>
+  )
+  const dList = (k: string, arr?: string[]) => (arr && arr.length > 0 ? (
+    <div style={{ marginBottom: 9 }}>
+      <div style={{ fontSize: 11, color: '#a0a0a6', marginBottom: 3 }}>{k}</div>
+      {arr.map((x, i) => <div key={i} className="om-mono" style={{ fontSize: 11.5, color: '#3f3f46', background: '#f7f7f9', borderRadius: 6, padding: '5px 8px', marginBottom: 4, whiteSpace: 'pre-wrap', lineHeight: 1.5 }}>{x}</div>)}
+    </div>
+  ) : null)
+  const renderDetailBody = (sel: any) => {
+    if (sel.kind === 'sequenceFlow') {
+      return (<>
+        {dRow('流向', `${sel.from} → ${sel.to}`)}
+        {sel.name ? dRow('分支标签', sel.name) : null}
+        {dRow('完整条件 (condition)', sel.condition, true)}
+        {!sel.condition ? <div style={{ fontSize: 12, color: '#a0a0a6' }}>这是一条无条件连线。</div> : null}
+      </>)
+    }
+    if (sel.kind === 'exclusiveGateway' || sel.kind === 'parallelGateway') {
+      return (
+        <div>
+          <div style={{ fontSize: 11, color: '#a0a0a6', marginBottom: 4 }}>分支({(sel.branches || []).length})</div>
+          {(sel.branches || []).map((b: any, i: number) => (
+            <div key={i} style={{ border: '1px solid #eee', borderRadius: 8, padding: '7px 9px', marginBottom: 6 }}>
+              <div style={{ fontSize: 12.5, fontWeight: 600, color: '#27272a' }}>{b.label || '(无标签)'} <span style={{ color: '#a0a0a6', fontWeight: 400 }}>→ {b.to}</span></div>
+              {b.condition ? <div className="om-mono" style={{ fontSize: 11.5, color: '#52525b', marginTop: 3, whiteSpace: 'pre-wrap', lineHeight: 1.5 }}>{b.condition}</div> : null}
+            </div>
+          ))}
+        </div>
+      )
+    }
+    const b = sel.behavior
+    if (b) {
+      return (<>
+        {dRow('关联行为', `${b.name}(${b.id})`)}
+        {dRow('行为类型', b.type === 'COMMAND' ? 'COMMAND(改状态)' : b.type)}
+        {b.commandType ? dRow('命令类型 (commandType)', b.commandType) : null}
+        {dRow('归属对象', b.owner)}
+        {b.description ? dRow('说明', b.description) : null}
+        {dList('前置条件', b.preconditions)}
+        {dList('后置赋值', b.effects)}
+        {dList('产出事件', b.produced_events)}
+        {dList('适用规则', b.applied_rules)}
+      </>)
+    }
+    return <div style={{ fontSize: 12, color: '#a0a0a6' }}>{sel.kind === 'startEvent' ? '流程开始。' : sel.kind === 'endEvent' ? '流程结束。' : '(无更多详情)'}</div>
+  }
+
+  if (empty) {
+    return (
+      <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#a0a0a6', fontSize: 14 }}>暂无可视化的场景流程</div>
+    )
+  }
+
+  return (
+    <div style={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>
+      <div ref={boxRef} style={{ position: 'absolute', inset: 0 }} />
+
+      {scenes.length > 1 && (
+        <div style={{ position: 'absolute', top: 12, left: 14, display: 'flex', flexWrap: 'wrap', gap: 6, maxWidth: 'calc(100% - 80px)', zIndex: 5 }}>
+          {scenes.map((pm, i) => (
+            <div key={pm.id} onClick={() => setActive(i)} title={pm.name}
+              style={{ padding: '6px 12px', fontSize: 12.5, borderRadius: 8, cursor: 'pointer', border: '1px solid ' + (i === active ? '#18181b' : '#e6e6e6'), background: i === active ? '#18181b' : '#fff', color: i === active ? '#fff' : '#52525b', fontWeight: i === active ? 600 : 500, whiteSpace: 'nowrap', boxShadow: '0 1px 3px rgba(0,0,0,.06)' }}>
+              {pm.name}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {status === 'loading' && (
+        <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#a0a0a6', fontSize: 14 }}>正在生成 BPMN 流程图…</div>
+      )}
+      {status === 'error' && (
+        <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#c0392b', fontSize: 13, padding: 24, textAlign: 'center' }}>流程图渲染失败:{err}</div>
+      )}
+
+      <div style={{ position: 'absolute', top: 12, right: 14, display: 'flex', flexDirection: 'column', gap: 6 }}>
+        <div style={btn} onClick={() => zoom(1.2)}>＋</div>
+        <div style={btn} onClick={() => zoom(1 / 1.2)}>－</div>
+        <div style={{ ...btn, fontSize: 13 }} onClick={fit} title="适应画布">⤢</div>
+        <div style={{ ...btn, fontSize: 15 }} onClick={download} title="导出 .bpmn 文件">⬇</div>
+      </div>
+
+      {selected && (
+        <div style={{ position: 'absolute', top: 12, right: 56, width: 300, maxHeight: 'calc(100% - 24px)', overflowY: 'auto', background: '#fff', border: '1px solid #e6e6e6', borderRadius: 12, boxShadow: '0 8px 28px rgba(0,0,0,.14)', zIndex: 8, padding: '14px 16px' }}>
+          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 8, marginBottom: 10 }}>
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <div style={{ fontSize: 15, fontWeight: 700, color: '#18181b' }}>{selected.name || selected.kindLabel || KIND_LABEL[selected.kind] || selected.kind}</div>
+              <div style={{ fontSize: 11.5, color: '#a0a0a6', marginTop: 2 }}>{(selected.kindLabel || KIND_LABEL[selected.kind] || selected.kind)}{selected.lane ? ' · ' + selected.lane : ''}</div>
+            </div>
+            <div onClick={() => setSelected(null)} title="关闭" style={{ cursor: 'pointer', color: '#a0a0a6', fontSize: 18, lineHeight: 1, flex: 'none' }}>✕</div>
+          </div>
+          {renderDetailBody(selected)}
+        </div>
+      )}
+
+      <div style={{ position: 'absolute', bottom: 14, left: 14, fontSize: 11, color: '#c4c4cc', pointerEvents: 'none' }}>滚轮缩放 · 拖拽平移 · 点击节点/连线看详情 · 由 bpmn-js 渲染</div>
+    </div>
+  )
+}
diff --git a/web/vite.config.ts b/web/vite.config.ts
index 0206bb1..d42419e 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -8,7 +8,7 @@ export default defineConfig({
     port: 5174,
     proxy: {
       '/api': {
-        target: 'http://localhost:8091',
+        target: 'http://localhost:8080',
         changeOrigin: true,
       },
     },
--
libgit2 0.22.2