LogicFlow 在 React/Vue 中的完整安装使用指南

以下是 LogicFlow 在 React/Vue 中的完整安装使用指南，包含 核心配置 与 实战示例：

一、基础安装

# 核心库安装
npm install @logicflow/core --save

扩展插件（按需）

npm install @logicflow/extension --save # 包含选区、小地图等
二、核心使用步骤

1. 创建实例

#javascript 
import LogicFlow from "@logicflow/core";
import "@logicflow/core/dist/style/index.css"; // 必须引入样式

// 初始化配置
const lf = new LogicFlow({
   
  container: document.getElementById("container"), // 容器ID
  grid: true,  // 显示网格
  keyboard: {
    enabled: true }  // 启用键盘快捷键
});

// 渲染画布
lf.render();

2. 核心概念
   Node：基础节点（矩形/圆形等）

Edge：连接线（直线/折线等）

Data Driven：通过 lf.render(jsonData) 驱动视图

三、React 集成示例

#jsx 
// LogicFlowReact.jsx
import {
    useEffect, useRef } from 'react';
import LogicFlow from '@logicflow/core';

export default function FlowDiagram() {
   
  const containerRef = useRef(null);
  
  useEffect(() => {
   
    const lf = new LogicFlow({
   
      container: containerRef.current,
      width: 800,
      height: 600
    }