@yh-ui/flow 1.0.7 → 1.0.9

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024-present YH-UI Team
+Copyright (c) 2026 YH-UI Team
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,234 +1,68 @@
 # @yh-ui/flow
 
-<p align="center">
-  <img src="https://raw.githubusercontent.com/1079161148/yh-ui/main/docs/public/logo.svg" width="100" height="100" alt="YH-UI Logo">
-</p>
+YH-UI 的流程图和节点编辑包，适合搭建工作流编排、审批流、AI Agent 流程、BPMN 草图、数据处理链路和可视化配置平台。
 
-<h3 align="center">YH-UI Flow — 高性能流程图 & 节点编辑器</h3>
+[Documentation](https://1079161148.github.io/yh-ui/flow/) | [GitHub](https://github.com/1079161148/yh-ui)
 
-<p align="center">
-  可视化流程图组件 · 拖拽连线 · 自定义节点 · 内置布局算法 · 完整 SSR 支持
-</p>
+## Highlights
 
-<p align="center">
-  <a href="https://www.npmjs.com/package/@yh-ui/flow">
-    <img src="https://img.shields.io/npm/v/@yh-ui/flow.svg?style=flat-square&colorB=409eff" alt="npm version">
-  </a>
-  <a href="https://www.npmjs.com/package/@yh-ui/flow">
-    <img src="https://img.shields.io/npm/dm/@yh-ui/flow.svg?style=flat-square&colorB=409eff" alt="npm downloads">
-  </a>
-  <a href="https://github.com/1079161148/yh-ui/blob/main/LICENSE">
-    <img src="https://img.shields.io/npm/l/@yh-ui/flow.svg?style=flat-square" alt="license">
-  </a>
-</p>
+- 可视化流程画布：节点、连线、缩放、拖拽、选择、视口适配和画布交互由核心组件统一管理。
+- 内置节点类型：基础节点、输入节点、输出节点、分组节点、菱形节点、数据库节点，以及 BPMN 和 AI Workflow 节点库。
+- 多种连线：基础线、平滑线、阶梯线、贝塞尔线和数据流连线，适合表达不同业务语义。
+- 编辑器辅助组件：节点编辑面板、连线编辑面板、AI 节点编辑面板、MiniMap、Controls、Background 可按需组合。
+- 可扩展架构：导出 types、core、utils、plugins，方便封装自己的节点库、连线策略和编辑侧栏。
+- Vue 和 TypeScript 原生体验：节点可使用 Vue 组件表达，流程数据有类型约束。
 
----
-
-## ✨ 特性
-
-- 🚀 **高性能渲染** — 基于 SVG + Canvas 混合渲染，轻松支持 1000+ 节点
-- 🎯 **拖拽连线** — 直觉式交互，支持多种连线类型（直线、折线、贝塞尔曲线）
-- 🧩 **自定义节点** — 完全自定义节点外观，支持复杂 Vue 组件作为节点
-- 📐 **内置布局算法** — 支持 DAG 有向无环图自动布局（dagre）
-- 🔌 **插件化扩展** — 迷你地图、工具栏、右键菜单等均为可选插件
-- 🌐 **SSR 安全** — 服务端渲染兼容，无 `window`/`document` 依赖问题
-- 🔒 **完整 TypeScript** — 所有 API 均有精确类型定义
-
----
-
-## 📦 安装
+## Install
 
 ```bash
-# pnpm（推荐）
 pnpm add @yh-ui/flow
-
-# npm
-npm install @yh-ui/flow
 ```
 
----
-
-## 🔨 快速开始
-
-### 基础流程图
+## Basic Usage
 
 ```vue
 <script setup lang="ts">
-import { YhFlow, YhFlowNode, YhFlowEdge } from '@yh-ui/flow'
-import '@yh-ui/flow/dist/style.css'
-import type { FlowNode, FlowEdge } from '@yh-ui/flow'
+import { Flow, Controls, FlowBackground, Minimap } from '@yh-ui/flow'
+import type { FlowEdge, FlowNode } from '@yh-ui/flow'
 
 const nodes: FlowNode[] = [
-  { id: '1', type: 'input', label: '开始', position: { x: 250, y: 0 } },
-  { id: '2', label: '处理数据', position: { x: 100, y: 100 } },
-  { id: '3', label: '校验结果', position: { x: 400, y: 100 } },
-  { id: '4', type: 'output', label: '完成', position: { x: 250, y: 200 } }
+  { id: 'start', type: 'input', label: 'Start', position: { x: 80, y: 80 } },
+  { id: 'task', label: 'Process order', position: { x: 280, y: 80 } },
+  { id: 'done', type: 'output', label: 'Done', position: { x: 500, y: 80 } }
 ]
 
 const edges: FlowEdge[] = [
-  { id: 'e1-2', source: '1', target: '2' },
-  { id: 'e1-3', source: '1', target: '3' },
-  { id: 'e2-4', source: '2', target: '4' },
-  { id: 'e3-4', source: '3', target: '4' }
+  { id: 'e-start-task', source: 'start', target: 'task' },
+  { id: 'e-task-done', source: 'task', target: 'done' }
 ]
 </script>
 
 <template>
-  <YhFlow :nodes="nodes" :edges="edges" style="width: 100%; height: 600px">
-    <!-- 迷你地图插件 -->
-    <YhFlowMiniMap />
-    <!-- 工具栏插件 -->
-    <YhFlowControls />
-    <!-- 背景网格 -->
-    <YhFlowBackground variant="dots" />
-  </YhFlow>
-</template>
-```
-
-### 自定义节点
-
-```vue
-<script setup lang="ts">
-// CustomNode.vue — 自定义节点组件
-import { YhFlowHandle } from '@yh-ui/flow'
-defineProps<{ data: { label: string; status: 'success' | 'error' | 'pending' } }>()
-</script>
-
-<template>
-  <div class="custom-node" :class="`status-${data.status}`">
-    <!-- 输入连接点 -->
-    <YhFlowHandle type="target" position="top" />
-    <div class="node-content">
-      <span class="status-icon">{{ data.status === 'success' ? '✅' : '⏳' }}</span>
-      <span>{{ data.label }}</span>
-    </div>
-    <!-- 输出连接点 -->
-    <YhFlowHandle type="source" position="bottom" />
-  </div>
+  <Flow :nodes="nodes" :edges="edges" fit-view style="height: 560px">
+    <Minimap />
+    <Controls />
+    <FlowBackground />
+  </Flow>
 </template>
 ```
 
-```vue
-<script setup lang="ts">
-import { YhFlow } from '@yh-ui/flow'
-import CustomNode from './CustomNode.vue'
-
-// 注册自定义节点类型
-const nodeTypes = { custom: CustomNode }
-
-const nodes = [
-  {
-    id: '1',
-    type: 'custom',
-    data: { label: '数据采集', status: 'success' },
-    position: { x: 0, y: 0 }
-  },
-  {
-    id: '2',
-    type: 'custom',
-    data: { label: '数据处理', status: 'pending' },
-    position: { x: 200, y: 100 }
-  }
-]
-</script>
-
-<template>
-  <YhFlow :nodes="nodes" :node-types="nodeTypes" style="height: 500px" />
-</template>
-```
-
-### 自动布局（dagre）
-
-```ts
-import { useFlowLayout } from '@yh-ui/flow'
-import type { FlowNode, FlowEdge } from '@yh-ui/flow'
-
-const { autoLayout } = useFlowLayout()
-
-// 对已有节点和连线自动计算坐标
-const { nodes: layoutedNodes, edges: layoutedEdges } = autoLayout(nodes, edges, {
-  direction: 'TB', // 'TB'（上→下）| 'LR'（左→右）
-  nodeSpacing: 50,
-  rankSpacing: 100
-})
-```
-
----
-
-## 📚 组件 API
-
-### `YhFlow` 主组件
-
-| 属性                    | 类型                        | 默认值        | 说明               |
-| ----------------------- | --------------------------- | ------------- | ------------------ |
-| `nodes`                 | `FlowNode[]`                | `[]`          | 节点数据           |
-| `edges`                 | `FlowEdge[]`                | `[]`          | 连线数据           |
-| `nodeTypes`             | `Record<string, Component>` | `{}`          | 自定义节点类型     |
-| `edgeTypes`             | `Record<string, Component>` | `{}`          | 自定义连线类型     |
-| `fitView`               | `boolean`                   | `false`       | 初始化时自适应视图 |
-| `minZoom`               | `number`                    | `0.5`         | 最小缩放比例       |
-| `maxZoom`               | `number`                    | `2`           | 最大缩放比例       |
-| `snapToGrid`            | `boolean`                   | `false`       | 是否开启网格对齐   |
-| `snapGrid`              | `[number, number]`          | `[15, 15]`    | 网格对齐尺寸       |
-| `selectable`            | `boolean`                   | `true`        | 节点是否可选中     |
-| `multiSelectionKeyCode` | `string`                    | `'Meta'`      | 多选按键           |
-| `deleteKeyCode`         | `string`                    | `'Backspace'` | 删除按键           |
-
-### 事件
-
-| 事件            | 说明                       |
-| --------------- | -------------------------- |
-| `@node-click`   | 点击节点                   |
-| `@edge-click`   | 点击连线                   |
-| `@nodes-change` | 节点变更（移动/选中/删除） |
-| `@edges-change` | 连线变更                   |
-| `@connect`      | 建立新连接                 |
-| `@pane-click`   | 点击画布空白区             |
-
-### 插槽
-
-| 插槽           | 说明                                 |
-| -------------- | ------------------------------------ |
-| `default`      | 插入插件组件（MiniMap、Controls 等） |
-| `node-toolbar` | 节点工具栏                           |
-
----
-
-## 🔌 可用插件
-
-```vue
-<YhFlow>
-  <!-- 迷你地图 -->
-  <YhFlowMiniMap position="bottom-right" />
-
-  <!-- 缩放控制栏 -->
-  <YhFlowControls position="bottom-left" :show-fit-view="true" />
-
-  <!-- 背景 -->
-  <YhFlowBackground variant="dots" gap="16" color="#aaa" />
-</YhFlow>
-```
-
----
-
-## ⚠️ 注意事项
-
-- **容器需要固定高度**：`YhFlow` 需要父容器有明确的 `height`，否则无法正确渲染
-- **SSR**：在 Nuxt 3 中需使用 `<ClientOnly>` 包裹或设置 `ssr: false`
-  ```vue
-  <ClientOnly>
-    <YhFlow :nodes="nodes" :edges="edges" style="height: 600px" />
-  </ClientOnly>
-  ```
-- **样式**：需手动引入 `@yh-ui/flow/dist/style.css`，或通过 `@yh-ui/nuxt` 自动注入
+## Built-In Exports
 
----
+| Area    | Exports                                                                                         |
+| ------- | ----------------------------------------------------------------------------------------------- |
+| Canvas  | `Flow`, `Minimap`, `Controls`, `FlowBackground`                                                 |
+| Nodes   | `BaseNode`, `InputNode`, `OutputNode`, `GroupNode`, `CustomNode`, `DiamondNode`, `DatabaseNode` |
+| Edges   | `BaseEdge`, `SmoothEdge`, `StepEdge`, `BezierEdge`, `DataFlowEdge`                              |
+| Editing | `NodeEditPanel`, `EdgeEditPanel`, `AiNodeEditPanel`, `NodeToolbar`, `NodeResizer`               |
+| Presets | BPMN nodes, AI workflow nodes, registration helpers                                             |
 
-## 🔗 相关资源
+## Tips
 
-- [📖 官方文档 — Flow 组件](https://1079161148.github.io/yh-ui/components/flow)
-- [📦 GitHub 仓库](https://github.com/1079161148/yh-ui)
+- Give the canvas an explicit height; otherwise the editor cannot calculate the viewport.
+- In Nuxt or SSR pages, render browser-only editing surfaces inside `<ClientOnly>` when they depend on pointer or canvas APIs.
+- Keep node data serializable if you plan to persist workflows or send them to a backend.
 
-## 📄 开源协议
+## License
 
-MIT License © 2024-present YH-UI Team
+MIT

package/dist/Flow.vue

@@ -19,6 +19,7 @@
     <div class="yh-flow__content" :style="contentStyle">
       <!-- Edges -->
       <EdgeRenderer
+        :flow-id="flowDomId"
         :edges="edgesRef || []"
         :nodes="nodesRef || []"
         :edge-types="edgeTypes"
@@ -44,6 +45,7 @@
 
       <!-- Nodes -->
       <NodeRenderer
+        :flow-id="flowDomId"
         :nodes="visibleNodes || []"
         :node-types="nodeTypes"
         :transform="viewportRef"
@@ -98,6 +100,7 @@
     <!-- 普通节点使用基础编辑面板 -->
     <NodeEditPanel
       v-else
+      :flow-id="flowDomId"
       :node="editingNode"
       :visible="showNodeEditPanel"
       @update="handleNodeEditUpdate"
@@ -116,7 +119,7 @@
 </template>
 
 <script setup>
-import { ref, computed, watch, onMounted, onBeforeUnmount, shallowRef } from "vue";
+import { ref, computed, watch, onMounted, onBeforeUnmount, shallowRef, useId } from "vue";
 if (typeof window !== "undefined") window.__YH_FLOW_VERSION__ = "1.0.1";
 import EdgeRenderer from "./renderer/EdgeRenderer.vue";
 import EdgeHandlesRenderer from "./renderer/EdgeHandlesRenderer.vue";
@@ -154,6 +157,7 @@ import {
 import { provideFlowContext } from "./core/FlowContext";
 import { createEventBus } from "./utils/event-bus";
 import { PluginManager } from "./plugins/plugin";
+const flowDomId = `yh-flow-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
 const validateConnection = (sourceNode, targetNode, connection) => {
   const basicResult = isValidConnection(sourceNode, targetNode, connection);
   if (!basicResult.isValid) {

package/dist/components/NodeEditPanel.d.vue.ts

@@ -1,5 +1,6 @@
 import type { Node, NodeData } from '../types';
 type __VLS_Props = {
+    flowId?: string;
     node: Node | null;
     visible: boolean;
 };

package/dist/components/NodeEditPanel.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { ref, watch } from "vue";
 const props = defineProps({
+  flowId: { type: String, required: false },
   node: { type: [Object, null], required: true },
   visible: { type: Boolean, required: true }
 });
@@ -9,6 +10,17 @@ const localNode = ref({
   label: "",
   description: ""
 });
+const escapeSelectorValue = (value) => {
+  return CSS.escape ? CSS.escape(value) : value.replace(/["\\]/g, "\\$&");
+};
+const getNodeElement = (nodeId) => {
+  if (typeof document === "undefined") return null;
+  if (props.flowId) {
+    const scoped = document.getElementById(`${props.flowId}-node-${nodeId}`);
+    if (scoped) return scoped;
+  }
+  return document.querySelector(`[data-node-id="${escapeSelectorValue(nodeId)}"]`);
+};
 watch(
   () => props.node,
   (node) => {
@@ -20,8 +32,8 @@ watch(
         description: data.description || data.desc || "",
         labelColor: node.labelColor || "#303133",
         descriptionColor: node.descriptionColor || "#909399",
-        width: node.width || document.getElementById(`node-${node.id}`)?.offsetWidth || 150,
-        height: node.height || document.getElementById(`node-${node.id}`)?.offsetHeight || 40,
+        width: node.width || getNodeElement(node.id)?.offsetWidth || 150,
+        height: node.height || getNodeElement(node.id)?.offsetHeight || 40,
         type: node.type
       };
     }

package/dist/components/NodeEditPanel.vue.d.ts

@@ -1,5 +1,6 @@
 import type { Node, NodeData } from '../types';
 type __VLS_Props = {
+    flowId?: string;
     node: Node | null;
     visible: boolean;
 };

package/dist/components/nodes/NodeResizer.d.vue.ts

@@ -1,5 +1,6 @@
 type __VLS_Props = {
     nodeId: string;
+    flowId?: string;
     selected?: boolean;
     minWidth?: number;
     minHeight?: number;

package/dist/components/nodes/NodeResizer.vue

@@ -16,6 +16,7 @@ import { computed } from "vue";
 import { useFlowContext } from "../../core/FlowContext";
 const props = defineProps({
   nodeId: { type: String, required: true },
+  flowId: { type: String, required: false },
   selected: { type: Boolean, required: false },
   minWidth: { type: Number, required: false },
   minHeight: { type: Number, required: false },
@@ -25,6 +26,18 @@ const flow = useFlowContext();
 const emit = defineEmits(["resize", "resizeStart", "resizeEnd"]);
 const isVisible = computed(() => props.selected);
 const handles = ["n", "s", "e", "w", "ne", "nw", "se", "sw"];
+const escapeSelectorValue = (value) => {
+  return CSS.escape ? CSS.escape(value) : value.replace(/["\\]/g, "\\$&");
+};
+const getNodeElement = () => {
+  if (props.flowId) {
+    const scoped = document.getElementById(`${props.flowId}-node-${props.nodeId}`);
+    if (scoped) return scoped;
+  }
+  return document.querySelector(
+    `[data-node-id="${escapeSelectorValue(props.nodeId)}"]`
+  );
+};
 let startX = 0;
 let startY = 0;
 let lastX = 0;
@@ -39,7 +52,7 @@ const onResizeStart = (event, handle) => {
   lastX = event.clientX;
   lastY = event.clientY;
   currentHandle = handle;
-  const nodeEl = document.getElementById(`node-${props.nodeId}`);
+  const nodeEl = getNodeElement();
   if (!nodeEl) return;
   startWidth = nodeEl.offsetWidth;
   startHeight = nodeEl.offsetHeight;

package/dist/components/nodes/NodeResizer.vue.d.ts

@@ -1,5 +1,6 @@
 type __VLS_Props = {
     nodeId: string;
+    flowId?: string;
     selected?: boolean;
     minWidth?: number;
     minHeight?: number;

package/dist/components/nodes/NodeToolbar.d.vue.ts

@@ -1,6 +1,7 @@
 import type { Position } from '../../types';
 type __VLS_Props = {
     nodeId: string;
+    flowId?: string;
     selected?: boolean;
     position?: Position;
     offset?: number;
@@ -20,6 +21,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
     onCopy?: (() => any) | undefined;
 }>, {
     position: Position;
+    flowId: string;
     offset: number;
     teleportTo: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/nodes/NodeToolbar.vue

@@ -23,6 +23,7 @@
 import { computed, ref, onMounted, onBeforeUnmount, watch } from "vue";
 const props = defineProps({
   nodeId: { type: String, required: true },
+  flowId: { type: String, required: false, default: void 0 },
   selected: { type: Boolean, required: false },
   position: { type: String, required: false, default: "top" },
   offset: { type: Number, required: false, default: 10 },
@@ -40,9 +41,21 @@ const toolbarStyle = ref({
 });
 const teleportTarget = computed(() => props.teleportTo);
 let rafId = 0;
+const escapeSelectorValue = (value) => {
+  return CSS.escape ? CSS.escape(value) : value.replace(/["\\]/g, "\\$&");
+};
+const getNodeElement = () => {
+  if (props.flowId) {
+    const scoped = document.getElementById(`${props.flowId}-node-${props.nodeId}`);
+    if (scoped) return scoped;
+  }
+  return document.querySelector(
+    `[data-node-id="${escapeSelectorValue(props.nodeId)}"]`
+  );
+};
 const updatePosition = () => {
   if (!isVisible.value) return;
-  const nodeEl = document.getElementById(`node-${props.nodeId}`);
+  const nodeEl = getNodeElement();
   if (!nodeEl) {
     rafId = requestAnimationFrame(updatePosition);
     return;

package/dist/components/nodes/NodeToolbar.vue.d.ts

@@ -1,6 +1,7 @@
 import type { Position } from '../../types';
 type __VLS_Props = {
     nodeId: string;
+    flowId?: string;
     selected?: boolean;
     position?: Position;
     offset?: number;
@@ -20,6 +21,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
     onCopy?: (() => any) | undefined;
 }>, {
     position: Position;
+    flowId: string;
     offset: number;
     teleportTo: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/renderer/EdgeRenderer.d.vue.ts

@@ -1,5 +1,6 @@
 import type { Edge, Node, HandleType, EdgeTypes } from '../types';
 type __VLS_Props = {
+    flowId: string;
     edges: Edge[];
     nodes: Node[];
     edgeTypes?: EdgeTypes;

package/dist/renderer/EdgeRenderer.vue

@@ -14,11 +14,7 @@
   >
     <defs>
       <!-- Dynamic masks to create a true gap in the line behind the label -->
-      <mask
-        v-for="ed in edgeData"
-        :key="`mask-${ed.edge.id}`"
-        :id="`yh-mask-${ed.edge.id.replace(/\s/g, '')}`"
-      >
+      <mask v-for="ed in edgeData" :key="`mask-${ed.edge.id}`" :id="getMaskId(ed.edge.id)">
         <rect x="-5000" y="-5000" width="10000" height="10000" fill="white" />
         <rect
           :x="ed.labelX - ed.labelWidth / 2 - 4"
@@ -75,7 +71,7 @@
   'yh-flow-edge-path': true,
   'is-animated': ed.edge.animated
 }"
-            :mask="ed.edge.label ? `url(#yh-mask-${ed.edge.id.replace(/\s/g, '')})` : void 0"
+            :mask="ed.edge.label ? `url(#${getMaskId(ed.edge.id)})` : void 0"
             :style="{
   pointerEvents: 'none',
   transition: 'stroke 0.2s, stroke-width 0.2s',
@@ -117,6 +113,7 @@ import { computed } from "vue";
 import { getEdgePath, getEdgeCenter, getHandlePosition } from "../utils/edge";
 import { getCustomEdge } from "../utils/custom-types";
 const props = defineProps({
+  flowId: { type: String, required: true },
   edges: { type: Array, required: true },
   nodes: { type: Array, required: true },
   edgeTypes: { type: Object, required: false },
@@ -130,6 +127,7 @@ const getComponent = (type) => {
   }
   return getCustomEdge(type || "default")?.component;
 };
+const getMaskId = (edgeId) => `${props.flowId}-yh-mask-${edgeId.replace(/[^a-zA-Z0-9_-]/g, "")}`;
 const emit = defineEmits(["edge-click", "edge-dblclick", "edge-contextmenu", "edge-update-start"]);
 const nodeMap = computed(() => {
   const m = /* @__PURE__ */ new Map();

package/dist/renderer/EdgeRenderer.vue.d.ts

@@ -1,5 +1,6 @@
 import type { Edge, Node, HandleType, EdgeTypes } from '../types';
 type __VLS_Props = {
+    flowId: string;
     edges: Edge[];
     nodes: Node[];
     edgeTypes?: EdgeTypes;

package/dist/renderer/NodeRenderer.d.vue.ts

@@ -1,6 +1,7 @@
 import type { Node, HandleType, NodeTypes } from '../types';
 type __VLS_Props = {
     nodes: Node[];
+    flowId: string;
     nodeTypes?: NodeTypes;
     transform: {
         x: number;

package/dist/renderer/NodeRenderer.vue

@@ -3,7 +3,7 @@
     <div
       v-for="node in visibleNodes"
       :key="node.id"
-      :id="`node-${node.id}`"
+      :id="getNodeDomId(node.id)"
       class="yh-flow-node"
       :class="{
   'is-selected': node.selected,
@@ -12,6 +12,7 @@
   [`type-${node.type}`]: true
 }"
       :style="getNodeStyle(node)"
+      :data-node-id="node.id"
       @mousedown="handleNodeMouseDown($event, node)"
       @click="handleNodeClick($event, node)"
       @dblclick="handleNodeDblClick($event, node)"
@@ -68,6 +69,7 @@ import DiamondNode from "../components/nodes/DiamondNode.vue";
 import DatabaseNode from "../components/nodes/DatabaseNode.vue";
 const props = defineProps({
   nodes: { type: Array, required: true },
+  flowId: { type: String, required: true },
   nodeTypes: { type: Object, required: false, default: () => ({}) },
   transform: { type: Object, required: true },
   draggable: { type: Boolean, required: false, default: true },
@@ -86,6 +88,7 @@ const getComponent = (type) => {
 const visibleNodes = computed(() => {
   return props.nodes.filter((n) => !n.hidden);
 });
+const getNodeDomId = (nodeId) => `${props.flowId}-node-${nodeId}`;
 const getNodeStyle = (node) => {
   const width = node.width || 150;
   const height = node.height || 40;

package/dist/renderer/NodeRenderer.vue.d.ts

@@ -1,6 +1,7 @@
 import type { Node, HandleType, NodeTypes } from '../types';
 type __VLS_Props = {
     nodes: Node[];
+    flowId: string;
     nodeTypes?: NodeTypes;
     transform: {
         x: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yh-ui/flow",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "YH-UI High-performance Flow Chart Component",
   "type": "module",
   "sideEffects": false,
@@ -17,14 +17,15 @@
       "types": "./dist/*.d.ts",
       "import": "./dist/*.mjs",
       "require": "./dist/*.cjs"
-    }
+    },
+    "./package.json": "./package.json"
   },
   "files": [
     "dist"
   ],
   "dependencies": {
-    "@yh-ui/utils": "^1.0.7",
-    "@yh-ui/hooks": "^1.0.7"
+    "@yh-ui/utils": "^1.0.9",
+    "@yh-ui/hooks": "^1.0.9"
   },
   "devDependencies": {
     "vue": "^3.5.27",