# @g1cloud/bpmn-modeler-next 中文文档

规范地址：https://npmcn.com/package/%40g1cloud/bpmn-modeler-next/

版本：5\.0\.0-beta\.99
npm 元数据更新时间：2026-11-01T01:31:51.750Z
中文译文更新时间：2026-11-01T05:32:49.440Z
软件包许可：LicenseRef-LICENSE

本文由上游 README 机器翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40g1cloud/bpmn-modeler-next
原文对照：https://npmcn.com/package/%40g1cloud/bpmn-modeler-next/?lang=original

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：2.8 MB，52 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>= 24\.10\.0
- 运行依赖：6 个
- peer 依赖：vue ^3\.5\.0
- 首次发布：2026-08-20T05:54:32.189Z
- 最新版本发布：2026-11-01T01:31:51.600Z
- 已发布版本数：198（近 12 个月 198 个）

## 中文简介

Vue 3 BPMN文档创作编辑器（基于BPMN -js）与AI代理创作

## 安装

```sh
npm install @g1cloud/bpmn-modeler-next
```

也可以使用：`pnpm add @g1cloud/bpmn-modeler-next`、`yarn add @g1cloud/bpmn-modeler-next`、`bun add @g1cloud/bpmn-modeler-next`

## README

# @g1cloud / bpmn-modeler-next

> **BPMN** 3 . \[qh\]2015-10-16 16:51:20 \[qh\] **i / i / i / i / i / i / i / i / i / i / i / i / i / i**■■■■■■■■

-   **\* \* \***： `@g1cloud/bpmn-modeler-next`
-   **스택**： TypeScript·Vue 3·Vite（库模式）·Vitest 4（浏览器模式）·캔 **\[qh**
-   **상태**： beta (`5.0.0-beta.*`）

* * *

## 개요

BPMN：大黄蜂`entity-modeler-next` / `ui-modeler-next`) **\[qh `bluework4-tool` 【中文翻译】：【中文翻译** -大黄蜂。

■■■■■■■

-   **\[qh** - value 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 `createBpmnEditorController` + `BpmnModelerView` + op。
-   **大黄蜂/大黄蜂** - - - - - - - - - - -`describeProcess`)`applyBpmnOpBatch`)。读，读，写，写`createHeadlessBpmnModeler`)大黄蜂：大黄蜂

## 拉大拉大

-   **BPMN 2.0 XML。** 【翻译】：【翻译】：【翻译】：【翻译 **뷰**（ir·json）。\* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \*。
-   **2。** LLM SDK。http://www.tingclass.com/, http://www.tingclass.com/ `resolver` bpmn-js `modeling` API / API / API / API / API / API / API
-   **Ai：大黄蜂，大黄蜂，大黄蜂。** 신규초안은하이브리드배치(프로세스내부자동레이아웃+풀골격·메시지플로우·주석凤凰社),부분편집은기존배치를보존한다。
-   **【翻译】** “”“”“”“”“”“”“”“”“”“”“”“ `extensionElements`（`bwl` \[qh\] \[qh\]소실되어도휴리스틱으로재생성가능한파생정보이며,어휘진화는additive-only다。
-   **\[qh\]** \[qh\]`baseVersion` \[qh\]BPMN은단일저작자·소규모문서가일반적이라元素단위CAS는두지않는다-시블링의파트단위CAS와의도적으로다른선택이다。

### \[qh\] \[qh\]

| 경로 | 주체 | 용도 |
| --- | --- | --- |
| 캔小鱼网 | `controller.applyAgentBatch` -电晶硅 | GUI。\* \* = **\[qh**（op: 1） + (1) + (1) + (1) + (1 |
| \[qh\] | `createHeadlessBpmnModeler` + `applyBpmnOpBatch` -退休金退休金退休金退休金退休金退休金 | i . i . i . i。Node + jsdom |

■■■■■■■■■■■■■■■■ `BpmnModelerLike` 大黄蜂：大黄蜂：大黄蜂헤드리스산출DI는캔버스와도형바운즈0오차·외부라벨±2 px로등가가고정되어있다(회귀게이트2종)。

## 설치

```bash
pnpm add @g1cloud/bpmn-modeler-next
```

同行的依赖:

```jsonc
{
  "vue": "^3.5.0"
}
```

bpmn-js·diagram-js·bpmn-moddle계열은이패키지의依赖性로함께설치된다。

（bpmn-js） （bpmn-js캔） **\* \* \* \* \* \* \* \* \* \***）。

```ts
import '@g1cloud/bpmn-modeler-next/style.css'
```

## \[qh

```vue
<template>
  <BpmnModelerView ref="view" :xml="initialXml" @ready="onReady" />
</template>

<script setup lang="ts">
import { provide, ref } from 'vue'
import { BpmnModelerView, createBpmnEditorController, EDITOR } from '@g1cloud/bpmn-modeler-next'

const view = ref<InstanceType<typeof BpmnModelerView>>()
const controller = createBpmnEditorController()

// 뷰 컴포넌트·패널이 inject 로 소비
provide(EDITOR, controller)

// 캔버스가 마운트되면 modeler 를 컨트롤러에 붙인다(컨트롤러는 bpmn-js 생성을 소유하지 않는다)
function onReady() {
  controller.attach(view.value!.getModeler()!)
}
</script>
```

\[qh `importXml`/`saveXml`/`dirty` \[qh\]`applyAgentBatch`·`setEditable`·`agentBusy`) 1 . a：뷰는 `imported`·····`import-error` 【翻译】

## 【翻译

```ts
import {
  describeProcess,            // moddle definitions → IrDefinition + hints + omitted (파생 뷰)
  describeProcessXml,         // XML 입력 래퍼 — 순수, 서버 실행 가능
  buildBpmnOpBatch,           // SymbolicOp[] → BpmnOpBatch (baseVersion·origin·멱등 키)
  applyBpmnOps,               // op 배치 하강 (사전 전수 검증 + 실패 시 단일 undo 되감기)
  applyBpmnOpBatch,           // CAS 포함 배치 적용 → ApplyBatchOutcome
  createHeadlessBpmnModeler,  // 에디터 없는 하강용 modeler (Node + jsdom)
  APPLY_BPMN_OPS_SCHEMA,      // applyOps 도구 input_schema (op 어휘의 JSON Schema 단일 출처)
  SYMBOLIC_OP_KINDS,          // op 종류 17
  IR_FLOW_NODE_TYPES,         // describe 가 내는 노드 타입 12 (read)
  ADDABLE_FLOW_NODE_TYPES,    // op 로 만들 수 있는 노드 타입 10 (write · read 의 부분집합)
  IR_EVENT_DEFINITIONS,       // 이벤트 정의 — 'timer' (intermediateCatchEvent 전용)
  BWL_SIDES,                  // 주석 방위 8
} from '@g1cloud/bpmn-modeler-next'
```

-   **【翻译】** `ApplyBatchOutcome` 은 `applied` / `conflict` / `rejected` ■■■■■■■ `issues` \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \*。
-   **【qh】**/ / / / / / / / / `rejected` ◆◆◆◆◆
-   **匙匙。匙匙。匙匙。匙匙。匙匙。匙匙。匙匙。匙匙。匙匙。匙匙。匙匙** - BPMN n / n / n / n / n / n / n / n / n / n / n / n / n / n / n / n / n / n / n / n\[qh `src/index.test.ts` \[qh\]

\[qh\] \[qh\] \[qh\]\[qh `canvas` 【翻译 `dom: { textMeasurement: 'native' }` 全无。

```ts
const modeler = createHeadlessBpmnModeler()
await modeler.importXML(xml)
const outcome = await applyBpmnOpBatch(modeler, batch, { currentVersion })
```

## API

| 영역 | 手电出口 |
| --- | --- |
| `core` | `IrDefinition`·`IrNode`·`IrSequenceFlow` \* \* \* \* `BWL_NS`/`BWL_PREFIX`/`BWL_MODDLE_SCHEMA` \[qh\] \[qh `BpmnModelerLike` |
| `command` | `commandSeam`（do/undo）· `executeAsUndoEpisode`（10）(1)、(1)、(1)、(1)、(1) |
| `agent` | `SymbolicOp` \* \* \* `applyBpmnOps`·`validateOps`·`lowerOps` · `describeProcess` · `APPLY_BPMN_OPS_SCHEMA` · `buildBpmnOpBatch`/`applyBpmnOpBatch` |
| `editor` | `createBpmnEditorController` · `EDITOR` 注入关键 |
| `view` | `BpmnModelerView` |
| `headless` | `createHeadlessBpmnModeler` · `installHeadlessBpmnDom` · `HEADLESS_BPMN_MODULES` · `HEADLESS_TEXT_METRICS` |
| `adapter` | `loadBpmnXml`/`saveBpmnXml` · `createBpmnModdle` · `BPMN_MODDLE_EXTENSIONS`（i18n·bw） |

## 개발

```bash
pnpm dev          # 데모 하네스 (src/dev)
pnpm test         # Vitest — unit(jsdom) + browser(chromium) 2계층
pnpm typecheck    # vue-tsc --noEmit
pnpm build        # 라이브러리 빌드 → dist/
```

-   节点 `>= 24.10.0`
-   \[qh\] \[qh\]\* \* \* \*； **bpmn- 1k`*.browser.test.ts`（铬）** 2. 1 .我想要的是：1 .我想要的是：1 .我想要的是：\* \* \* \* \* \* \* \* \* \* \* \*

## \[qh\]

`LicenseRef-LICENSE` - - - - - - - - - `license` \[qh\]

## 常见问题

### @g1cloud/bpmn-modeler-next 是什么？

Vue 3 BPMN文档创作编辑器（基于BPMN -js）与AI代理创作

### 如何安装 @g1cloud/bpmn-modeler-next？

在项目目录运行 npm install @g1cloud/bpmn-modeler-next，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：vue（^3\.5\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @g1cloud/bpmn-modeler-next 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @g1cloud/bpmn-modeler-next 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @g1cloud/bpmn-modeler-next 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>= 24\.10\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @g1cloud/bpmn-modeler-next 可以商用吗？

@g1cloud/bpmn-modeler-next 使用 LicenseRef-LICENSE 许可。声明的许可为 LicenseRef-LICENSE，请阅读许可原文确认使用条件。以上为概括，不构成法律意见，请以许可原文为准。

### @g1cloud/bpmn-modeler-next 还在维护吗？

最新版本 5\.0\.0-beta\.99 发布于 2026/11/01（2 天前）；至今共发布 198 个版本，其中过去 12 个月发布了 198 个；首次发布于 2026/08/20。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。