Skip to content

Releases: process-analytics/bpmn-visualization-js

Release list

0.48.0

0.48.0 Latest
Latest

Choose a tag to compare

View all tags
@tbouffard tbouffard released this 23 Jun 15:33
v0.48.0
8f2f3d5

⚡ This release introduces new rendering customization options, improves resource management, and updates dependencies to their latest versions. ⚡

Thanks to all the contributors of this release 🌈: @tbouffard

See milestone 0.48.0 to get the list of issues covered by this release.

Breaking Changes

ShapeUtil.flowNodeKinds() no longer returns artifacts

According to the BPMN specification, artifacts are not flow nodes. As a consequence, ShapeUtil.flowNodeKinds() no longer returns artifact kinds.

If your code relied on the previous behavior, combine the results of ShapeUtil.flowNodeKinds() and ShapeUtil.artifactKinds().

- const kinds = ShapeUtil.flowNodeKinds();
+ const kinds = [...ShapeUtil.flowNodeKinds(), ...ShapeUtil.artifactKinds()];

Custom IconPainter configuration is now instance-scoped

The custom IconPainter configuration is now scoped to a BpmnVisualization instance instead of being configured globally.

This removes shared global state and makes the configuration consistent with other renderer options.

- import { BpmnVisualization, IconPainterProvider } from 'bpmn-visualization';
-
- IconPainterProvider.set(new CustomIconPainter());
-
- const bpmnVisualization = new BpmnVisualization({
-   container: 'bpmn-container'
- });
+ import { BpmnVisualization } from 'bpmn-visualization';
+
+ const bpmnVisualization = new BpmnVisualization({
+   container: 'bpmn-container',
+   renderer: {
+     iconPainter: new CustomIconPainter()
+   }
+ });

Public TypeScript types now use interfaces

Note

This change impacts TypeScript users only.

Most public object-like type aliases have been converted to interfaces.

This enables TypeScript declaration merging and simplifies extension by libraries such as bpmn-visualization-addons.

Most users should not be impacted. Code relying on specific type alias semantics may require minor adjustments.

Improvements

Ignore BPMN LabelStyles font definitions

BPMN diagrams sometimes contain inconsistent LabelStyle definitions, leading to different fonts being used across the same diagram.

Version 0.48.0 introduces the ignoreLabelStyles renderer option, allowing applications to ignore BPMN font definitions and use a consistent font for all labels.

const bpmnVisualization = new BpmnVisualization({
  container: 'container',
  renderer: {
    ignoreLabelStyles: true,
  },
});

Compare rendering with and without BPMN label styles using the labels.04.fonts.bpmn fixture.

Label styles applied Label styles ignored
do not ignore label styles ignore label styles

Ignore BPMN activity label bounds

Some BPMN tools generate incorrect activity label bounds. This can cause labels to be rendered in unexpected positions.

Version 0.48.0 introduces two new renderer options:

  • ignoreTaskLabelBounds
  • ignoreActivityLabelBounds

When enabled, bpmn-visualization computes label positions instead of using the BPMN label bounds.

Example for tasks:

const bpmnVisualization = new BpmnVisualization({
  container: 'container',
  renderer: {
    ignoreTaskLabelBounds: true,
  },
});

This improvement addresses issues such as #2469.

New dispose() method

A new dispose() method is available to release resources associated with a BpmnVisualization instance.

This method removes registered listeners and frees rendering resources allocated by mxGraph.

Typical use cases include:

  • component unmounting in SPA frameworks
  • dynamic diagram removal
  • memory leak prevention in long-running applications
bpmnVisualization.dispose();

New ShapeUtil methods

New utility methods have been added to ShapeUtil to better distinguish flow nodes and artifacts.

This change complements the flowNodeKinds() behavior update and provides more explicit APIs when working with BPMN element categories.

Custom IconPainter improvements

Custom icon painters can now be configured directly on each BpmnVisualization instance.

This allows different visualizations on the same page to use different icon painters without sharing global configuration.

Screenshots and examples are available in #3419.

Dependency Updates and Bundle Size

bpmn-visualization now depends on the latest available versions of its dependencies.

In particular, fast-xml-parser has been upgraded to address several security vulnerabilities.

Most of the bundle size increase comes from this dependency update.

Measurements were performed on commit 0f0bc933.

Bundle 0.47.0 0.48.0
bpmn-visualization.min.js 981,115 bytes 1,005,709 bytes
981.1 kB 1005.7 kB
bpmn-visualization.js 1,709,278 bytes 1,757,323 bytes
1709.2 kB 1757.3 kB
bpmn-visualization.esm.js 204,914 bytes 209,919 bytes
204.9 kB 209.9 kB

The demo application analysis confirms that most of the increase comes from fast-xml-parser:

Dependency 0.47.0 0.48.0
bpmn-visualization 86.48 kB 88.17 kB
es-toolkit 0.80 kB 0.88 kB
fast-xml-parser 21.28 kB 41.55 kB
mxgraph 837.37 kB 837.26 kB
TOTAL 945.93 kB 967.86 kB

The small size variation observed for the mxgraph chunk is likely related to the Vite upgrade from v6.3.5 to v7, as the mxGraph version itself did not change.

For additional details about the fast-xml-parser impact, see:

What's Changed

Full Changelog: v0.47.0...v0.48.0

🚄 BPMN rendering

🐛 Bug Fixes

  • fix: correctly ignore activity and task label bounds (#3434) @tbouffard
  • fix!: ShapeUtil does not include BPMN artifacts in flow node kinds (#3398) @tbouffard

⤵️ Library Integration

📝 Documentation

📦 Dependency updates

👻 Maintenance

  • refactor!: stop exporting StyleConfigurator and mxImageExport (#3528) @tbouffard
  • test(fit): assert mxGraphView calls in the fit integration tests (#3527) @tbouffard
  • refactor: extract insertEdge private method in BpmnRenderer (#3524) @tbouffard
  • ci: restore running e2e tests on chrome macos (#3458) @tbouffard
  • refactor: introduce internal extension mechanism for BPMN extensions (#3519) @tbouffard
  • chore!: prefer interfaces over types for public type definitions (#3517) @tbouffard
  • chore: add scripts to report demo and npm bundle sizes (#3507) @tbouffard
  • refactor: remove "Bpmn" prefix from ...
Read more

Contributors

tbouffard
Assets 2
Loading

0.47.0

0.47.0

Choose a tag to compare

View all tags
@tbouffard tbouffard released this 19 Jun 10:30
v0.47.0
54a7c7a

⚡ This release helps reduce the bundle size of applications using bpmn-visualization ⚡

Thanks to all the contributors of this release 🌈: @tbouffard

See milestone 0.47.0 to get the list of issues covered by this release.

Highlights

🎉 Reduced bundle size thanks to fast-xml-parser upgrade

We use the fast-xml-parser dependency to parse the BPMN diagram's XML source.

We've updated it from v5.0.8 to v5.2.5. The new version is declared as side-effect free, which allows bundlers to apply more aggressive tree-shaking.

⚡ Impact: Applications integrating bpmn-visualization may benefit from smaller bundle sizes!

Some bundlers are now able to better remove unused code, resulting in lighter builds.

For more info about tree-shaking and side effects, check the Webpack documentation.

📦 Bundle size comparison

Here’s how the bundle size changed in several example applications from the bpmn-visualization-examples repository:

Example 0.46.0 fxp 5.2.0 (#3327) fxp 5.2.5 (#3343)
rollup 992.60 kB 993.40 kB 994.00 kB
rsbuild 959.80 kB 953.70 kB 954.70 kB
vite 994.20 kB 995.00 kB 996.40 kB
webpack 980.10 kB 973.80 kB 974.20 kB

🔍 Quick analysis

  • rollup and vite already apply tree-shaking efficiently, so no improvement here. The slight increase is due to new code introduced in fast-xml-parser itself.
  • webpack and rsbuild show a decrease of ~5–6 kB, thanks to better tree-shaking of unused code.

What's Changed

Full Changelog: v0.46.0...v0.47.0

📦 Dependency updates

👻 Maintenance

Contributors

tbouffard
Loading

0.46.0

0.46.0

Choose a tag to compare

View all tags
@tbouffard tbouffard released this 12 Mar 20:26
v0.46.0
086a7aa

This new release focuses on improving ESM support, reducing bundle size, and refining dependency management, along with updates to documentation, dependency bumps, and maintenance improvements. 🚀

Thanks to all the contributors of this release 🌈: @tbouffard

See milestone 0.46.0 to get the list of issues covered by this release.

Dependency Changes

Improved ESM Support

fast-xml-parser and strnum now provide ESM support, improving tree shaking and overall performance.
This also eliminates a warning when integrating bpmn-visualization in Angular applications, which previously flagged CommonJS dependencies as potential issues.

For an example integration with Angular, see the TypeScript Angular example.

Bundle Size Reduction

The bundle size has slightly decreased, leading to improved efficiency:

  • The minified IIFE bundle is now ~978.9 kB (previously 985.8 kB in 0.45.1) → 7 kB reduction.
  • In the bpmn-visualization demo (built with Vite), the main.js script (which includes fast-xml-parser) shrank from 130.57 kB to 122.73 kB.

Impact of Bundler Choice on Size Reduction

Because fast-xml-parser is not currently marked as "side effects" free, the actual size reduction may vary depending on the bundler used.
For example, in the JavaScript Webpack example:

  • With bpmn-visualization 0.45.1, the bundle size was 980.2 kB.
  • With bpmn-visualization 0.46.0, the bundle size is 980.1 kB → only 0.1 kB reduction.

This should improve in future releases. See fast-xml-parser issue #733 for updates.

Removal of strnum as a Direct Dependency

We no longer declare strnum as a direct dependency because:

  • It is a transitive dependency (not used directly in our code), so it’s easier to let fast-xml-parser manage it.
  • It was initially pinned due to stability concerns, but experience has shown that strnum is stable enough. The version guard is no longer necessary.

What's Changed

Full Changelog: v0.45.1...v0.46.0

📝 Documentation

  • docs: update "how-to bump mxgraph" with up-to-date information (#3274) @tbouffard

📦 Dependency updates

👻 Maintenance

Contributors

tbouffard
Loading

0.45.1

0.45.1

Choose a tag to compare

View all tags
@tbouffard tbouffard released this 13 Feb 15:54
v0.45.1
2e4f0c9

This new version improves the documentation 📖 and includes internal changes ⚙️.

Thanks to all the contributors of this release 🌈: @csouchet and @tbouffard

What's Changed

Full Changelog: v0.45.0...v0.45.1

📝 Documentation

📦 Dependency updates

👻 Maintenance

Contributors

csouchet and tbouffard
Loading

0.45.0

0.45.0

Choose a tag to compare

View all tags
@tbouffard tbouffard released this 18 Dec 13:15
v0.45.0
f7c6fc7

💖 This new version renders annotations and associations defined in the “collaboration” nodes of the BPMN source. 🔥

Thanks to all the contributors of this release 🌈: @tbouffard

See milestone 0.45.0 to get the list of issues covered by this release.

Highlights

Annotations and associations attached to a participant/pool must be defined in the “collaboration” nodes of the BPMN source. Previously, these elements were not rendered by bpmn-visualization. This is now the case 🎉.

Some modelers also store process-related annotations and associations in such a node. bpmn-visualization now renders them too 🎁.

Here's how it looks using the diagram associations.and.annotations.06.defined.in.collaboration.bpmn used in the visual tests.

The collaboration node includes annotations and associations associated with a participant/pool and a process.

<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" id="Definitions_1ygepsi" targetNamespace="http://bpmn.io/schema/bpmn" exporter="bpmn-js (https://demo.bpmn.io)" exporterVersion="17.11.1">
  <bpmn:collaboration id="Collaboration_0tkdozo">
    <bpmn:participant id="Participant_0rto0r1" processRef="Process_18fjzrp" />
    <bpmn:participant id="Participant_18k7mjx" />
    <!-- elements associated to a participant/pool -->
    <bpmn:textAnnotation id="TextAnnotation_1xzfmze" />
    <bpmn:association id="Association_12xd2s3" associationDirection="None" sourceRef="Participant_0rto0r1" targetRef="TextAnnotation_1xzfmze" />
    <bpmn:association id="Association_1lz0tdq" associationDirection="None" sourceRef="Participant_18k7mjx" targetRef="TextAnnotation_1w9ytwx" />
    <bpmn:textAnnotation id="TextAnnotation_1w9ytwx" />
    <!-- elements within a process -->
    <bpmn:textAnnotation id="TextAnnotation_04aqee2" />
    <bpmn:textAnnotation id="TextAnnotation_1ocxgbi" />
    <bpmn:association id="Association_1ingcju" associationDirection="None" sourceRef="StartEvent_1nkg5l5" targetRef="TextAnnotation_04aqee2" />
    <bpmn:association id="Association_1c7eydn" associationDirection="None" sourceRef="Activity_1252w11" targetRef="TextAnnotation_1ocxgbi" />
  </bpmn:collaboration>
0.44.0 0.45.0
associations and annotations 06 defined in collaboration associations and annotations 06 defined in collaboration

Note

For more details, see #3200.

Breaking Changes

The BpmnVisualization.getVersion method is now removed. Use the getVersion function instead. See #2966.

This method was deprecated in 0.43.0 released on 2024-02-29.

What's Changed

Full Changelog: v0.44.0...v0.45.0

🚀 BPMN support

  • feat: render annotation + association defined in "collaboration” (#3200) @tbouffard

📝 Documentation

📦 Dependency updates

👻 Maintenance

  • refactor!: remove BpmnVisualization.getVersion (#3231) @tbouffard
  • refactor: make class members readonly when possible (#3227) @tbouffard
  • ci: provide ways to limit the number of "e2e tests" runs (#3197) @tbouffard
  • test: check text annotation defined in the collaboration node (#3191) @tbouffard
  • test(e2e): add a new diagram to validate the size of edge arrows (#3178) @tbouffard
  • ci: add workaround to prevent "no space left on device" error (#3172) @tbouffard
  • ci(publish): stop sending slack message on success (#3169) @tbouffard
  • ci: fix notification workflows used during releases (#3157) @tbouffard

Contributors

tbouffard and dependabot
Loading

0.44.0

0.44.0

Choose a tag to compare

View all tags
@tbouffard tbouffard released this 30 Aug 08:00
v0.44.0
77d4b09

📢 This new version of bpmn-visualization introduces a reduction in package size.

Thanks to all the contributors of this release 🌈: @csouchet and @tbouffard

See milestone 0.44.0 to get the list of issues covered by this release.

Highlights

The overall size of the bpmn-visualization package has been reduced.

For instance, the size of the minified IIFE bundle included in the npm package has decreased from 4750B / 4.63kB.

bundle 0.43.0 0.44.0
bpmn-visualization.esm.js 209,770 204,217
bpmn-visualization.js 1,682,011 1,671,953
bpmn-visualization.min.js 990,530 985,780

This reduction is the result of both code refactoring and the transition from lodash-es to es-toolkit.

es-toolkit is a modern, high-performance JavaScript utility library that features a smaller bundle size and robust type annotations.

Advantages of using es-toolkit include:

  • More frequent updates
  • ESM optimization
  • Improved tree-shaking

Breaking Changes

This version introduces minor breaking changes primarily affecting style customization functions.

Removal of Unused Elements in Custom Styling Features

  • BpmnCanvas.setIconOriginForIconOnBottomLeft
  • StyleDefault.SHAPE_ACTIVITY_FROM_CENTER_MARGIN

These changes are unlikely to impact users as these methods were not widely utilized. No repositories within the Process Analytics project were found to be using them.

ℹ️ For more details, see #3050.

Removal of IconPainter.paintEmptyIcon

This change is expected to have minimal impact. Applications that extend IconPainter typically have no reason to override this method.

ℹ️ For more details, see #3054.

Correct CSS Class Name for Adhoc Subprocess

  • The CSS class name associated with the adhoc subprocess in the DOM has been updated from bpmn-sub-process-ad_hoc to bpmn-sub-process-adhoc. Any CSS rules or selectors using this class name will need to be updated.
  • The value of ShapeBpmnSubProcessKind.AD_HOC has also changed. Since it is not intended for direct use, this should not affect most users.

ℹ️ For more details, see #3058.

Renaming of Values in ShapeBpmnMarkerKind

Several values in ShapeBpmnMarkerKind have been renamed. These values are generally not intended for direct use, so this change should not have a significant impact. If your application does use these values, it is recommended to use the enum directly, particularly for:

  • MULTI_INSTANCE_PARALLEL
  • MULTI_INSTANCE_SEQUENTIAL

ℹ️ For more details, see #3147.

What's Changed

Full Changelog: v0.43.0...v0.44.0

🐛 Bug Fixes

  • fix!: generate correct CSS class name for adhoc subprocess (#3058) @tbouffard
  • fix: remove extra spacing between 2 activity markers (#3052) @tbouffard

📝 Documentation

🎮 Demo and Examples

📦 Dependency updates

👻 Maintenance

Contributors

csouchet, tbouffard, and dependabot
Loading

0.43.0

0.43.0

Choose a tag to compare

View all tags
@tbouffard tbouffard released this 29 Feb 16:21
v0.43.0
0e901a8

📢 This new version brings improvements to the parser and the way users can retrieve the bpmn-visualization version.

Thanks to all the contributors of this release 🌈: @tbouffard

See milestone 0.43.0 to get the list of issues covered by this release.

Deprecated APIs

BpmnVisualization.getVersion is now deprecated and will be removed in v0.45.0, see #2966.
Use the getVersion function instead. For more details, see #2965.

What's Changed

Full Changelog: v0.42.0...v0.43.0

🐛 Bug Fixes

⤵️ Library Integration

📝 Documentation

🎮 Demo and Examples

📦 Dependency updates

👻 Maintenance

Contributors

tbouffard and dependabot
Loading

0.42.0

0.42.0

Choose a tag to compare

View all tags
@csouchet csouchet released this 16 Oct 09:24
v0.42.0
636fe40

This new version brings improvements to the ShapeBpmnSemantic data returned by the API. There are now more details for Link Events.

Thanks to all the contributors of this release 🌈: @csouchet and @tbouffard

See milestone 0.42.0 to get the list of issues covered by this release.

Highlights

When related to a Link Event, ShapeBpmnSemantic objects now return the source identifiers (linkEventSourceIds) of a catch event or the target identifier (linkEventTargetId) of a throw event.

This improves navigation between model elements.

ℹ️ For more details, see #2911.

What's Changed

Full Changelog: v0.41.0...v0.42.0

🧲 BPMN diagram usability

  • feat: add link event data in ShapeBpmnSemantic (#2911) @csouchet
  • feat: add more data in the internal model for the link events (#2924) @csouchet

🐛 Bug Fixes

📦 Dependency updates

👻 Maintenance

  • chore(eslint): use unicorn/recommended rules (#2824) @csouchet
  • chore(eslint): add some unicorn rules (#2925) @csouchet
  • refactor: internally store more data of event definitions (#2923) @csouchet
  • chore(eslint): add unicorn/prefer-string-slice rule (#2913) @csouchet
  • test: simplify the code of toBpmnStyle() (#2915) @csouchet
  • chore(eslint): add @typescript-eslint/dot-notation rule (#2914) @csouchet
  • chore(eslint): enable 3 rules of the unicorn plugin (#2912) @csouchet
  • test(JsonBuilder): use the id of event for the id of eventDefinition (#2910) @csouchet
  • test(JsonBuilder): add new properties for link events (#2895) @csouchet
  • test(JsonBuilder): have unique id for event definition (#2906) @csouchet
  • test(JsonBuilder): avoid duplicated code when adding EventDefinition (#2901) @csouchet

Contributors

csouchet, tbouffard, and dependabot
Loading

0.41.0

0.41.0

Choose a tag to compare

View all tags
@tbouffard tbouffard released this 02 Oct 12:42
v0.41.0
df91d43

This new release provides more information in the ShapeBpmnSemantic objects returned by the APIs.
It also includes some improvements to the contributor documentation.

Thanks to all the contributors of this release 🌈: @csouchet and @tbouffard

See milestone 0.41.0 to get the list of issues covered by this release.

Highlights

API Enhancement

This new release introduces, the following properties are available for ShapeBpmnSemantic objects returned by APIs:

  • parentId
  • eventDefinitionKind for the events
  • callActivityKind and globalTaskKind for the call activities
  • subProcessKind for the sub-processes

image

ℹ️ For more details, see the issue #2854.

What's Changed

Full Changelog: v0.40.0...v0.41.0

🧲 BPMN diagram usability

🐛 Bug Fixes

  • fix(API): prevent a reset/remove when passing an empty string (#2900) @tbouffard

📝 Documentation

📦 Dependency updates

👻 Maintenance

  • test(JsonBuilder): not possible to have NONE eventDefinitionOn and eventDefinitionKind in same time in BuildEventParameter (#2899) @csouchet
  • test(JsonBuilder): enforce the type of BuildEventDefinitionParameter eventDefinitionKind property in JsonBuilder (#2897) @csouchet
  • test: split the file containing the unit tests for all events (#2896) @csouchet
  • chore(eslint): add unicorn/prefer-spread rule (#2878) @csouchet
  • chore(eslint): add unicorn Switch rules (#2881) @csouchet
  • chore(eslint): add unicorn/numeric-separators-style and unicorn/no-zero-fractions rules (#2880) @csouchet
  • chore(eslint): add unicorn Array rules (#2877) @csouchet
  • chore(eslint): add unicorn/no-negated-condition rule (#2876) @csouchet
  • chore(eslint): add unicorn/prefer-dom-node-append and unicorn/prefer-dom-node-remove rules (#2875) @csouchet
  • chore(eslint): add unicorn/consistent-function-scoping rule (#2873) @csouchet
  • chore(eslint): add unicorn/prefer-logical-operator-over-ternary rule (#2871) @csouchet
  • chore(eslint): add unicorn/prefer-ternary rule (#2870) @csouchet
  • chore(eslint): add unicorn/prefer-dom-node-text-content rule (#2869) @csouchet
  • chore(eslint): add unicorn/no-array-for-each rule (#2868) @csouchet
  • chore(eslint): add unicorn/prefer-add-event-listener rule (#2867) @csouchet
  • chore(eslint): add unicorn/prefer-query-selector rule (#2866) @csouchet
  • chore(eslint): add unicorn/prevent abbreviations rule (#2865) @csouchet
  • ci(release): eliminate bypassing of branch protection (#2863) @tbouffard

Contributors

csouchet, tbouffard, and dependabot
Loading

0.40.0

0.40.0

Choose a tag to compare

View all tags
@csouchet csouchet released this 18 Sep 13:10
v0.40.0
cf1781b

This new version brings improvements to the incoming and outgoing properties of BpmnSemantic objects returned by APIs.
It also includes some improvements to API documentation.

Thanks to all the contributors of this release 🌈: @assynour, @csouchet and @tbouffard

See milestone 0.40.0 to get the list of issues covered by this release.

What's Changed

Full Changelog: v0.39.0...v0.40.0

🚀 BPMN support

📝 Documentation

  • docs: fix code example of getModelElementsByKinds (#2846) @assynour
  • docs: improve the JSDoc of NavigationConfiguration.enabled (#2847) @tbouffard

👻 Maintenance

  • chore: use the macOS 13 runner in GH Actions (#2809) @csouchet
  • refactor(demo): improve method signatures and async code (#2819) @csouchet
  • test: improvement management of asynchronous configuration (#2817) @csouchet
  • chore(eslint): add eslint-plugin-import dependency (#2842) @csouchet

Contributors

csouchet, tbouffard, and assynour
Loading