diff --git a/lib/util/RenderUtil.js b/lib/util/RenderUtil.js
index 7bb3af13e..1b375d044 100644
--- a/lib/util/RenderUtil.js
+++ b/lib/util/RenderUtil.js
@@ -20,7 +20,7 @@ import {
  * @return {string}
  */
 export function componentsToPath(elements) {
-  return elements.flat().join(',').replace(/,?([A-z]),?/g, '$1');
+  return elements.flat().join(',').replace(/,?([A-Za-z]),?/g, '$1');
 }
 
 /**
diff --git a/test/spec/util/RenderUtilSpec.js b/test/spec/util/RenderUtilSpec.js
index 6c5be3ffa..c200f3736 100644
--- a/test/spec/util/RenderUtilSpec.js
+++ b/test/spec/util/RenderUtilSpec.js
@@ -1,4 +1,5 @@
 import {
+  componentsToPath,
   createLine,
   updateLine
 } from 'lib/util/RenderUtil';
@@ -113,4 +114,72 @@ describe('util/RenderUtil', function() {
 
   });
 
+
+  describe('#componentsToPath', function() {
+
+    // test cases derived from bpmn-js BpmnRenderUtil
+    const testCases = [
+      {
+        name: 'circle',
+        components: [
+          [ 'M', 0, 0 ],
+          [ 'm', 0, -20 ],
+          [ 'a', 20, 20, 0, 1, 1, 0, 2 * 20 ],
+          [ 'a', 20, 20, 0, 1, 1, 0, -2 * 20 ],
+          [ 'z' ]
+        ],
+        expected: 'M0,0m0,-20a20,20,0,1,1,0,40a20,20,0,1,1,0,-40z'
+      },
+      {
+        name: 'roundRect',
+        components: [
+          [ 'M', 100 + 5, 10 ],
+          [ 'l', 100 - 5 * 2, 0 ],
+          [ 'a', 5, 5, 0, 0, 1, 5, 5 ],
+          [ 'l', 0, 80 - 5 * 2 ],
+          [ 'a', 5, 5, 0, 0, 1, -5, 5 ],
+          [ 'l', 5 * 2 - 100, 0 ],
+          [ 'a', 5, 5, 0, 0, 1, -5, -5 ],
+          [ 'l', 0, 5 * 2 - 80 ],
+          [ 'a', 5, 5, 0, 0, 1, 5, -5 ],
+          [ 'z' ]
+        ],
+        expected: 'M105,10l90,0a5,5,0,0,1,5,5l0,70a5,5,0,0,1,-5,5l-90,0a5,5,0,0,1,-5,-5l0,-70a5,5,0,0,1,5,-5z'
+      },
+      {
+        name: 'diamond',
+        components: [
+          [ 'M', 100, 0 ],
+          [ 'l', 100, 100 ],
+          [ 'l', -100, 100 ],
+          [ 'l', -100, -100 ],
+          [ 'z' ]
+        ],
+        expected: 'M100,0l100,100l-100,100l-100,-100z'
+      },
+      {
+        name: 'rect',
+        components: [
+          [ 'M', 100, 0 ],
+          [ 'l', 100, 0 ],
+          [ 'l', 0, 100 ],
+          [ 'l', -100, 0 ],
+          [ 'z' ]
+        ],
+        expected: 'M100,0l100,0l0,100l-100,0z'
+      }
+    ];
+
+    for (const testCase of testCases) {
+
+      it(`should handle ${testCase.name}`, function() {
+
+        // when
+        const output = componentsToPath(testCase.components);
+
+        // then
+        expect(output).to.eql(testCase.expected);
+      });
+    }
+  });
 });