Create Interactive Flowcharts Fast with LogicFlow – A Quick Start Guide

Hello, I'm TJ, a programmer who recommends open‑source projects.

Looking for a flexible way to embed flowchart drawing into a system, I discovered LogicFlow on GitHub.

LogicFlow is a flowchart editing framework that offers essential diagram interaction and editing features, supports custom nodes and plugin extensions, and can be used for flowcharts, ER diagrams, and BPMN processes. It is widely applied in workflow approval configuration, robot logic orchestration, and no‑code platform flow configuration.

Quick Start

Using LogicFlow is simple and requires two steps:

Import dependencies

<!--LogicFlow core CSS-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@logicflow/core/dist/style/index.css" />
<!--LogicFlow extension CSS-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@logicflow/extension/lib/style/index.css" />
<!--LogicFlow core JS-->
<script src="https://cdn.jsdelivr.net/npm/@logicflow/core/dist/logic-flow.js"></script>
<!--LogicFlow plugin (example: menu)-->
<script src="https://cdn.jsdelivr.net/npm/@logicflow/extension/lib/Menu.js"></script>

You can also install via npm:

npm install @logicflow/core
npm install @logicflow/extension

Create a simple example

import LogicFlow from "@logicflow/core";
import "@logicflow/core/dist/style/index.css";

const lf = new LogicFlow({
  container: document.querySelector("#container")
});

lf.render({
  nodes: [
    {
      id: "node_id_1",
      type: "rect",
      x: 100,
      y: 100,
      text: { x: 100, y: 100, value: "Node 1" },
      properties: {}
    },
    {
      id: "node_id_2",
      type: "circle",
      x: 200,
      y: 300,
      text: { x: 200, y: 300, value: "Node 2" },
      properties: {}
    }
  ],
  edges: [
    {
      id: "edge_id",
      type: "polyline",
      sourceNodeId: "node_id_1",
      targetNodeId: "node_id_2",
      text: { x: 139, y: 200, value: "Edge" },
      startPoint: { x: 110, y: 140 },
      endPoint: { x: 200, y: 250 },
      pointsList: [
        { x: 100, y: 140 },
        { x: 100, y: 200 },
        { x: 200, y: 200 },
        { x: 200, y: 250 }
      ],
      properties: {}
    }
  ]
});

LogicFlow also provides a WYSIWYG tool for visual editing; see the screenshot below.

Tool link: https://codesandbox.io/s/logicflow-example-1-zy3o85?file=/step1/index.js:0-1170

Key resources:

Open‑source project: https://github.com/didi/LogicFlow

Example gallery: https://site.logic-flow.cn/examples/#/gallery