Skip to content

Add BPMN editor extension#484

Open
rlfnb wants to merge 2 commits into
opencloud-eu:mainfrom
rlfnb:main
Open

Add BPMN editor extension#484
rlfnb wants to merge 2 commits into
opencloud-eu:mainfrom
rlfnb:main

Conversation

@rlfnb

@rlfnb rlfnb commented Jul 1, 2026

Copy link
Copy Markdown

Adds a new web-app-bpmn extension that enables creating, opening and editing BPMN 2.0 process diagrams (.bpmn files) directly in OpenCloud Web.

The extension embeds https://bpmn.io/toolkit/bpmn-js/ as a native Vue component (no iframe) and includes:

  • Modeler with full toolbar/palette for editing diagrams
  • Properties Panel (right sidebar) for editing element attributes like names, conditions, etc.
  • Viewer mode for read-only access
  • New file menu integration — users can create new .bpmn diagrams from the file manager
  • Autosave — changes are emitted on every command stack change

Architecture follows the same pattern as the existing web-app-draw-io extension.

Related Issue

  • n/a (new feature)

How Has This Been Tested?

  • test environment: Node v22, pnpm 11.9, Vitest, vue-tsc
  • test case 1: pnpm --filter bpmn test:unit — 3 unit tests passing (canvas rendering, properties panel visibility in edit/readonly mode)
  • test case 2: pnpm --filter bpmn check:types — no type errors
  • test case 3: pnpm --filter bpmn build — production build successful
  • test case 4: Manual verification via docker-compose up with volume mount to /web/apps/bpmn

Types of changes

  • Enhancement (a change that doesn't break existing code or deployments)

New web-app-bpmn extension using bpmn-js with properties panel
for editing and viewing .bpmn process diagrams in OpenCloud Web.
@dschmidt

dschmidt commented Jul 1, 2026

Copy link
Copy Markdown
Contributor

Mind to add a few screenshots to the PR?

Havent looked in detail, but it looks pretty solid from afar!

One nitpick: would you mind porting the vue component to the script setup syntax?

New web-app-bpmn extension using bpmn-js for editing and viewing
.bpmn process diagrams in OpenCloud Web.

Features:
- bpmn-js Modeler with full palette and toolbar for editing
- Properties panel for element attributes (names, conditions, etc.)
- Properties panel toggle to maximize canvas space
- Read-only Viewer mode
- SVG export
- Minimap for navigation on large diagrams
- Fit-to-viewport button
- Ctrl+S / Cmd+S keyboard shortcut to save
- New file menu integration with empty BPMN template
- German translations
- Podman pod dev setup (dev/podman/) without Traefik dependency
@rlfnb

rlfnb commented Jul 3, 2026

Copy link
Copy Markdown
Author

some low hanging fruits added to the bpmn app, feel free to squash them into one commit, if you want it as one commit. Also find a screenshot below (added a podman dev setup as well as a bonus for it).

OpenCloud-BPMN

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants