explaingit

didi/logicflow

11,326TypeScriptAudience · developerComplexity · 3/5LicenseSetup · moderate

TLDR

A TypeScript/JavaScript library for building interactive diagram editors in web apps, with a built-in canvas, drag-and-drop, customizable nodes and edges, a plugin system, and a browser-side flowchart execution engine.

Mindmap

mindmap
  root((LogicFlow))
    What it does
      Diagram editing
      Flowchart execution
      BPMN conversion
    Tech stack
      TypeScript
      npm package
    Use cases
      Workflow editors
      Mind maps
      UML diagrams
    Audience
      Web developers
      Business toolmakers
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Build a visual workflow or approval-process editor inside a web application without coding the canvas from scratch.

USE CASE 2

Create a mind-map or entity-relationship diagram tool with fully custom node shapes and connector styles.

USE CASE 3

Integrate BPMN process diagrams that can execute logic directly in the browser without a backend call.

USE CASE 4

Build a no-code automation builder where users connect steps in a flowchart and run it client-side.

Tech stack

TypeScriptJavaScriptnpm

Getting it running

Difficulty · moderate Time to first run · 30min

Requires npm and a bundler, two packages must be installed (core engine plus the extensions package).

Use freely for any purpose, including commercial use, as long as you keep the copyright notice and include the Apache 2.0 license text.

In plain English

LogicFlow is a JavaScript library for building interactive diagram editors inside web applications. It was created by DiDi, the Chinese ride-hailing company, for use in their internal business tools, and later open-sourced. The library handles the canvas, nodes, edges, drag-and-drop, and connection logic that diagrams need, so developers do not have to build all of that from scratch. The README is written primarily in Chinese, but the core description covers the following capabilities: a visual canvas where users can create and edit diagrams by interacting with shapes and connectors, customizable nodes and connectors so developers can adapt the look and behavior to their specific product, a plugin system for adding features beyond the defaults, and a built-in execution engine that can run flowchart logic directly in the browser without sending it to a server first. The library also supports converting its internal data format to and from BPMN (a standard format for business process diagrams) and other backend formats. Typical use cases mentioned in the description include flowcharts, mind maps, entity-relationship diagrams, UML diagrams, and workflow editors. It is installed as an npm package with two main parts: the core rendering engine and an extensions package for additional built-in plugins. The project also ships its documentation files inside the npm package itself, which allows AI coding tools to read the docs locally when helping developers build features. LogicFlow is licensed under Apache 2.0.

Copy-paste prompts

Prompt 1
I'm using LogicFlow in a React app. Show me how to define a custom circular node with a label, register it, and add it to the canvas programmatically.
Prompt 2
How do I use LogicFlow's built-in execution engine to run a flowchart step by step and log the output of each node to the console?
Prompt 3
Generate code to export a LogicFlow diagram to BPMN XML and then import that XML back into a fresh canvas.
Prompt 4
I want to add a mini-map plugin to a LogicFlow canvas. Show me how to register the plugin and position it in the bottom-right corner.
Prompt 5
Write a complete LogicFlow example with a toolbar for adding node types, custom edge styles, and an on-connect validation rule.
Open on GitHub → Explain another repo

← didi on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.