Repolode
Submit
didi

didi/LogicFlow

A TypeScript flowchart editing framework for embedding customizable diagram editors, such as flowcharts, mind maps, ER and BPMN diagrams, into business systems.

Open-source alternative to:Microsoft VisioLucidchart

View on GitHubWebsite
Stars
11,770
Forks
1,386
Open issues
124
Last commit
15 days ago

What is it?

LogicFlow is a flowchart editing framework that provides the interaction and editing functions needed for flow-style diagrams, so teams can add such editors to their own business systems without building them from scratch. It offers a canvas with nodes and edges, along with extension points for custom nodes, connectors, styles and plugins.

Beyond drawing, LogicFlow can convert its data to and from BPMN and Turbo structures, and includes an execution engine that runs flowchart logic in the browser. The project is distributed on npm as @logicflow/core and @logicflow/extension, with layout plugins available separately.

The framework is written in TypeScript and documented with tutorials and examples on its official site. It also ships local documentation inside the npm package to help AI coding agents work with the library.

Key features

  • 01Customizable nodes, edges and styles for building domain-specific diagrams.
  • 02Plugin system with official extension and layout packages.
  • 03Converts diagram data to and from BPMN and Turbo formats.
  • 04Built-in execution engine that runs flowchart logic in the browser.
  • 05Uses SVG rendering on a canvas-based editor.

Use cases

  • Adding a flowchart or approval-process designer to an internal business system.
  • Building ER, UML or mind-map editors on a shared diagram foundation.
  • Exporting visual workflows to BPMN for a backend workflow engine.
  • Running simple flowchart logic directly in the browser.

Quick start

  1. 1

    Install the core and extension packages with npm

    npm install @logicflow/core @logicflow/extension --save
  2. 2

    Add a container element to your HTML page

  3. 3

    Create a LogicFlow instance with the container and render your data

Things to know

  • Requires a browser-based frontend environment with TypeScript or JavaScript.

In collections

Diagrams, charts & animated visualizations

Topics

#flowchart#diagramming#visualization#typescript#svg#bpmn#graph-editor#diagram#didi#flow

FAQ

What is LogicFlow?
A TypeScript flowchart editing framework for embedding customizable diagram editors, such as flowcharts, mind maps, ER and BPMN diagrams, into business systems. LogicFlow is a flowchart editing framework that provides the interaction and editing functions needed for flow-style diagrams, so teams can add such editors to their own business systems without building them from scratch. It offers a canvas with nodes and edges, along with extension points for custom nodes, connectors, styles and plugins.
Is LogicFlow free to use? What license does it have?
LogicFlow is open source under the Apache-2.0 license. Check the license terms before using it in commercial products.
Is LogicFlow still maintained?
Actively maintained. The last commit to LogicFlow was on Oct 24, 2026.
What can I use LogicFlow for?
Adding a flowchart or approval-process designer to an internal business system. Building ER, UML or mind-map editors on a shared diagram foundation. Exporting visual workflows to BPMN for a backend workflow engine. Running simple flowchart logic directly in the browser.
How do I install LogicFlow?
Install the core and extension packages with npm: npm install @logicflow/core @logicflow/extension --save Add a container element to your HTML page Create a LogicFlow instance with the container and render your data
Where can I get LogicFlow?
The source code and installation instructions are on GitHub: https://github.com/didi/LogicFlow

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects