同步操作将从 LogicFlow/LogicFlow 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
简体中文 | 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.
🛠 High scalability
Compatible with the process editing requirements of various product customizations, most modules are implemented in the form of plug-ins, and each module is supported to be plugged and unplugged freely.
🚀 Independent and Complete
Flowcharts can fully express business logic without being limited by process engines.
🎯 Professional
Focus on business process flow editing
# npm
$ npm install @logicflow/core @logicflow/extension --save
// create container
<div id="container"></div>;
// prepare data
const data = {
// node data
nodes: [
{
id: '21',
type: 'rect',
x: 100,
y: 200,
text: 'rect node',
},
{
id: '50',
type: 'circle',
x: 300,
y: 400,
text: 'circle node',
},
],
// edge data
edges: [
{
type: 'polyline',
sourceNodeId: '50',
targetNodeId: '21',
},
],
};
// render instance
const lf = new LogicFlow({
container: document.querySelector('#container'),
width: 700,
height: 600,
});
lf.render(data);
Providing various capabilities necessary for editing a flowchart, which is also the basic capability of LogicFlow::
The ability to draw graphs. Draw nodes and lines of various shapes based on SVG, and provide basic nodes (rectangles, circles, polygons, etc.) and lines (straight lines, polylines, curves)
All kinds of interactive capabilities. Respond to various mouse events (hover, click, drag, etc.) of nodes, lines, and graphs. Such as node dragging, dragging to create edges, line adjustment, double-clicking nodes to edit text, etc.
Ability to improve editing efficiency. Provide grids, alignment lines, previous step, next step, keyboard shortcuts, image zoom in and out, etc., to help users improve editing efficiency
Providing Rich API. Developer completes the interaction with LogicFlow by calling API parameters and listening to events
The following is an example of a flowchart made through LogicFlow's built-in nodes and supporting capabilities:
When basic capabilities cannot meet business needs, it needs to be expanded based on business scene.
Based on the above expanded capabilities, front-end R&D can flexibly develop required nodes, components, etc. according to the needs of actual business scenarios. Below are two flow charts based on LogicFlow's expansion capabilities:
demo link:http://logic-flow.org/examples/#/extension/bpmn
code link:https://github.com/didi/LogicFlow/tree/master/examples/src/pages/usage/bpmn
demo link:http://logic-flow.org/examples/#/usage/approve
code link:https://github.com/didi/LogicFlow/tree/master/examples/src/pages/usage/approve
code link: https://github.com/xinxin93/logicflow_vue_demo
LogicFlow not only supports the development of a fixed overall style like bpmn.js, but also a flowchart tool that generates data and is executable in the process engine. It also supports drawing tools that implement free control styles like ProcessOn.
demo link:http://logic-flow.org/mvp/index.html
code link:https://github.com/didi/LogicFlow/tree/master/site/mvp
The example picture is as follows:
code link: https://github.com/Logic-Flow/logicflow-node-red-vue3
code link: https://github.com/towersxu/draft-flow
please add wechat "logic-flow" to join the user group
LogicFlow is open to the outside, whether it is just fixing docment typo or a major reconstruction of the overall function of LogicFlow, we welcome it. For each of your PRs, we will carefully review, reply, and merge them. Details can see LogicFlow Contribution Guides.
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。