LogicFlow on GitHub (didi/LogicFlow)

LogicFlow README

简体中文 | English

LogicFlow 是一款流程图编辑框架，提供了一系列流程图交互、编辑所必需的功能和简单灵活的节点自定义、插件等拓展机制，方便我们快速在业务系统内满足类流程图的需求。

核心能力

可视化模型：通过 LogicFlow 提供的直观可视化界面，用户可以轻松创建、编辑和管理复杂的逻辑流程图。
高可定制性：用户可以根据自己的需要定制节点、连接器和样式，创建符合特定用例的定制逻辑流程图。
灵活易拓展: 内置提供丰富的插件，用户也可根据自身需求定制复杂插件实现业务需求。
自执行引擎: 执行引擎支持浏览器端执行流程图逻辑，为无代码执行提供新思路。
数据可转换：支持 LogicFlow 数据与 BPMN、Turbo 等各种后端执行引擎数据结构转换能力。

安装

# npm
$ npm install @logicflow/core @logicflow/extension --save

# yarn
$ yarn add @logicflow/core @logicflow/extension

# pnpm
$ pnpm add @logicflow/core @logicflow/extension

AI 编程支持

LogicFlow 为 AI 编程工具提供了随 npm 包发布的本地文档。@logicflow/[email protected] 及以上版本会包含这些文档。安装或升级后，可以把下面这段提示词复制给你的 AI Agent，让它在实现 LogicFlow 功能前先查官方文档。

更多说明请查看 AI 编程支持。

<!-- BEGIN:logicflow-agent-rules -->
# LogicFlow Agent Rules

LogicFlow documentation is available at:

- `node_modules/@logicflow/core/dist/docs/`

Package roles:

- `@logicflow/core`: core graph editor runtime, including canvas, nodes, edges, models, events, rendering, themes, and basic interactions.
- `@logicflow/extension`: official plugins for common product features.
- `@logicflow/layout`: official layout plugins for automatic graph layout.

The docs for `@logicflow/extension` and `@logicflow/layout` are included under:

- `node_modules/@logicflow/core/dist/docs/tutorial/extension/`

Before implementing any LogicFlow feature, check the local docs first to see whether LogicFlow already provides a built-in, extension, or layout capability. If it does, prefer the documented official capability instead of reimplementing it from scratch.

If an official package is needed but not installed, ask the user before installing it.
<!-- END:logicflow-agent-rules -->

快速上手

<!-- LogicFlow 容器 DOM-->
<div id="container"></div>;

// 准备数据
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',
    },
  ],
};
// 渲染画布
const lf = new LogicFlow({
  container: document.querySelector('#container'),
  width: 700,
  height: 600,
});

lf.render(data);

本地开发

# 安装项目依赖（prepare 会自动跑 build:all）
$ pnpm install

# 终端 1：监听 packages，热更新 es/lib
$ pnpm run dev

# 终端 2：启动 demo
$ cd examples/feature-examples && pnpm dev

参与共建

如果希望参与到 LogicFlow 的开发中，请遵从我们的贡献指南。如果你贡献度足够活跃，你可以申请成为社区协作者。

Star History

开源协议

该项目的代码和文档基于 Apache-2.0 License 开源协议。

11.7K ·GitHub

LogicFlow

What is this?

LogicFlow is an open-source flow chart editing framework: it provides the interactions and editing features flowcharts need, plus flexible node customization and plugins, so you can add flowchart-style editing to your own business system.

Is it a library I add to my own web app, or a standalone diagramming site like draw.io?

It is a frontend framework you embed in your own web app, not a finished online tool — a TypeScript diagram-editing component meant for building flowchart-like features into business systems.

How do I add it to a project?

Install the @logicflow/core package from npm and follow the official quick-start guide in the docs.

What kinds of diagrams can it handle beyond plain flowcharts?

It targets all sorts of graph-editing scenarios — the author lists mind maps, ER diagrams, UML and workflows as things you can build on its customizable node system.

Can I use it commercially, and is it free?

Yes — the project's code and documentation are released under the Apache-2.0 license, so the framework is free to use, including in commercial products.

Does it render with SVG or canvas?

SVG — LogicFlow is an SVG-based diagramming framework built around an MVVM approach, so diagrams stay regular DOM elements you can style.

What are similar projects?

rete, xyflow, mind-map, drawio-skill, chartdb, rataflow, G6, charts

Which topics is it in?

erd, bpmn, diagramming, flow, mvvm, flowchart, diagram, graph, low-code, svg, visualization, editor

Creator: didi
Size: 255 MB
Stars: 11.7K
Updated: CommitOct 10 Release@logicflow/[email protected]Jan 23
Age: 5y
Commits · 90 Days