[INFRA] Update BPMN Visualization version to 0.24.0 (#347)

process-analytics · May 30, 2022 · 251a6fc · 251a6fc
1 parent 5c3aaa6
commit 251a6fc
Show file tree

Hide file tree

Showing 36 changed files with 79 additions and 73 deletions.
diff --git a/demo/hacktoberfest-custom-themes/index.html b/demo/hacktoberfest-custom-themes/index.html
@@ -23,7 +23,7 @@
     <link rel="stylesheet" href="../static/css/style.css" type="text/css">
     <script defer src="../../examples/static/js/link-to-sources.js"></script>
     <!-- load bpmn-visualization -->
-    <script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.23.3/dist/bpmn-visualization.min.js"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.24.0/dist/bpmn-visualization.min.js"></script>
     <!-- load the example -->
     <script defer src="../../examples/static/js/diagram/bpmn-diagrams.js"></script>
     <script defer src="../../examples/static/js/style-identifiers.js"></script>

diff --git a/demo/load-and-navigation/diagram-navigation.html b/demo/load-and-navigation/diagram-navigation.html
@@ -39,6 +39,20 @@
 
     <!-- Zoom -->
     <h5>Zoom</h5>
+    <div class="flex-column-container">
+      <button id="zoom-in" title="Zoom In">
+        <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+            <path d="M7,7 L5,7 L5,9 L7,9 L7,11 L9,11 L9,9 L11,9 L11,7 L9,7 L9,5 L7,5 L7,7 Z M12.9056439,14.3198574 C11.5509601,15.3729184 9.84871145,16 8,16 C3.581722,16 0,12.418278 0,8 C0,3.581722 3.581722,0 8,0 C12.418278,0 16,3.581722 16,8 C16,9.84871145 15.3729184,11.5509601 14.3198574,12.9056439 L19.6568542,18.2426407 L18.2426407,19.6568542 L12.9056439,14.3198574 Z M8,14 C11.3137085,14 14,11.3137085 14,8 C14,4.6862915 11.3137085,2 8,2 C4.6862915,2 2,4.6862915 2,8 C2,11.3137085 4.6862915,14 8,14 Z" fill="currentColor"/>
+        </svg>
+      </button>
+    </div>
+    <div class="flex-column-container">
+      <button id="zoom-out" title="Zoom Out">
+        <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+          <path d="M12.9056439,14.3198574 C11.5509601,15.3729184 9.84871145,16 8,16 C3.581722,16 0,12.418278 0,8 C0,3.581722 3.581722,0 8,0 C12.418278,0 16,3.581722 16,8 C16,9.84871145 15.3729184,11.5509601 14.3198574,12.9056439 L19.6568542,18.2426407 L18.2426407,19.6568542 L12.9056439,14.3198574 Z M8,14 C11.3137085,14 14,11.3137085 14,8 C14,4.6862915 11.3137085,2 8,2 C4.6862915,2 2,4.6862915 2,8 C2,11.3137085 4.6862915,14 8,14 Z M5,7 L11,7 L11,9 L5,9 L5,7 Z" fill="currentColor"/>
+        </svg>
+      </button>
+    </div>
     <div class="flex-column-container">
       <label for="zoom-throttle">throttle</label>
       <input id="zoom-throttle" class="zoom-config" type="number" placeholder="thr" value="40" disabled

diff --git a/demo/load-and-navigation/index.es.js b/demo/load-and-navigation/index.es.js
diff --git a/demo/load-and-navigation/index.html b/demo/load-and-navigation/index.html
@@ -28,7 +28,7 @@
       <div class="bg-gray-800 shadow-xl w-full md:w-48">
         <ul class="flex flex-row md:flex-col py-0 px-1 md:px-2">
             <li class="md:mr-3">
-              <div class="py-1 md:pb-5 md:pt-3 pl-1 border-b-2 border-gray-800">
+              <div class="select-none py-1 md:pb-5 md:pt-3 pl-1 border-b-2 border-gray-800">
                 <div class="bg-gradient-to-b from-red-200 to-red-100 border-b-4 border-red-600 rounded-lg shadow-xl hover:border-red-900">
                   <div class="cursor-pointer text-red-500 hover:text-red-900">
                     <div class="text-center">
@@ -38,15 +38,15 @@
                   </div>
                 </div>
               </div>
-              <a href="#" class="block pb-1 md:py-3 pl-1 text-white no-underline md:border-b-2 md:border-purple-500">
+              <div class="block pb-1 md:py-3 pl-1 text-white no-underline md:border-b-2 md:border-purple-500">
                 <label for="fitOnLoad">Fit on load:
                   <input type="checkbox" id="fitOnLoad" name="fitOnLoad" checked>
                 </label>
-              </a>
+              </div>
             </li>
             <li class="flex-1 md:mr-3">
               <div class="py-1 md:py-3 pl-1 text-white md:border-b-2 md:border-red-500">
-                <a href="#" class="block no-underline md:pb-3 md:border-b-2 md:border-blue-600">
+                <div class="block no-underline md:pb-3 md:border-b-2 md:border-blue-600">
                   <label class="flex justify-evenly md:block">Fit type:
                     <select name="fitTypes" id="fitType-selected" class="w-1/2 md:w-full pl-1 md:pl-0 text-blue-900">
                       <option value="None">None</option>
@@ -56,25 +56,23 @@
                       <option value="Center" selected>Center</option>
                     </select>
                   </label>
-                </a>
-                <a href="#" class="block no-underline mt-3">
+                </div>
+                <div class="block no-underline mt-3">
                   <label for="fit-margin" class="flex justify-around">Fit margin:
                     <input type="number" id="fit-margin" class="w-1/3 pl-1 text-red-900 md:ml-auto" min="0" max="100" value="50" maxlength="3" oninput="validity.valid||(value='');">
                   </label>
-                </a>
+                </div>
               </div>
             </li>
             <li class="flex-1 md:mr-3">
               <div id="zoom-config-controls" class="py-1 md:py-3 pl-1 text-white md:border-b-2 md:border-yellow-500">
-                <label for="zoom-throttle" class="flex justify-center">
-                  Throttle:
-                  <input id="zoom-throttle" class="w-1/3 pl-1 ml-3 text-black md:ml-auto" placeholder="throttle" value="50" disabled
-                         title="to play with throttle pass parameter in url like this: .../?zoomThrottle=40"/>
-                </label>
-                <label for="zoom-debounce" class="flex justify-center mt-3">Debounce:
-                  <input id="zoom-debounce" class="w-1/3 pl-1 text-black md:ml-auto" placeholder="debounce" value="50" disabled
-                         title="to play with debounce pass parameter in url like this: .../?zoomDebounce=30"/>
-                </label>
+                <div id="zoom" class="flex md:justify-between">
+                  <span>Zoom:</span>
+                  <span class="ml-4 md:ml-0">
+                    <button id="zoom-in" title="Zoom In"><em class="fa-solid fa-magnifying-glass-plus"></em></button>
+                    <button id="zoom-out" title="Zoom Out"><em class="ml-4 fa-solid fa-magnifying-glass-minus"></em></button>
+                  </span>
+                </div>
               </div>
             </li>
           </ul>

diff --git a/demo/load-and-navigation/static/css/tailwind.css b/demo/load-and-navigation/static/css/tailwind.css
diff --git a/demo/load-and-navigation/static/js/diagram-navigation.js b/demo/load-and-navigation/static/js/diagram-navigation.js
@@ -14,11 +14,16 @@
  * limitations under the License.
  */
 
-import { documentReady, startBpmnVisualization, fit, FitType } from '../../index.es.js';
+import { documentReady, startBpmnVisualization, fit, FitType, zoom } from '../../index.es.js';
 import { configureControlsPanel, configureMousePointer } from './helpers/controls.js';
 
-function fitOnClick(fitType) {
-  document.getElementById(fitType).onclick = () => fit({ type: fitType });
+function configureFitAndZoomButtons() {
+  Object.values(FitType).forEach(fitType => {
+    document.getElementById(fitType).onclick = () => fit({ type: fitType });
+  });
+  ['in', 'out'].forEach(zoomType => {
+    document.getElementById(`zoom-${zoomType}`).onclick = () => zoom(zoomType);
+  });
 }
 
 function configureZoomThrottleInput(parameters) {
@@ -58,9 +63,7 @@ function start() {
     },
   });
 
-  for (let fitTypeElement in FitType) {
-    fitOnClick(fitTypeElement);
-  }
+  configureFitAndZoomButtons();
 }
 
 documentReady(start);
diff --git a/demo/load-and-navigation/static/js/index.js b/demo/load-and-navigation/static/js/index.js
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { documentReady, handleFileSelect, startBpmnVisualization, fit, log, updateLoadOptions, getCurrentLoadOptions, getVersion } from '../../index.es.js';
+import { documentReady, handleFileSelect, startBpmnVisualization, fit, log, updateLoadOptions, getCurrentLoadOptions, getVersion, zoom } from '../../index.es.js';
 
 let fitOnLoad = true;
 let fitOptions = {};
@@ -70,6 +70,12 @@ function configureFitMarginInput() {
   }
 }
 
+function configureZoomButtons() {
+  ['in', 'out'].forEach(zoomType => {
+    document.getElementById(`zoom-${zoomType}`).onclick = () => zoom(zoomType);
+  });
+}
+
 function configureDisplayedFooterContent() {
   const version = getVersion();
   const versionAsString = `bpmn-visualization@${version.lib}`;
@@ -95,27 +101,11 @@ function startDemo() {
   preventZoomingPage();
   const bpmnContainerId = 'bpmn-container';
 
-  const parameters = new URLSearchParams(window.location.search);
-  const zoomThrottleElt = document.getElementById('zoom-throttle'),
-    zoomDebounceElt = document.getElementById('zoom-debounce'),
-    zoomControlsElt = document.getElementById('zoom-config-controls');
-  if (parameters.get('zoomThrottle')) {
-    zoomControlsElt.style = 'visibility: visible';
-    zoomThrottleElt.value = parameters.get('zoomThrottle');
-  }
-  if (parameters.get('zoomDebounce')) {
-    zoomControlsElt.style = 'visibility: visible';
-    zoomDebounceElt.value = parameters.get('zoomDebounce');
-  }
   startBpmnVisualization({
     globalOptions: {
       container: bpmnContainerId,
       navigation: {
         enabled: true,
-        zoom: {
-          throttleDelay: zoomThrottleElt.value,
-          debounceDelay: zoomDebounceElt.value,
-        },
       },
     },
   });
@@ -127,6 +117,7 @@ function startDemo() {
   configureFitTypeSelect();
   configureFitMarginInput();
   configureFitOnLoadCheckBox();
+  configureZoomButtons();
   configureDisplayedFooterContent();
 }
 

diff --git a/demo/monitoring-all-process-instances/index.html b/demo/monitoring-all-process-instances/index.html
@@ -25,7 +25,7 @@
     <link rel="stylesheet" href="./css/legend.css" type="text/css">
     <script defer src="../../examples/static/js/link-to-sources.js"></script>
     <!-- load bpmn-visualization -->
-    <script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.23.3/dist/bpmn-visualization.min.js"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.24.0/dist/bpmn-visualization.min.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/values.js@2.0.0/dist/index.umd.js" integrity="sha256-lNJnNIdh5oXecah6rOix/TxyGcOYnfkybx4Qii2uxSo="
             crossorigin="anonymous"></script>
     <script defer src="https://variancecharts.com/cdn/variance-noncommercial-standalone-6d26aa2.min.js" charset="UTF-8"></script>

diff --git a/demo/predictions/index.html b/demo/predictions/index.html
@@ -24,7 +24,7 @@
     <link rel="stylesheet" href="./css/demo.css" type="text/css">
     <script defer src="../../examples/static/js/link-to-sources.js"></script>
     <!-- load bpmn-visualization -->
-    <script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.23.3/dist/bpmn-visualization.min.js"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.24.0/dist/bpmn-visualization.min.js"></script>
     <script defer src="./js/bpmn-diagram-bpmn-spec-pizza.js"></script>
     <script defer src="../static/js/use-case.js"></script>
     <script defer src="./js/prediction-use-case.js"></script>

diff --git a/examples/custom-behavior/apply-css-classes/index.html b/examples/custom-behavior/apply-css-classes/index.html
@@ -87,7 +87,7 @@
         }
     </style>
     <script defer src="../../static/js/link-to-sources.js"></script>
-    <script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.23.3/dist/bpmn-visualization.min.js"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.24.0/dist/bpmn-visualization.min.js"></script>
     <script defer src="../../static/js/diagram/bpmn-diagram-miwg-test-suite-c_1_1.js"></script>
     <script defer src="index.js"></script>
 </head>

diff --git a/examples/custom-behavior/call-activity-with-modal-on-mouse-over/index.html b/examples/custom-behavior/call-activity-with-modal-on-mouse-over/index.html
@@ -34,7 +34,7 @@
         </style>
         <script defer src="../../static/js/link-to-sources.js"></script>
         <!-- load bpmn-visualization -->
-        <script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.23.3/dist/bpmn-visualization.min.js"></script>
+        <script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.24.0/dist/bpmn-visualization.min.js"></script>
         <script defer src="../../static/js/diagram/bpmn-diagrams.js"></script>
         <script defer src="./index.js"></script>
         <script defer src="./modal.js"></script>

diff --git a/examples/custom-behavior/call-activity-with-reload-on-dblclick/index.html b/examples/custom-behavior/call-activity-with-reload-on-dblclick/index.html
@@ -36,7 +36,7 @@
         </style>
         <script defer src="../../static/js/link-to-sources.js"></script>
         <!-- load bpmn-visualization -->
-        <script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.23.3/dist/bpmn-visualization.min.js"></script>
+        <script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.24.0/dist/bpmn-visualization.min.js"></script>
         <script defer src="../../static/js/diagram/bpmn-diagrams.js"></script>
         <script defer src="./index.js"></script>
         <script defer src="./breadcrumbs.js"></script>

diff --git a/examples/custom-behavior/call-activity-with-tabs-on-click/index.html b/examples/custom-behavior/call-activity-with-tabs-on-click/index.html
@@ -36,7 +36,7 @@
         </style>
         <script defer src="../../static/js/link-to-sources.js"></script>
         <!-- load bpmn-visualization -->
-        <script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.23.3/dist/bpmn-visualization.min.js"></script>
+        <script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.24.0/dist/bpmn-visualization.min.js"></script>
         <script defer src="../../static/js/diagram/bpmn-diagrams.js"></script>
         <script defer src="./index.js"></script>
     </head>

diff --git a/examples/custom-behavior/growing-sequence-flow/index.html b/examples/custom-behavior/growing-sequence-flow/index.html
@@ -57,7 +57,7 @@
         </style>
         <script defer src="../../static/js/link-to-sources.js"></script>
         <!-- load bpmn-visualization -->
-        <script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.23.3/dist/bpmn-visualization.min.js"></script>
+        <script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.24.0/dist/bpmn-visualization.min.js"></script>
         <script defer src="../../static/js/diagram/bpmn-diagrams.js"></script>
         <script defer src="./index.js"></script>
     </head>

diff --git a/examples/custom-behavior/javascript-tooltip-and-popover/index.html b/examples/custom-behavior/javascript-tooltip-and-popover/index.html
@@ -50,7 +50,7 @@
 
         <script defer src="../../static/js/link-to-sources.js"></script>
         <!-- load bpmn-visualization -->
-        <script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.23.3/dist/bpmn-visualization.min.js"></script>
+        <script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.24.0/dist/bpmn-visualization.min.js"></script>
         <script defer src="../../static/js/diagram/bpmn-diagrams.js"></script>
         <script defer src="index.js"></script>
     </head>

diff --git a/examples/custom-behavior/popover-static/index.html b/examples/custom-behavior/popover-static/index.html
@@ -67,7 +67,7 @@
         </style>
         <script defer src="../../static/js/link-to-sources.js"></script>
         <!-- load bpmn-visualization -->
-        <script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.23.3/dist/bpmn-visualization.min.js"></script>
+        <script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.24.0/dist/bpmn-visualization.min.js"></script>
         <script defer src="../../static/js/diagram/bpmn-diagrams.js"></script>
         <script defer src="../../static/js/dom-helper.js"></script>
         <script defer src="./index.js"></script>

diff --git a/examples/custom-behavior/running-dashed-message-flow/index.html b/examples/custom-behavior/running-dashed-message-flow/index.html
@@ -57,7 +57,7 @@
         </style>
         <script defer src="../../static/js/link-to-sources.js"></script>
         <!-- load bpmn-visualization -->
-        <script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.23.3/dist/bpmn-visualization.min.js"></script>
+        <script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.24.0/dist/bpmn-visualization.min.js"></script>
         <script defer src="../../static/js/diagram/bpmn-diagrams.js"></script>
         <script defer src="./index.js"></script>
     </head>

diff --git a/examples/custom-behavior/select-elements-by-bpmn-kind/index.html b/examples/custom-behavior/select-elements-by-bpmn-kind/index.html
@@ -55,7 +55,7 @@
         }
     </style>
     <script defer src="../../static/js/link-to-sources.js"></script>
-    <script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.23.3/dist/bpmn-visualization.min.js"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.24.0/dist/bpmn-visualization.min.js"></script>
     <script defer src="../../static/js/diagram/bpmn-diagram-miwg-test-suite-a_4_1.js"></script>
     <script defer src="../../static/js/diagram/bpmn-diagram-miwg-test-suite-c_1_0.js"></script>
     <script defer src="../../static/js/diagram/bpmn-diagram-miwg-test-suite-c_1_1.js"></script>

diff --git a/examples/custom-bpmn-theme/custom-colors/index.html b/examples/custom-bpmn-theme/custom-colors/index.html
@@ -22,7 +22,7 @@
     <link rel="stylesheet" href="../../static/css/main.css" type="text/css">
     <script defer src="../../static/js/link-to-sources.js"></script>
     <!-- load bpmn-visualization -->
-    <script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.23.3/dist/bpmn-visualization.min.js"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.24.0/dist/bpmn-visualization.min.js"></script>
     <!-- load the example -->
     <script defer src="../../static/js/diagram/bpmn-diagrams.js"></script>
     <script defer src="../../static/js/style-identifiers.js"></script>

diff --git a/examples/custom-bpmn-theme/custom-fonts/index.html b/examples/custom-bpmn-theme/custom-fonts/index.html
@@ -22,7 +22,7 @@
     <link rel="stylesheet" href="../../static/css/main.css" type="text/css">
     <script defer src="../../static/js/link-to-sources.js"></script>
     <!-- load bpmn-visualization -->
-    <script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.23.3/dist/bpmn-visualization.min.js"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.24.0/dist/bpmn-visualization.min.js"></script>
     <!-- load the example -->
     <script defer src="../../static/js/diagram/bpmn-diagrams.js"></script>
     <script defer src="../../static/js/style-identifiers.js"></script>

diff --git a/examples/custom-bpmn-theme/custom-user-task-icon/index.html b/examples/custom-bpmn-theme/custom-user-task-icon/index.html
@@ -22,7 +22,7 @@
     <link rel="stylesheet" href="../../static/css/main.css" type="text/css">
     <script defer src="../../static/js/link-to-sources.js"></script>
     <!-- load bpmn-visualization -->
-    <script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.23.3/dist/bpmn-visualization.min.js"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.24.0/dist/bpmn-visualization.min.js"></script>
     <!-- load the example -->
     <script defer src="../../static/js/diagram/bpmn-diagrams.js"></script>
     <script defer src="index.js"></script>

diff --git a/examples/diagram-navigation/diagram-fit-after-load/index.html b/examples/diagram-navigation/diagram-fit-after-load/index.html
@@ -53,7 +53,7 @@
     </style>
     <script defer src="../../static/js/link-to-sources.js"></script>
     <!-- load bpmn-visualization -->
-    <script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.23.3/dist/bpmn-visualization.min.js"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.24.0/dist/bpmn-visualization.min.js"></script>
     <script defer src="../../static/js/diagram/bpmn-diagrams.js"></script>
     <script defer src="index.js"></script>
 </head>

diff --git a/examples/diagram-navigation/diagram-fit-on-load/index.html b/examples/diagram-navigation/diagram-fit-on-load/index.html
@@ -40,7 +40,7 @@
         </style>
         <script defer src="../../static/js/link-to-sources.js"></script>
         <!-- load bpmn-visualization -->
-        <script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.23.3/dist/bpmn-visualization.min.js"></script>
+        <script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.24.0/dist/bpmn-visualization.min.js"></script>
         <script defer src="../../static/js/diagram/bpmn-diagrams.js"></script>
         <script defer src="index.js"></script>
     </head>

diff --git a/examples/diagram-navigation/diagram-navigation/index.html b/examples/diagram-navigation/diagram-navigation/index.html
@@ -34,7 +34,7 @@
         }
     </style>
     <script defer src="../../static/js/link-to-sources.js"></script>
-    <script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.23.3/dist/bpmn-visualization.min.js"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.24.0/dist/bpmn-visualization.min.js"></script>
     <script defer src="../../static/js/diagram/bpmn-diagrams.js"></script>
     <script defer src="./index.js"></script>
 </head>

diff --git a/examples/display-bpmn-diagram/01-getting-started/README.md b/examples/display-bpmn-diagram/01-getting-started/README.md
@@ -10,12 +10,12 @@ Javascript example to demonstrate how to integrate `bpmn-visualization` in an ht
 Load the browser bundle from [jsdelivr](https://www.jsdelivr.com/package/npm/bpmn-visualization), [unpkg](https://unpkg.com/browse/bpmn-visualization)
 or any other location:
 ```html
-<script src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.23.3/dist/bpmn-visualization.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.24.0/dist/bpmn-visualization.min.js"></script>
 ```
 
 💡 During the development step, you can use the non-minified version:
 ```html
-<script src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.23.3/dist/bpmn-visualization.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.24.0/dist/bpmn-visualization.js"></script>
 ```
 
 ### Use the library