@meshmakers/octo-process-diagrams

中文文档

3.5.550发布于 2026/11/02TypeScriptES Module

Angular library for process diagram design and symbol editing in OctoMesh Platform applications.

文档目录14 节

Features
Installation
Build
Architecture
Key Exports
Components
Page Components (for routing in consuming apps)
Services
Styling
Canvas CSS Variables
Dockview CSS Variables
Dependencies
Detailed Documentation
Documentation and Testing Standards

@meshmakers/octo-process-diagrams

Angular library for process diagram design and symbol editing in OctoMesh Platform applications.

Note: This library requires a Kendo UI for Angular license.

Part of the @meshmakers package ecosystem.

Features

Process Designer — Visual SVG-based editor for process diagrams (HMI)
Symbol Editor — Create and manage reusable symbol definitions
Symbol Library — Organize symbols in libraries with versioning
Primitive System — Rectangle, Ellipse, Line, Polyline, Polygon, Path, Text, Image
SVG Import — Import SVG files via toolbar button, drag & drop, or clipboard paste
Dockview Layout — Flexible, rearrangeable panel system
Animations — SVG animations with data binding support
Exposed Properties — Bind symbol properties to runtime data (number, string, boolean)
Expression Evaluation — expr-eval-fork based expressions for data bindings
Grouping — Figma/Illustrator-style temporary grouping of primitives and symbols
Undo/Redo — Full history with keyboard shortcuts

Installation

npm install @meshmakers/octo-process-diagrams

Build

# From frontend-libraries root
npm run build:octo-process-diagrams

Architecture

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

Key Exports

Components

Component	Description
`ProcessDesignerComponent`	Main visual editor for process diagrams
`ElementPaletteComponent`	Draggable palette of primitive shapes
`PropertyInspectorComponent`	Properties panel for selected items
`SymbolLibraryPanelComponent`	Symbol library browser panel
`SymbolLibraryAdminComponent`	Symbol library management UI
`SymbolEditorComponent`	Symbol definition editor
`DockviewComponent`	Flexible panel layout system
`PathEditorComponent`	SVG path editing
`TransformPropertyEditorComponent`	Transform property editing
`BindingEditorDialogComponent`	Data binding configuration dialog
`SimulationPanelComponent`	Simulation value testing

Page Components (for routing in consuming apps)

Component	Description
`SymbolLibraryListComponent`	List of symbol libraries
`SymbolLibraryDetailComponent`	Symbols within a library
`SymbolEditorPageComponent`	Symbol editor with save/cancel
`ProcessDiagramListComponent`	List of process diagrams

Services

Service	Description
`SymbolLibraryService`	Symbol library CRUD operations
`SvgImportService`	SVG file import and conversion
`ProcessDiagramDataService`	Diagram persistence
`ExpressionEvaluatorService`	Expression evaluation for data bindings
`DesignerLayoutService`	Dockview layout persistence
`DesignerSelectionService`	Selection state management
`DesignerHistoryService`	Undo/Redo functionality
`DesignerClipboardService`	Copy/Paste operations
`PathEditorService`	Path command parsing and manipulation

Styling

This library uses neutral default colors via CSS custom properties. Host applications should override these variables to match their theme.

Canvas CSS Variables

mm-process-designer,
mm-symbol-editor {
  --designer-canvas-color: #fafafa;   // Canvas background
  --designer-grid-color: #e0e0e0;     // Grid lines
}

Dockview CSS Variables

mm-process-designer,
mm-symbol-editor {
  --dv-background-color: <your-bg>;
  --dv-pane-background-color: <your-pane>;
  --dv-activegroup-visiblepanel-tab-background-color: <your-active-tab>;
  --dv-activegroup-visiblepanel-tab-color: <your-accent>;
  // ... see PROCESS-DESIGNER.md for full list
}

An optional token-driven theme mixin is available (Deep Sea, AB#5526):

@use '@meshmakers/octo-process-diagrams/styles/dockview-theme' as dockview;
@include dockview.dockview-theme();

The former styles/dockview-lcars-theme alias (lcars-theme()) was removed in AB#5526.

Dependencies

Angular 21 with standalone components and signals
Kendo UI Angular 21 (Buttons, Inputs, Dropdowns, Dialogs, ListView)
Apollo Angular for GraphQL
dockview-angular for flexible panel layout
expr-eval-fork for expression evaluation

Detailed Documentation

Process Designer Developer Documentation — Full architecture, services, primitives, dockview, checklists
SVG Import Documentation — SVG import service, element mapping, transforms

Documentation and Testing Standards

All developer documentation must be written in English
Every code change must include updated documentation — update README.md, CLAUDE.md, or inline docs when adding, modifying, or removing features
Unit tests and integration tests must be executed after every code change
Existing tests must be updated when the behavior of tested code changes
New tests must be added when new features, components, or services are implemented
Never commit code with failing tests

版本与发布记录

@meshmakers/octo-process-diagrams 共发布 222 个版本，首次发布于 2026/02/23；过去 12 个月发布了 222 个版本。

版本	发布日期	距今
`3.5.550`latest	2026/11/02	1 天前
`3.5.530`	2026/11/01	2 天前
`3.5.520`	2026/10/31	3 天前
`3.5.510`	2026/10/30	3 天前
`3.5.500`	2026/10/30	4 天前
`3.5.490`	2026/10/30	4 天前

关于 @meshmakers/octo-process-diagrams 的常见问题

@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 和提交记录判断。

npm install @meshmakers/octo-process-diagrams

pnpmpnpm add @meshmakers/octo-process-diagrams
yarnyarn add @meshmakers/octo-process-diagrams
bunbun add @meshmakers/octo-process-diagrams

peer 依赖@angular/core ^22.0.0dockview-core ^5.0.0@angular/forms ^22.0.0apollo-angular ^14.0.0expr-eval-fork ^3.0.3@angular/common ^22.0.0dockview-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 需手动安装。

在你的项目目录中运行此命令。

最新版本3.5.550发布于 1 天前

开源许可未声明未声明

包体积4.2 MB7 个文件 · 解压后

运行依赖1 个另有 17 个 peer 依赖

模块格式ES Module无副作用，可 tree-shake

TypeScript自带类型

发布版本222 个近 12 个月 222 个

首次发布2026/02/238 个月前

元数据更新2026/11/02

每一个软件包背后，
都有分享与创造的人。