### Local Development Setup for LogicFlow

Source: https://github.com/didi/logicflow/blob/master/README.md

Shell commands to install dependencies, build the core package, and start the example server for local development.

```shell
# 安装项目依赖和初始化构建
$ pnpm install

# 进入到指定项目开发和调试
cd packages/core
pnpm run build:watch

# 启动 example 查看效果
cd examples/feature-examples
pnpm run start
```

--------------------------------

### Development Setup for LogicFlow

Source: https://github.com/didi/logicflow/blob/master/README.en-US.md

Commands for setting up the development environment for LogicFlow. Includes installing dependencies, building the core package with watch mode, and starting an example for development.

```shell
# install deps and build
$ pnpm install

# enter the specified project for development and debugging
cd packages/core
pnpm run build:watch

# start example to develop
cd examples/feature-examples
pnpm run start
```

--------------------------------

### Full Example with Pools, Lanes, and Nodes

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/tutorial/extension/pool.en.md

Provides a complete example demonstrating the data structure for a pool containing multiple lanes and nodes.

```APIDOC
## Full Example

This example shows a pool with two lanes, each containing a node.

```typescript
lf.render({
  nodes: [
    {
      id: 'pool_1',
      type: 'pool',
      x: 500,
      y: 260,
      text: 'Pool (H)',
      properties: {
        direction: 'horizontal',
        width: 520,
        height: 360,
        children: ['lane_1', 'lane_2'],
      },
      children: ['lane_1', 'lane_2'],
    },
    {
      id: 'lane_1',
      type: 'lane',
      x: 540,
      y: 340,
      text: 'Lane 1',
      properties: {
        parent: 'pool_1',
        width: 440,
        height: 180,
        isRestrict: true,
        autoResize: false,
        children: ['rect_1'],
      },
      children: ['rect_1'],
    },
    {
      id: 'lane_2',
      type: 'lane',
      x: 540,
      y: 160,
      text: 'Lane 2',
      properties: {
        parent: 'pool_1',
        width: 440,
        height: 180,
        children: ['circle_1'],
      },
      children: ['circle_1'],
    },
    {
      id: 'rect_1',
      type: 'rect',
      x: 470,
      y: 350,
      text: 'Node A',
      properties: {
        parent: 'lane_1',
      },
    },
    {
      id: 'circle_1',
      type: 'circle',
      x: 620,
      y: 150,
      text: 'Node B',
      properties: {
        parent: 'lane_2',
      },
    },
  ],
  edges: [],
})
```
```

--------------------------------

### Install LogicFlow Core and Extensions

Source: https://github.com/didi/logicflow/blob/master/README.md

Install the LogicFlow core editor and its extension packages using npm, yarn, or pnpm.

```shell
# npm
$ npm install @logicflow/core @logicflow/extension --save
```

```shell
# yarn
$ yarn add @logicflow/core @logicflow/extension
```

```shell
# pnpm
$ pnpm add @logicflow/core @logicflow/extension
```

--------------------------------

### Core Verification Workflow

Source: https://github.com/didi/logicflow/blob/master/packages/core/ARCHITECTURE.md

Steps to verify core changes by building the package and running examples. This includes watching for build changes and starting a local development server.

```sh
cd packages/core
pnpm run build:watch

cd examples/feature-examples
pnpm start
```

--------------------------------

### Example Graph Data Definition and Rendering

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/tutorial/basic/class.en.md

A complete example demonstrating how to define graph data, including nodes and edges, and then render it using the LogicFlow instance.

```javascript
const graphData = {
  nodes: [
    {
      id: 'node-1',
      type: 'rect',
      x: 100,
      y: 100,
      text: 'Node 1'
    },
    {
      id: 'node-2',
      type: 'circle',
      x: 300,
      y: 100,
      text: 'Node 2'
    }
  ],
  edges: [
    {
      id: 'edge-1',
      type: 'line',
      sourceNodeId: 'node-1',
      targetNodeId: 'node-2'
    }
  ]
};

lf.render(graphData);
```

--------------------------------

### Global Plugin Installation via CDN

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/tutorial/extension/intro.en.md

Install LogicFlow core and extension plugins, including the Menu plugin, using CDN links. The Menu plugin is then registered globally.

```html
<!--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's plug-ins support individual introductions, here's an example of a menu plug-in-->
<script src="https://cdn.jsdelivr.net/npm/@logicflow/extension/lib/Menu.js"></script>
<script>
  LogicFlow.use(Menu);
</script>
```

--------------------------------

### Install LogicFlow Extension with pnpm

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/tutorial/get-started.en.md

Install the LogicFlow extension package using pnpm. This is required if you plan to use additional plugins.

```bash
pnpm add @logicflow/extension
```

--------------------------------

### Render BPMN Start Event with Timer Definition

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/tutorial/extension/bpmn-element.en.md

Renders a BPMN start event node with a timer event definition. This example shows how to set the `definitionType` in the node's properties to apply the configured timer definition.

```typescript
lf.render({
  nodes: [
    {
      id: 1,
      type: 'bpmn:startEvent',
      text: '5 min timed start',
      properties: {
        definitionType: 'bpmn:timerEventDefinition',
      },
    }
  ]
})
```

--------------------------------

### Install Control Panel Plugin via CDN

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/tutorial/get-started.en.md

Use this snippet to install the control panel plugin when using LogicFlow via CDN. It includes importing the extension script and CSS, and then initializing LogicFlow with the Control plugin.

```html
<!-- Import extension-->

<script src="https://cdn.jsdelivr.net/npm/@logicflow/extension/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@logicflow/extension/lib/style/index.min.css" />
<!-- create graph container -->
<div id="container"></div>
<script>
  // The Extension CDN throws an Extension variable that contains all the plugins, the plugins used need to be taken from the Extension
  const { Control } = Extension
   // Writeup for globally installing control panel plugins:：
  Core.default.use(Control);
   //Writeup for single instance installing control panel plugins：
  const lf = new Core.default({
    ..., // Other options
    plugins: [Control],
  })
</script>
```

--------------------------------

### Example Extension Implementation

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/api/type/MainTypes.zh.md

Demonstrates how to implement the ExtensionRenderFunc for a custom LogicFlow extension. This example creates a simple div element and appends it to the provided container.

```typescript
const myExtension: ExtensionDefinition = {
    pluginName: 'MyCustomExtension',
    render: (lf, container) => {
        const element = document.createElement('div');
        element.innerHTML = 'Hello from MyCustomExtension!';
        container.appendChild(element);
    },
};
```

--------------------------------

### Install LogicFlow Core with pnpm

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/tutorial/get-started.en.md

Install the core LogicFlow package using pnpm. This is the primary dependency for creating flowcharts.

```bash
pnpm add @logicflow/core
```

--------------------------------

### Install LogicFlow Core with npm

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/tutorial/get-started.en.md

Install the core LogicFlow package using npm. This is the primary dependency for creating flowcharts.

```bash
npm install @logicflow/core --save
```

--------------------------------

### Install BpmnElement Extension (CDN)

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/tutorial/extension/bpmn-element.zh.md

Include the extension script and CSS via CDN, then use BpmnElement globally or for a single LogicFlow instance.

```html
<!-- 引入插件包 -->
<script src="https://cdn.jsdelivr.net/npm/@logicflow/extension/dist/index.min.js"></script>
<!-- 引入插件样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@logicflow/extension/lib/style/index.min.css" />
<div id="container"></div>
<script>
  const { BpmnElement } = Extension
  // 全局使用
  Core.default.use(BpmnElement);
  // 单实例使用
  const lf = new Core.default({
    ..., // Other options
    plugins: [BpmnElement],
  })
</script>
```

--------------------------------

### Install LogicFlow Extension with npm

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/tutorial/get-started.en.md

Install the LogicFlow extension package using npm. This is required if you plan to use additional plugins.

```bash
npm install @logicflow/extension --save
```

--------------------------------

### Instance-Level Plugin Installation

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/tutorial/extension/intro.en.md

Install plugins like DndPanel and SelectionSelect directly on a LogicFlow instance by passing them in the `plugins` array during initialization. This allows for different plugins on different pages within a single-page application.

```tsx
import LogicFlow from "@logicflow/core";
import { DndPanel, SelectionSelect } from "@logicflow/extension";
import "@logicflow/core/lib/style/index.css";
// import "@logicflow/core/dist/style/index.css"; // Introduced before version 2.0
import "@logicflow/extension/lib/style/index.css";

const lf = new LogicFlow({
  container: document.querySelector("#app"),
  grid: true,
  plugins: [DndPanel, SelectionSelect]
});
```

--------------------------------

### Install LogicFlow Core with yarn

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/tutorial/get-started.en.md

Install the core LogicFlow package using yarn. This is the primary dependency for creating flowcharts.

```bash
yarn add @logicflow/core
```

--------------------------------

### Install LogicFlow Extension with yarn

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/tutorial/get-started.en.md

Install the LogicFlow extension package using yarn. This is required if you plan to use additional plugins.

```bash
yarn add @logicflow/extension
```

--------------------------------

### Full Example with Pools, Lanes, and Nodes

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/tutorial/extension/pool.en.md

Demonstrates the data structure for rendering a pool with multiple lanes and nodes, including hierarchy and properties.

```ts
lf.render({
  nodes: [
    {
      id: 'pool_1',
      type: 'pool',
      x: 500,
      y: 260,
      text: 'Pool (H)',
      properties: {
        direction: 'horizontal',
        width: 520,
        height: 360,
        children: ['lane_1', 'lane_2'],
      },
      children: ['lane_1', 'lane_2'],
    },
    {
      id: 'lane_1',
      type: 'lane',
      x: 540,
      y: 340,
      text: 'Lane 1',
      properties: {
        parent: 'pool_1',
        width: 440,
        height: 180,
        isRestrict: true,
        autoResize: false,
        children: ['rect_1'],
      },
      children: ['rect_1'],
    },
    {
      id: 'lane_2',
      type: 'lane',
      x: 540,
      y: 160,
      text: 'Lane 2',
      properties: {
        parent: 'pool_1',
        width: 440,
        height: 180,
        children: ['circle_1'],
      },
      children: ['circle_1'],
    },
    {
      id: 'rect_1',
      type: 'rect',
      x: 470,
      y: 350,
      text: 'Node A',
      properties: {
        parent: 'lane_1',
      },
    },
    {
      id: 'circle_1',
      type: 'circle',
      x: 620,
      y: 150,
      text: 'Node B',
      properties: {
        parent: 'lane_2',
      },
    },
  ],
  edges: [],
})
```

--------------------------------

### Full Example with Pools and Lanes

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/tutorial/extension/pool.zh.md

Demonstrates a complete data structure for a pool containing multiple lanes and nodes.

```APIDOC
## Full Example with Pools and Lanes

### Description
Demonstrates a complete data structure for a pool containing multiple lanes and nodes.

### Method
```ts
lf.render({
  nodes: [
    {
      id: 'pool_1',
      type: 'pool',
      x: 500,
      y: 260,
      text: '横向泳池',
      properties: {
        direction: 'horizontal',
        width: 520,
        height: 360,
        children: ['lane_1', 'lane_2'],
      },
      children: ['lane_1', 'lane_2'],
    },
    {
      id: 'lane_1',
      type: 'lane',
      x: 540,
      y: 340,
      text: '泳道1',
      properties: {
        parent: 'pool_1',
        width: 440,
        height: 180,
        isRestrict: true,
        autoResize: false,
        children: ['rect_1'],
      },
      children: ['rect_1'],
    },
    {
      id: 'lane_2',
      type: 'lane',
      x: 540,
      y: 160,
      text: '泳道2',
      properties: {
        parent: 'pool_1',
        width: 440,
        height: 180,
        children: ['circle_1'],
      },
      children: ['circle_1'],
    },
    {
      id: 'rect_1',
      type: 'rect',
      x: 470,
      y: 350,
      text: '节点A',
      properties: {
        parent: 'lane_1',
      },
    },
    {
      id: 'circle_1',
      type: 'circle',
      x: 620,
      y: 150,
      text: '节点B',
      properties: {
        parent: 'lane_2',
      },
    },
  ],
  edges: [],
})
```
```

--------------------------------

### ExtensionConfig Example

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/api/type/MainTypes.zh.md

An example of how to configure a LogicFlow extension using the ExtensionConfig type. This includes a unique plugin flag, the extension definition, and optional properties.

```typescript
const myExtensionConfig: LogicFlow.ExtensionConfig = {
  pluginFlag: Symbol('myExtension'),
  extension: myExtension, // 这可以是 ExtensionConstructor 或 ExtensionDefinition 的实例
  props: {
    // 传递给扩展的额外属性
  }
};
```

--------------------------------

### Install BpmnElement Plugin Globally

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/tutorial/extension/intro.en.md

Use the BpmnElement plugin by importing it from `@logicflow/extension` and applying it globally with `LogicFlow.use()`.

```tsx
import { BpmnElement } from '@logicflow/extension'

LogicFlow.use(BpmnElement)
```

--------------------------------

### Install BpmnElement Extension (npm)

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/tutorial/extension/bpmn-element.zh.md

Import and use the BpmnElement extension globally or for a single LogicFlow instance when using npm.

```tsx
import { BpmnElement } from '@logicflow/extension'
// 全局使用
LogicFlow.use(BpmnElement)
// 单实例使用
const lf = new LogicFlow({
  // ..., // 其他配置项
  plugins: [BpmnElement],
})
```

--------------------------------

### Dynamic Group Node Configuration Example

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/tutorial/extension/dynamic-group.en.md

An example configuration object for a dynamic group node, specifying its ID, type, position, text, and various properties like collapsible, size, and child restrictions.

```typescript
const dynamicGroupNodeConfig = {
  id: 'dynamic-group_1',
  type: 'dynamic-group',
  x: 500,
  y: 140,
  text: 'dynamic-group_1',
  resizable: true,
  rotatable: false,
  properties: {
    children: ["rect_3"],
    collapsible: true,           // Enable collapsing
    isCollapsed: false,          // Initial state is expanded
    width: 420,                  // Width when expanded
    height: 250,                 // Height when expanded
    collapsedWidth: 80,          // Width when collapsed
    collapsedHeight: 60,         // Height when collapsed
    radius: 5,                   // Border radius
    isRestrict: false,           // Don't restrict child node movement
    autoResize: false,           // Don't auto-resize
    transformWithContainer: true, // Transform children with group
    zIndex: -1000,               // Layer index
    autoToFront: true,           // Auto bring to front when selected
  },
}
```

--------------------------------

### Global Plugin Installation

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/tutorial/extension/intro.en.md

Install common extension plugins like Control, Menu, and DndPanel globally for use across your LogicFlow editor. Ensure the extension CSS is also imported.

```tsx
import LogicFlow from '@logicflow/core'
import { Control, Menu, DndPanel } from '@logicflow/extension'
import '@logicflow/extension/lib/style/index.css'
```

```tsx
LogicFlow.use(Control)
LogicFlow.use(Menu)
LogicFlow.use(DndPanel)
```

--------------------------------

### ExtensionConstructor Implementation Example

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/api/type/MainTypes.zh.md

Shows how to implement the ExtensionConstructor for a LogicFlow plugin. This class defines the pluginName and initializes the extension using provided properties.

```typescript
class MyCustomExtension implements ExtensionConstructor {
    pluginName = 'MyCustomExtension';

    constructor(props: IExtensionProps) {
        // 使用提供的 props 初始化扩展
    }
}
```

--------------------------------

### Install BPMN Adapter (CDN)

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/tutorial/extension/bpmn-element.zh.md

Include the extension script and CSS via CDN. Initialize LogicFlow globally or as a single instance, selecting the appropriate BPMN adapter.

```html
<!-- 注：以下示例假设未注册自定义 BPMN 节点；若已注册自定义 BPMN 节点，无需再引入 BpmnElement 插件 -->

<!-- 引入插件包 -->
<script src="https://cdn.jsdelivr.net/npm/@logicflow/extension/dist/index.min.js"></script>
<!-- 引入插件样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@logicflow/extension/lib/style/index.min.css" />
<div id="container"></div>
<script>
  const { BPMNElements, BPMNAdapter, BPMNBaseAdapter } = Extension
  // 全局使用
  // 根据实际需求，选择引入 BpmnAdapter 或 BpmnXmlAdapter
  Core.default.use(BPMNElements);
  Core.default.use(BPMNAdapter);
  // Core.default.use(BPMNBaseAdapter);
  // 单实例使用
  const lf = new Core.default({
    ..., // Other options
    plugins: [
      BPMNElements,
      // 根据实际需求，选择引入 BpmnAdapter 或 BpmnXmlAdapter
      // BPMNAdapter,
      BPMNBaseAdapter
    ],
  })
</script>
```

--------------------------------

### getBeginAnchor

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/api/runtime-model/edgeModel.zh.md

Gets the starting anchor point for the edge.

```APIDOC
## getBeginAnchor

Gets the starting anchor point.

### Description
Retrieves the starting anchor point coordinates for the edge.

### Method
`getBeginAnchor(sourceNode: BaseNodeModel, targetNode: BaseNodeModel)`

### Parameters
- `sourceNode` (BaseNodeModel) - The source node model.
- `targetNode` (BaseNodeModel) - The target node model.

### Returns
- `LogicFlow.Point` - The coordinates of the starting anchor point.
```

--------------------------------

### Install BPMN Adapter (npm)

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/tutorial/extension/bpmn-element.zh.md

Import and use BPMNElements, BPMNAdapter, or BPMNBaseAdapter for global or single-instance LogicFlow initialization. Choose the adapter based on your needs.

```tsx
import { BPMNElements, BPMNBaseAdapter, BPMNAdapter } from '@logicflow/extension'

LogicFlow.use(BPMNElements)
// 根据实际需求，选择引入 BPMNAdapter 或 BPMNBaseAdapter
// 全局使用
LogicFlow.use(BPMNAdapter)
// LogicFlow.use(BPMNBaseAdapter)

// 单实例使用
const lf = new LogicFlow({
  // ..., // 其他配置项
  plugins: [
    BPMNElements,
    // 根据实际需求，选择引入 BpmnAdapter 或 BpmnXmlAdapter
    BPMNAdapter,
    // BPMNBaseAdapter
  ],
})
```

--------------------------------

### Define Connection Rules for Start Node (Target)

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/api/runtime-model/nodeModel.zh.md

Overrides getConnectedTargetRules to add custom rules for when a node can be a connection target. This example prevents the start node from being a target.

```typescript
class StartEventModel extends CircleNodeModel {
  getConnectedTargetRules() {
    const rules = super.getConnectedTargetRules();
    const notAsTarget = {
      message: "起始节点不能作为边的终点",
      validate: () => false,
    };
    rules.push(notAsTarget);
    return rules;
  }
}
```

--------------------------------

### Initialization with PoolElements Plugin

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/tutorial/extension/pool.en.md

Demonstrates how to initialize LogicFlow with the PoolElements plugin enabled.

```APIDOC
## Initialization

### Description
Initialize LogicFlow with the `PoolElements` plugin to enable swimlane functionality.

### Code
```typescript
import LogicFlow from '@logicflow/core'
import { PoolElements } from '@logicflow/extension'
import '@logicflow/core/es/index.css'
import '@logicflow/extension/es/index.css'

const lf = new LogicFlow({
  container: document.querySelector('#container') as HTMLElement,
  plugins: [PoolElements],
  allowResize: true,
})
```
```

--------------------------------

### Initialize LogicFlow Instance

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/article/architecture-of-logicflow.zh.md

Demonstrates the basic instantiation of LogicFlow with container, dimensions, background, and grid configurations. Use this to set up a new LogicFlow instance for rendering a flowchart.

```javascript
const lf = new LogicFlow({
  container: document.querySelector('#graph'),
  width: 700,
  height: 600,
  background: {
    color: '#F0F0F0'
  },
  grid: {
    type: 'dot',
    size: 20,
  },
});
lf.render({ nodes: [], edges: []});
```

--------------------------------

### Get Node Rotate Control Style

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/api/runtime-model/nodeModel.zh.md

Retrieves the style for the current node's rotation control point. No specific setup is required beyond having a node instance.

```typescript
getRotateControlStyle()
```

--------------------------------

### Get Graph Data Example

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/api/type/MainTypes.zh.md

Demonstrates how to retrieve the current graph data using the getGraphData method. The output is a GraphData object representing the diagram's nodes and edges.

```javascript
const graphData = lf.getGraphData()
console.log(graphData)
// {
//     nodes: [
//         {
//             id: 'node_1',
//             type: 'rect',
//             x: 100,
//             y: 100,
//             text: {
//                 value: 'Start',
//                 x: 100,
//                 y: 100,
//             },
//         },
//         {
//             id: 'node_2',
//             type: 'circle',
//             x: 300,
//             y: 200,
//             text: {
//                 value: 'End',
//                 x: 300,
//                 y: 200,
//             },
//         },
//     ],
//     edges: [
//         {
//             id: 'edge_1',
//             type: 'polyline',
//             sourceNodeId: 'node_1',
//             targetNodeId: 'node_2',
//         },
//     ],
// }
```

--------------------------------

### Initialize LogicFlow with DndPanel and SelectionSelect

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/tutorial/extension/dnd-panel.en.md

This snippet shows the basic setup for LogicFlow, enabling the DndPanel and SelectionSelect extensions. Ensure the necessary CSS is imported for proper styling.

```tsx
import LogicFlow from '@logicflow/core';
import "@logicflow/core/lib/style/index.css";
// import "@logicflow/core/dist/style/index.css"; // Introduced before version 2.0
import { DndPanel, SelectionSelect } from '@logicflow/extension';
import '@logicflow/extension/lib/style/index.css'

LogicFlow.use(DndPanel);
LogicFlow.use(SelectionSelect);
const lf = new LogicFlow({
  container: document.querySelector('#graph') as HTMLElement
});
```

--------------------------------

### Registering Custom Event Definitions

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/api/type/MainTypes.zh.md

Use DefinitionConfigType to register custom event definitions for multiple node types. This example shows how to configure timer events for start, intermediate catch, and boundary events.

```typescript
const customDefinition: DefinitionConfigType[] = [
  {
    // 为startEvent、intermediateCatchEvent、boundaryEvent添加definition
    nodes: ['startEvent', 'intermediateCatchEvent', 'boundaryEvent'],
    definition: { // EventDefinitionType类型
      /**
       * definition的type属性，对应XML数据中的节点名
       * 例如一个时间非中断边界事件的XML数据如下：
       * <bpmn:boundaryEvent id="BoundaryEvent_1" cancelActivity="false" attachedToRef="Task_1">
       *  <bpmn:timerEventDefinition>
       *   <bpmn:timeDuration>
       *    P1D
       *   </bpmn:timeDuration>
       *  </bpmn:timerEventDefinition>
       * </bpmn:boundaryEvent>
       */
      type: 'bpmn:timerEventDefinition',
      // icon可以是svg的path路径m, 也可以是@logicflow/core 导出的h函数生成的svg, 这里是通过h函数生成的svg
      icon: timerIcon,
      /**
       * 对应definition需要的属性，例如这里是timerType和timerValue
       * timerType值可以"timeCycle", "timerDate", "timeDuration", 用于区分 <bpmn:timeCycle/>、<bpmn:timeDate/>、<bpmn:timeDuration/>
       * timerValue是timerType对应的cron表达式
       * 最终会生成 `<bpmn:${timerType} xsi:type="bpmn:tFormalExpression">${timerValue}</bpmn:${timerType}>`
       */
      properties: { // DefinitionPropertiesType 类型
        definitionType: 'bpmn:timerEventDefinition',
        timerValue: '',
        timerType: '',
      }
    }
  }
]
```

--------------------------------

### BPMN Element Transformation Example

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/tutorial/extension/bpmn-element.zh.md

This snippet demonstrates how to configure a BPMN element transformation, mapping child elements to properties. The `expressionType` is set to 'cdata' and the `condition` is defined. Note that the `transformer` in method is only invoked for imported nodes with properties starting with 'bpmn:'.

```json
{
  "sourceRef": "task_1",
  "targetRef": "task_2",
  "properties": {
    "expressionType": "cdata",
    "condition": "foo &gt; bar" // 预先转义 &gt;，确保 XML 合法
  }
}
```

--------------------------------

### Install and Use BPMNElements Plugin

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/tutorial/extension/bpmn-element.zh.md

Demonstrates how to import and globally register or use the BPMNElements plugin with a specific LogicFlow instance. This is the initial step before rendering BPMN elements.

```tsx
import { BPMNElements } from '@logicflow/extension'
// 全局使用
LogicFlow.use(BPMNElements)
// 单实例使用
const lf = new LogicFlow({
  // ..., // 其他配置项
  plugins: [BPMNElements],
})
```

```html
<!-- 引入插件包 -->
<script src="https://cdn.jsdelivr.net/npm/@logicflow/extension/dist/index.min.js"></script>
<!-- 引入插件样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@logicflow/extension/lib/style/index.min.css" />
<div id="container"></div>
<script>
  const { BPMNElements } = Extension
  // 全局使用
  Core.default.use(BPMNElements);
  // 单实例使用
  const lf = new Core.default({
    ..., // Other options
    plugins: [BPMNElements],
  })
</script>
```

--------------------------------

### Importing BPMN Plugins (npm)

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/tutorial/extension/bpmn-element.en.md

Demonstrates how to import and use BpmnElement and BpmnXmlAdapter plugins globally or per-instance using npm.

```tsx
import { BpmnElement, BpmnAdapter, BpmnXmlAdapter, toNormalJson, toXmlJson } from '@logicflow/extension'
// Global usage
LogicFlow.use(BpmnElement)
// Include BpmnAdapter or BpmnXmlAdapter as needed
// LogicFlow.use(BpmnAdapter)
LogicFlow.use(BpmnXmlAdapter)
// Per-instance usage
const lf = new LogicFlow({
  // ... // other options
  plugins: [
    BpmnElement,
    // Include BpmnAdapter or BpmnXmlAdapter as needed
    // BpmnAdapter,
    BpmnXmlAdapter
  ]
})
```

--------------------------------

### Initialize LogicFlow with Pool Elements Plugin

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/tutorial/extension/pool.en.md

Import necessary LogicFlow and PoolElements, then initialize LogicFlow with the plugin. Ensure core and extension CSS are imported.

```tsx
import LogicFlow from '@logicflow/core'
import { PoolElements } from '@logicflow/extension'
import '@logicflow/core/es/index.css'
import '@logicflow/extension/es/index.css'

const lf = new LogicFlow({
  container: document.querySelector('#container') as HTMLElement,
  plugins: [PoolElements],
  allowResize: true,
})
```

--------------------------------

### ContextPad Plugin: Setting Menu Items

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/tutorial/extension/custom.zh.md

Demonstrates how to define a method within a custom plugin to set common menu items and how to call this method using the LogicFlow extension API.

```typescript
class ContextPad {
  /**
   * 设置通用的菜单选项
   */
  setContextMenuItems(items) {
    this.commonMenuItems = items;
  }
}

ContextPad.pluginName = "contextPad";

// 调用方法

lf.extension.contextPad.setContextMenuItems([
  {
    icon: "...",
    callback: () => {},
  },
]);
```

--------------------------------

### Initialize LogicFlow Instance

Source: https://github.com/didi/logicflow/wiki/Home

Instantiate LogicFlow with configuration options for container, dimensions, tools, background, and grid. Then render the initial nodes and edges.

```javascript
const lf = new LogicFlow({
  container: document.querySelector('#graph'),
  width: 700,
  height: 600,
  tool: {
    menu: true,
    control: true,
  },
  background: {
    color: '#F0F0F0'
  },
  grid: {
    type: 'dot',
    size: 20,
  },
});
lf.render({ nodes: [], edges: []});
```

--------------------------------

### Initialize and Render BPMN Adapter

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/tutorial/extension/adapter.en.md

This snippet shows how to import and use the BpmnAdapter with LogicFlow. It demonstrates initialization and rendering, and how to retrieve graph data, optionally specifying retained fields for accurate data processing.

```tsx
import LogicFlow from "@logicflow/core";
import { BpmnAdapter } from "@logicflow/extension";

LogicFlow.use(BpmnAdapter);

const lf = new LogicFlow();
lf.render();

// Get the converted data via getGraphData.
// Since version 1.2.5, getGraphData has been added as an input parameter to ensure that certain adapterOut's are executed correctly, e.g. the adapterOut of the bpmn-adapter in this case has an optional input parameter "retainedFields".
// This means that a field that appears in this array will not be considered a node but a property when its value is an array or an object. We have defined some default property fields such as "properties", "startPoint", "endPoint", "pointsList", which are obviously not sufficient for data processing.
// So in order to ensure that certain node attributes are processed properly in the exported data, pass in an array of attribute reserved fields as needed. e.g. lf.getGraphData(['attribute-a', 'attribute-b'])

lf.getGraphData();
```

--------------------------------

### MiniMap Configuration

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/tutorial/extension/minimap.en.md

Shows how to configure the MiniMap's appearance and behavior during LogicFlow instance initialization using `pluginsOptions`.

```APIDOC
## MiniMap Configuration

When initializing the `lf` instance, you can customize the MiniMap's capabilities through `pluginsOptions`.

```tsx | pure
const miniMapOptions: MiniMap.MiniMapOption = {
  ...options
}

const lf = new LogicFlow({
  ...config,
  plugins: [MiniMap],
  pluginsOptions: {
    miniMap: miniMapOptions,
  },
});
```

The `miniMapOptions` configuration is as follows:

| Property Name   | Type    | Default Value | Required | Description                                                                                           |
| --------------- | ------- | ------------- | -------- | ----------------------------------------------------------------------------------------------------- |
| width           | number  | 150           | -        | The width of the canvas in the MiniMap                                                                |
| height          | number  | 220           | -        | The height of the canvas in the MiniMap                                                               |
| showEdge        | boolean | false         | -        | Whether to render edges in the MiniMap                                                                |
| headerTitle     | string  | Navigation    | -        | The text content of the MiniMap's title bar; defaults to not showing                                  |
| isShowHeader    | boolean | false         | -        | Whether to show the MiniMap's title bar                                                               |
| isShowCloseIcon | boolean | false         | -        | Whether to show the close button                                                                      |
| leftPosition    | number  | -             | -        | The left margin of the MiniMap from the canvas's left boundary; takes precedence over `rightPosition` |
| rightPosition   | number  | 0             | -        | The right margin of the MiniMap from the canvas's right boundary; lower priority than `leftPosition`  |
| topPosition     | number  | -             | -        | The top margin of the MiniMap from the canvas's top boundary; takes precedence over `bottomPosition`  |
| bottomPosition  | number  | 0             | -        | The bottom margin of the MiniMap from the canvas's bottom boundary; lower priority than `topPosition` |

```

--------------------------------

### Example: Always Connect to Leftmost Anchor

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/api/type/MainTypes.zh.md

Example of a custom target anchor function that always selects the leftmost anchor of a node for connection, regardless of where the drag ends.

```typescript
customTargetAnchor: (nodeModel) => {
  const anchors = nodeModel?.anchors || []
  if (!anchors.length) return
  const left = anchors.reduce((min, a) => (a.x < min.x ? a : min), anchors[0])
  return {
    index: anchors.indexOf(left),
    anchor: left,
  }
}
```

--------------------------------

### Install BPMN Extension (CDN)

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/tutorial/extension/bpmn-element.en.md

Include the BPMNElements plugin globally or per-instance using CDN links. Choose between BPMNAdapter or BPMNBaseAdapter. This is required if no custom BPMN nodes are registered.

```html
<!-- Note: The following example assumes no custom BPMN nodes are registered;
     if custom BPMN nodes are already registered, you do not need to include the BpmnElement plugin. -->

<!-- Include plugin bundle -->
<script src="https://cdn.jsdelivr.net/npm/@logicflow/extension/dist/index.min.js"></script>
<!-- Include plugin styles -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@logicflow/extension/lib/style/index.min.css" />
<div id="container"></div>
<script>
  const { BPMNElements, BPMNAdapter, BPMNBaseAdapter } = Extension
  // Global usage
  // Choose to include BpmnAdapter or BpmnXmlAdapter as needed
  Core.default.use(BPMNElements);
  Core.default.use(BPMNAdapter);
  // Core.default.use(BPMNBaseAdapter);
  // Per-instance usage
  const lf = new Core.default({
    ..., // Other options
    plugins: [
      BPMNElements,
      // Choose to include BpmnAdapter or BpmnXmlAdapter as needed
      // BPMNAdapter,
      BPMNBaseAdapter
    ],
  })
</script>
```

--------------------------------

### Importing BPMN Plugins (CDN)

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/tutorial/extension/bpmn-element.en.md

Shows how to include BpmnElement and BpmnXmlAdapter plugins via CDN for global or per-instance usage.

```html
<!-- Note: The following example assumes no custom BPMN nodes are registered;
     if custom BPMN nodes are already registered, you do not need to include the BpmnElement plugin -->

<!-- Include plugin bundle -->
<script src="https://cdn.jsdelivr.net/npm/@logicflow/extension/dist/index.min.js"></script>
<!-- Include plugin styles -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@logicflow/extension/lib/style/index.min.css" />
<div id="container"></div>
<script>
  const { BpmnElement, BpmnAdapter, BpmnXmlAdapter, toNormalJson, toXmlJson } = Extension
  // Global usage
  // Include BpmnAdapter or BpmnXmlAdapter as needed
  Core.default.use(BpmnElement);
  // Core.default.use(BpmnAdapter);
  Core.default.use(BpmnXmlAdapter);
  // Per-instance usage
  const lf = new Core.default({
    ..., // Other options
    plugins: [
      BpmnElement,
      // Include BpmnAdapter or BpmnXmlAdapter as needed
      // BpmnAdapter,
      BpmnXmlAdapter
    ],
  })
</script>
```

--------------------------------

### Node getOuterGAttributes Example

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/api/type/MainTypes.zh.md

Example of implementing the getOuterGAttributes method to return DomAttributes for a node's outer SVG element. This allows for custom styling of the node's container.

```typescript
getOuterGAttributes(): LogicFlow.DomAttributes {
    return {
      className: '',
      fill: '#fff',
      stroke: 'green',
    }
  }
```

--------------------------------

### Custom Node Model Example

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/tutorial/basic/node.en.md

This example shows how to create a custom node model by inheriting from LogicFlow's base RectNodeModel. This allows for customization of node data and behavior.

```typescript
import { RectNodeModel } from '@logicflow/core'

class CustomNodeModel extends RectNodeModel {
  // Override methods or add properties to customize the node's data layer
  // For example, to add custom properties:
  // initNodeData(data) {
  //   super.initNodeData(data);
  //   this.customProperty = data.customProperty || 'defaultValue';
  // }
}

export default CustomNodeModel;

```

--------------------------------

### Define EdgeData Example

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/api/type/MainTypes.zh.md

Example of defining an EdgeData object to represent a polyline edge in LogicFlow. It includes properties for ID, type, text, start/end points, and a pointsList to define the path.

```typescript
const edge: EdgeData = {
  id: 'edge_1',
  type: 'polyline',
  text: {
    value: 'Connection',
    x: 150,
    y: 100,
  },
  startPoint: { x: 100, y: 100 },
  endPoint: { x: 300, y: 200 },
  pointsList: [
    { x: 150, y: 150 },
    { x: 250, y: 150 },
    { x: 150, y: 175 },
    { x: 250, y: 175 },
  ],
};
```

--------------------------------

### Enable SnapGrid on Initialization

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/tutorial/basic/canvas.zh.md

Initialize LogicFlow with both grid visualization and snapGrid enabled for node alignment during drag operations.

```typescript
const lf = new LogicFlow({
  container: document.querySelector('#app'),
  grid: {
    size: 20,
    visible: true,
    type: 'dot',
  },
  snapGrid: true, // Enable snapGrid on initialization
})
```

--------------------------------

### Import BPMNElements Plugin (CDN)

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/tutorial/extension/bpmn-element.en.md

Include the BPMNElements plugin and its styles via CDN for global or per-instance usage.

```html
<!-- Include plugin bundle -->
<script src="https://cdn.jsdelivr.net/npm/@logicflow/extension/dist/index.min.js"></script>
<!-- Include plugin styles -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@logicflow/extension/lib/style/index.min.css" />
<div id="container"></div>
<script>
  const { BPMNElements } = Extension
  // Global usage
  Core.default.use(BPMNElements);
  // Per-instance usage
  const lf = new Core.default({
    ..., // Other options
    plugins: [BPMNElements],
  })
</script>
```

--------------------------------

### Custom Node View Example

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/tutorial/basic/node.en.md

This example demonstrates creating a custom node view by inheriting from LogicFlow's base RectNode. This is used to define the visual representation of the custom node.

```typescript
import { RectNode } from '@logicflow/core'

class CustomNode extends RectNode {
  // Override methods to customize the node's view layer
  // For example, to override the getShape method:
  // getShape() {
  //   const { x, y, width, height } = this.getAttributes();
  //   // Return custom SVG elements or modify existing ones
  //   return [
  //     { 
  //       type: 'rect', 
  //       x: x - width / 2, 
  //       y: y - height / 2, 
  //       width: width,
  //       height: height,
  //       fill: 'blue', // Example custom style
  //       stroke: 'black'
  //     }
  //   ];
  // }
}

export default CustomNode;

```

--------------------------------

### Importing BpmnElement Plugin (CDN)

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/tutorial/extension/bpmn-element.zh.md

Include the extension script and stylesheet via CDN. Then, import the necessary components and use them globally or for a single instance. Choose between BpmnAdapter or BpmnXmlAdapter.

```html
<!-- 注：以下示例假设未注册自定义 BPMN 节点；若已注册自定义 BPMN 节点，无需再引入 BpmnElement 插件 -->

<!-- 引入插件包 -->
<script src="https://cdn.jsdelivr.net/npm/@logicflow/extension/dist/index.min.js"></script>
<!-- 引入插件样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@logicflow/extension/lib/style/index.min.css" />
<div id="container"></div>
<script>
  const { BpmnElement, BpmnAdapter, BpmnXmlAdapter, toNormalJson, toXmlJson } = Extension
  // 全局使用
  // 根据实际需求，选择引入 BpmnAdapter 或 BpmnXmlAdapter
  Core.default.use(BpmnElement);
  // Core.default.use(BpmnAdapter);
  Core.default.use(BpmnXmlAdapter);
  // 单实例使用
  const lf = new Core.default({
    ..., // Other options
    plugins: [
      BpmnElement,
      // 根据实际需求，选择引入 BpmnAdapter 或 BpmnXmlAdapter
      // BpmnAdapter,
      BpmnXmlAdapter
    ],
  })
</script>
```

--------------------------------

### Example: Conditional Edge Generation

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/api/type/MainTypes.zh.md

Example of an edge generator function that creates a 'bezier' curve for edges originating from 'rect' nodes, and 'polyline' for others. It also respects the current edge type if provided.

```typescript
edgeGenerator: (sourceNode, targetNode, currentEdge) => {
  // 起始节点类型 rect 时使用bezier
  if (sourceNode.type === 'rect') return 'bezier'
  if (currentEdge) return currentEdge.type
  return 'polyline'
}
```

--------------------------------

### Import and Use Label Plugin

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/tutorial/extension/label.zh.md

Demonstrates two ways to integrate the Label plugin: using the `use` method or enabling it via the `plugins` configuration option during LogicFlow initialization. Includes necessary CSS import.

```tsx
import LogicFlow from "@logicflow/core";
import { Label } from "@logicflow/extension";
import "@logicflow/extension/lib/style/index.css";

// 两种使用方式
// 通过 use 方法引入插件
LogicFlow.use(Label);

// 或者通过配置项启用插件（可以配置插件属性）
const lf = new LogicFlow({
  container: document.querySelector('#app'),
  plugins: [Label],
  pluginsOptions: {
    label: {
      // ...labelOptions
    },
  },
});
```

--------------------------------

### getEndAnchor

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/api/runtime-model/edgeModel.zh.md

Gets the ending anchor point for the edge.

```APIDOC
## getEndAnchor

Gets the ending anchor point.

### Description
Retrieves the ending anchor point coordinates for the edge.

### Method
`getEndAnchor(targetNode: BaseNodeModel)`

### Parameters
- `targetNode` (BaseNodeModel) - The target node model.

### Returns
- `LogicFlow.Point` - The coordinates of the ending anchor point.
```

--------------------------------

### Initialize LogicFlow with InsertNodeInPolyline Extension

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/tutorial/extension/insert-node-in-polyline.en.md

Import and use the InsertNodeInPolyline extension when initializing LogicFlow. Ensure core and extension CSS are included.

```tsx
import LogicFlow from '@logicflow/core'
import '@logicflow/core/lib/style/index.css'
import { InsertNodeInPolyline } from '@logicflow/extension'
import '@logicflow/extension/lib/style/index.css'

LogicFlow.use(InsertNodeInPolyline)
```

--------------------------------

### getVirtualRectSize

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/api/runtime-model/graphModel.zh.md

Gets the size and center position of the virtual rectangle for the graph area.

```APIDOC
## getVirtualRectSize

### Description
Gets the size and center position of the virtual rectangle for the graph area.

### Parameters
#### Query Parameters
- **includeEdge** (boolean) - Optional - Defaults to false. Whether to include edges in the calculation.
```

--------------------------------

### Get Node Properties

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/api/runtime-model/nodeModel.zh.md

Retrieves the properties of a node. This method is not intended to be overridden.

```typescript
const nodeModel = lf.getNodeModelById("node_1");
const properties = nodeModel.getProperties();
```

--------------------------------

### ContextPad Plugin: Listening to Node Clicks

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/tutorial/extension/custom.zh.md

Shows how to use the LogicFlow instance passed to the plugin's constructor to listen for events, such as 'node:click', and trigger custom logic.

```typescript
class ContextPad {
  constructor({ lf }) {
    lf.on("node:click", (data) => {
      this.showContextPad(data);
    });
  }

  showContextPad() {
    // ...
  }
}
```

--------------------------------

### Custom Non-Resizable Node

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/tutorial/extension/node-resize.zh.md

Example of defining a custom node without resizing capabilities.

```tsx
import { RectNode, RectNodeModel } from '@logicflow/core'

class CustomNode extends RectNode {
}

class CustomNodeModel extends RectNodeModel {
}

export default {
  type: 'custom-node',
  model: CustomNodeModel,
  view: CustomNode,
}
```

--------------------------------

### ArrowConfig

Source: https://github.com/didi/logicflow/blob/master/sites/docs/docs/api/type/MainTypes.zh.md

Configuration for arrow styles, specifying the appearance of the start and end markers of an arrow.

```APIDOC
## ArrowConfig (Arrow Configuration)

### Description
This interface defines the configuration for arrow styles, primarily used for setting the appearance of the start and end markers of an edge.

### Properties
*   **markerStart** (string) - Required - Specifies the style of the arrow's starting marker. Typically a URL pointing to an SVG marker or a predefined marker type.
*   **markerEnd** (string) - Required - Specifies the style of the arrow's ending marker. Similar to `markerStart`, it can be a URL to an SVG marker or a predefined marker type.
```