Master Business Flowchart Design with LogicFlow: A Powerful Open‑Source Front‑End Framework

Project Overview

LogicFlow

is a TypeScript‑based flowchart editing framework focusing on customizable business scenarios. It supports regular flowcharts, mind maps, ER diagrams, UML, workflow diagrams, and provides node customization, plugin extensions, and a front‑end execution engine, suitable for individual developers and large companies like Meituan and Didi.

It has gained over 10.5K stars on GitHub, indicating strong community interest.

Key Features

High customizability: node styles, connectors, themes, custom shapes, colors, icons, and property panels can be tailored to business needs.

Rich interaction and visualization: drag‑and‑drop, connection, copy, undo, zoom, etc., enable easy creation and editing of complex logic diagrams.

Flexible plugins and extensions: built‑in property panel, layout, mini‑map, and the ability to develop complex custom plugins.

Front‑end execution engine: runs diagram logic directly in the browser without backend dependence.

Data format conversion: supports conversion with BPMN, Turbo and other backend engines.

Multi‑framework and scenario support: examples for React, Vue, and vanilla JS; supports flowcharts, UML, ER, mind maps, etc.

Quick Installation and Usage

Install via npm, yarn, or pnpm:

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

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

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

Basic usage example:

// Import LogicFlow core and extension
import LogicFlow from '@logicflow/core';
import '@logicflow/extension';

// Define nodes and edges
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' }
  ]
};

// Initialize LogicFlow instance
const lf = new LogicFlow({
  container: document.querySelector('#container'),
  width: 700,
  height: 600
});
lf.render(data);

After running the code, a basic diagram with a rectangle node, a circle node, and a connecting edge is displayed, and further styling and interaction can be customized.

Conclusion

LogicFlow

is a robust open‑source solution for business‑oriented diagram needs, offering extensive customization, rich interaction, and front‑end execution capabilities.

Project Links

GitHub: https://github.com/didi/LogicFlow