# miragon/bpmn-modeler architecture

> Architecture diagram of the GitHub repository miragon/bpmn-modeler, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-26). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/miragon/bpmn-modeler
- Repository: https://github.com/miragon/bpmn-modeler

## Overview

BPMN Modeler is a monorepo product for editing BPMN, DMN, and Camunda Forms within developer tools. The main workflow is opening a model in an IDE editor, editing it in an embedded webview backed by shared modeler services, then saving it with the IDE. Other major capabilities include engine-aware modeling, templates, visual diff, deployment and instance start, scripting, and code navigation. The README documents both VS Code and a Theia/Electron desktop surface; sampled source confirms some supporting internals, but not every feature’s wiring.

Main entry points: [`apps/vscode-plugin/src/main.ts`](https://github.com/miragon/bpmn-modeler/blob/main/apps/vscode-plugin/src/main.ts) (VS Code extension), [`libs/modeler-core/src/index.ts`](https://github.com/miragon/bpmn-modeler/blob/main/libs/modeler-core/src/index.ts) (Modeler services), [`libs/modeler-core/src/deployment/service/DeploymentService.ts`](https://github.com/miragon/bpmn-modeler/blob/main/libs/modeler-core/src/deployment/service/DeploymentService.ts) (Deployment services), [`apps/bpmn-webview/src/main.ts`](https://github.com/miragon/bpmn-modeler/blob/main/apps/bpmn-webview/src/main.ts) (BPMN webview)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_surfaces["Editor surfaces"]
  node_vscode["VS Code extension<br/>[main.ts]"]
  node_intellij["IntelliJ plugin<br/>[CoreProcess.kt]"]
  node_desktop["Theia desktop"]
  node_bpmnview["BPMN webview<br/>[main.ts]"]
  node_dmnview["DMN webview<br/>[main.ts]"]
  node_formview["Form webview<br/>[FormEditorApp.ts]"]
  node_deployview["Deployment panel<br/>[main.ts]"]
end

subgraph group_modeling["Modeling core"]
  node_core["Modeler services<br/>[index.ts]"]
  node_bpmnservice["BPMN modeling"]
  node_dmnservice["DMN modeling"]
  node_types["Engine metadata<br/>[engine.ts]"]
end

subgraph group_workflow["Process workflows"]
  node_diff["Visual diff<br/>[BpmnDiffService.ts]"]
  node_templates["Element templates"]
  node_layout["Auto layout"]
  node_deploy["Deployment services"]
  node_engine_router["Engine router"]
end

subgraph group_integrations["IDE integrations"]
  node_bridge["Modeler bridge<br/>[server.ts]"]
  node_scripts["Script editing<br/>[index.ts]"]
  node_codelink["Code navigation<br/>[index.ts]"]
end

node_developer(("Model author"))
node_camunda7{{"Camunda 7"}}
node_camunda8{{"Camunda 8"}}

node_developer -->|"opens model"| node_vscode
node_vscode -->|"opens editor"| node_bpmnview
node_vscode -->|"opens editor"| node_dmnview
node_vscode -->|"opens editor"| node_formview
node_bpmnview -->|"uses services"| node_core
node_dmnview -->|"uses services"| node_core
node_formview -->|"uses services"| node_core
node_core -->|"provides modeling"| node_bpmnservice
node_core -->|"provides modeling"| node_dmnservice
node_bpmnservice -->|"uses engine metadata"| node_types
node_vscode -->|"opens visual compare"| node_diff
node_vscode -->|"loads templates"| node_templates
node_vscode -->|"offers layout"| node_layout
node_vscode -->|"opens deployment"| node_deployview
node_deployview -->|"requests deployment"| node_deploy
node_deploy -->|"dispatches request"| node_engine_router
node_engine_router -->|"routes C7 calls"| node_camunda7
node_engine_router -->|"routes C8 calls"| node_camunda8
node_deploy -->|"starts instance"| node_camunda7
node_deploy -->|"starts instance"| node_camunda8
node_intellij -->|"sends RPC"| node_bridge
node_bridge -->|"uses shared core"| node_core
node_intellij -->|"hosts editor"| node_bpmnview
node_intellij -->|"hosts deployment"| node_deployview
node_desktop -->|"hosts modeling surface"| node_bpmnview
node_vscode -->|"supports script editing"| node_scripts
node_vscode -->|"supports code navigation"| node_codelink

click node_vscode "https://github.com/miragon/bpmn-modeler/blob/main/apps/vscode-plugin/src/main.ts"
click node_intellij "https://github.com/miragon/bpmn-modeler/blob/main/apps/intellij-plugin/src/main/kotlin/io/miragon/intellij/bpmn/CoreProcess.kt"
click node_desktop "https://github.com/miragon/bpmn-modeler/tree/main/apps/standalone"
click node_bpmnview "https://github.com/miragon/bpmn-modeler/blob/main/apps/bpmn-webview/src/main.ts"
click node_dmnview "https://github.com/miragon/bpmn-modeler/blob/main/apps/dmn-webview/src/main.ts"
click node_formview "https://github.com/miragon/bpmn-modeler/blob/main/apps/form-webview/src/app/FormEditorApp.ts"
click node_deployview "https://github.com/miragon/bpmn-modeler/blob/main/apps/deployment-webview/src/main.ts"
click node_core "https://github.com/miragon/bpmn-modeler/blob/main/libs/modeler-core/src/index.ts"
click node_bpmnservice "https://github.com/miragon/bpmn-modeler/blob/main/libs/modeler-core/src/modeler/bpmn/service/BpmnModelerService.ts"
click node_dmnservice "https://github.com/miragon/bpmn-modeler/blob/main/libs/modeler-core/src/modeler/dmn/service/DmnModelerService.ts"
click node_types "https://github.com/miragon/bpmn-modeler/blob/main/libs/modeler-types/src/engine.ts"
click node_diff "https://github.com/miragon/bpmn-modeler/blob/main/libs/modeler-core/src/diff/service/BpmnDiffService.ts"
click node_templates "https://github.com/miragon/bpmn-modeler/blob/main/libs/modeler-core/src/modeler/bpmn/service/BpmnElementTemplatesService.ts"
click node_layout "https://github.com/miragon/bpmn-modeler/blob/main/libs/bpmn-layout/src/engine/autoLayoutEngine.ts"
click node_deploy "https://github.com/miragon/bpmn-modeler/blob/main/libs/modeler-core/src/deployment/service/DeploymentService.ts"
click node_engine_router "https://github.com/miragon/bpmn-modeler/blob/main/libs/modeler-core/src/deployment/infrastructure/camunda/CamundaEngineRouter.ts"
click node_bridge "https://github.com/miragon/bpmn-modeler/blob/main/apps/modeler-bridge/src/server.ts"
click node_scripts "https://github.com/miragon/bpmn-modeler/blob/main/libs/inline-scripting/src/index.ts"
click node_codelink "https://github.com/miragon/bpmn-modeler/blob/main/libs/code-link/src/index.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_vscode,node_intellij,node_desktop,node_bpmnview,node_dmnview,node_formview,node_deployview toneBlue
class node_core,node_bpmnservice,node_dmnservice,node_types toneAmber
class node_diff,node_templates,node_layout,node_deploy,node_engine_router toneMint
class node_bridge,node_scripts,node_codelink toneRose
class node_developer,node_camunda7,node_camunda8 toneIndigo
```

## Components

### Editor surfaces

- [VS Code extension](https://github.com/miragon/bpmn-modeler/blob/main/apps/vscode-plugin/src/main.ts): `apps/vscode-plugin/src/main.ts`
- [IntelliJ plugin](https://github.com/miragon/bpmn-modeler/blob/main/apps/intellij-plugin/src/main/kotlin/io/miragon/intellij/bpmn/CoreProcess.kt): `apps/intellij-plugin/src/main/kotlin/io/miragon/intellij/bpmn/CoreProcess.kt`
- [Theia desktop](https://github.com/miragon/bpmn-modeler/tree/main/apps/standalone): `apps/standalone`
- [BPMN webview](https://github.com/miragon/bpmn-modeler/blob/main/apps/bpmn-webview/src/main.ts): `apps/bpmn-webview/src/main.ts`
- [DMN webview](https://github.com/miragon/bpmn-modeler/blob/main/apps/dmn-webview/src/main.ts): `apps/dmn-webview/src/main.ts`
- [Form webview](https://github.com/miragon/bpmn-modeler/blob/main/apps/form-webview/src/app/FormEditorApp.ts): `apps/form-webview/src/app/FormEditorApp.ts`
- [Deployment panel](https://github.com/miragon/bpmn-modeler/blob/main/apps/deployment-webview/src/main.ts): `apps/deployment-webview/src/main.ts`

### Modeling core

- [Modeler services](https://github.com/miragon/bpmn-modeler/blob/main/libs/modeler-core/src/index.ts): `libs/modeler-core/src/index.ts`
- [BPMN modeling](https://github.com/miragon/bpmn-modeler/blob/main/libs/modeler-core/src/modeler/bpmn/service/BpmnModelerService.ts): `libs/modeler-core/src/modeler/bpmn/service/BpmnModelerService.ts`
- [DMN modeling](https://github.com/miragon/bpmn-modeler/blob/main/libs/modeler-core/src/modeler/dmn/service/DmnModelerService.ts): `libs/modeler-core/src/modeler/dmn/service/DmnModelerService.ts`
- [Engine metadata](https://github.com/miragon/bpmn-modeler/blob/main/libs/modeler-types/src/engine.ts): `libs/modeler-types/src/engine.ts`

### Process workflows

- [Visual diff](https://github.com/miragon/bpmn-modeler/blob/main/libs/modeler-core/src/diff/service/BpmnDiffService.ts): `libs/modeler-core/src/diff/service/BpmnDiffService.ts`
- [Element templates](https://github.com/miragon/bpmn-modeler/blob/main/libs/modeler-core/src/modeler/bpmn/service/BpmnElementTemplatesService.ts): `libs/modeler-core/src/modeler/bpmn/service/BpmnElementTemplatesService.ts`
- [Auto layout](https://github.com/miragon/bpmn-modeler/blob/main/libs/bpmn-layout/src/engine/autoLayoutEngine.ts): `libs/bpmn-layout/src/engine/autoLayoutEngine.ts`
- [Deployment services](https://github.com/miragon/bpmn-modeler/blob/main/libs/modeler-core/src/deployment/service/DeploymentService.ts): `libs/modeler-core/src/deployment/service/DeploymentService.ts`
- [Engine router](https://github.com/miragon/bpmn-modeler/blob/main/libs/modeler-core/src/deployment/infrastructure/camunda/CamundaEngineRouter.ts): `libs/modeler-core/src/deployment/infrastructure/camunda/CamundaEngineRouter.ts`

### IDE integrations

- [Modeler bridge](https://github.com/miragon/bpmn-modeler/blob/main/apps/modeler-bridge/src/server.ts): `apps/modeler-bridge/src/server.ts`
- [Script editing](https://github.com/miragon/bpmn-modeler/blob/main/libs/inline-scripting/src/index.ts): `libs/inline-scripting/src/index.ts`
- [Code navigation](https://github.com/miragon/bpmn-modeler/blob/main/libs/code-link/src/index.ts): `libs/code-link/src/index.ts`

### Other components

- **Model author**
- **Camunda 7**
- **Camunda 8**

## Connections

- Model author → VS Code extension: opens model
- VS Code extension → BPMN webview: opens editor
- VS Code extension → DMN webview: opens editor
- VS Code extension → Form webview: opens editor
- BPMN webview → Modeler services: uses services
- DMN webview → Modeler services: uses services
- Form webview → Modeler services: uses services
- Modeler services → BPMN modeling: provides modeling
- Modeler services → DMN modeling: provides modeling
- BPMN modeling → Engine metadata: uses engine metadata
- VS Code extension → Visual diff: opens visual compare
- VS Code extension → Element templates: loads templates
- VS Code extension → Auto layout: offers layout
- VS Code extension → Deployment panel: opens deployment
- Deployment panel → Deployment services: requests deployment
- Deployment services → Engine router: dispatches request
- Engine router → Camunda 7: routes C7 calls
- Engine router → Camunda 8: routes C8 calls
- Deployment services → Camunda 7: starts instance
- Deployment services → Camunda 8: starts instance
- IntelliJ plugin → Modeler bridge: sends RPC
- Modeler bridge → Modeler services: uses shared core
- IntelliJ plugin → BPMN webview: hosts editor
- IntelliJ plugin → Deployment panel: hosts deployment
- Theia desktop → BPMN webview: hosts modeling surface
- VS Code extension → Script editing: supports script editing
- VS Code extension → Code navigation: supports code navigation