LogicFlow
专注于业务自定义的流程图编辑框架,支持实现脑图、ER图、UML、工作流等各种图编辑场景。A flow chart editing framework focusing on business customization.
Top Related Projects
🚀 JavaScript diagramming library that uses SVG and HTML for rendering.
mxGraph is a fully client side JavaScript diagramming library
Visual connectivity for webapps
a super simple, no-nonsense diagramming library written in react that just works
A BPMN 2.0 rendering toolkit and web modeler.
Quick Overview
LogicFlow is an open-source library for building flowchart and diagram applications. It provides a set of tools for creating, editing, and rendering various types of diagrams, including flowcharts, state machines, and business process models. LogicFlow is designed to be highly customizable and extensible, making it suitable for a wide range of diagramming needs.
Pros
- Highly customizable and extensible architecture
- Rich set of built-in node and edge types
- Supports both mouse and touch interactions
- Comprehensive documentation and examples
Cons
- Learning curve for advanced customizations
- Limited out-of-the-box themes and styles
- Primarily focused on flowcharts and business diagrams
- Relatively new project, still evolving
Code Examples
- Creating a basic diagram:
import LogicFlow from '@logicflow/core';
const lf = new LogicFlow({
container: document.querySelector('#container'),
grid: true,
});
lf.render();
- Adding custom nodes:
import { RectNode, RectNodeModel } from '@logicflow/core';
class CustomNode extends RectNode {}
class CustomNodeModel extends RectNodeModel {
getNodeStyle() {
const style = super.getNodeStyle();
style.fill = '#f0f0f0';
style.stroke = '#3333ff';
return style;
}
}
lf.register({
type: 'custom-node',
view: CustomNode,
model: CustomNodeModel,
});
- Adding nodes and edges programmatically:
lf.addNode({
type: 'rect',
x: 100,
y: 100,
text: 'Node 1',
});
lf.addNode({
type: 'circle',
x: 300,
y: 200,
text: 'Node 2',
});
lf.addEdge({
sourceNodeId: 'node_1',
targetNodeId: 'node_2',
type: 'polyline',
text: 'Connection',
});
Getting Started
- Install LogicFlow:
npm install @logicflow/core
- Create an HTML file with a container element:
<div id="container"></div>
- Initialize and render LogicFlow:
import LogicFlow from '@logicflow/core';
import '@logicflow/core/dist/style/index.css';
const lf = new LogicFlow({
container: document.querySelector('#container'),
grid: true,
});
lf.render();
- Start adding nodes and edges to your diagram using the LogicFlow API or user interactions.
Competitor Comparisons
🚀 JavaScript diagramming library that uses SVG and HTML for rendering.
Pros of X6
- More extensive and feature-rich library with a wider range of graph types and customization options
- Better performance for large and complex graphs due to its optimized rendering engine
- Stronger ecosystem with additional plugins and extensions
Cons of X6
- Steeper learning curve due to its complexity and extensive API
- Larger bundle size, which may impact load times for smaller projects
- Less focus on flow chart specific features compared to LogicFlow
Code Comparison
X6:
import { Graph } from '@antv/x6';
const graph = new Graph({
container: document.getElementById('container'),
width: 800,
height: 600,
});
graph.addNode({ shape: 'rect', x: 100, y: 100, width: 80, height: 40, label: 'Node' });
LogicFlow:
import LogicFlow from '@logicflow/core';
const lf = new LogicFlow({
container: document.getElementById('container'),
width: 800,
height: 600,
});
lf.render({ nodes: [{ type: 'rect', x: 100, y: 100, text: 'Node' }] });
Both libraries offer graph creation capabilities, but X6 provides more granular control over node properties, while LogicFlow focuses on a simpler API for quick flow chart creation.
mxGraph is a fully client side JavaScript diagramming library
Pros of mxgraph
- More mature and widely adopted, with a larger community and extensive documentation
- Supports a broader range of diagram types and use cases
- Offers both client-side and server-side rendering options
Cons of mxgraph
- Steeper learning curve due to its complexity and extensive API
- Larger file size and potentially slower performance for simpler diagrams
- Less modern development approach, with limited TypeScript support
Code Comparison
mxgraph:
var graph = new mxGraph(container);
var parent = graph.getDefaultParent();
graph.getModel().beginUpdate();
try {
var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
var e1 = graph.insertEdge(parent, null, '', v1, v2);
} finally {
graph.getModel().endUpdate();
}
LogicFlow:
const lf = new LogicFlow({
container: document.querySelector('#container'),
grid: true,
});
lf.render({
nodes: [
{ id: 'node1', type: 'rect', x: 100, y: 100, text: 'Hello,' },
{ id: 'node2', type: 'rect', x: 200, y: 200, text: 'World!' },
],
edges: [{ sourceNodeId: 'node1', targetNodeId: 'node2', type: 'polyline' }],
});
Visual connectivity for webapps
Pros of jsPlumb
- More mature and established project with a larger community and ecosystem
- Supports a wider range of browsers and devices
- Offers both community and commercial editions with additional features
Cons of jsPlumb
- Steeper learning curve due to more complex API
- Less focus on modern web development practices and frameworks
- Commercial edition required for some advanced features
Code Comparison
LogicFlow:
import LogicFlow from '@logicflow/core';
const lf = new LogicFlow({
container: document.querySelector('#container'),
grid: true,
});
lf.render();
jsPlumb:
import { jsPlumb } from "jsplumb";
const instance = jsPlumb.getInstance();
instance.connect({
source: "element1",
target: "element2",
anchor: ["Top", "Bottom"]
});
Both libraries allow for creating and managing connections between elements, but LogicFlow provides a more streamlined API for modern web applications, while jsPlumb offers more granular control over connection details. LogicFlow's approach is more declarative, whereas jsPlumb requires more imperative coding. The choice between the two depends on specific project requirements, desired level of control, and target browser support.
a super simple, no-nonsense diagramming library written in react that just works
Pros of react-diagrams
- More mature project with a larger community and ecosystem
- Extensive documentation and examples available
- Built specifically for React, offering seamless integration
Cons of react-diagrams
- Steeper learning curve due to its complexity
- Less flexible for non-React projects
- Performance may degrade with large, complex diagrams
Code Comparison
LogicFlow:
import LogicFlow from '@logicflow/core';
const lf = new LogicFlow({
container: document.querySelector('#container'),
grid: true,
});
lf.render();
react-diagrams:
import createEngine, { DiagramModel } from '@projectstorm/react-diagrams';
const engine = createEngine();
const model = new DiagramModel();
engine.setModel(model);
Both libraries offer straightforward initialization, but LogicFlow's API appears more concise. react-diagrams requires separate engine and model creation, which may provide more flexibility but also increases complexity.
LogicFlow focuses on providing a framework-agnostic solution with a simpler API, while react-diagrams is tailored specifically for React applications with a more extensive feature set. The choice between them depends on the project requirements, preferred framework, and desired level of customization.
A BPMN 2.0 rendering toolkit and web modeler.
Pros of bpmn-js
- More mature and widely adopted in the BPMN community
- Extensive documentation and examples available
- Strong support for BPMN 2.0 standard compliance
Cons of bpmn-js
- Steeper learning curve for beginners
- Less flexibility for custom diagram types outside of BPMN
- Larger file size and potentially slower performance for complex diagrams
Code Comparison
bpmn-js:
import BpmnModeler from 'bpmn-js/lib/Modeler';
const modeler = new BpmnModeler({
container: '#canvas',
keyboard: { bindTo: document }
});
modeler.importXML(xmlString, function(err) {
if (err) console.error('Error importing BPMN diagram', err);
});
LogicFlow:
import LogicFlow from '@logicflow/core';
const lf = new LogicFlow({
container: document.querySelector('#container'),
grid: true
});
lf.render({
nodes: [],
edges: []
});
Both libraries provide ways to create and manipulate diagrams, but bpmn-js is more focused on BPMN-specific functionality, while LogicFlow offers a more generic approach to flow diagrams. bpmn-js uses XML for diagram data, whereas LogicFlow uses a JSON-like structure for nodes and edges.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
ç®ä½ä¸æ | 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
å¿«éä¸æ
<!-- 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);
ç¸å ³ææ¡£
æ¬å°å¼å
# å®è£
项ç®ä¾èµååå§åæ建
$ pnpm install
# è¿å
¥å°æå®é¡¹ç®å¼ååè°è¯
cd packages/core
pnpm run build:watch
# å¯å¨ example æ¥çææ
cd examples/feature-examples
pnpm run start
åä¸å ±å»º
å¦æå¸æåä¸å° LogicFlow çå¼åä¸ï¼è¯·éµä»æ们çè´¡ç®æåãå¦æä½ è´¡ç®åº¦è¶³å¤æ´»è·ï¼ä½ å¯ä»¥ç³è¯·æ为社åºåä½è ã
å¼æºåè®®
该项ç®ç代ç åææ¡£åºäº Apache-2.0 License å¼æºåè®®ã
Top Related Projects
🚀 JavaScript diagramming library that uses SVG and HTML for rendering.
mxGraph is a fully client side JavaScript diagramming library
Visual connectivity for webapps
a super simple, no-nonsense diagramming library written in react that just works
A BPMN 2.0 rendering toolkit and web modeler.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot