LogicFlow 开源项目教程

LogicFlow 开源项目教程

LogicFlowA flow chart editing framework focusing on business customization. 专注于业务自定义的流程图编辑框架，支持实现脑图、ER图、UML、工作流等各种图编辑场景。项目地址:https://gitcode.com/gh_mirrors/lo/LogicFlow

项目介绍

LogicFlow 是一个流程图编辑框架，提供了一系列必要的功能，用于流程图的交互和编辑。它具有高度的可扩展性，支持自定义节点和插件扩展机制，使得我们能够快速满足业务系统中类流程图的需求。LogicFlow 的核心特点包括高扩展性、独立完整的流程图表达能力，以及支持多种扩展组件和数据转换适配器。

项目快速启动

安装

首先，通过 npm 或 yarn 安装 LogicFlow：

# 使用 npm 安装
npm install @logicflow/core @logicflow/extension --save

# 使用 yarn 安装
yarn add @logicflow/core @logicflow/extension

基本使用

以下是一个简单的示例，展示如何创建一个流程图并渲染节点和边：

<!-- 创建容器 -->
<div id="container"></div>

<script type="module">
  // 准备数据
  const data = {
    nodes: [
      { id: '21', type: 'rect', x: 100, y: 200, text: '矩形节点' },
      { id: '50', type: 'circle', x: 300, y: 400, text: '圆形节点' }
    ],
    edges: [
      { type: 'polyline', sourceNodeId: '50', targetNodeId: '21' }
    ]
  };

  // 渲染实例
  import LogicFlow from '@logicflow/core';
  const lf = new LogicFlow({
    container: document.querySelector('#container'),
    width: 700,
    height: 600
  });
  lf.render(data);
</script>

应用案例和最佳实践

案例一：审批流程图

LogicFlow 可以用于创建复杂的审批流程图。以下是一个简单的审批流程图示例：

<div id="approve-container"></div>

<script type="module">
  import LogicFlow from '@logicflow/core';
  import { ApproveExtension } from '@logicflow/extension';

  LogicFlow.use(ApproveExtension);

  const data = {
    nodes: [
      { id: '1', type: 'rect', x: 100, y: 100, text: '开始' },
      { id: '2', type: 'rect', x: 300, y: 100, text: '审批' },
      { id: '3', type: 'rect', x: 500, y: 100, text: '结束' }
    ],
    edges: [
      { type: 'polyline', sourceNodeId: '1', targetNodeId: '2' },
      { type: 'polyline', sourceNodeId: '2', targetNodeId: '3' }
    ]
  };

  const lf = new LogicFlow({
    container: document.querySelector('#approve-container'),
    width: 700,
    height: 600
  });
  lf.render(data);
</script>

案例二：自定义节点和边

LogicFlow 支持自定义节点和边的样式和行为。以下是一个自定义节点和边的示例：

<div id="custom-container"></div>

<script type="module">
  import LogicFlow from '@logicflow/core';

  const lf = new LogicFlow({
    container: document.querySelector('#custom-container'),
    width: 700,
    height: 600
  });

  lf.register({
    type: 'custom-rect',
    model: {
      getTextStyle() {
        return {
          fill: '#fff',
          fontWeight: 'bold'
        };
      }
    },
    view: {}
  });

  const data = {
    nodes: [
      { id: '1', type: 'custom-rect', x: 100, y: 100, text: '自定义节点' }
    ],
    edges: [
      { type: 'polyline', sourceNodeId: '1', targetNodeId: '1' }
    ]
  };

LogicFlowA flow chart editing framework focusing on business customization. 专注于业务自定义的流程图编辑框架，支持实现脑图、ER图、UML、工作流等各种图编辑场景。项目地址:https://gitcode.com/gh_mirrors/lo/LogicFlow