Flowable Designer VS Code

A VS Code custom editor for .bpmn, .bpmn2, and .bpmn20.xml files, built for compatibility with the legacy Eclipse Flowable Designer plugin. Open, edit, and save BPMN process definitions while preserving Flowable/Activiti extension attributes.

For the original Eclipse-based Flowable Designer project, see https://github.com/flowable/flowable-designer.

Legal Notice

This project and its VS Code extension are independent community work. They are not affiliated with, endorsed by, or officially released by the Apache Software Foundation.

Features

Visual BPMN Editor

• Webview-backed diagram canvas powered by bpmn-js
• Theme-aware rendering that follows your VS Code color settings
• Create new diagrams from a Flowable-compatible BPMN template

Supported BPMN Elements

• Tasks — User Task, Service Task, Script Task, Send Task, Receive Task, Manual Task, Business Rule Task, Call Activity
• Events — Start, Intermediate Catch/Throw, Boundary, End (timer, error, signal, message)
• Gateways — Exclusive, Inclusive, Parallel, Event-Based, Complex
• Sub-Processes — Embedded, Event, Transaction
• Collaboration — Pool (Participant), Lane
• Connectors — Sequence Flow (with condition expressions), Text Annotation

Flowable / Activiti Property Editing

A context-sensitive properties panel exposes activiti:* attributes for each element type:

Element	Properties
Process	candidateStarterUsers, candidateStarterGroups, target namespace, signal & message definitions, event listeners, localizations
User Task	assignee, candidateUsers, candidateGroups, dueDate, priority, category, formKey, task listeners, form properties
Service Task	class, expression, delegateExpression, resultVariableName, field extensions
Mail Task	to, from, subject, cc, bcc, charset, HTML/text content
Start Event	initiator, formKey
Call Activity	Input/output parameter mappings
Any Flow Node	async, exclusive, skipExpression, execution listeners, documentation

Additional sidebar capabilities:

• Multi-Instance — sequential/parallel, loop cardinality, collection, element variable, completion condition
• Form Properties — types: string, long, boolean, date, enum; with required, readable, writable flags
• Localizations — per-element name and description in multiple locales

Process Navigator

An activity-bar tree view shows the element hierarchy of the open diagram. It auto-refreshes on save and supports collapsible groups for processes, tasks, gateways, events, and sub-processes.

Validation

Runs automatically on save (configurable) and reports issues in the VS Code Problems panel:

• XML structure and entity-expansion-attack prevention
• Missing start/end events, unreachable nodes
• Broken sequence-flow references
• Missing implementations on Service Tasks and Script Tasks
• Unassigned User Tasks

SVG Image Export

• Export the current diagram as SVG via command or automatically on save
• Optional metadata overlay showing process key, namespace, filename, and export date with customizable colors

XML Round-Trip Preservation

• All xmlns declarations and activiti:* attributes are preserved
• BPMN DI layout data round-trips without drift
• Unrecognized extension elements survive save cycles intact

Commands

Command	Description
Flowable BPMN Designer: New BPMN Diagram	Create a new empty BPMN diagram
Flowable BPMN Designer: Export Diagram Image	Export the open diagram as SVG
Flowable BPMN Designer: Validate BPMN	Validate the open BPMN file

Settings

Setting	Default	Description
flowableBpmnDesigner.imageExport.enabled	false	Auto-export SVG on save
flowableBpmnDesigner.imageExport.overlay.enabled	false	Add metadata overlay to exported images
flowableBpmnDesigner.imageExport.overlay.showProcessKey	true	Include process key in overlay
flowableBpmnDesigner.imageExport.overlay.showNamespace	true	Include namespace in overlay
flowableBpmnDesigner.imageExport.overlay.showFilename	true	Include filename in overlay
flowableBpmnDesigner.imageExport.overlay.showDate	true	Include export date in overlay
flowableBpmnDesigner.imageExport.overlay.color	#999999	Overlay text color
flowableBpmnDesigner.imageExport.overlay.backgroundColor	#ffffff	Overlay background color
flowableBpmnDesigner.validation.validateOnSave	true	Validate on save
flowableBpmnDesigner.editor.defaultLanguage	en	Default localization language
flowableBpmnDesigner.editor.availableLanguages	["en","de","fr","es","nl","pl"]	Available localization languages

Development

npm install              # install dependencies
npm run compile-web      # build the extension and webview
npm test                 # run the web extension test suite
npm run test:coverage    # run unit tests with an lcov + summary coverage report
npm run test:e2e         # run Playwright end-to-end tests in Chromium
npm run run-in-browser   # launch in the browser-based VS Code host
npm run package:vsix     # produce a .vsix package

CI Setup

GitHub Actions runs unit coverage and Playwright from .github/workflows/ci.yml.

The coverage badge and HTML report are published to GitHub Pages after pushes to the default branch. If Pages is not already enabled for GitHub Actions in the repository settings, enable it once and the workflow will take over deployments.

License

See LICENSE for details.