Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/didi/LogicFlow
A flow chart editing framework focusing on business customization. 专注于业务自定义的流程图编辑框架，支持实现脑图、ER图、UML、工作流等各种图编辑场景。
https://github.com/didi/LogicFlow
bpmn diagram diagramming didi flow flowchart graph javascript javascript-diagramming-library mvvm svg typescript visualization
Last synced: 6 days ago
JSON representation
A flow chart editing framework focusing on business customization. 专注于业务自定义的流程图编辑框架，支持实现脑图、ER图、UML、工作流等各种图编辑场景。
- Host: GitHub
- URL: https://github.com/didi/LogicFlow
- Owner: didi
- License: apache-2.0
- Created: 2020-12-24T07:55:38.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2024-10-19T09:38:00.000Z (15 days ago)
- Last Synced: 2024-10-19T11:38:42.742Z (15 days ago)
- Topics: bpmn, diagram, diagramming, didi, flow, flowchart, graph, javascript, javascript-diagramming-library, mvvm, svg, typescript, visualization
- Language: TypeScript
- Homepage: https://site.logic-flow.cn
- Size: 43.8 MB
- Stars: 8,328
- Watchers: 96
- Forks: 1,103
- Open Issues: 117
-
Metadata Files:
- Readme: README.en-US.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesomeLibrary - LogicFlow
- awesome - didi/LogicFlow - A flow chart editing framework focusing on business customization. 专注于业务自定义的流程图编辑框架，支持实现脑图、ER图、UML、工作流等各种图编辑场景。 (TypeScript)
- my-awesome - didi/LogicFlow - diagramming-library,mvvm,svg,typescript,visualization pushed_at:2024-10 star:8.3k fork:1.1k A flow chart editing framework focusing on business customization. 专注于业务自定义的流程图编辑框架，支持实现脑图、ER图、UML、工作流等各种图编辑场景。 (TypeScript)
README
[简体中文](/README.md) | English
LogicFlow is a flowchart editing framework , providing a series of functions necessary for flowchart interaction and editing, as well as simple and flexible node customization, plug-in and other expansion mechanisms, so that we can quickly meet the needs of class flowcharts in business systems.
## Features
- High customizability：With the intuitive visual interface provided by LogicFlow, users can easily create, edit, and manage complex logical flowcharts.
- Rich Plug-ins: Built-in rich plug-ins, users can also customize complex plug-ins according to their own needs to achieve business requirements.
- The Visualization model：Users can customize nodes, connectors, and styles to suit their needs, creating custom logical flowcharts that match specific use cases.
- Self-executing engine: The execution engine supports browser-side flow chart logic, providing new ideas for code-free execution.
- Data convertible：Supports the conversion of LogicFlow data to BPMN, Turbo, and other backend execution engine data structures.
## Installation
```shell
# npm
$ npm install @logicflow/core @logicflow/extension --save
# yarn
$ yarn add @logicflow/core @logicflow/extension
# pnpm
$ pnpm add @logicflow/core @logicflow/extension
```
## Usage
```html
;
```
```typescript
// 准备数据
const data = {
// 节点
nodes: [
{
id: '21',
type: 'rect',
x: 100,
y: 200,
text: 'Rect Node',
},
{
id: '50',
type: 'circle',
x: 300,
y: 400,
text: 'Circle Node',
},
],
// 边
edges: [
{
type: 'polyline',
sourceNodeId: '50',
targetNodeId: '21',
},
],
};
// 渲染画布
const lf = new LogicFlow({
container: document.querySelector('#container'),
width: 700,
height: 600,
});
lf.render(data);
```
## Links
[Official Website](https://site.logic-flow.cn/en/)
- [Getting Started](https://site.logic-flow.cn/en/tutorial/get-started)
- [Examples](https://site.logic-flow.cn/en/examples)
- [Articles](https://site.logic-flow.cn/en/article/architecture-of-logicflow)
---
- [CHANGELOG](https://github.com/didi/LogicFlow/releases)
- [Issue Template](https://github.com/didi/LogicFlow/issues/new/choose)
## [Development](/CONTRIBUTING.en-US.md)
```shell
# install deps and build
$ pnpm install
# enter the specified project for development and debugging
cd packages/core
pnpm run build:watch
# start example to develop
cd examples/feature-examples
pnpm run start
```
## Contributing
To become a contributor, please follow our [contributing guide](/CONTRUBUTING.en-US.md). If you are an active contributor, you can apply to be a outside collaborator.
## License
The scripts and documentation in this project are released under the [Apache-2.0 License](/LICENSE).