Convert Figma logo to code with AI

didi logoLogicFlow

专注于业务自定义的流程图编辑框架,支持实现脑图、ER图、UML、工作流等各种图编辑场景。A flow chart editing framework focusing on business customization.

7,931
1,062
7,931
111

Top Related Projects

5,694

🚀 JavaScript diagramming library that uses SVG and HTML for rendering.

6,804

mxGraph is a fully client side JavaScript diagramming library

7,739

Visual connectivity for webapps

a super simple, no-nonsense diagramming library written in react that just works

8,494

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

  1. Creating a basic diagram:
import LogicFlow from '@logicflow/core';

const lf = new LogicFlow({
  container: document.querySelector('#container'),
  grid: true,
});

lf.render();
  1. 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,
});
  1. 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

  1. Install LogicFlow:
npm install @logicflow/core
  1. Create an HTML file with a container element:
<div id="container"></div>
  1. 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();
  1. Start adding nodes and edges to your diagram using the LogicFlow API or user interactions.

Competitor Comparisons

5,694

🚀 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.

6,804

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' }],
});
7,739

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.

8,494

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 Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

LogicFlow logo

Version Download LICENSE

简体中文 | 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 的开发中,请遵从我们的贡献指南。如果你贡献度足够活跃,你可以申请成为社区协作者。

Contributors

开源协议

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

NPM DownloadsLast 30 Days