LogicFlow: a TypeScript flowchart editing framework built for business customization

What LogicFlow solves, and who it is aimed at

Most diagramming libraries give you a renderer. LogicFlow gives you an editor runtime: a canvas, node and edge models, events, themes, and basic interactions, packaged as @logicflow/core. The README describes it as a flowchart editing framework that provides the interactions and editing features a flowchart needs, plus customization and plugin mechanisms so a team can meet flowchart-like requirements inside a business system. That framing matters. The target user is a front end engineer who has to put an editable graph into an existing product, where the node shapes, the connection rules and the toolbar all come from that product's domain rather than from a generic diagramming vocabulary.

The README lists the scenarios it is meant to cover: mind maps, ER diagrams, UML, and workflow diagrams. Those are not the same problem. A UML editor needs typed relationships and validation; a workflow editor needs to hand its output to an execution engine. LogicFlow's answer to the second case is a self-executing engine that runs flowchart logic in the browser, plus data conversion between LogicFlow's own structure and back end execution engines such as BPMN and Turbo. Whether you use that engine or only the editor, the pitch is the same: the framework supplies the editing substrate, and your application supplies the semantics.

The data model and rendering pipeline

The mechanism is visible in the quick start. A LogicFlow document is a plain object with two arrays, nodes and edges. Each node carries an id, a type, x and y coordinates, and a text label. Each edge carries a type plus sourceNodeId and targetNodeId. There is no adjacency structure and no graph object to keep in sync; the edges reference nodes by id, and you hand the whole object to lf.render(data).

Rendering goes through an instance created with new LogicFlow({ container, width, height }). The container is a DOM element, and the README's example passes document.querySelector('#container'). Because the model is plain JSON, serialization is the framework's default state rather than an extra step, which is why the data conversion capability can exist at all. The topics list on the repository includes SVG and MVVM, so the drawing layer is SVG and the editor is organized around a model-view separation rather than direct DOM manipulation.

The type field is the extension point. Built-in types such as rect, circle and polyline appear in the README example, and custom nodes and connectors are registered under their own types. That is the whole customization story in one sentence: you name a type, you describe how it draws and behaves, and the rest of the editor treats it like any other node.

Installing LogicFlow and rendering a first graph

The README gives three package manager variants for the same two packages. Core holds the runtime; extension holds the official plugins for common product features. A third package, @logicflow/layout, provides layout plugins and is documented inside the core package's docs folder rather than installed by default.

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

The README also shows yarn add and pnpm add with the same two package names. After installation you need a container element, then a data object, then an editor instance. The README's example uses a div with the id container and calls lf.render(data) with two nodes and one edge.

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);

What you should see is a 700 by 600 canvas with a rectangle at (100, 200), a circle at (300, 400), and a polyline connecting the circle to the rectangle. Note the direction: the edge is declared with sourceNodeId '50' (the circle) and targetNodeId '21' (the rectangle), so the arrow points at the rectangle. If nothing appears, check the container first. The README does not document what happens when the container is missing or has zero height, and that is the most common way a first render produces a blank area.

Where LogicFlow expects you to do the work

The honest limitation is in the project's own description. It is a framework focused on business customization, which means the parts that make your diagram feel finished are yours to build. The README's core capability list mentions customizable nodes, connectors and styles, and it mentions built-in plugins, but it does not promise a ready-made toolbar, an undo stack configured for your data, or a property panel. The extension package exists to close some of that gap, and the examples directory in the repository contains feature-examples, a material-ui-demo, a next-app, vue3-app, and engine examples, which tells you the intended integration path is writing application code around the editor.

A second constraint is the version split. The recent releases show @logicflow/extension at 2.1.14 and at 2.2.0-alpha.7 on the same day, and @logicflow/vue-node-registry at 1.2.0-alpha.7. Core, extension and layout are separate packages with separate version numbers. If you install core and extension at mismatched versions, the README does not document a compatibility matrix, so pinning both is the safer habit.

LogicFlow is also the wrong tool when the diagram is not the product. If you need a hosted editor where end users sign in and share files, a framework that renders into a div you own is more machinery than you need. And if your graph is large enough that layout and viewport performance dominate, the framework gives you an SVG canvas and a layout package, but the README makes no performance claims, so that is something you would have to measure in your own application.

LogicFlow compared with a general graph rendering library

The closest alternative in kind is a general graph rendering library such as AntV G6, which the repository's topics and ecosystem make a fair comparison point. The difference is where the abstraction sits. A rendering library starts from a graph and asks how to draw it: you configure layouts, node renderers and interaction modes, and the library's job ends at the picture. LogicFlow starts from an editing session. Nodes and edges are models with ids that the editor tracks, the data object is the document, and plugins attach to editor behaviour rather than to drawing.

That distinction shows up the moment you need undo, copy and paste, or a node type that behaves differently from every other node. With a rendering library you build those on top of the drawing layer. With LogicFlow they are the layer. The cost is the inverse: if you only need to display a static graph, LogicFlow's editor model is overhead you did not ask for, and a pure renderer will be simpler to reason about. The README's own emphasis on an execution engine and on conversion to BPMN and Turbo data structures is the clearest signal of which side of that line the project intends to sit on.

Maintenance, versioning and the Apache-2.0 licence

The repository is not archived. The last push was on 2026-07-30, which is recent enough that the project is being worked on, and the release history shows a stable line (extension 2.1.14) alongside an alpha line (2.2.0-alpha.7) published on 2026-03-03. The presence of .changeset and a changeset publish script in package.json indicates releases are cut through Changesets, so version bumps are deliberate rather than incidental. For upgrade cost, the practical risk is the alpha line: adopting a 2.2.0-alpha build means tracking a prerelease, and the README does not describe a migration path between major versions. Pin exact versions and read the releases page before moving.

The code and documentation are under Apache-2.0, per the README's licence section. That is a permissive licence with an explicit patent grant, and it does not require you to publish your own application source. It does carry attribution and notice obligations for the licensed work, and the repository includes a LICENSE file at its root. This is a description of what the repository states, not legal advice; if you are redistributing the packages or modifying them, have your own counsel review the notice requirements.

Editorial conclusion

Adopt LogicFlow if you are embedding a diagram editor inside your own product and are willing to write node and edge customization code in TypeScript. Skip it if you want a finished diagramming application with accounts and sharing, or if you cannot maintain a front end build. Verify first that @logicflow/core and @logicflow/extension versions you install match, since the extension package publishes separately and the recent releases include both 2.1.14 and 2.2.0-alpha.7 lines.

Frequently asked questions

Official sources

1. didi/LogicFlow on GitHub
2. License: Apache-2.0
3. Project website
4. README
5. Releases