# @meshmakers/octo-process-diagrams 中文文档 规范地址：https://npmcn.com/package/%40meshmakers/octo-process-diagrams/ 版本：3\.5\.550 npm 元数据更新时间：2026-11-01T19:25:32.155Z 中文译文更新时间：2026-11-01T20:51:54.675Z 软件包许可：未声明 本文由上游 README 机器翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40meshmakers/octo-process-diagrams 原文对照：https://npmcn.com/package/%40meshmakers/octo-process-diagrams/?lang=original ## 关键信息（来自 npm 元数据） - 包体积（解压后）：4.2 MB，7 个文件 - 模块格式：ES Module - TypeScript 类型：包内自带 - 运行依赖：1 个 - peer 依赖：@angular/core ^22\.0\.0，dockview-core ^5\.0\.0，@angular/forms ^22\.0\.0，apollo-angular ^14\.0\.0，expr-eval-fork ^3\.0\.3，@angular/common ^22\.0\.0，dockview-angular ^5\.0\.0，@meshmakers/shared-ui \*，@meshmakers/octo-services \*，@meshmakers/shared-services \*，@progress/kendo-angular-icons ^24\.1\.0，@progress/kendo-angular-label ^24\.1\.0，@progress/kendo-angular-dialog ^24\.1\.0，@progress/kendo-angular-inputs ^24\.1\.0，@progress/kendo-angular-layout ^24\.1\.0，@progress/kendo-angular-buttons ^24\.1\.0，@progress/kendo-angular-dropdowns ^24\.1\.0 - 首次发布：2026-02-22T21:10:32.473Z - 最新版本发布：2026-11-01T19:25:31.977Z - 已发布版本数：222（近 12 个月 222 个） ## 中文简介 用于在OctoMesh平台应用程序中进行流程图设计和符号编辑的Angular库。 ## 安装 ```sh npm install @meshmakers/octo-process-diagrams ``` 也可以使用：`pnpm add @meshmakers/octo-process-diagrams`、`yarn add @meshmakers/octo-process-diagrams`、`bun add @meshmakers/octo-process-diagrams` ## README # @meshmakers / octo-process-diagrams 用于在OctoMesh平台应用程序中进行流程图设计和符号编辑的Angular库。 **注意：** 这个图书馆需要一个 [Angular的剑道UI](https://www.telerik.com/kendo-angular-ui) 许可证。 部分 [@meshmakers](https://www.npmjs.com/org/meshmakers) 包的生态系统。 ## 功能 - **流程设计人员** -基于可视化svg的流程图编辑器（HMI） - **符号编辑器** 创建和管理可重用的符号定义 - **符号库** -用版本控制组织库中的符号 - **原始的系统** -矩形，椭圆，直线，折线，多边形，路径，文本，图像 - **SVG进口** -通过工具栏按钮，拖放或剪贴板粘贴导入SVG文件 - **Dockview布局** -灵活，可重新安排的面板系统 - **动画** -支持数据绑定的SVG动画 - **公开属性** -将符号属性绑定到运行时数据（数字，字符串，布尔值） - **表达式求值** - - - - - - `expr-eval-fork` 基于表达式的数据绑定 - **分组** - Figma/ illustrator风格的原语和符号临时分组 - **撤销/重做** -键盘快捷键的完整历史记录 ## 安装 ```bash npm install @meshmakers/octo-process-diagrams ``` ## 构建 ```bash # From frontend-libraries root npm run build:octo-process-diagrams ``` ## 体系结构 ``` octo-process-diagrams/ ├── src/ │ ├── public-api.ts # Public API exports │ └── lib/ │ ├── process-widget.models.ts # Core data models │ ├── primitives/ │ │ ├── models/ # Primitive data models │ │ │ ├── primitive.models.ts # Base interfaces (PrimitiveBase, PrimitiveStyle) │ │ │ ├── rectangle.model.ts │ │ │ ├── ellipse.model.ts │ │ │ ├── line.model.ts │ │ │ ├── polygon.model.ts │ │ │ ├── path.model.ts │ │ │ ├── text.model.ts │ │ │ ├── image.model.ts │ │ │ ├── group.model.ts │ │ │ ├── symbol.model.ts │ │ │ ├── animation.models.ts │ │ │ ├── transform-property.models.ts │ │ │ └── style-class.model.ts │ │ ├── renderers/ # SVG rendering per type │ │ │ ├── primitive-renderer.interface.ts │ │ │ ├── rectangle.renderer.ts │ │ │ ├── ellipse.renderer.ts │ │ │ ├── line.renderer.ts │ │ │ ├── polygon.renderer.ts │ │ │ ├── path.renderer.ts │ │ │ ├── text.renderer.ts │ │ │ ├── image.renderer.ts │ │ │ ├── symbol.renderer.ts │ │ │ └── animation.renderer.ts │ │ └── primitive-renderer.registry.ts │ ├── designer/ │ │ ├── process-designer.component.ts # Main editor component │ │ ├── process-designer.component.html │ │ ├── process-designer.component.scss │ │ ├── element-palette.component.ts # Draggable element palette │ │ ├── property-inspector.component.ts # Properties panel │ │ ├── symbol-library-panel.component.ts │ │ ├── context-menu.component.ts │ │ ├── path-editor.component.ts │ │ ├── animation-editor.component.ts │ │ ├── simulation-panel.component.ts │ │ ├── transform-property-editor.component.ts │ │ ├── binding-editor-dialog.component.ts │ │ ├── dockview/ # Flexible layout system │ │ │ └── dockview.component.ts │ │ ├── panels/ # Dockview panel wrappers │ │ │ ├── elements-panel.component.ts │ │ │ ├── symbols-panel.component.ts │ │ │ ├── properties-panel.component.ts │ │ │ ├── transform-panel.component.ts │ │ │ ├── animations-panel.component.ts │ │ │ ├── simulation-panel.component.ts │ │ │ └── settings-panel.component.ts │ │ └── services/ # Designer services │ │ ├── designer-state.service.ts │ │ ├── designer-selection.service.ts │ │ ├── designer-clipboard.service.ts │ │ ├── designer-history.service.ts │ │ ├── designer-creation.service.ts │ │ ├── designer-keyboard.service.ts │ │ ├── designer-rendering.service.ts │ │ ├── designer-primitive.service.ts │ │ ├── designer-bounds.service.ts │ │ ├── designer-alignment.service.ts │ │ ├── designer-alignment-guide.service.ts │ │ ├── designer-coordinate.service.ts │ │ ├── designer-drag.service.ts │ │ ├── designer-resize.service.ts │ │ ├── designer-grouping.service.ts │ │ ├── designer-deletion.service.ts │ │ ├── designer-zorder.service.ts │ │ ├── designer-diagram.service.ts │ │ ├── designer-context-menu.service.ts │ │ ├── designer-layout.service.ts │ │ ├── geometry-util.service.ts │ │ ├── path-editor.service.ts │ │ └── primitive-handlers/ # Per-type move/resize/bounds │ │ ├── primitive-handler.interface.ts │ │ ├── rectangle.handler.ts │ │ ├── ellipse.handler.ts │ │ ├── line.handler.ts │ │ ├── polyline.handler.ts │ │ ├── path.handler.ts │ │ ├── text.handler.ts │ │ └── default.handler.ts │ ├── admin/ │ │ ├── symbol-library-admin.component.ts # Symbol library management │ │ └── symbol-editor.component.ts # Symbol editor │ ├── pages/ # Routable page components │ │ ├── symbol-library-list/ │ │ ├── symbol-library-detail/ │ │ ├── symbol-editor-page/ │ │ ├── process-diagram-list/ │ │ └── data-sources/ # List view data source directives │ ├── services/ │ │ ├── svg-import.service.ts # SVG file import │ │ ├── symbol-library.service.ts # Symbol library CRUD │ │ ├── process-diagram-data.service.ts # Diagram persistence │ │ └── expression-evaluator.service.ts # Expression evaluation for bindings │ ├── graphQL/ # Auto-generated GraphQL services │ ├── styles/ │ │ └── _dockview-theme.scss # Optional Deep Sea dockview theme mixin │ └── docs/ │ └── SVG-IMPORT.md # SVG import documentation ``` ## 主要出口 ### 组件 | 组件 | 描述 | | --- | --- | | `ProcessDesignerComponent` | 流程图的主要可视化编辑器 | | `ElementPaletteComponent` | 原始形状的可拖动调色板 | | `PropertyInspectorComponent` | 所选项目的属性面板 | | `SymbolLibraryPanelComponent` | 符号库浏览器面板 | | `SymbolLibraryAdminComponent` | 符号库管理UI | | `SymbolEditorComponent` | 符号定义编辑器 | | `DockviewComponent` | 柔性面板布局系统 | | `PathEditorComponent` | SVG路径编辑 | | `TransformPropertyEditorComponent` | 转换属性编辑 | | `BindingEditorDialogComponent` | 数据绑定配置对话框 | | `SimulationPanelComponent` | 模拟值测试 | ### 页面组件（用于在消费应用中路由） | 组件 | 描述 | | --- | --- | | `SymbolLibraryListComponent` | 符号库列表 | | `SymbolLibraryDetailComponent` | 库中的符号 | | `SymbolEditorPageComponent` | 符号编辑器与保存/取消 | | `ProcessDiagramListComponent` | 流程图列表 | ### 服务 | 服务 | 描述 | | --- | --- | | `SymbolLibraryService` | 符号库CRUD操作 | | `SvgImportService` | SVG文件的导入和转换 | | `ProcessDiagramDataService` | 图的持久性 | | `ExpressionEvaluatorService` | 数据绑定的表达式求值 | | `DesignerLayoutService` | Dockview布局持久化 | | `DesignerSelectionService` | 选择状态管理 | | `DesignerHistoryService` | 撤销/重做功能 | | `DesignerClipboardService` | 复制/粘贴操作 | | `PathEditorService` | 路径命令解析和操作 | ## 样式 这个库使用 **中性默认颜色** 通过CSS自定义属性。宿主应用程序应该覆盖这些变量以匹配它们的主题。 ### Canvas CSS变量 ```scss mm-process-designer, mm-symbol-editor { --designer-canvas-color: #fafafa; // Canvas background --designer-grid-color: #e0e0e0; // Grid lines } ``` ### Dockview CSS变量 ```scss mm-process-designer, mm-symbol-editor { --dv-background-color: ; --dv-pane-background-color: ; --dv-activegroup-visiblepanel-tab-background-color: ; --dv-activegroup-visiblepanel-tab-color: ; // ... see PROCESS-DESIGNER.md for full list } ``` 一个可选的令牌驱动主题混合可用（Deep Sea, ab# 5526）： ```scss @use '@meshmakers/octo-process-diagrams/styles/dockview-theme' as dockview; @include dockview.dockview-theme(); ``` 前 `styles/dockview-lcars-theme` 别名(`lcars-theme()`)在AB#5526中被删除。 ## 依赖关系 - **角21** 具有独立的组件和信号 - **剑道UI Angular 21** （按钮，输入，下拉菜单，对话框，列表视图） - **阿波罗角** 对于GraphQL - **dockview-angular** 灵活的面板布局 - **expr-eval-fork** 对于表达式求值 ## 详细的文档 - [流程设计器开发人员文档](https://npmcn.com/package/%40meshmakers/octo-process-diagrams/src/lib/PROCESS-DESIGNER.md) -完整的架构，服务，原语，dockview，检查列表 - [SVG导入文档](https://npmcn.com/package/%40meshmakers/octo-process-diagrams/src/lib/docs/SVG-IMPORT.md) - SVG导入服务，元素映射，转换 ## 文件和测试标准 - **所有开发人员文档必须用英语编写** - **每次代码更改都必须包含更新的文档** -更新自述文件。医学博士,克劳德。在添加、修改或删除功能时使用 - **必须执行单元测试和集成测试** 每次代码更改之后 - **必须更新现有的测试** 当被测试代码的行为发生变化时 - **必须添加新的测试** 当实现新的特性、组件或服务时 - 永远不要提交测试失败的代码 ## 常见问题 ### @meshmakers/octo-process-diagrams 是什么？ 用于在OctoMesh平台应用程序中进行流程图设计和符号编辑的Angular库。 ### 如何安装 @meshmakers/octo-process-diagrams？ 在项目目录运行 npm install @meshmakers/octo-process-diagrams，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@angular/core（^22\.0\.0）、dockview-core（^5\.0\.0）、@angular/forms（^22\.0\.0）、apollo-angular（^14\.0\.0）、expr-eval-fork（^3\.0\.3）、@angular/common（^22\.0\.0）、dockview-angular（^5\.0\.0）、@meshmakers/shared-ui（\*）、@meshmakers/octo-services（\*）、@meshmakers/shared-services（\*）、@progress/kendo-angular-icons（^24\.1\.0）、@progress/kendo-angular-label（^24\.1\.0）、@progress/kendo-angular-dialog（^24\.1\.0）、@progress/kendo-angular-inputs（^24\.1\.0）、@progress/kendo-angular-layout（^24\.1\.0）、@progress/kendo-angular-buttons（^24\.1\.0）、@progress/kendo-angular-dropdowns（^24\.1\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @meshmakers/octo-process-diagrams 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @meshmakers/octo-process-diagrams 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @meshmakers/octo-process-diagrams 可以商用吗？ @meshmakers/octo-process-diagrams 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。 ### @meshmakers/octo-process-diagrams 还在维护吗？ 最新版本 3\.5\.550 发布于 2026/11/02（1 天前）；至今共发布 222 个版本，其中过去 12 个月发布了 222 个；首次发布于 2026/02/23。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。