diff --git a/packages/ui/src/components/Visualization/Canvas/Canvas.tsx b/packages/ui/src/components/Visualization/Canvas/Canvas.tsx
index 1f6c261ad..6f6af11b7 100644
--- a/packages/ui/src/components/Visualization/Canvas/Canvas.tsx
+++ b/packages/ui/src/components/Visualization/Canvas/Canvas.tsx
@@ -74,7 +74,7 @@ export const Canvas: FunctionComponent<PropsWithChildren<CanvasProps>> = ({ enti
 
     entities.forEach((entity) => {
       if (visibleFlows[entity.id]) {
-        const { nodes: childNodes, edges: childEdges } = FlowService.getFlowDiagram(entity.toVizNode());
+        const { nodes: childNodes, edges: childEdges } = FlowService.getFlowDiagram(entity.id, entity.toVizNode());
         nodes.push(...childNodes);
         edges.push(...childEdges);
       }
diff --git a/packages/ui/src/components/Visualization/Canvas/CanvasSideBar.test.tsx b/packages/ui/src/components/Visualization/Canvas/CanvasSideBar.test.tsx
index 105c3f3f6..a019ede7c 100644
--- a/packages/ui/src/components/Visualization/Canvas/CanvasSideBar.test.tsx
+++ b/packages/ui/src/components/Visualization/Canvas/CanvasSideBar.test.tsx
@@ -16,7 +16,7 @@ describe('CanvasSideBar', () => {
     const camelResource = new CamelRouteResource();
     camelResource.addNewEntity(EntityType.Route);
     const visualEntity = camelResource.getVisualEntities()[0];
-    selectedNode = FlowService.getFlowDiagram(visualEntity.toVizNode()).nodes[0];
+    selectedNode = FlowService.getFlowDiagram('test', visualEntity.toVizNode()).nodes[0];
     Provider = TestProvidersWrapper({ camelResource }).Provider;
   });
 
diff --git a/packages/ui/src/components/Visualization/Canvas/Form/CanvasForm.test.tsx b/packages/ui/src/components/Visualization/Canvas/Form/CanvasForm.test.tsx
index 81f73fcc2..b2280ac38 100644
--- a/packages/ui/src/components/Visualization/Canvas/Form/CanvasForm.test.tsx
+++ b/packages/ui/src/components/Visualization/Canvas/Form/CanvasForm.test.tsx
@@ -53,7 +53,7 @@ describe('CanvasForm', () => {
 
   beforeEach(() => {
     camelRouteVisualEntity = new CamelRouteVisualEntity(camelRouteJson);
-    const { nodes } = FlowService.getFlowDiagram(camelRouteVisualEntity.toVizNode());
+    const { nodes } = FlowService.getFlowDiagram('test', camelRouteVisualEntity.toVizNode());
     selectedNode = nodes[2]; // choice
   });
 
@@ -146,7 +146,7 @@ describe('CanvasForm', () => {
     const flowId = camelRouteVisualEntity.id;
     const dispatchSpy = jest.fn();
     const visualFlowsApi = new VisualFlowsApi(dispatchSpy);
-    const { nodes } = FlowService.getFlowDiagram(camelRouteVisualEntity.toVizNode());
+    const { nodes } = FlowService.getFlowDiagram('test', camelRouteVisualEntity.toVizNode());
     selectedNode = nodes[nodes.length - 1];
 
     render(
@@ -183,7 +183,7 @@ describe('CanvasForm', () => {
     const flowId = camelRouteVisualEntity.id;
     const dispatchSpy = jest.fn();
     const visualFlowsApi = new VisualFlowsApi(dispatchSpy);
-    const { nodes } = FlowService.getFlowDiagram(camelRouteVisualEntity.toVizNode());
+    const { nodes } = FlowService.getFlowDiagram('test', camelRouteVisualEntity.toVizNode());
     selectedNode = nodes[nodes.length - 1];
 
     render(
@@ -221,7 +221,7 @@ describe('CanvasForm', () => {
     const newName = 'MyNewId';
     const dispatchSpy = jest.fn();
     const visualFlowsApi = new VisualFlowsApi(dispatchSpy);
-    const { nodes } = FlowService.getFlowDiagram(camelRouteVisualEntity.toVizNode());
+    const { nodes } = FlowService.getFlowDiagram('test', camelRouteVisualEntity.toVizNode());
     selectedNode = nodes[nodes.length - 1];
 
     render(
@@ -261,7 +261,7 @@ describe('CanvasForm', () => {
     const newName = 'MyNewName';
     const dispatchSpy = jest.fn();
     const visualFlowsApi = new VisualFlowsApi(dispatchSpy);
-    const { nodes } = FlowService.getFlowDiagram(kameletVisualEntity.toVizNode());
+    const { nodes } = FlowService.getFlowDiagram('test', kameletVisualEntity.toVizNode());
     selectedNode = nodes[nodes.length - 1];
 
     render(
@@ -293,7 +293,7 @@ describe('CanvasForm', () => {
   describe('should show the User-updated field under the modified tab', () => {
     beforeEach(() => {
       camelRouteVisualEntity = new CamelRouteVisualEntity(camelRouteJson);
-      const { nodes } = FlowService.getFlowDiagram(camelRouteVisualEntity.toVizNode());
+      const { nodes } = FlowService.getFlowDiagram('test', camelRouteVisualEntity.toVizNode());
       selectedNode = nodes[0]; // timer
     });
 
@@ -630,7 +630,7 @@ describe('CanvasForm', () => {
   describe('should show the Required field under the required tab', () => {
     beforeEach(() => {
       camelRouteVisualEntity = new CamelRouteVisualEntity(camelRouteJson);
-      const { nodes } = FlowService.getFlowDiagram(camelRouteVisualEntity.toVizNode());
+      const { nodes } = FlowService.getFlowDiagram('test', camelRouteVisualEntity.toVizNode());
       selectedNode = nodes[0]; // timer
     });
 
diff --git a/packages/ui/src/components/Visualization/Canvas/Form/__snapshots__/CanvasForm.test.tsx.snap b/packages/ui/src/components/Visualization/Canvas/Form/__snapshots__/CanvasForm.test.tsx.snap
index 03cfcc1df..6c6f4c108 100644
--- a/packages/ui/src/components/Visualization/Canvas/Form/__snapshots__/CanvasForm.test.tsx.snap
+++ b/packages/ui/src/components/Visualization/Canvas/Form/__snapshots__/CanvasForm.test.tsx.snap
@@ -23,7 +23,7 @@ exports[`CanvasForm should render 1`] = `
           >
             <img
               alt="icon"
-              class="form-header__icon-log-1234"
+              class="form-header__icon-test|route.from.steps.1.choice.when.0.steps.0.log"
               src=""
             />
             <h2
@@ -32,7 +32,7 @@ exports[`CanvasForm should render 1`] = `
               data-ouia-component-type="PF5/Title"
               data-ouia-safe="true"
             >
-              log
+              route.from.steps.1.choice.when.0.steps.0.log
             </h2>
           </div>
           <div
diff --git a/packages/ui/src/components/Visualization/Canvas/__snapshots__/Canvas.test.tsx.snap b/packages/ui/src/components/Visualization/Canvas/__snapshots__/Canvas.test.tsx.snap
index a49ab55cf..c04160862 100644
--- a/packages/ui/src/components/Visualization/Canvas/__snapshots__/Canvas.test.tsx.snap
+++ b/packages/ui/src/components/Visualization/Canvas/__snapshots__/Canvas.test.tsx.snap
@@ -44,7 +44,7 @@ exports[`Canvas Catalog button should NOT be present if \`CatalogModalContext\`
                       />
                       <g
                         data-surface="true"
-                        transform="translate(-0.4045307443365696, -0.5420711974110033) scale(0.0012944983818770227)"
+                        transform="translate(-0.30092592592592593, -0.5324074074074074) scale(0.000925925925925926)"
                       >
                         <g
                           data-layer-id="bottom"
@@ -53,7 +53,7 @@ exports[`Canvas Catalog button should NOT be present if \`CatalogModalContext\`
                           data-layer-id="groups"
                         >
                           <g
-                            data-id="route-1234"
+                            data-id="route-8888|route"
                             data-kind="node"
                             data-type="group"
                             transform="translate(0, 0)"
@@ -63,15 +63,15 @@ exports[`Canvas Catalog button should NOT be present if \`CatalogModalContext\`
                               data-disabled="false"
                               data-grouplabel="route-8888"
                               data-selected="false"
-                              data-testid="custom-group__route-1234"
+                              data-testid="custom-group__route"
                               data-toolbar-open="false"
                             >
                               <foreignobject
                                 data-nodelabel="route-8888"
-                                height="772.5"
-                                width="705"
-                                x="-40"
-                                y="32.5"
+                                height="1080"
+                                width="580"
+                                x="35"
+                                y="35"
                               >
                                 <div
                                   class="custom-group__container"
@@ -95,7 +95,7 @@ exports[`Canvas Catalog button should NOT be present if \`CatalogModalContext\`
                             </g>
                           </g>
                           <g
-                            data-id="choice-1234"
+                            data-id="route-8888|route.from.steps.1.choice"
                             data-kind="node"
                             data-type="group"
                             transform="translate(0, 0)"
@@ -105,15 +105,15 @@ exports[`Canvas Catalog button should NOT be present if \`CatalogModalContext\`
                               data-disabled="false"
                               data-grouplabel="choice"
                               data-selected="false"
-                              data-testid="custom-group__choice-1234"
+                              data-testid="custom-group__route.from.steps.1.choice"
                               data-toolbar-open="false"
                             >
                               <foreignobject
                                 data-nodelabel="choice"
-                                height="542.5"
-                                width="625"
-                                x="0"
-                                y="72.5"
+                                height="545"
+                                width="500"
+                                x="75"
+                                y="380"
                               >
                                 <div
                                   class="custom-group__container"
@@ -141,7 +141,7 @@ exports[`Canvas Catalog button should NOT be present if \`CatalogModalContext\`
                           data-layer-id="default"
                         >
                           <g
-                            data-id="timer-1234-to-set-header-1234"
+                            data-id="route.from >>> route.from.steps.0.set-header"
                             data-kind="edge"
                             data-type="edge"
                             style="z-index: 0;"
@@ -151,15 +151,15 @@ exports[`Canvas Catalog button should NOT be present if \`CatalogModalContext\`
                             >
                               <path
                                 class="custom-edge__background"
-                                d="M367.5 112.5 L367.5 267.5"
+                                d="M325 112.5 L325 267.5"
                               />
                               <path
                                 class="custom-edge__body"
-                                d="M367.5 112.5 L367.5 267.5"
+                                d="M325 112.5 L325 267.5"
                               />
                               <g
                                 class="pf-topology-connector-arrow pf-topology__edge"
-                                transform="translate(367.5, 253.5) rotate(90)"
+                                transform="translate(325, 253.5) rotate(90)"
                               >
                                 <polygon
                                   points=" 0,7 0,-7 14,0"
@@ -172,7 +172,7 @@ exports[`Canvas Catalog button should NOT be present if \`CatalogModalContext\`
                               <foreignobject
                                 height="40"
                                 width="40"
-                                x="347.5"
+                                x="305"
                                 y="174"
                               >
                                 <div
@@ -210,7 +210,7 @@ exports[`Canvas Catalog button should NOT be present if \`CatalogModalContext\`
                             </g>
                           </g>
                           <g
-                            data-id="set-header-1234-to-choice-1234"
+                            data-id="route.from.steps.0.set-header >>> route.from.steps.1.choice"
                             data-kind="edge"
                             data-type="edge"
                             style="z-index: 0;"
@@ -220,15 +220,15 @@ exports[`Canvas Catalog button should NOT be present if \`CatalogModalContext\`
                             >
                               <path
                                 class="custom-edge__background"
-                                d="M367.5 267.5 L367.5 72.5"
+                                d="M325 267.5 L325 380"
                               />
                               <path
                                 class="custom-edge__body"
-                                d="M367.5 267.5 L367.5 72.5"
+                                d="M325 267.5 L325 380"
                               />
                               <g
                                 class="pf-topology-connector-arrow pf-topology__edge"
-                                transform="translate(367.5, 86.5) rotate(270)"
+                                transform="translate(325, 366) rotate(90)"
                               >
                                 <polygon
                                   points=" 0,7 0,-7 14,0"
@@ -241,8 +241,8 @@ exports[`Canvas Catalog button should NOT be present if \`CatalogModalContext\`
                               <foreignobject
                                 height="40"
                                 width="40"
-                                x="347.5"
-                                y="154"
+                                x="305"
+                                y="307.75"
                               >
                                 <div
                                   aria-hidden="true"
@@ -279,7 +279,7 @@ exports[`Canvas Catalog button should NOT be present if \`CatalogModalContext\`
                             </g>
                           </g>
                           <g
-                            data-id="amqp-1234-to-amqp-1234"
+                            data-id="route.from.steps.1.choice.otherwise.steps.0.to >>> route.from.steps.1.choice.otherwise.steps.1.to"
                             data-kind="edge"
                             data-type="edge"
                             style="z-index: 0;"
@@ -289,15 +289,15 @@ exports[`Canvas Catalog button should NOT be present if \`CatalogModalContext\`
                             >
                               <path
                                 class="custom-edge__background"
-                                d="M500 535 L500 582.5"
+                                d="M450 497.5 L450 652.5"
                               />
                               <path
                                 class="custom-edge__body"
-                                d="M500 535 L500 582.5"
+                                d="M450 497.5 L450 652.5"
                               />
                               <g
                                 class="pf-topology-connector-arrow pf-topology__edge"
-                                transform="translate(500, 568.5) rotate(90)"
+                                transform="translate(450, 638.5) rotate(90)"
                               >
                                 <polygon
                                   points=" 0,7 0,-7 14,0"
@@ -310,8 +310,8 @@ exports[`Canvas Catalog button should NOT be present if \`CatalogModalContext\`
                               <foreignobject
                                 height="40"
                                 width="40"
-                                x="480"
-                                y="542.75"
+                                x="430"
+                                y="559"
                               >
                                 <div
                                   aria-hidden="true"
@@ -348,7 +348,7 @@ exports[`Canvas Catalog button should NOT be present if \`CatalogModalContext\`
                             </g>
                           </g>
                           <g
-                            data-id="choice-1234-to-direct-1234"
+                            data-id="route.from.steps.1.choice.otherwise.steps.1.to >>> route.from.steps.1.choice.otherwise.steps.2.log"
                             data-kind="edge"
                             data-type="edge"
                             style="z-index: 0;"
@@ -358,15 +358,15 @@ exports[`Canvas Catalog button should NOT be present if \`CatalogModalContext\`
                             >
                               <path
                                 class="custom-edge__background"
-                                d="M367.5 615 L367.5 727.5"
+                                d="M450 652.5 L450 807.5"
                               />
                               <path
                                 class="custom-edge__body"
-                                d="M367.5 615 L367.5 727.5"
+                                d="M450 652.5 L450 807.5"
                               />
                               <g
                                 class="pf-topology-connector-arrow pf-topology__edge"
-                                transform="translate(367.5, 713.5) rotate(90)"
+                                transform="translate(450, 793.5) rotate(90)"
                               >
                                 <polygon
                                   points=" 0,7 0,-7 14,0"
@@ -379,8 +379,8 @@ exports[`Canvas Catalog button should NOT be present if \`CatalogModalContext\`
                               <foreignobject
                                 height="40"
                                 width="40"
-                                x="347.5"
-                                y="645.25"
+                                x="430"
+                                y="714"
                               >
                                 <div
                                   aria-hidden="true"
@@ -417,56 +417,138 @@ exports[`Canvas Catalog button should NOT be present if \`CatalogModalContext\`
                             </g>
                           </g>
                           <g
-                            data-id="route-1234"
+                            data-id="route.from.steps.1.choice >>> route.from.steps.2.to"
+                            data-kind="edge"
+                            data-type="edge"
+                            style="z-index: 0;"
+                          >
+                            <g
+                              class="custom-edge"
+                            >
+                              <path
+                                class="custom-edge__background"
+                                d="M325 925 L325 1037.5"
+                              />
+                              <path
+                                class="custom-edge__body"
+                                d="M325 925 L325 1037.5"
+                              />
+                              <g
+                                class="pf-topology-connector-arrow pf-topology__edge"
+                                transform="translate(325, 1023.5) rotate(90)"
+                              >
+                                <polygon
+                                  points=" 0,7 0,-7 14,0"
+                                />
+                                <polygon
+                                  fill-opacity="0"
+                                  stroke-width="0"
+                                />
+                              </g>
+                              <foreignobject
+                                height="40"
+                                width="40"
+                                x="305"
+                                y="955.25"
+                              >
+                                <div
+                                  aria-hidden="true"
+                                  class="custom-edge__add-step add-step-icon"
+                                  title="Add step"
+                                >
+                                  <div
+                                    class="add-step-icon__icon"
+                                  >
+                                    <span
+                                      class="pf-v5-c-icon pf-m-lg"
+                                    >
+                                      <span
+                                        class="pf-v5-c-icon__content"
+                                      >
+                                        <svg
+                                          aria-hidden="true"
+                                          class="pf-v5-svg"
+                                          fill="currentColor"
+                                          height="1em"
+                                          role="img"
+                                          viewBox="0 0 512 512"
+                                          width="1em"
+                                        >
+                                          <path
+                                            d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"
+                                          />
+                                        </svg>
+                                      </span>
+                                    </span>
+                                  </div>
+                                </div>
+                              </foreignobject>
+                            </g>
+                          </g>
+                          <g
+                            data-id="route-8888|route"
                             data-kind="node"
                             data-type="group"
                           >
                             <g
-                              data-id="timer-1234"
+                              data-id="route-8888|route.from"
                               data-kind="node"
                               data-type="node"
-                              transform="translate(322.5, 75)"
+                              transform="translate(280, 75)"
                             />
                             <g
-                              data-id="set-header-1234"
+                              data-id="route-8888|route.from.steps.0.set-header"
                               data-kind="node"
                               data-type="node"
-                              transform="translate(322.5, 230)"
+                              transform="translate(280, 230)"
                             />
                             <g
-                              data-id="choice-1234"
+                              data-id="route-8888|route.from.steps.1.choice"
                               data-kind="node"
                               data-type="group"
                             >
                               <g
-                                data-id="when-1234"
+                                data-id="route-8888|route.from.steps.1.choice.when.0"
                                 data-kind="node"
                                 data-type="group"
-                              />
+                              >
+                                <g
+                                  data-id="route-8888|route.from.steps.1.choice.when.0.steps.0.log"
+                                  data-kind="node"
+                                  data-type="node"
+                                  transform="translate(155, 615)"
+                                />
+                              </g>
                               <g
-                                data-id="otherwise-1234"
+                                data-id="route-8888|route.from.steps.1.choice.otherwise"
                                 data-kind="node"
                                 data-type="group"
                               >
                                 <g
-                                  data-id="amqp-1234"
+                                  data-id="route-8888|route.from.steps.1.choice.otherwise.steps.0.to"
+                                  data-kind="node"
+                                  data-type="node"
+                                  transform="translate(405, 460)"
+                                />
+                                <g
+                                  data-id="route-8888|route.from.steps.1.choice.otherwise.steps.1.to"
                                   data-kind="node"
                                   data-type="node"
-                                  transform="translate(455, 460)"
+                                  transform="translate(405, 615)"
                                 />
                                 <g
-                                  data-id="log-1234"
+                                  data-id="route-8888|route.from.steps.1.choice.otherwise.steps.2.log"
                                   data-kind="node"
                                   data-type="node"
-                                  transform="translate(275, 460)"
+                                  transform="translate(405, 770)"
                                 />
                               </g>
                             </g>
                             <g
-                              data-id="direct-1234"
+                              data-id="route-8888|route.from.steps.2.to"
                               data-kind="node"
                               data-type="node"
-                              transform="translate(322.5, 690)"
+                              transform="translate(280, 1000)"
                             />
                           </g>
                         </g>
@@ -746,7 +828,7 @@ exports[`Canvas Catalog button should be present if \`CatalogModalContext\` is p
                       />
                       <g
                         data-surface="true"
-                        transform="translate(-0.4045307443365696, -0.5420711974110033) scale(0.0012944983818770227)"
+                        transform="translate(-0.30092592592592593, -0.5324074074074074) scale(0.000925925925925926)"
                       >
                         <g
                           data-layer-id="bottom"
@@ -755,7 +837,7 @@ exports[`Canvas Catalog button should be present if \`CatalogModalContext\` is p
                           data-layer-id="groups"
                         >
                           <g
-                            data-id="route-1234"
+                            data-id="route-8888|route"
                             data-kind="node"
                             data-type="group"
                             transform="translate(0, 0)"
@@ -765,15 +847,15 @@ exports[`Canvas Catalog button should be present if \`CatalogModalContext\` is p
                               data-disabled="false"
                               data-grouplabel="route-8888"
                               data-selected="false"
-                              data-testid="custom-group__route-1234"
+                              data-testid="custom-group__route"
                               data-toolbar-open="false"
                             >
                               <foreignobject
                                 data-nodelabel="route-8888"
-                                height="772.5"
-                                width="705"
-                                x="-40"
-                                y="32.5"
+                                height="1080"
+                                width="580"
+                                x="35"
+                                y="35"
                               >
                                 <div
                                   class="custom-group__container"
@@ -797,7 +879,7 @@ exports[`Canvas Catalog button should be present if \`CatalogModalContext\` is p
                             </g>
                           </g>
                           <g
-                            data-id="choice-1234"
+                            data-id="route-8888|route.from.steps.1.choice"
                             data-kind="node"
                             data-type="group"
                             transform="translate(0, 0)"
@@ -807,15 +889,15 @@ exports[`Canvas Catalog button should be present if \`CatalogModalContext\` is p
                               data-disabled="false"
                               data-grouplabel="choice"
                               data-selected="false"
-                              data-testid="custom-group__choice-1234"
+                              data-testid="custom-group__route.from.steps.1.choice"
                               data-toolbar-open="false"
                             >
                               <foreignobject
                                 data-nodelabel="choice"
-                                height="542.5"
-                                width="625"
-                                x="0"
-                                y="72.5"
+                                height="545"
+                                width="500"
+                                x="75"
+                                y="380"
                               >
                                 <div
                                   class="custom-group__container"
@@ -843,7 +925,7 @@ exports[`Canvas Catalog button should be present if \`CatalogModalContext\` is p
                           data-layer-id="default"
                         >
                           <g
-                            data-id="timer-1234-to-set-header-1234"
+                            data-id="route.from >>> route.from.steps.0.set-header"
                             data-kind="edge"
                             data-type="edge"
                             style="z-index: 0;"
@@ -853,15 +935,15 @@ exports[`Canvas Catalog button should be present if \`CatalogModalContext\` is p
                             >
                               <path
                                 class="custom-edge__background"
-                                d="M367.5 112.5 L367.5 267.5"
+                                d="M325 112.5 L325 267.5"
                               />
                               <path
                                 class="custom-edge__body"
-                                d="M367.5 112.5 L367.5 267.5"
+                                d="M325 112.5 L325 267.5"
                               />
                               <g
                                 class="pf-topology-connector-arrow pf-topology__edge"
-                                transform="translate(367.5, 253.5) rotate(90)"
+                                transform="translate(325, 253.5) rotate(90)"
                               >
                                 <polygon
                                   points=" 0,7 0,-7 14,0"
@@ -874,7 +956,7 @@ exports[`Canvas Catalog button should be present if \`CatalogModalContext\` is p
                               <foreignobject
                                 height="40"
                                 width="40"
-                                x="347.5"
+                                x="305"
                                 y="174"
                               >
                                 <div
@@ -912,7 +994,7 @@ exports[`Canvas Catalog button should be present if \`CatalogModalContext\` is p
                             </g>
                           </g>
                           <g
-                            data-id="set-header-1234-to-choice-1234"
+                            data-id="route.from.steps.0.set-header >>> route.from.steps.1.choice"
                             data-kind="edge"
                             data-type="edge"
                             style="z-index: 0;"
@@ -922,15 +1004,15 @@ exports[`Canvas Catalog button should be present if \`CatalogModalContext\` is p
                             >
                               <path
                                 class="custom-edge__background"
-                                d="M367.5 267.5 L367.5 72.5"
+                                d="M325 267.5 L325 380"
                               />
                               <path
                                 class="custom-edge__body"
-                                d="M367.5 267.5 L367.5 72.5"
+                                d="M325 267.5 L325 380"
                               />
                               <g
                                 class="pf-topology-connector-arrow pf-topology__edge"
-                                transform="translate(367.5, 86.5) rotate(270)"
+                                transform="translate(325, 366) rotate(90)"
                               >
                                 <polygon
                                   points=" 0,7 0,-7 14,0"
@@ -943,8 +1025,8 @@ exports[`Canvas Catalog button should be present if \`CatalogModalContext\` is p
                               <foreignobject
                                 height="40"
                                 width="40"
-                                x="347.5"
-                                y="154"
+                                x="305"
+                                y="307.75"
                               >
                                 <div
                                   aria-hidden="true"
@@ -981,7 +1063,7 @@ exports[`Canvas Catalog button should be present if \`CatalogModalContext\` is p
                             </g>
                           </g>
                           <g
-                            data-id="amqp-1234-to-amqp-1234"
+                            data-id="route.from.steps.1.choice.otherwise.steps.0.to >>> route.from.steps.1.choice.otherwise.steps.1.to"
                             data-kind="edge"
                             data-type="edge"
                             style="z-index: 0;"
@@ -991,15 +1073,15 @@ exports[`Canvas Catalog button should be present if \`CatalogModalContext\` is p
                             >
                               <path
                                 class="custom-edge__background"
-                                d="M500 535 L500 582.5"
+                                d="M450 497.5 L450 652.5"
                               />
                               <path
                                 class="custom-edge__body"
-                                d="M500 535 L500 582.5"
+                                d="M450 497.5 L450 652.5"
                               />
                               <g
                                 class="pf-topology-connector-arrow pf-topology__edge"
-                                transform="translate(500, 568.5) rotate(90)"
+                                transform="translate(450, 638.5) rotate(90)"
                               >
                                 <polygon
                                   points=" 0,7 0,-7 14,0"
@@ -1012,8 +1094,8 @@ exports[`Canvas Catalog button should be present if \`CatalogModalContext\` is p
                               <foreignobject
                                 height="40"
                                 width="40"
-                                x="480"
-                                y="542.75"
+                                x="430"
+                                y="559"
                               >
                                 <div
                                   aria-hidden="true"
@@ -1050,7 +1132,7 @@ exports[`Canvas Catalog button should be present if \`CatalogModalContext\` is p
                             </g>
                           </g>
                           <g
-                            data-id="choice-1234-to-direct-1234"
+                            data-id="route.from.steps.1.choice.otherwise.steps.1.to >>> route.from.steps.1.choice.otherwise.steps.2.log"
                             data-kind="edge"
                             data-type="edge"
                             style="z-index: 0;"
@@ -1060,15 +1142,15 @@ exports[`Canvas Catalog button should be present if \`CatalogModalContext\` is p
                             >
                               <path
                                 class="custom-edge__background"
-                                d="M367.5 615 L367.5 727.5"
+                                d="M450 652.5 L450 807.5"
                               />
                               <path
                                 class="custom-edge__body"
-                                d="M367.5 615 L367.5 727.5"
+                                d="M450 652.5 L450 807.5"
                               />
                               <g
                                 class="pf-topology-connector-arrow pf-topology__edge"
-                                transform="translate(367.5, 713.5) rotate(90)"
+                                transform="translate(450, 793.5) rotate(90)"
                               >
                                 <polygon
                                   points=" 0,7 0,-7 14,0"
@@ -1081,8 +1163,8 @@ exports[`Canvas Catalog button should be present if \`CatalogModalContext\` is p
                               <foreignobject
                                 height="40"
                                 width="40"
-                                x="347.5"
-                                y="645.25"
+                                x="430"
+                                y="714"
                               >
                                 <div
                                   aria-hidden="true"
@@ -1119,56 +1201,138 @@ exports[`Canvas Catalog button should be present if \`CatalogModalContext\` is p
                             </g>
                           </g>
                           <g
-                            data-id="route-1234"
+                            data-id="route.from.steps.1.choice >>> route.from.steps.2.to"
+                            data-kind="edge"
+                            data-type="edge"
+                            style="z-index: 0;"
+                          >
+                            <g
+                              class="custom-edge"
+                            >
+                              <path
+                                class="custom-edge__background"
+                                d="M325 925 L325 1037.5"
+                              />
+                              <path
+                                class="custom-edge__body"
+                                d="M325 925 L325 1037.5"
+                              />
+                              <g
+                                class="pf-topology-connector-arrow pf-topology__edge"
+                                transform="translate(325, 1023.5) rotate(90)"
+                              >
+                                <polygon
+                                  points=" 0,7 0,-7 14,0"
+                                />
+                                <polygon
+                                  fill-opacity="0"
+                                  stroke-width="0"
+                                />
+                              </g>
+                              <foreignobject
+                                height="40"
+                                width="40"
+                                x="305"
+                                y="955.25"
+                              >
+                                <div
+                                  aria-hidden="true"
+                                  class="custom-edge__add-step add-step-icon"
+                                  title="Add step"
+                                >
+                                  <div
+                                    class="add-step-icon__icon"
+                                  >
+                                    <span
+                                      class="pf-v5-c-icon pf-m-lg"
+                                    >
+                                      <span
+                                        class="pf-v5-c-icon__content"
+                                      >
+                                        <svg
+                                          aria-hidden="true"
+                                          class="pf-v5-svg"
+                                          fill="currentColor"
+                                          height="1em"
+                                          role="img"
+                                          viewBox="0 0 512 512"
+                                          width="1em"
+                                        >
+                                          <path
+                                            d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"
+                                          />
+                                        </svg>
+                                      </span>
+                                    </span>
+                                  </div>
+                                </div>
+                              </foreignobject>
+                            </g>
+                          </g>
+                          <g
+                            data-id="route-8888|route"
                             data-kind="node"
                             data-type="group"
                           >
                             <g
-                              data-id="timer-1234"
+                              data-id="route-8888|route.from"
                               data-kind="node"
                               data-type="node"
-                              transform="translate(322.5, 75)"
+                              transform="translate(280, 75)"
                             />
                             <g
-                              data-id="set-header-1234"
+                              data-id="route-8888|route.from.steps.0.set-header"
                               data-kind="node"
                               data-type="node"
-                              transform="translate(322.5, 230)"
+                              transform="translate(280, 230)"
                             />
                             <g
-                              data-id="choice-1234"
+                              data-id="route-8888|route.from.steps.1.choice"
                               data-kind="node"
                               data-type="group"
                             >
                               <g
-                                data-id="when-1234"
+                                data-id="route-8888|route.from.steps.1.choice.when.0"
                                 data-kind="node"
                                 data-type="group"
-                              />
+                              >
+                                <g
+                                  data-id="route-8888|route.from.steps.1.choice.when.0.steps.0.log"
+                                  data-kind="node"
+                                  data-type="node"
+                                  transform="translate(155, 615)"
+                                />
+                              </g>
                               <g
-                                data-id="otherwise-1234"
+                                data-id="route-8888|route.from.steps.1.choice.otherwise"
                                 data-kind="node"
                                 data-type="group"
                               >
                                 <g
-                                  data-id="amqp-1234"
+                                  data-id="route-8888|route.from.steps.1.choice.otherwise.steps.0.to"
+                                  data-kind="node"
+                                  data-type="node"
+                                  transform="translate(405, 460)"
+                                />
+                                <g
+                                  data-id="route-8888|route.from.steps.1.choice.otherwise.steps.1.to"
                                   data-kind="node"
                                   data-type="node"
-                                  transform="translate(455, 460)"
+                                  transform="translate(405, 615)"
                                 />
                                 <g
-                                  data-id="log-1234"
+                                  data-id="route-8888|route.from.steps.1.choice.otherwise.steps.2.log"
                                   data-kind="node"
                                   data-type="node"
-                                  transform="translate(275, 460)"
+                                  transform="translate(405, 770)"
                                 />
                               </g>
                             </g>
                             <g
-                              data-id="direct-1234"
+                              data-id="route-8888|route.from.steps.2.to"
                               data-kind="node"
                               data-type="node"
-                              transform="translate(322.5, 690)"
+                              transform="translate(280, 1000)"
                             />
                           </g>
                         </g>
@@ -2260,7 +2424,7 @@ exports[`Canvas should render correctly 1`] = `
                       />
                       <g
                         data-surface="true"
-                        transform="translate(-0.4045307443365696, -0.5420711974110033) scale(0.0012944983818770227)"
+                        transform="translate(-0.30092592592592593, -0.5324074074074074) scale(0.000925925925925926)"
                       >
                         <g
                           data-layer-id="bottom"
@@ -2269,7 +2433,7 @@ exports[`Canvas should render correctly 1`] = `
                           data-layer-id="groups"
                         >
                           <g
-                            data-id="route-1234"
+                            data-id="route-8888|route"
                             data-kind="node"
                             data-type="group"
                             transform="translate(0, 0)"
@@ -2279,15 +2443,15 @@ exports[`Canvas should render correctly 1`] = `
                               data-disabled="false"
                               data-grouplabel="route-8888"
                               data-selected="false"
-                              data-testid="custom-group__route-1234"
+                              data-testid="custom-group__route"
                               data-toolbar-open="false"
                             >
                               <foreignobject
                                 data-nodelabel="route-8888"
-                                height="772.5"
-                                width="705"
-                                x="-40"
-                                y="32.5"
+                                height="1080"
+                                width="580"
+                                x="35"
+                                y="35"
                               >
                                 <div
                                   class="custom-group__container"
@@ -2311,7 +2475,7 @@ exports[`Canvas should render correctly 1`] = `
                             </g>
                           </g>
                           <g
-                            data-id="choice-1234"
+                            data-id="route-8888|route.from.steps.1.choice"
                             data-kind="node"
                             data-type="group"
                             transform="translate(0, 0)"
@@ -2321,15 +2485,15 @@ exports[`Canvas should render correctly 1`] = `
                               data-disabled="false"
                               data-grouplabel="choice"
                               data-selected="false"
-                              data-testid="custom-group__choice-1234"
+                              data-testid="custom-group__route.from.steps.1.choice"
                               data-toolbar-open="false"
                             >
                               <foreignobject
                                 data-nodelabel="choice"
-                                height="542.5"
-                                width="625"
-                                x="0"
-                                y="72.5"
+                                height="545"
+                                width="500"
+                                x="75"
+                                y="380"
                               >
                                 <div
                                   class="custom-group__container"
@@ -2357,7 +2521,7 @@ exports[`Canvas should render correctly 1`] = `
                           data-layer-id="default"
                         >
                           <g
-                            data-id="timer-1234-to-set-header-1234"
+                            data-id="route.from >>> route.from.steps.0.set-header"
                             data-kind="edge"
                             data-type="edge"
                             style="z-index: 0;"
@@ -2367,15 +2531,15 @@ exports[`Canvas should render correctly 1`] = `
                             >
                               <path
                                 class="custom-edge__background"
-                                d="M367.5 112.5 L367.5 267.5"
+                                d="M325 112.5 L325 267.5"
                               />
                               <path
                                 class="custom-edge__body"
-                                d="M367.5 112.5 L367.5 267.5"
+                                d="M325 112.5 L325 267.5"
                               />
                               <g
                                 class="pf-topology-connector-arrow pf-topology__edge"
-                                transform="translate(367.5, 253.5) rotate(90)"
+                                transform="translate(325, 253.5) rotate(90)"
                               >
                                 <polygon
                                   points=" 0,7 0,-7 14,0"
@@ -2388,7 +2552,7 @@ exports[`Canvas should render correctly 1`] = `
                               <foreignobject
                                 height="40"
                                 width="40"
-                                x="347.5"
+                                x="305"
                                 y="174"
                               >
                                 <div
@@ -2426,7 +2590,7 @@ exports[`Canvas should render correctly 1`] = `
                             </g>
                           </g>
                           <g
-                            data-id="set-header-1234-to-choice-1234"
+                            data-id="route.from.steps.0.set-header >>> route.from.steps.1.choice"
                             data-kind="edge"
                             data-type="edge"
                             style="z-index: 0;"
@@ -2436,15 +2600,15 @@ exports[`Canvas should render correctly 1`] = `
                             >
                               <path
                                 class="custom-edge__background"
-                                d="M367.5 267.5 L367.5 72.5"
+                                d="M325 267.5 L325 380"
                               />
                               <path
                                 class="custom-edge__body"
-                                d="M367.5 267.5 L367.5 72.5"
+                                d="M325 267.5 L325 380"
                               />
                               <g
                                 class="pf-topology-connector-arrow pf-topology__edge"
-                                transform="translate(367.5, 86.5) rotate(270)"
+                                transform="translate(325, 366) rotate(90)"
                               >
                                 <polygon
                                   points=" 0,7 0,-7 14,0"
@@ -2457,8 +2621,8 @@ exports[`Canvas should render correctly 1`] = `
                               <foreignobject
                                 height="40"
                                 width="40"
-                                x="347.5"
-                                y="154"
+                                x="305"
+                                y="307.75"
                               >
                                 <div
                                   aria-hidden="true"
@@ -2495,7 +2659,7 @@ exports[`Canvas should render correctly 1`] = `
                             </g>
                           </g>
                           <g
-                            data-id="amqp-1234-to-amqp-1234"
+                            data-id="route.from.steps.1.choice.otherwise.steps.0.to >>> route.from.steps.1.choice.otherwise.steps.1.to"
                             data-kind="edge"
                             data-type="edge"
                             style="z-index: 0;"
@@ -2505,15 +2669,15 @@ exports[`Canvas should render correctly 1`] = `
                             >
                               <path
                                 class="custom-edge__background"
-                                d="M500 535 L500 582.5"
+                                d="M450 497.5 L450 652.5"
                               />
                               <path
                                 class="custom-edge__body"
-                                d="M500 535 L500 582.5"
+                                d="M450 497.5 L450 652.5"
                               />
                               <g
                                 class="pf-topology-connector-arrow pf-topology__edge"
-                                transform="translate(500, 568.5) rotate(90)"
+                                transform="translate(450, 638.5) rotate(90)"
                               >
                                 <polygon
                                   points=" 0,7 0,-7 14,0"
@@ -2526,8 +2690,8 @@ exports[`Canvas should render correctly 1`] = `
                               <foreignobject
                                 height="40"
                                 width="40"
-                                x="480"
-                                y="542.75"
+                                x="430"
+                                y="559"
                               >
                                 <div
                                   aria-hidden="true"
@@ -2564,7 +2728,7 @@ exports[`Canvas should render correctly 1`] = `
                             </g>
                           </g>
                           <g
-                            data-id="choice-1234-to-direct-1234"
+                            data-id="route.from.steps.1.choice.otherwise.steps.1.to >>> route.from.steps.1.choice.otherwise.steps.2.log"
                             data-kind="edge"
                             data-type="edge"
                             style="z-index: 0;"
@@ -2574,15 +2738,15 @@ exports[`Canvas should render correctly 1`] = `
                             >
                               <path
                                 class="custom-edge__background"
-                                d="M367.5 615 L367.5 727.5"
+                                d="M450 652.5 L450 807.5"
                               />
                               <path
                                 class="custom-edge__body"
-                                d="M367.5 615 L367.5 727.5"
+                                d="M450 652.5 L450 807.5"
                               />
                               <g
                                 class="pf-topology-connector-arrow pf-topology__edge"
-                                transform="translate(367.5, 713.5) rotate(90)"
+                                transform="translate(450, 793.5) rotate(90)"
                               >
                                 <polygon
                                   points=" 0,7 0,-7 14,0"
@@ -2595,8 +2759,8 @@ exports[`Canvas should render correctly 1`] = `
                               <foreignobject
                                 height="40"
                                 width="40"
-                                x="347.5"
-                                y="645.25"
+                                x="430"
+                                y="714"
                               >
                                 <div
                                   aria-hidden="true"
@@ -2633,56 +2797,138 @@ exports[`Canvas should render correctly 1`] = `
                             </g>
                           </g>
                           <g
-                            data-id="route-1234"
+                            data-id="route.from.steps.1.choice >>> route.from.steps.2.to"
+                            data-kind="edge"
+                            data-type="edge"
+                            style="z-index: 0;"
+                          >
+                            <g
+                              class="custom-edge"
+                            >
+                              <path
+                                class="custom-edge__background"
+                                d="M325 925 L325 1037.5"
+                              />
+                              <path
+                                class="custom-edge__body"
+                                d="M325 925 L325 1037.5"
+                              />
+                              <g
+                                class="pf-topology-connector-arrow pf-topology__edge"
+                                transform="translate(325, 1023.5) rotate(90)"
+                              >
+                                <polygon
+                                  points=" 0,7 0,-7 14,0"
+                                />
+                                <polygon
+                                  fill-opacity="0"
+                                  stroke-width="0"
+                                />
+                              </g>
+                              <foreignobject
+                                height="40"
+                                width="40"
+                                x="305"
+                                y="955.25"
+                              >
+                                <div
+                                  aria-hidden="true"
+                                  class="custom-edge__add-step add-step-icon"
+                                  title="Add step"
+                                >
+                                  <div
+                                    class="add-step-icon__icon"
+                                  >
+                                    <span
+                                      class="pf-v5-c-icon pf-m-lg"
+                                    >
+                                      <span
+                                        class="pf-v5-c-icon__content"
+                                      >
+                                        <svg
+                                          aria-hidden="true"
+                                          class="pf-v5-svg"
+                                          fill="currentColor"
+                                          height="1em"
+                                          role="img"
+                                          viewBox="0 0 512 512"
+                                          width="1em"
+                                        >
+                                          <path
+                                            d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"
+                                          />
+                                        </svg>
+                                      </span>
+                                    </span>
+                                  </div>
+                                </div>
+                              </foreignobject>
+                            </g>
+                          </g>
+                          <g
+                            data-id="route-8888|route"
                             data-kind="node"
                             data-type="group"
                           >
                             <g
-                              data-id="timer-1234"
+                              data-id="route-8888|route.from"
                               data-kind="node"
                               data-type="node"
-                              transform="translate(322.5, 75)"
+                              transform="translate(280, 75)"
                             />
                             <g
-                              data-id="set-header-1234"
+                              data-id="route-8888|route.from.steps.0.set-header"
                               data-kind="node"
                               data-type="node"
-                              transform="translate(322.5, 230)"
+                              transform="translate(280, 230)"
                             />
                             <g
-                              data-id="choice-1234"
+                              data-id="route-8888|route.from.steps.1.choice"
                               data-kind="node"
                               data-type="group"
                             >
                               <g
-                                data-id="when-1234"
+                                data-id="route-8888|route.from.steps.1.choice.when.0"
                                 data-kind="node"
                                 data-type="group"
-                              />
+                              >
+                                <g
+                                  data-id="route-8888|route.from.steps.1.choice.when.0.steps.0.log"
+                                  data-kind="node"
+                                  data-type="node"
+                                  transform="translate(155, 615)"
+                                />
+                              </g>
                               <g
-                                data-id="otherwise-1234"
+                                data-id="route-8888|route.from.steps.1.choice.otherwise"
                                 data-kind="node"
                                 data-type="group"
                               >
                                 <g
-                                  data-id="amqp-1234"
+                                  data-id="route-8888|route.from.steps.1.choice.otherwise.steps.0.to"
+                                  data-kind="node"
+                                  data-type="node"
+                                  transform="translate(405, 460)"
+                                />
+                                <g
+                                  data-id="route-8888|route.from.steps.1.choice.otherwise.steps.1.to"
                                   data-kind="node"
                                   data-type="node"
-                                  transform="translate(455, 460)"
+                                  transform="translate(405, 615)"
                                 />
                                 <g
-                                  data-id="log-1234"
+                                  data-id="route-8888|route.from.steps.1.choice.otherwise.steps.2.log"
                                   data-kind="node"
                                   data-type="node"
-                                  transform="translate(275, 460)"
+                                  transform="translate(405, 770)"
                                 />
                               </g>
                             </g>
                             <g
-                              data-id="direct-1234"
+                              data-id="route-8888|route.from.steps.2.to"
                               data-kind="node"
                               data-type="node"
-                              transform="translate(322.5, 690)"
+                              transform="translate(280, 1000)"
                             />
                           </g>
                         </g>
@@ -2962,7 +3208,7 @@ exports[`Canvas should render correctly with more routes  1`] = `
                       />
                       <g
                         data-surface="true"
-                        transform="translate(-0.4045307443365696, -0.5420711974110033) scale(0.0012944983818770227)"
+                        transform="translate(-0.30092592592592593, -0.5324074074074074) scale(0.000925925925925926)"
                       >
                         <g
                           data-layer-id="bottom"
@@ -2971,7 +3217,7 @@ exports[`Canvas should render correctly with more routes  1`] = `
                           data-layer-id="groups"
                         >
                           <g
-                            data-id="route-1234"
+                            data-id="route-8888|route"
                             data-kind="node"
                             data-type="group"
                             transform="translate(0, 0)"
@@ -2981,15 +3227,15 @@ exports[`Canvas should render correctly with more routes  1`] = `
                               data-disabled="false"
                               data-grouplabel="route-8888"
                               data-selected="false"
-                              data-testid="custom-group__route-1234"
+                              data-testid="custom-group__route"
                               data-toolbar-open="false"
                             >
                               <foreignobject
                                 data-nodelabel="route-8888"
-                                height="772.5"
-                                width="705"
-                                x="-40"
-                                y="32.5"
+                                height="1080"
+                                width="580"
+                                x="35"
+                                y="35"
                               >
                                 <div
                                   class="custom-group__container"
@@ -3013,7 +3259,7 @@ exports[`Canvas should render correctly with more routes  1`] = `
                             </g>
                           </g>
                           <g
-                            data-id="choice-1234"
+                            data-id="route-8888|route.from.steps.1.choice"
                             data-kind="node"
                             data-type="group"
                             transform="translate(0, 0)"
@@ -3023,15 +3269,15 @@ exports[`Canvas should render correctly with more routes  1`] = `
                               data-disabled="false"
                               data-grouplabel="choice"
                               data-selected="false"
-                              data-testid="custom-group__choice-1234"
+                              data-testid="custom-group__route.from.steps.1.choice"
                               data-toolbar-open="false"
                             >
                               <foreignobject
                                 data-nodelabel="choice"
-                                height="542.5"
-                                width="625"
-                                x="0"
-                                y="72.5"
+                                height="545"
+                                width="500"
+                                x="75"
+                                y="380"
                               >
                                 <div
                                   class="custom-group__container"
@@ -3059,7 +3305,7 @@ exports[`Canvas should render correctly with more routes  1`] = `
                           data-layer-id="default"
                         >
                           <g
-                            data-id="timer-1234-to-set-header-1234"
+                            data-id="route.from >>> route.from.steps.0.set-header"
                             data-kind="edge"
                             data-type="edge"
                             style="z-index: 0;"
@@ -3069,15 +3315,15 @@ exports[`Canvas should render correctly with more routes  1`] = `
                             >
                               <path
                                 class="custom-edge__background"
-                                d="M367.5 112.5 L367.5 267.5"
+                                d="M325 112.5 L325 267.5"
                               />
                               <path
                                 class="custom-edge__body"
-                                d="M367.5 112.5 L367.5 267.5"
+                                d="M325 112.5 L325 267.5"
                               />
                               <g
                                 class="pf-topology-connector-arrow pf-topology__edge"
-                                transform="translate(367.5, 253.5) rotate(90)"
+                                transform="translate(325, 253.5) rotate(90)"
                               >
                                 <polygon
                                   points=" 0,7 0,-7 14,0"
@@ -3090,7 +3336,7 @@ exports[`Canvas should render correctly with more routes  1`] = `
                               <foreignobject
                                 height="40"
                                 width="40"
-                                x="347.5"
+                                x="305"
                                 y="174"
                               >
                                 <div
@@ -3128,7 +3374,7 @@ exports[`Canvas should render correctly with more routes  1`] = `
                             </g>
                           </g>
                           <g
-                            data-id="set-header-1234-to-choice-1234"
+                            data-id="route.from.steps.0.set-header >>> route.from.steps.1.choice"
                             data-kind="edge"
                             data-type="edge"
                             style="z-index: 0;"
@@ -3138,15 +3384,15 @@ exports[`Canvas should render correctly with more routes  1`] = `
                             >
                               <path
                                 class="custom-edge__background"
-                                d="M367.5 267.5 L367.5 72.5"
+                                d="M325 267.5 L325 380"
                               />
                               <path
                                 class="custom-edge__body"
-                                d="M367.5 267.5 L367.5 72.5"
+                                d="M325 267.5 L325 380"
                               />
                               <g
                                 class="pf-topology-connector-arrow pf-topology__edge"
-                                transform="translate(367.5, 86.5) rotate(270)"
+                                transform="translate(325, 366) rotate(90)"
                               >
                                 <polygon
                                   points=" 0,7 0,-7 14,0"
@@ -3159,8 +3405,8 @@ exports[`Canvas should render correctly with more routes  1`] = `
                               <foreignobject
                                 height="40"
                                 width="40"
-                                x="347.5"
-                                y="154"
+                                x="305"
+                                y="307.75"
                               >
                                 <div
                                   aria-hidden="true"
@@ -3197,7 +3443,7 @@ exports[`Canvas should render correctly with more routes  1`] = `
                             </g>
                           </g>
                           <g
-                            data-id="amqp-1234-to-amqp-1234"
+                            data-id="route.from.steps.1.choice.otherwise.steps.0.to >>> route.from.steps.1.choice.otherwise.steps.1.to"
                             data-kind="edge"
                             data-type="edge"
                             style="z-index: 0;"
@@ -3207,15 +3453,15 @@ exports[`Canvas should render correctly with more routes  1`] = `
                             >
                               <path
                                 class="custom-edge__background"
-                                d="M500 535 L500 582.5"
+                                d="M450 497.5 L450 652.5"
                               />
                               <path
                                 class="custom-edge__body"
-                                d="M500 535 L500 582.5"
+                                d="M450 497.5 L450 652.5"
                               />
                               <g
                                 class="pf-topology-connector-arrow pf-topology__edge"
-                                transform="translate(500, 568.5) rotate(90)"
+                                transform="translate(450, 638.5) rotate(90)"
                               >
                                 <polygon
                                   points=" 0,7 0,-7 14,0"
@@ -3228,8 +3474,8 @@ exports[`Canvas should render correctly with more routes  1`] = `
                               <foreignobject
                                 height="40"
                                 width="40"
-                                x="480"
-                                y="542.75"
+                                x="430"
+                                y="559"
                               >
                                 <div
                                   aria-hidden="true"
@@ -3266,7 +3512,7 @@ exports[`Canvas should render correctly with more routes  1`] = `
                             </g>
                           </g>
                           <g
-                            data-id="choice-1234-to-direct-1234"
+                            data-id="route.from.steps.1.choice.otherwise.steps.1.to >>> route.from.steps.1.choice.otherwise.steps.2.log"
                             data-kind="edge"
                             data-type="edge"
                             style="z-index: 0;"
@@ -3276,15 +3522,15 @@ exports[`Canvas should render correctly with more routes  1`] = `
                             >
                               <path
                                 class="custom-edge__background"
-                                d="M367.5 615 L367.5 727.5"
+                                d="M450 652.5 L450 807.5"
                               />
                               <path
                                 class="custom-edge__body"
-                                d="M367.5 615 L367.5 727.5"
+                                d="M450 652.5 L450 807.5"
                               />
                               <g
                                 class="pf-topology-connector-arrow pf-topology__edge"
-                                transform="translate(367.5, 713.5) rotate(90)"
+                                transform="translate(450, 793.5) rotate(90)"
                               >
                                 <polygon
                                   points=" 0,7 0,-7 14,0"
@@ -3297,8 +3543,8 @@ exports[`Canvas should render correctly with more routes  1`] = `
                               <foreignobject
                                 height="40"
                                 width="40"
-                                x="347.5"
-                                y="645.25"
+                                x="430"
+                                y="714"
                               >
                                 <div
                                   aria-hidden="true"
@@ -3335,56 +3581,138 @@ exports[`Canvas should render correctly with more routes  1`] = `
                             </g>
                           </g>
                           <g
-                            data-id="route-1234"
+                            data-id="route.from.steps.1.choice >>> route.from.steps.2.to"
+                            data-kind="edge"
+                            data-type="edge"
+                            style="z-index: 0;"
+                          >
+                            <g
+                              class="custom-edge"
+                            >
+                              <path
+                                class="custom-edge__background"
+                                d="M325 925 L325 1037.5"
+                              />
+                              <path
+                                class="custom-edge__body"
+                                d="M325 925 L325 1037.5"
+                              />
+                              <g
+                                class="pf-topology-connector-arrow pf-topology__edge"
+                                transform="translate(325, 1023.5) rotate(90)"
+                              >
+                                <polygon
+                                  points=" 0,7 0,-7 14,0"
+                                />
+                                <polygon
+                                  fill-opacity="0"
+                                  stroke-width="0"
+                                />
+                              </g>
+                              <foreignobject
+                                height="40"
+                                width="40"
+                                x="305"
+                                y="955.25"
+                              >
+                                <div
+                                  aria-hidden="true"
+                                  class="custom-edge__add-step add-step-icon"
+                                  title="Add step"
+                                >
+                                  <div
+                                    class="add-step-icon__icon"
+                                  >
+                                    <span
+                                      class="pf-v5-c-icon pf-m-lg"
+                                    >
+                                      <span
+                                        class="pf-v5-c-icon__content"
+                                      >
+                                        <svg
+                                          aria-hidden="true"
+                                          class="pf-v5-svg"
+                                          fill="currentColor"
+                                          height="1em"
+                                          role="img"
+                                          viewBox="0 0 512 512"
+                                          width="1em"
+                                        >
+                                          <path
+                                            d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"
+                                          />
+                                        </svg>
+                                      </span>
+                                    </span>
+                                  </div>
+                                </div>
+                              </foreignobject>
+                            </g>
+                          </g>
+                          <g
+                            data-id="route-8888|route"
                             data-kind="node"
                             data-type="group"
                           >
                             <g
-                              data-id="timer-1234"
+                              data-id="route-8888|route.from"
                               data-kind="node"
                               data-type="node"
-                              transform="translate(322.5, 75)"
+                              transform="translate(280, 75)"
                             />
                             <g
-                              data-id="set-header-1234"
+                              data-id="route-8888|route.from.steps.0.set-header"
                               data-kind="node"
                               data-type="node"
-                              transform="translate(322.5, 230)"
+                              transform="translate(280, 230)"
                             />
                             <g
-                              data-id="choice-1234"
+                              data-id="route-8888|route.from.steps.1.choice"
                               data-kind="node"
                               data-type="group"
                             >
                               <g
-                                data-id="when-1234"
+                                data-id="route-8888|route.from.steps.1.choice.when.0"
                                 data-kind="node"
                                 data-type="group"
-                              />
+                              >
+                                <g
+                                  data-id="route-8888|route.from.steps.1.choice.when.0.steps.0.log"
+                                  data-kind="node"
+                                  data-type="node"
+                                  transform="translate(155, 615)"
+                                />
+                              </g>
                               <g
-                                data-id="otherwise-1234"
+                                data-id="route-8888|route.from.steps.1.choice.otherwise"
                                 data-kind="node"
                                 data-type="group"
                               >
                                 <g
-                                  data-id="amqp-1234"
+                                  data-id="route-8888|route.from.steps.1.choice.otherwise.steps.0.to"
+                                  data-kind="node"
+                                  data-type="node"
+                                  transform="translate(405, 460)"
+                                />
+                                <g
+                                  data-id="route-8888|route.from.steps.1.choice.otherwise.steps.1.to"
                                   data-kind="node"
                                   data-type="node"
-                                  transform="translate(455, 460)"
+                                  transform="translate(405, 615)"
                                 />
                                 <g
-                                  data-id="log-1234"
+                                  data-id="route-8888|route.from.steps.1.choice.otherwise.steps.2.log"
                                   data-kind="node"
                                   data-type="node"
-                                  transform="translate(275, 460)"
+                                  transform="translate(405, 770)"
                                 />
                               </g>
                             </g>
                             <g
-                              data-id="direct-1234"
+                              data-id="route-8888|route.from.steps.2.to"
                               data-kind="node"
                               data-type="node"
-                              transform="translate(322.5, 690)"
+                              transform="translate(280, 1000)"
                             />
                           </g>
                         </g>
diff --git a/packages/ui/src/components/Visualization/Canvas/__snapshots__/CanvasSideBar.test.tsx.snap b/packages/ui/src/components/Visualization/Canvas/__snapshots__/CanvasSideBar.test.tsx.snap
index 3e1fcd902..de29e731b 100644
--- a/packages/ui/src/components/Visualization/Canvas/__snapshots__/CanvasSideBar.test.tsx.snap
+++ b/packages/ui/src/components/Visualization/Canvas/__snapshots__/CanvasSideBar.test.tsx.snap
@@ -27,7 +27,7 @@ exports[`CanvasSideBar displays selected node information 1`] = `
             >
               <img
                 alt="icon"
-                class="form-header__icon-timer-1234"
+                class="form-header__icon-test|route.from"
                 src=""
               />
               <h2
@@ -36,7 +36,7 @@ exports[`CanvasSideBar displays selected node information 1`] = `
                 data-ouia-component-type="PF5/Title"
                 data-ouia-safe="true"
               >
-                timer
+                route.from
               </h2>
             </div>
             <div
diff --git a/packages/ui/src/components/Visualization/Canvas/__snapshots__/flow.service.test.ts.snap b/packages/ui/src/components/Visualization/Canvas/__snapshots__/flow.service.test.ts.snap
index 95dcdd2b4..7a785ae19 100644
--- a/packages/ui/src/components/Visualization/Canvas/__snapshots__/flow.service.test.ts.snap
+++ b/packages/ui/src/components/Visualization/Canvas/__snapshots__/flow.service.test.ts.snap
@@ -3,6 +3,7 @@
 exports[`FlowService getFlowDiagram should return nodes and edges for a group with children 1`] = `
 [
   {
+    "children": undefined,
     "data": {
       "vizNode": VisualizationNode {
         "DISABLED_NODE_INTERACTION": {
@@ -17,7 +18,7 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a group wi
         },
         "children": undefined,
         "data": {},
-        "id": "child1-1234",
+        "id": "child1",
         "nextNode": undefined,
         "parentNode": VisualizationNode {
           "DISABLED_NODE_INTERACTION": {
@@ -45,7 +46,7 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a group wi
               },
               "children": undefined,
               "data": {},
-              "id": "child2-1234",
+              "id": "child2",
               "nextNode": undefined,
               "parentNode": [Circular],
               "previousNode": undefined,
@@ -55,7 +56,7 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a group wi
           "data": {
             "isGroup": true,
           },
-          "id": "group-1234",
+          "id": "group",
           "nextNode": undefined,
           "parentNode": undefined,
           "previousNode": undefined,
@@ -66,13 +67,14 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a group wi
       },
     },
     "height": 75,
-    "id": "child1-1234",
-    "parentNode": "group-1234",
+    "id": "test|child1",
+    "parentNode": "test|group",
     "shape": "rect",
     "type": "node",
     "width": 90,
   },
   {
+    "children": undefined,
     "data": {
       "vizNode": VisualizationNode {
         "DISABLED_NODE_INTERACTION": {
@@ -87,7 +89,7 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a group wi
         },
         "children": undefined,
         "data": {},
-        "id": "child2-1234",
+        "id": "child2",
         "nextNode": undefined,
         "parentNode": VisualizationNode {
           "DISABLED_NODE_INTERACTION": {
@@ -114,7 +116,7 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a group wi
               },
               "children": undefined,
               "data": {},
-              "id": "child1-1234",
+              "id": "child1",
               "nextNode": undefined,
               "parentNode": [Circular],
               "previousNode": undefined,
@@ -125,7 +127,7 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a group wi
           "data": {
             "isGroup": true,
           },
-          "id": "group-1234",
+          "id": "group",
           "nextNode": undefined,
           "parentNode": undefined,
           "previousNode": undefined,
@@ -136,16 +138,16 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a group wi
       },
     },
     "height": 75,
-    "id": "child2-1234",
-    "parentNode": "group-1234",
+    "id": "test|child2",
+    "parentNode": "test|group",
     "shape": "rect",
     "type": "node",
     "width": 90,
   },
   {
     "children": [
-      "child1-1234",
-      "child2-1234",
+      "test|child1",
+      "test|child2",
     ],
     "data": {
       "vizNode": VisualizationNode {
@@ -173,7 +175,7 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a group wi
             },
             "children": undefined,
             "data": {},
-            "id": "child1-1234",
+            "id": "child1",
             "nextNode": undefined,
             "parentNode": [Circular],
             "previousNode": undefined,
@@ -192,7 +194,7 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a group wi
             },
             "children": undefined,
             "data": {},
-            "id": "child2-1234",
+            "id": "child2",
             "nextNode": undefined,
             "parentNode": [Circular],
             "previousNode": undefined,
@@ -202,7 +204,7 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a group wi
         "data": {
           "isGroup": true,
         },
-        "id": "group-1234",
+        "id": "group",
         "nextNode": undefined,
         "parentNode": undefined,
         "previousNode": undefined,
@@ -210,8 +212,8 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a group wi
       },
     },
     "group": true,
-    "id": "group-1234",
-    "label": "group-1234",
+    "id": "test|group",
+    "label": "group",
     "parentNode": undefined,
     "style": {
       "padding": 40,
@@ -226,6 +228,7 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a group wi
 exports[`FlowService getFlowDiagram should return nodes and edges for a multiple nodes VisualizationNode 1`] = `
 [
   {
+    "children": undefined,
     "data": {
       "vizNode": VisualizationNode {
         "DISABLED_NODE_INTERACTION": {
@@ -240,7 +243,7 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a multiple
         },
         "children": undefined,
         "data": {},
-        "id": "node-1234",
+        "id": "node",
         "nextNode": VisualizationNode {
           "DISABLED_NODE_INTERACTION": {
             "canBeDisabled": false,
@@ -254,7 +257,7 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a multiple
           },
           "children": undefined,
           "data": {},
-          "id": "set-header-1234",
+          "id": "set-header",
           "nextNode": VisualizationNode {
             "DISABLED_NODE_INTERACTION": {
               "canBeDisabled": false,
@@ -292,7 +295,7 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a multiple
                     },
                     "children": undefined,
                     "data": {},
-                    "id": "when-leaf-1234",
+                    "id": "when-leaf",
                     "nextNode": undefined,
                     "parentNode": [Circular],
                     "previousNode": undefined,
@@ -300,7 +303,7 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a multiple
                   },
                 ],
                 "data": {},
-                "id": "when-1234",
+                "id": "when",
                 "nextNode": undefined,
                 "parentNode": [Circular],
                 "previousNode": undefined,
@@ -343,7 +346,7 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a multiple
                         },
                         "children": undefined,
                         "data": {},
-                        "id": "log-1234",
+                        "id": "log",
                         "nextNode": undefined,
                         "parentNode": [Circular],
                         "previousNode": undefined,
@@ -351,7 +354,7 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a multiple
                       },
                     ],
                     "data": {},
-                    "id": "process-1234",
+                    "id": "process",
                     "nextNode": undefined,
                     "parentNode": [Circular],
                     "previousNode": undefined,
@@ -359,7 +362,7 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a multiple
                   },
                 ],
                 "data": {},
-                "id": "otherwise-1234",
+                "id": "otherwise",
                 "nextNode": undefined,
                 "parentNode": [Circular],
                 "previousNode": undefined,
@@ -367,7 +370,7 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a multiple
               },
             ],
             "data": {},
-            "id": "choice-1234",
+            "id": "choice",
             "nextNode": VisualizationNode {
               "DISABLED_NODE_INTERACTION": {
                 "canBeDisabled": false,
@@ -381,7 +384,7 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a multiple
               },
               "children": undefined,
               "data": {},
-              "id": "direct-1234",
+              "id": "direct",
               "nextNode": undefined,
               "parentNode": undefined,
               "previousNode": [Circular],
@@ -401,7 +404,7 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a multiple
       },
     },
     "height": 75,
-    "id": "node-1234",
+    "id": "test|node",
     "parentNode": undefined,
     "shape": "rect",
     "type": "node",
@@ -414,9 +417,9 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a multiple
 [
   {
     "edgeStyle": "solid",
-    "id": "node-1234-to-set-header-1234",
-    "source": "node-1234",
-    "target": "set-header-1234",
+    "id": "node >>> set-header",
+    "source": "test|node",
+    "target": "test|set-header",
     "type": "edge",
   },
 ]
@@ -425,6 +428,7 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a multiple
 exports[`FlowService getFlowDiagram should return nodes and edges for a simple VisualizationNode 1`] = `
 [
   {
+    "children": undefined,
     "data": {
       "vizNode": VisualizationNode {
         "DISABLED_NODE_INTERACTION": {
@@ -439,7 +443,7 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a simple V
         },
         "children": undefined,
         "data": {},
-        "id": "node-1234",
+        "id": "node",
         "nextNode": undefined,
         "parentNode": undefined,
         "previousNode": undefined,
@@ -447,7 +451,7 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a simple V
       },
     },
     "height": 75,
-    "id": "node-1234",
+    "id": "test|node",
     "parentNode": undefined,
     "shape": "rect",
     "type": "node",
@@ -461,6 +465,7 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a simple V
 exports[`FlowService getFlowDiagram should return nodes and edges for a two-nodes VisualizationNode 1`] = `
 [
   {
+    "children": undefined,
     "data": {
       "vizNode": VisualizationNode {
         "DISABLED_NODE_INTERACTION": {
@@ -487,7 +492,7 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a two-node
             },
             "children": undefined,
             "data": {},
-            "id": "child-1234",
+            "id": "child",
             "nextNode": undefined,
             "parentNode": [Circular],
             "previousNode": undefined,
@@ -495,7 +500,7 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a two-node
           },
         ],
         "data": {},
-        "id": "node-1234",
+        "id": "node",
         "nextNode": undefined,
         "parentNode": undefined,
         "previousNode": undefined,
@@ -503,7 +508,7 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a two-node
       },
     },
     "height": 75,
-    "id": "node-1234",
+    "id": "test|node",
     "parentNode": undefined,
     "shape": "rect",
     "type": "node",
diff --git a/packages/ui/src/components/Visualization/Canvas/flow.service.test.ts b/packages/ui/src/components/Visualization/Canvas/flow.service.test.ts
index f95a2e861..c48943215 100644
--- a/packages/ui/src/components/Visualization/Canvas/flow.service.test.ts
+++ b/packages/ui/src/components/Visualization/Canvas/flow.service.test.ts
@@ -19,7 +19,7 @@ describe('FlowService', () => {
     it('should return nodes and edges for a simple VisualizationNode', () => {
       const vizNode = createVisualizationNode('node', {});
 
-      const { nodes, edges } = FlowService.getFlowDiagram(vizNode);
+      const { nodes, edges } = FlowService.getFlowDiagram('test', vizNode);
 
       expect(nodes).toMatchSnapshot();
       expect(edges).toMatchSnapshot();
@@ -32,7 +32,7 @@ describe('FlowService', () => {
       groupVizNode.addChild(child1VizNode);
       groupVizNode.addChild(child2VizNode);
 
-      const { nodes, edges } = FlowService.getFlowDiagram(groupVizNode);
+      const { nodes, edges } = FlowService.getFlowDiagram('test', groupVizNode);
 
       expect(nodes).toMatchSnapshot();
       expect(edges).toMatchSnapshot();
@@ -43,7 +43,7 @@ describe('FlowService', () => {
       const childNode = createVisualizationNode('child', {});
       vizNode.addChild(childNode);
 
-      const { nodes, edges } = FlowService.getFlowDiagram(vizNode);
+      const { nodes, edges } = FlowService.getFlowDiagram('test', vizNode);
 
       expect(nodes).toMatchSnapshot();
       expect(edges).toMatchSnapshot();
@@ -78,7 +78,7 @@ describe('FlowService', () => {
       const logNode = createVisualizationNode('log', {});
       processNode.addChild(logNode);
 
-      const { nodes, edges } = FlowService.getFlowDiagram(vizNode);
+      const { nodes, edges } = FlowService.getFlowDiagram('test', vizNode);
 
       expect(nodes).toMatchSnapshot();
       expect(edges).toMatchSnapshot();
@@ -87,7 +87,7 @@ describe('FlowService', () => {
     it('should return a group node for a multiple nodes VisualizationNode with a group', () => {
       const routeNode = new CamelRouteVisualEntity({ from: { uri: 'timer:clock', steps: [] } }).toVizNode();
 
-      const { nodes, edges } = FlowService.getFlowDiagram(routeNode);
+      const { nodes, edges } = FlowService.getFlowDiagram('test', routeNode);
 
       expect(nodes).toHaveLength(3);
       expect(nodes[0].data?.vizNode?.data.path).toEqual('route.from');
@@ -95,11 +95,11 @@ describe('FlowService', () => {
       expect(nodes[2].data?.vizNode?.data.path).toEqual('route');
 
       expect(edges).toHaveLength(1);
-      expect(edges[0].source).toEqual('timer-1234');
-      expect(edges[0].target).toEqual('route.from.steps-1234');
+      expect(edges[0].source).toEqual('test|route.from');
+      expect(edges[0].target).toEqual('test|route.from.steps.0.placeholder');
 
       const group = nodes[nodes.length - 1];
-      expect(group.children).toEqual(['timer-1234', 'route.from.steps-1234']);
+      expect(group.children).toEqual(['test|route.from', 'test|route.from.steps.0.placeholder']);
       expect(group.group).toBeTruthy();
     });
   });
diff --git a/packages/ui/src/components/Visualization/Canvas/flow.service.ts b/packages/ui/src/components/Visualization/Canvas/flow.service.ts
index b590d4af4..5d954cfa1 100644
--- a/packages/ui/src/components/Visualization/Canvas/flow.service.ts
+++ b/packages/ui/src/components/Visualization/Canvas/flow.service.ts
@@ -8,13 +8,23 @@ export class FlowService {
   static edges: CanvasEdge[] = [];
   private static visitedNodes: string[] = [];
 
-  static getFlowDiagram(vizNode: IVisualizationNode): CanvasNodesAndEdges {
+  static getFlowDiagram(scope: string, vizNode: IVisualizationNode): CanvasNodesAndEdges {
     this.nodes = [];
     this.edges = [];
     this.visitedNodes = [];
 
     this.appendNodesAndEdges(vizNode);
 
+    this.nodes.forEach((node) => {
+      node.id = `${scope}|${node.id}`;
+      node.children = node.children?.map((child) => `${scope}|${child}`);
+      node.parentNode = node.parentNode ? `${scope}|${node.parentNode}` : undefined;
+    });
+    this.edges.forEach((edge) => {
+      edge.source = `${scope}|${edge.source}`;
+      edge.target = `${scope}|${edge.target}`;
+    });
+
     return { nodes: this.nodes, edges: this.edges };
   }
 
@@ -110,7 +120,7 @@ export class FlowService {
 
   private static getEdge(source: string, target: string): CanvasEdge {
     return {
-      id: `${source}-to-${target}`,
+      id: `${source} >>> ${target}`,
       type: 'edge',
       source,
       target,
diff --git a/packages/ui/src/components/Visualization/Custom/ContextMenu/ItemEnableAllSteps.test.tsx b/packages/ui/src/components/Visualization/Custom/ContextMenu/ItemEnableAllSteps.test.tsx
index db58f5b07..b9f5a639f 100644
--- a/packages/ui/src/components/Visualization/Custom/ContextMenu/ItemEnableAllSteps.test.tsx
+++ b/packages/ui/src/components/Visualization/Custom/ContextMenu/ItemEnableAllSteps.test.tsx
@@ -22,7 +22,7 @@ describe('ItemEnableAllSteps', () => {
   it('should NOT render an ItemEnableAllSteps if there are not at least 2 or more disabled steps', () => {
     const camelResource = new CamelRouteResource(camelRouteJson);
     const visualEntity = camelResource.getVisualEntities()[0];
-    const { nodes, edges } = FlowService.getFlowDiagram(visualEntity.toVizNode());
+    const { nodes, edges } = FlowService.getFlowDiagram('test', visualEntity.toVizNode());
 
     const model: Model = {
       nodes,
@@ -52,7 +52,7 @@ describe('ItemEnableAllSteps', () => {
   it('should call updateModel and updateEntitiesFromCamelResource on click', async () => {
     const camelResource = new CamelRouteResource(camelRouteWithDisabledSteps);
     const visualEntity = camelResource.getVisualEntities()[0];
-    const { nodes, edges } = FlowService.getFlowDiagram(visualEntity.toVizNode());
+    const { nodes, edges } = FlowService.getFlowDiagram('test', visualEntity.toVizNode());
 
     const model: Model = {
       nodes,
diff --git a/packages/ui/src/components/Visualization/Custom/ContextMenu/NodeContextMenu.test.tsx b/packages/ui/src/components/Visualization/Custom/ContextMenu/NodeContextMenu.test.tsx
index a1a979037..ab072a30a 100644
--- a/packages/ui/src/components/Visualization/Custom/ContextMenu/NodeContextMenu.test.tsx
+++ b/packages/ui/src/components/Visualization/Custom/ContextMenu/NodeContextMenu.test.tsx
@@ -109,7 +109,7 @@ describe('NodeContextMenu', () => {
   it('should render an ItemEnableAllSteps', () => {
     const camelResource = new CamelRouteResource(camelRouteWithDisabledSteps);
     const visualEntity = camelResource.getVisualEntities()[0];
-    const { nodes, edges } = FlowService.getFlowDiagram(visualEntity.toVizNode());
+    const { nodes, edges } = FlowService.getFlowDiagram('test', visualEntity.toVizNode());
 
     const model: Model = {
       nodes,
diff --git a/packages/ui/src/models/visualization/flows/nodes/mappers/base-node-mapper.ts b/packages/ui/src/models/visualization/flows/nodes/mappers/base-node-mapper.ts
index 88092011d..16469313a 100644
--- a/packages/ui/src/models/visualization/flows/nodes/mappers/base-node-mapper.ts
+++ b/packages/ui/src/models/visualization/flows/nodes/mappers/base-node-mapper.ts
@@ -27,7 +27,7 @@ export class BaseNodeMapper implements INodeMapper {
       componentName: componentLookup.componentName,
     };
 
-    const vizNode = createVisualizationNode(componentLookup.componentName ?? componentLookup.processorName, data);
+    const vizNode = createVisualizationNode(path, data);
 
     const childrenStepsProperties = CamelComponentSchemaService.getProcessorStepsProperties(
       componentLookup.processorName,
@@ -95,10 +95,11 @@ export class BaseNodeMapper implements INodeMapper {
 
     /** Empty steps branch placeholder */
     if (branchVizNodes.length === 0) {
+      const placeholderPath = `${path}.${branchVizNodes.length}.placeholder`;
       const previousNode = branchVizNodes[branchVizNodes.length - 1];
-      const placeholderNode = createVisualizationNode(path, {
+      const placeholderNode = createVisualizationNode(placeholderPath, {
         isPlaceholder: true,
-        path: `${path}.${branchVizNodes.length}.placeholder`,
+        path: placeholderPath,
       });
       branchVizNodes.push(placeholderNode);
 
diff --git a/packages/ui/src/models/visualization/flows/nodes/mappers/choice-node-mapper.ts b/packages/ui/src/models/visualization/flows/nodes/mappers/choice-node-mapper.ts
index 41d2185a3..81de2b145 100644
--- a/packages/ui/src/models/visualization/flows/nodes/mappers/choice-node-mapper.ts
+++ b/packages/ui/src/models/visualization/flows/nodes/mappers/choice-node-mapper.ts
@@ -20,7 +20,7 @@ export class ChoiceNodeMapper extends BaseNodeMapper {
       isGroup: true,
     };
 
-    const vizNode = createVisualizationNode(processorName, data);
+    const vizNode = createVisualizationNode(path, data);
 
     const whenNodes = this.getChildrenFromArrayClause(`${path}.when`, entityDefinition);
     whenNodes.forEach((whenNode) => {
diff --git a/packages/ui/src/models/visualization/flows/nodes/mappers/otherwise-node-mapper.ts b/packages/ui/src/models/visualization/flows/nodes/mappers/otherwise-node-mapper.ts
index 0a299e467..7b6c29526 100644
--- a/packages/ui/src/models/visualization/flows/nodes/mappers/otherwise-node-mapper.ts
+++ b/packages/ui/src/models/visualization/flows/nodes/mappers/otherwise-node-mapper.ts
@@ -20,7 +20,7 @@ export class OtherwiseNodeMapper extends BaseNodeMapper {
       isGroup: true,
     };
 
-    const vizNode = createVisualizationNode(processorName, data);
+    const vizNode = createVisualizationNode(path, data);
 
     const children = this.getChildrenFromBranch(`${path}.steps`, entityDefinition);
     children.forEach((child) => {
diff --git a/packages/ui/src/models/visualization/flows/nodes/mappers/parallel-processor-base-node-mapper.ts b/packages/ui/src/models/visualization/flows/nodes/mappers/parallel-processor-base-node-mapper.ts
index 89afbfa9d..4cdde8a0c 100644
--- a/packages/ui/src/models/visualization/flows/nodes/mappers/parallel-processor-base-node-mapper.ts
+++ b/packages/ui/src/models/visualization/flows/nodes/mappers/parallel-processor-base-node-mapper.ts
@@ -22,7 +22,7 @@ export abstract class ParallelProcessorBaseNodeMapper extends BaseNodeMapper {
       isGroup: true,
     };
 
-    const vizNode = createVisualizationNode(processorName, data);
+    const vizNode = createVisualizationNode(path, data);
     const children = this.getChildrenFromBranch(`${path}.steps`, entityDefinition);
     children.forEach((child) => {
       vizNode.addChild(child);
diff --git a/packages/ui/src/models/visualization/flows/nodes/mappers/when-node-mapper.ts b/packages/ui/src/models/visualization/flows/nodes/mappers/when-node-mapper.ts
index b2d5a9135..719ec9d22 100644
--- a/packages/ui/src/models/visualization/flows/nodes/mappers/when-node-mapper.ts
+++ b/packages/ui/src/models/visualization/flows/nodes/mappers/when-node-mapper.ts
@@ -20,7 +20,7 @@ export class WhenNodeMapper extends BaseNodeMapper {
       isGroup: true,
     };
 
-    const vizNode = createVisualizationNode(processorName, data);
+    const vizNode = createVisualizationNode(path, data);
 
     const children = this.getChildrenFromBranch(`${path}.steps`, entityDefinition);
     children.forEach((child) => {
diff --git a/packages/ui/src/models/visualization/visualization-node.test.ts b/packages/ui/src/models/visualization/visualization-node.test.ts
index 8dfe649c2..ac5851cb3 100644
--- a/packages/ui/src/models/visualization/visualization-node.test.ts
+++ b/packages/ui/src/models/visualization/visualization-node.test.ts
@@ -17,7 +17,7 @@ describe('VisualizationNode', () => {
   });
 
   it('should create a node with a random id', () => {
-    expect(node.id).toEqual('test-1234');
+    expect(node.id).toEqual('test');
   });
 
   it('should create a node and set the ID as the title', () => {
diff --git a/packages/ui/src/models/visualization/visualization-node.ts b/packages/ui/src/models/visualization/visualization-node.ts
index 09031a174..92ac75b55 100644
--- a/packages/ui/src/models/visualization/visualization-node.ts
+++ b/packages/ui/src/models/visualization/visualization-node.ts
@@ -1,4 +1,3 @@
-import { getCamelRandomId } from '../../camel-utils/camel-random-id';
 import { DefinedComponent } from '../camel-catalog-index';
 import { NodeLabelType } from '../settings/settings.model';
 import {
@@ -15,7 +14,7 @@ export const createVisualizationNode = <T extends IVisualizationNodeData = IVisu
   id: string,
   data: T,
 ): IVisualizationNode<T> => {
-  const vizNode = new VisualizationNode(getCamelRandomId(id), data);
+  const vizNode = new VisualizationNode(id, data);
   vizNode.setTitle(id);
 
   return vizNode;
diff --git a/packages/ui/src/tests/__snapshots__/nodes-edges.test.ts.snap b/packages/ui/src/tests/__snapshots__/nodes-edges.test.ts.snap
index b49630a8e..d14b19f2a 100644
--- a/packages/ui/src/tests/__snapshots__/nodes-edges.test.ts.snap
+++ b/packages/ui/src/tests/__snapshots__/nodes-edges.test.ts.snap
@@ -3,6 +3,7 @@
 exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
 [
   {
+    "children": undefined,
     "data": {
       "vizNode": VisualizationNode {
         "DISABLED_NODE_INTERACTION": {
@@ -23,7 +24,7 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
           "path": "route.from",
           "processorName": "from",
         },
-        "id": "timer-1234",
+        "id": "route.from",
         "nextNode": VisualizationNode {
           "DISABLED_NODE_INTERACTION": {
             "canBeDisabled": false,
@@ -66,11 +67,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                     "path": "route.from.steps.0.choice.when.0.steps.0.setHeader",
                     "processorName": "setHeader",
                   },
-                  "id": "setHeader-1234",
+                  "id": "route.from.steps.0.choice.when.0.steps.0.setHeader",
                   "nextNode": undefined,
                   "parentNode": [Circular],
                   "previousNode": undefined,
-                  "title": "setHeader",
+                  "title": "route.from.steps.0.choice.when.0.steps.0.setHeader",
                 },
               ],
               "data": {
@@ -79,11 +80,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                 "path": "route.from.steps.0.choice.when.0",
                 "processorName": "when",
               },
-              "id": "when-1234",
+              "id": "route.from.steps.0.choice.when.0",
               "nextNode": undefined,
               "parentNode": [Circular],
               "previousNode": undefined,
-              "title": "when",
+              "title": "route.from.steps.0.choice.when.0",
             },
             VisualizationNode {
               "DISABLED_NODE_INTERACTION": {
@@ -115,11 +116,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                     "path": "route.from.steps.0.choice.otherwise.steps.0.log",
                     "processorName": "log",
                   },
-                  "id": "log-1234",
+                  "id": "route.from.steps.0.choice.otherwise.steps.0.log",
                   "nextNode": undefined,
                   "parentNode": [Circular],
                   "previousNode": undefined,
-                  "title": "log",
+                  "title": "route.from.steps.0.choice.otherwise.steps.0.log",
                 },
               ],
               "data": {
@@ -128,11 +129,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                 "path": "route.from.steps.0.choice.otherwise",
                 "processorName": "otherwise",
               },
-              "id": "otherwise-1234",
+              "id": "route.from.steps.0.choice.otherwise",
               "nextNode": undefined,
               "parentNode": [Circular],
               "previousNode": undefined,
-              "title": "otherwise",
+              "title": "route.from.steps.0.choice.otherwise",
             },
           ],
           "data": {
@@ -141,7 +142,7 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
             "path": "route.from.steps.0.choice",
             "processorName": "choice",
           },
-          "id": "choice-1234",
+          "id": "route.from.steps.0.choice",
           "nextNode": VisualizationNode {
             "DISABLED_NODE_INTERACTION": {
               "canBeDisabled": false,
@@ -160,7 +161,7 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
               "path": "route.from.steps.1.to",
               "processorName": "to",
             },
-            "id": "sql-1234",
+            "id": "route.from.steps.1.to",
             "nextNode": undefined,
             "parentNode": VisualizationNode {
               "DISABLED_NODE_INTERACTION": {
@@ -242,14 +243,14 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                 "path": "route",
                 "processorName": "route",
               },
-              "id": "route-1234",
+              "id": "route",
               "nextNode": undefined,
               "parentNode": undefined,
               "previousNode": undefined,
               "title": "route",
             },
             "previousNode": [Circular],
-            "title": "sql",
+            "title": "route.from.steps.1.to",
           },
           "parentNode": VisualizationNode {
             "DISABLED_NODE_INTERACTION": {
@@ -283,11 +284,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                   "path": "route.from.steps.1.to",
                   "processorName": "to",
                 },
-                "id": "sql-1234",
+                "id": "route.from.steps.1.to",
                 "nextNode": undefined,
                 "parentNode": [Circular],
                 "previousNode": [Circular],
-                "title": "sql",
+                "title": "route.from.steps.1.to",
               },
             ],
             "data": {
@@ -354,14 +355,14 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
               "path": "route",
               "processorName": "route",
             },
-            "id": "route-1234",
+            "id": "route",
             "nextNode": undefined,
             "parentNode": undefined,
             "previousNode": undefined,
             "title": "route",
           },
           "previousNode": [Circular],
-          "title": "choice",
+          "title": "route.from.steps.0.choice",
         },
         "parentNode": VisualizationNode {
           "DISABLED_NODE_INTERACTION": {
@@ -418,11 +419,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                         "path": "route.from.steps.0.choice.when.0.steps.0.setHeader",
                         "processorName": "setHeader",
                       },
-                      "id": "setHeader-1234",
+                      "id": "route.from.steps.0.choice.when.0.steps.0.setHeader",
                       "nextNode": undefined,
                       "parentNode": [Circular],
                       "previousNode": undefined,
-                      "title": "setHeader",
+                      "title": "route.from.steps.0.choice.when.0.steps.0.setHeader",
                     },
                   ],
                   "data": {
@@ -431,11 +432,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                     "path": "route.from.steps.0.choice.when.0",
                     "processorName": "when",
                   },
-                  "id": "when-1234",
+                  "id": "route.from.steps.0.choice.when.0",
                   "nextNode": undefined,
                   "parentNode": [Circular],
                   "previousNode": undefined,
-                  "title": "when",
+                  "title": "route.from.steps.0.choice.when.0",
                 },
                 VisualizationNode {
                   "DISABLED_NODE_INTERACTION": {
@@ -467,11 +468,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                         "path": "route.from.steps.0.choice.otherwise.steps.0.log",
                         "processorName": "log",
                       },
-                      "id": "log-1234",
+                      "id": "route.from.steps.0.choice.otherwise.steps.0.log",
                       "nextNode": undefined,
                       "parentNode": [Circular],
                       "previousNode": undefined,
-                      "title": "log",
+                      "title": "route.from.steps.0.choice.otherwise.steps.0.log",
                     },
                   ],
                   "data": {
@@ -480,11 +481,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                     "path": "route.from.steps.0.choice.otherwise",
                     "processorName": "otherwise",
                   },
-                  "id": "otherwise-1234",
+                  "id": "route.from.steps.0.choice.otherwise",
                   "nextNode": undefined,
                   "parentNode": [Circular],
                   "previousNode": undefined,
-                  "title": "otherwise",
+                  "title": "route.from.steps.0.choice.otherwise",
                 },
               ],
               "data": {
@@ -493,7 +494,7 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                 "path": "route.from.steps.0.choice",
                 "processorName": "choice",
               },
-              "id": "choice-1234",
+              "id": "route.from.steps.0.choice",
               "nextNode": VisualizationNode {
                 "DISABLED_NODE_INTERACTION": {
                   "canBeDisabled": false,
@@ -512,15 +513,15 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                   "path": "route.from.steps.1.to",
                   "processorName": "to",
                 },
-                "id": "sql-1234",
+                "id": "route.from.steps.1.to",
                 "nextNode": undefined,
                 "parentNode": [Circular],
                 "previousNode": [Circular],
-                "title": "sql",
+                "title": "route.from.steps.1.to",
               },
               "parentNode": [Circular],
               "previousNode": [Circular],
-              "title": "choice",
+              "title": "route.from.steps.0.choice",
             },
             VisualizationNode {
               "DISABLED_NODE_INTERACTION": {
@@ -540,7 +541,7 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                 "path": "route.from.steps.1.to",
                 "processorName": "to",
               },
-              "id": "sql-1234",
+              "id": "route.from.steps.1.to",
               "nextNode": undefined,
               "parentNode": [Circular],
               "previousNode": VisualizationNode {
@@ -585,11 +586,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                           "path": "route.from.steps.0.choice.when.0.steps.0.setHeader",
                           "processorName": "setHeader",
                         },
-                        "id": "setHeader-1234",
+                        "id": "route.from.steps.0.choice.when.0.steps.0.setHeader",
                         "nextNode": undefined,
                         "parentNode": [Circular],
                         "previousNode": undefined,
-                        "title": "setHeader",
+                        "title": "route.from.steps.0.choice.when.0.steps.0.setHeader",
                       },
                     ],
                     "data": {
@@ -598,11 +599,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                       "path": "route.from.steps.0.choice.when.0",
                       "processorName": "when",
                     },
-                    "id": "when-1234",
+                    "id": "route.from.steps.0.choice.when.0",
                     "nextNode": undefined,
                     "parentNode": [Circular],
                     "previousNode": undefined,
-                    "title": "when",
+                    "title": "route.from.steps.0.choice.when.0",
                   },
                   VisualizationNode {
                     "DISABLED_NODE_INTERACTION": {
@@ -634,11 +635,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                           "path": "route.from.steps.0.choice.otherwise.steps.0.log",
                           "processorName": "log",
                         },
-                        "id": "log-1234",
+                        "id": "route.from.steps.0.choice.otherwise.steps.0.log",
                         "nextNode": undefined,
                         "parentNode": [Circular],
                         "previousNode": undefined,
-                        "title": "log",
+                        "title": "route.from.steps.0.choice.otherwise.steps.0.log",
                       },
                     ],
                     "data": {
@@ -647,11 +648,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                       "path": "route.from.steps.0.choice.otherwise",
                       "processorName": "otherwise",
                     },
-                    "id": "otherwise-1234",
+                    "id": "route.from.steps.0.choice.otherwise",
                     "nextNode": undefined,
                     "parentNode": [Circular],
                     "previousNode": undefined,
-                    "title": "otherwise",
+                    "title": "route.from.steps.0.choice.otherwise",
                   },
                 ],
                 "data": {
@@ -660,13 +661,13 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                   "path": "route.from.steps.0.choice",
                   "processorName": "choice",
                 },
-                "id": "choice-1234",
+                "id": "route.from.steps.0.choice",
                 "nextNode": [Circular],
                 "parentNode": [Circular],
                 "previousNode": [Circular],
-                "title": "choice",
+                "title": "route.from.steps.0.choice",
               },
-              "title": "sql",
+              "title": "route.from.steps.1.to",
             },
           ],
           "data": {
@@ -733,24 +734,25 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
             "path": "route",
             "processorName": "route",
           },
-          "id": "route-1234",
+          "id": "route",
           "nextNode": undefined,
           "parentNode": undefined,
           "previousNode": undefined,
           "title": "route",
         },
         "previousNode": undefined,
-        "title": "timer",
+        "title": "route.from",
       },
     },
     "height": 75,
-    "id": "timer-1234",
-    "parentNode": "route-1234",
+    "id": "test|route.from",
+    "parentNode": "test|route",
     "shape": "rect",
     "type": "node",
     "width": 90,
   },
   {
+    "children": undefined,
     "data": {
       "vizNode": VisualizationNode {
         "DISABLED_NODE_INTERACTION": {
@@ -770,7 +772,7 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
           "path": "route.from.steps.0.choice.when.0.steps.0.setHeader",
           "processorName": "setHeader",
         },
-        "id": "setHeader-1234",
+        "id": "route.from.steps.0.choice.when.0.steps.0.setHeader",
         "nextNode": undefined,
         "parentNode": VisualizationNode {
           "DISABLED_NODE_INTERACTION": {
@@ -792,7 +794,7 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
             "path": "route.from.steps.0.choice.when.0",
             "processorName": "when",
           },
-          "id": "when-1234",
+          "id": "route.from.steps.0.choice.when.0",
           "nextNode": undefined,
           "parentNode": VisualizationNode {
             "DISABLED_NODE_INTERACTION": {
@@ -837,11 +839,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                       "path": "route.from.steps.0.choice.otherwise.steps.0.log",
                       "processorName": "log",
                     },
-                    "id": "log-1234",
+                    "id": "route.from.steps.0.choice.otherwise.steps.0.log",
                     "nextNode": undefined,
                     "parentNode": [Circular],
                     "previousNode": undefined,
-                    "title": "log",
+                    "title": "route.from.steps.0.choice.otherwise.steps.0.log",
                   },
                 ],
                 "data": {
@@ -850,11 +852,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                   "path": "route.from.steps.0.choice.otherwise",
                   "processorName": "otherwise",
                 },
-                "id": "otherwise-1234",
+                "id": "route.from.steps.0.choice.otherwise",
                 "nextNode": undefined,
                 "parentNode": [Circular],
                 "previousNode": undefined,
-                "title": "otherwise",
+                "title": "route.from.steps.0.choice.otherwise",
               },
             ],
             "data": {
@@ -863,7 +865,7 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
               "path": "route.from.steps.0.choice",
               "processorName": "choice",
             },
-            "id": "choice-1234",
+            "id": "route.from.steps.0.choice",
             "nextNode": VisualizationNode {
               "DISABLED_NODE_INTERACTION": {
                 "canBeDisabled": false,
@@ -882,7 +884,7 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                 "path": "route.from.steps.1.to",
                 "processorName": "to",
               },
-              "id": "sql-1234",
+              "id": "route.from.steps.1.to",
               "nextNode": undefined,
               "parentNode": VisualizationNode {
                 "DISABLED_NODE_INTERACTION": {
@@ -915,11 +917,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                       "path": "route.from",
                       "processorName": "from",
                     },
-                    "id": "timer-1234",
+                    "id": "route.from",
                     "nextNode": [Circular],
                     "parentNode": [Circular],
                     "previousNode": undefined,
-                    "title": "timer",
+                    "title": "route.from",
                   },
                   [Circular],
                   [Circular],
@@ -988,14 +990,14 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                   "path": "route",
                   "processorName": "route",
                 },
-                "id": "route-1234",
+                "id": "route",
                 "nextNode": undefined,
                 "parentNode": undefined,
                 "previousNode": undefined,
                 "title": "route",
               },
               "previousNode": [Circular],
-              "title": "sql",
+              "title": "route.from.steps.1.to",
             },
             "parentNode": VisualizationNode {
               "DISABLED_NODE_INTERACTION": {
@@ -1028,11 +1030,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                     "path": "route.from",
                     "processorName": "from",
                   },
-                  "id": "timer-1234",
+                  "id": "route.from",
                   "nextNode": [Circular],
                   "parentNode": [Circular],
                   "previousNode": undefined,
-                  "title": "timer",
+                  "title": "route.from",
                 },
                 [Circular],
                 VisualizationNode {
@@ -1053,11 +1055,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                     "path": "route.from.steps.1.to",
                     "processorName": "to",
                   },
-                  "id": "sql-1234",
+                  "id": "route.from.steps.1.to",
                   "nextNode": undefined,
                   "parentNode": [Circular],
                   "previousNode": [Circular],
-                  "title": "sql",
+                  "title": "route.from.steps.1.to",
                 },
               ],
               "data": {
@@ -1124,7 +1126,7 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                 "path": "route",
                 "processorName": "route",
               },
-              "id": "route-1234",
+              "id": "route",
               "nextNode": undefined,
               "parentNode": undefined,
               "previousNode": undefined,
@@ -1149,7 +1151,7 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                 "path": "route.from",
                 "processorName": "from",
               },
-              "id": "timer-1234",
+              "id": "route.from",
               "nextNode": [Circular],
               "parentNode": VisualizationNode {
                 "DISABLED_NODE_INTERACTION": {
@@ -1183,11 +1185,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                       "path": "route.from.steps.1.to",
                       "processorName": "to",
                     },
-                    "id": "sql-1234",
+                    "id": "route.from.steps.1.to",
                     "nextNode": undefined,
                     "parentNode": [Circular],
                     "previousNode": [Circular],
-                    "title": "sql",
+                    "title": "route.from.steps.1.to",
                   },
                 ],
                 "data": {
@@ -1254,34 +1256,34 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                   "path": "route",
                   "processorName": "route",
                 },
-                "id": "route-1234",
+                "id": "route",
                 "nextNode": undefined,
                 "parentNode": undefined,
                 "previousNode": undefined,
                 "title": "route",
               },
               "previousNode": undefined,
-              "title": "timer",
+              "title": "route.from",
             },
-            "title": "choice",
+            "title": "route.from.steps.0.choice",
           },
           "previousNode": undefined,
-          "title": "when",
+          "title": "route.from.steps.0.choice.when.0",
         },
         "previousNode": undefined,
-        "title": "setHeader",
+        "title": "route.from.steps.0.choice.when.0.steps.0.setHeader",
       },
     },
     "height": 75,
-    "id": "setHeader-1234",
-    "parentNode": "when-1234",
+    "id": "test|route.from.steps.0.choice.when.0.steps.0.setHeader",
+    "parentNode": "test|route.from.steps.0.choice.when.0",
     "shape": "rect",
     "type": "node",
     "width": 90,
   },
   {
     "children": [
-      "setHeader-1234",
+      "test|route.from.steps.0.choice.when.0.steps.0.setHeader",
     ],
     "data": {
       "vizNode": VisualizationNode {
@@ -1314,11 +1316,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
               "path": "route.from.steps.0.choice.when.0.steps.0.setHeader",
               "processorName": "setHeader",
             },
-            "id": "setHeader-1234",
+            "id": "route.from.steps.0.choice.when.0.steps.0.setHeader",
             "nextNode": undefined,
             "parentNode": [Circular],
             "previousNode": undefined,
-            "title": "setHeader",
+            "title": "route.from.steps.0.choice.when.0.steps.0.setHeader",
           },
         ],
         "data": {
@@ -1327,7 +1329,7 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
           "path": "route.from.steps.0.choice.when.0",
           "processorName": "when",
         },
-        "id": "when-1234",
+        "id": "route.from.steps.0.choice.when.0",
         "nextNode": undefined,
         "parentNode": VisualizationNode {
           "DISABLED_NODE_INTERACTION": {
@@ -1372,11 +1374,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                     "path": "route.from.steps.0.choice.otherwise.steps.0.log",
                     "processorName": "log",
                   },
-                  "id": "log-1234",
+                  "id": "route.from.steps.0.choice.otherwise.steps.0.log",
                   "nextNode": undefined,
                   "parentNode": [Circular],
                   "previousNode": undefined,
-                  "title": "log",
+                  "title": "route.from.steps.0.choice.otherwise.steps.0.log",
                 },
               ],
               "data": {
@@ -1385,11 +1387,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                 "path": "route.from.steps.0.choice.otherwise",
                 "processorName": "otherwise",
               },
-              "id": "otherwise-1234",
+              "id": "route.from.steps.0.choice.otherwise",
               "nextNode": undefined,
               "parentNode": [Circular],
               "previousNode": undefined,
-              "title": "otherwise",
+              "title": "route.from.steps.0.choice.otherwise",
             },
           ],
           "data": {
@@ -1398,7 +1400,7 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
             "path": "route.from.steps.0.choice",
             "processorName": "choice",
           },
-          "id": "choice-1234",
+          "id": "route.from.steps.0.choice",
           "nextNode": VisualizationNode {
             "DISABLED_NODE_INTERACTION": {
               "canBeDisabled": false,
@@ -1417,7 +1419,7 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
               "path": "route.from.steps.1.to",
               "processorName": "to",
             },
-            "id": "sql-1234",
+            "id": "route.from.steps.1.to",
             "nextNode": undefined,
             "parentNode": VisualizationNode {
               "DISABLED_NODE_INTERACTION": {
@@ -1450,11 +1452,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                     "path": "route.from",
                     "processorName": "from",
                   },
-                  "id": "timer-1234",
+                  "id": "route.from",
                   "nextNode": [Circular],
                   "parentNode": [Circular],
                   "previousNode": undefined,
-                  "title": "timer",
+                  "title": "route.from",
                 },
                 [Circular],
                 [Circular],
@@ -1523,14 +1525,14 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                 "path": "route",
                 "processorName": "route",
               },
-              "id": "route-1234",
+              "id": "route",
               "nextNode": undefined,
               "parentNode": undefined,
               "previousNode": undefined,
               "title": "route",
             },
             "previousNode": [Circular],
-            "title": "sql",
+            "title": "route.from.steps.1.to",
           },
           "parentNode": VisualizationNode {
             "DISABLED_NODE_INTERACTION": {
@@ -1563,11 +1565,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                   "path": "route.from",
                   "processorName": "from",
                 },
-                "id": "timer-1234",
+                "id": "route.from",
                 "nextNode": [Circular],
                 "parentNode": [Circular],
                 "previousNode": undefined,
-                "title": "timer",
+                "title": "route.from",
               },
               [Circular],
               VisualizationNode {
@@ -1588,11 +1590,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                   "path": "route.from.steps.1.to",
                   "processorName": "to",
                 },
-                "id": "sql-1234",
+                "id": "route.from.steps.1.to",
                 "nextNode": undefined,
                 "parentNode": [Circular],
                 "previousNode": [Circular],
-                "title": "sql",
+                "title": "route.from.steps.1.to",
               },
             ],
             "data": {
@@ -1659,7 +1661,7 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
               "path": "route",
               "processorName": "route",
             },
-            "id": "route-1234",
+            "id": "route",
             "nextNode": undefined,
             "parentNode": undefined,
             "previousNode": undefined,
@@ -1684,7 +1686,7 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
               "path": "route.from",
               "processorName": "from",
             },
-            "id": "timer-1234",
+            "id": "route.from",
             "nextNode": [Circular],
             "parentNode": VisualizationNode {
               "DISABLED_NODE_INTERACTION": {
@@ -1718,11 +1720,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                     "path": "route.from.steps.1.to",
                     "processorName": "to",
                   },
-                  "id": "sql-1234",
+                  "id": "route.from.steps.1.to",
                   "nextNode": undefined,
                   "parentNode": [Circular],
                   "previousNode": [Circular],
-                  "title": "sql",
+                  "title": "route.from.steps.1.to",
                 },
               ],
               "data": {
@@ -1789,31 +1791,32 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                 "path": "route",
                 "processorName": "route",
               },
-              "id": "route-1234",
+              "id": "route",
               "nextNode": undefined,
               "parentNode": undefined,
               "previousNode": undefined,
               "title": "route",
             },
             "previousNode": undefined,
-            "title": "timer",
+            "title": "route.from",
           },
-          "title": "choice",
+          "title": "route.from.steps.0.choice",
         },
         "previousNode": undefined,
-        "title": "when",
+        "title": "route.from.steps.0.choice.when.0",
       },
     },
     "group": true,
-    "id": "when-1234",
-    "label": "when-1234",
-    "parentNode": "choice-1234",
+    "id": "test|route.from.steps.0.choice.when.0",
+    "label": "route.from.steps.0.choice.when.0",
+    "parentNode": "test|route.from.steps.0.choice",
     "style": {
       "padding": 40,
     },
     "type": "group",
   },
   {
+    "children": undefined,
     "data": {
       "vizNode": VisualizationNode {
         "DISABLED_NODE_INTERACTION": {
@@ -1833,7 +1836,7 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
           "path": "route.from.steps.0.choice.otherwise.steps.0.log",
           "processorName": "log",
         },
-        "id": "log-1234",
+        "id": "route.from.steps.0.choice.otherwise.steps.0.log",
         "nextNode": undefined,
         "parentNode": VisualizationNode {
           "DISABLED_NODE_INTERACTION": {
@@ -1855,7 +1858,7 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
             "path": "route.from.steps.0.choice.otherwise",
             "processorName": "otherwise",
           },
-          "id": "otherwise-1234",
+          "id": "route.from.steps.0.choice.otherwise",
           "nextNode": undefined,
           "parentNode": VisualizationNode {
             "DISABLED_NODE_INTERACTION": {
@@ -1899,11 +1902,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                       "path": "route.from.steps.0.choice.when.0.steps.0.setHeader",
                       "processorName": "setHeader",
                     },
-                    "id": "setHeader-1234",
+                    "id": "route.from.steps.0.choice.when.0.steps.0.setHeader",
                     "nextNode": undefined,
                     "parentNode": [Circular],
                     "previousNode": undefined,
-                    "title": "setHeader",
+                    "title": "route.from.steps.0.choice.when.0.steps.0.setHeader",
                   },
                 ],
                 "data": {
@@ -1912,11 +1915,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                   "path": "route.from.steps.0.choice.when.0",
                   "processorName": "when",
                 },
-                "id": "when-1234",
+                "id": "route.from.steps.0.choice.when.0",
                 "nextNode": undefined,
                 "parentNode": [Circular],
                 "previousNode": undefined,
-                "title": "when",
+                "title": "route.from.steps.0.choice.when.0",
               },
               [Circular],
             ],
@@ -1926,7 +1929,7 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
               "path": "route.from.steps.0.choice",
               "processorName": "choice",
             },
-            "id": "choice-1234",
+            "id": "route.from.steps.0.choice",
             "nextNode": VisualizationNode {
               "DISABLED_NODE_INTERACTION": {
                 "canBeDisabled": false,
@@ -1945,7 +1948,7 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                 "path": "route.from.steps.1.to",
                 "processorName": "to",
               },
-              "id": "sql-1234",
+              "id": "route.from.steps.1.to",
               "nextNode": undefined,
               "parentNode": VisualizationNode {
                 "DISABLED_NODE_INTERACTION": {
@@ -1978,11 +1981,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                       "path": "route.from",
                       "processorName": "from",
                     },
-                    "id": "timer-1234",
+                    "id": "route.from",
                     "nextNode": [Circular],
                     "parentNode": [Circular],
                     "previousNode": undefined,
-                    "title": "timer",
+                    "title": "route.from",
                   },
                   [Circular],
                   [Circular],
@@ -2051,14 +2054,14 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                   "path": "route",
                   "processorName": "route",
                 },
-                "id": "route-1234",
+                "id": "route",
                 "nextNode": undefined,
                 "parentNode": undefined,
                 "previousNode": undefined,
                 "title": "route",
               },
               "previousNode": [Circular],
-              "title": "sql",
+              "title": "route.from.steps.1.to",
             },
             "parentNode": VisualizationNode {
               "DISABLED_NODE_INTERACTION": {
@@ -2091,11 +2094,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                     "path": "route.from",
                     "processorName": "from",
                   },
-                  "id": "timer-1234",
+                  "id": "route.from",
                   "nextNode": [Circular],
                   "parentNode": [Circular],
                   "previousNode": undefined,
-                  "title": "timer",
+                  "title": "route.from",
                 },
                 [Circular],
                 VisualizationNode {
@@ -2116,11 +2119,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                     "path": "route.from.steps.1.to",
                     "processorName": "to",
                   },
-                  "id": "sql-1234",
+                  "id": "route.from.steps.1.to",
                   "nextNode": undefined,
                   "parentNode": [Circular],
                   "previousNode": [Circular],
-                  "title": "sql",
+                  "title": "route.from.steps.1.to",
                 },
               ],
               "data": {
@@ -2187,7 +2190,7 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                 "path": "route",
                 "processorName": "route",
               },
-              "id": "route-1234",
+              "id": "route",
               "nextNode": undefined,
               "parentNode": undefined,
               "previousNode": undefined,
@@ -2212,7 +2215,7 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                 "path": "route.from",
                 "processorName": "from",
               },
-              "id": "timer-1234",
+              "id": "route.from",
               "nextNode": [Circular],
               "parentNode": VisualizationNode {
                 "DISABLED_NODE_INTERACTION": {
@@ -2246,11 +2249,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                       "path": "route.from.steps.1.to",
                       "processorName": "to",
                     },
-                    "id": "sql-1234",
+                    "id": "route.from.steps.1.to",
                     "nextNode": undefined,
                     "parentNode": [Circular],
                     "previousNode": [Circular],
-                    "title": "sql",
+                    "title": "route.from.steps.1.to",
                   },
                 ],
                 "data": {
@@ -2317,34 +2320,34 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                   "path": "route",
                   "processorName": "route",
                 },
-                "id": "route-1234",
+                "id": "route",
                 "nextNode": undefined,
                 "parentNode": undefined,
                 "previousNode": undefined,
                 "title": "route",
               },
               "previousNode": undefined,
-              "title": "timer",
+              "title": "route.from",
             },
-            "title": "choice",
+            "title": "route.from.steps.0.choice",
           },
           "previousNode": undefined,
-          "title": "otherwise",
+          "title": "route.from.steps.0.choice.otherwise",
         },
         "previousNode": undefined,
-        "title": "log",
+        "title": "route.from.steps.0.choice.otherwise.steps.0.log",
       },
     },
     "height": 75,
-    "id": "log-1234",
-    "parentNode": "otherwise-1234",
+    "id": "test|route.from.steps.0.choice.otherwise.steps.0.log",
+    "parentNode": "test|route.from.steps.0.choice.otherwise",
     "shape": "rect",
     "type": "node",
     "width": 90,
   },
   {
     "children": [
-      "log-1234",
+      "test|route.from.steps.0.choice.otherwise.steps.0.log",
     ],
     "data": {
       "vizNode": VisualizationNode {
@@ -2377,11 +2380,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
               "path": "route.from.steps.0.choice.otherwise.steps.0.log",
               "processorName": "log",
             },
-            "id": "log-1234",
+            "id": "route.from.steps.0.choice.otherwise.steps.0.log",
             "nextNode": undefined,
             "parentNode": [Circular],
             "previousNode": undefined,
-            "title": "log",
+            "title": "route.from.steps.0.choice.otherwise.steps.0.log",
           },
         ],
         "data": {
@@ -2390,7 +2393,7 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
           "path": "route.from.steps.0.choice.otherwise",
           "processorName": "otherwise",
         },
-        "id": "otherwise-1234",
+        "id": "route.from.steps.0.choice.otherwise",
         "nextNode": undefined,
         "parentNode": VisualizationNode {
           "DISABLED_NODE_INTERACTION": {
@@ -2434,11 +2437,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                     "path": "route.from.steps.0.choice.when.0.steps.0.setHeader",
                     "processorName": "setHeader",
                   },
-                  "id": "setHeader-1234",
+                  "id": "route.from.steps.0.choice.when.0.steps.0.setHeader",
                   "nextNode": undefined,
                   "parentNode": [Circular],
                   "previousNode": undefined,
-                  "title": "setHeader",
+                  "title": "route.from.steps.0.choice.when.0.steps.0.setHeader",
                 },
               ],
               "data": {
@@ -2447,11 +2450,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                 "path": "route.from.steps.0.choice.when.0",
                 "processorName": "when",
               },
-              "id": "when-1234",
+              "id": "route.from.steps.0.choice.when.0",
               "nextNode": undefined,
               "parentNode": [Circular],
               "previousNode": undefined,
-              "title": "when",
+              "title": "route.from.steps.0.choice.when.0",
             },
             [Circular],
           ],
@@ -2461,7 +2464,7 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
             "path": "route.from.steps.0.choice",
             "processorName": "choice",
           },
-          "id": "choice-1234",
+          "id": "route.from.steps.0.choice",
           "nextNode": VisualizationNode {
             "DISABLED_NODE_INTERACTION": {
               "canBeDisabled": false,
@@ -2480,7 +2483,7 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
               "path": "route.from.steps.1.to",
               "processorName": "to",
             },
-            "id": "sql-1234",
+            "id": "route.from.steps.1.to",
             "nextNode": undefined,
             "parentNode": VisualizationNode {
               "DISABLED_NODE_INTERACTION": {
@@ -2513,11 +2516,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                     "path": "route.from",
                     "processorName": "from",
                   },
-                  "id": "timer-1234",
+                  "id": "route.from",
                   "nextNode": [Circular],
                   "parentNode": [Circular],
                   "previousNode": undefined,
-                  "title": "timer",
+                  "title": "route.from",
                 },
                 [Circular],
                 [Circular],
@@ -2586,14 +2589,14 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                 "path": "route",
                 "processorName": "route",
               },
-              "id": "route-1234",
+              "id": "route",
               "nextNode": undefined,
               "parentNode": undefined,
               "previousNode": undefined,
               "title": "route",
             },
             "previousNode": [Circular],
-            "title": "sql",
+            "title": "route.from.steps.1.to",
           },
           "parentNode": VisualizationNode {
             "DISABLED_NODE_INTERACTION": {
@@ -2626,11 +2629,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                   "path": "route.from",
                   "processorName": "from",
                 },
-                "id": "timer-1234",
+                "id": "route.from",
                 "nextNode": [Circular],
                 "parentNode": [Circular],
                 "previousNode": undefined,
-                "title": "timer",
+                "title": "route.from",
               },
               [Circular],
               VisualizationNode {
@@ -2651,11 +2654,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                   "path": "route.from.steps.1.to",
                   "processorName": "to",
                 },
-                "id": "sql-1234",
+                "id": "route.from.steps.1.to",
                 "nextNode": undefined,
                 "parentNode": [Circular],
                 "previousNode": [Circular],
-                "title": "sql",
+                "title": "route.from.steps.1.to",
               },
             ],
             "data": {
@@ -2722,7 +2725,7 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
               "path": "route",
               "processorName": "route",
             },
-            "id": "route-1234",
+            "id": "route",
             "nextNode": undefined,
             "parentNode": undefined,
             "previousNode": undefined,
@@ -2747,7 +2750,7 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
               "path": "route.from",
               "processorName": "from",
             },
-            "id": "timer-1234",
+            "id": "route.from",
             "nextNode": [Circular],
             "parentNode": VisualizationNode {
               "DISABLED_NODE_INTERACTION": {
@@ -2781,11 +2784,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                     "path": "route.from.steps.1.to",
                     "processorName": "to",
                   },
-                  "id": "sql-1234",
+                  "id": "route.from.steps.1.to",
                   "nextNode": undefined,
                   "parentNode": [Circular],
                   "previousNode": [Circular],
-                  "title": "sql",
+                  "title": "route.from.steps.1.to",
                 },
               ],
               "data": {
@@ -2852,25 +2855,25 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                 "path": "route",
                 "processorName": "route",
               },
-              "id": "route-1234",
+              "id": "route",
               "nextNode": undefined,
               "parentNode": undefined,
               "previousNode": undefined,
               "title": "route",
             },
             "previousNode": undefined,
-            "title": "timer",
+            "title": "route.from",
           },
-          "title": "choice",
+          "title": "route.from.steps.0.choice",
         },
         "previousNode": undefined,
-        "title": "otherwise",
+        "title": "route.from.steps.0.choice.otherwise",
       },
     },
     "group": true,
-    "id": "otherwise-1234",
-    "label": "otherwise-1234",
-    "parentNode": "choice-1234",
+    "id": "test|route.from.steps.0.choice.otherwise",
+    "label": "route.from.steps.0.choice.otherwise",
+    "parentNode": "test|route.from.steps.0.choice",
     "style": {
       "padding": 40,
     },
@@ -2878,8 +2881,8 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
   },
   {
     "children": [
-      "when-1234",
-      "otherwise-1234",
+      "test|route.from.steps.0.choice.when.0",
+      "test|route.from.steps.0.choice.otherwise",
     ],
     "data": {
       "vizNode": VisualizationNode {
@@ -2924,11 +2927,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                   "path": "route.from.steps.0.choice.when.0.steps.0.setHeader",
                   "processorName": "setHeader",
                 },
-                "id": "setHeader-1234",
+                "id": "route.from.steps.0.choice.when.0.steps.0.setHeader",
                 "nextNode": undefined,
                 "parentNode": [Circular],
                 "previousNode": undefined,
-                "title": "setHeader",
+                "title": "route.from.steps.0.choice.when.0.steps.0.setHeader",
               },
             ],
             "data": {
@@ -2937,11 +2940,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
               "path": "route.from.steps.0.choice.when.0",
               "processorName": "when",
             },
-            "id": "when-1234",
+            "id": "route.from.steps.0.choice.when.0",
             "nextNode": undefined,
             "parentNode": [Circular],
             "previousNode": undefined,
-            "title": "when",
+            "title": "route.from.steps.0.choice.when.0",
           },
           VisualizationNode {
             "DISABLED_NODE_INTERACTION": {
@@ -2973,11 +2976,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                   "path": "route.from.steps.0.choice.otherwise.steps.0.log",
                   "processorName": "log",
                 },
-                "id": "log-1234",
+                "id": "route.from.steps.0.choice.otherwise.steps.0.log",
                 "nextNode": undefined,
                 "parentNode": [Circular],
                 "previousNode": undefined,
-                "title": "log",
+                "title": "route.from.steps.0.choice.otherwise.steps.0.log",
               },
             ],
             "data": {
@@ -2986,11 +2989,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
               "path": "route.from.steps.0.choice.otherwise",
               "processorName": "otherwise",
             },
-            "id": "otherwise-1234",
+            "id": "route.from.steps.0.choice.otherwise",
             "nextNode": undefined,
             "parentNode": [Circular],
             "previousNode": undefined,
-            "title": "otherwise",
+            "title": "route.from.steps.0.choice.otherwise",
           },
         ],
         "data": {
@@ -2999,7 +3002,7 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
           "path": "route.from.steps.0.choice",
           "processorName": "choice",
         },
-        "id": "choice-1234",
+        "id": "route.from.steps.0.choice",
         "nextNode": VisualizationNode {
           "DISABLED_NODE_INTERACTION": {
             "canBeDisabled": false,
@@ -3018,7 +3021,7 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
             "path": "route.from.steps.1.to",
             "processorName": "to",
           },
-          "id": "sql-1234",
+          "id": "route.from.steps.1.to",
           "nextNode": undefined,
           "parentNode": VisualizationNode {
             "DISABLED_NODE_INTERACTION": {
@@ -3051,11 +3054,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                   "path": "route.from",
                   "processorName": "from",
                 },
-                "id": "timer-1234",
+                "id": "route.from",
                 "nextNode": [Circular],
                 "parentNode": [Circular],
                 "previousNode": undefined,
-                "title": "timer",
+                "title": "route.from",
               },
               [Circular],
               [Circular],
@@ -3124,14 +3127,14 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
               "path": "route",
               "processorName": "route",
             },
-            "id": "route-1234",
+            "id": "route",
             "nextNode": undefined,
             "parentNode": undefined,
             "previousNode": undefined,
             "title": "route",
           },
           "previousNode": [Circular],
-          "title": "sql",
+          "title": "route.from.steps.1.to",
         },
         "parentNode": VisualizationNode {
           "DISABLED_NODE_INTERACTION": {
@@ -3164,11 +3167,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                 "path": "route.from",
                 "processorName": "from",
               },
-              "id": "timer-1234",
+              "id": "route.from",
               "nextNode": [Circular],
               "parentNode": [Circular],
               "previousNode": undefined,
-              "title": "timer",
+              "title": "route.from",
             },
             [Circular],
             VisualizationNode {
@@ -3189,11 +3192,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                 "path": "route.from.steps.1.to",
                 "processorName": "to",
               },
-              "id": "sql-1234",
+              "id": "route.from.steps.1.to",
               "nextNode": undefined,
               "parentNode": [Circular],
               "previousNode": [Circular],
-              "title": "sql",
+              "title": "route.from.steps.1.to",
             },
           ],
           "data": {
@@ -3260,7 +3263,7 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
             "path": "route",
             "processorName": "route",
           },
-          "id": "route-1234",
+          "id": "route",
           "nextNode": undefined,
           "parentNode": undefined,
           "previousNode": undefined,
@@ -3285,7 +3288,7 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
             "path": "route.from",
             "processorName": "from",
           },
-          "id": "timer-1234",
+          "id": "route.from",
           "nextNode": [Circular],
           "parentNode": VisualizationNode {
             "DISABLED_NODE_INTERACTION": {
@@ -3319,11 +3322,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                   "path": "route.from.steps.1.to",
                   "processorName": "to",
                 },
-                "id": "sql-1234",
+                "id": "route.from.steps.1.to",
                 "nextNode": undefined,
                 "parentNode": [Circular],
                 "previousNode": [Circular],
-                "title": "sql",
+                "title": "route.from.steps.1.to",
               },
             ],
             "data": {
@@ -3390,28 +3393,29 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
               "path": "route",
               "processorName": "route",
             },
-            "id": "route-1234",
+            "id": "route",
             "nextNode": undefined,
             "parentNode": undefined,
             "previousNode": undefined,
             "title": "route",
           },
           "previousNode": undefined,
-          "title": "timer",
+          "title": "route.from",
         },
-        "title": "choice",
+        "title": "route.from.steps.0.choice",
       },
     },
     "group": true,
-    "id": "choice-1234",
-    "label": "choice-1234",
-    "parentNode": "route-1234",
+    "id": "test|route.from.steps.0.choice",
+    "label": "route.from.steps.0.choice",
+    "parentNode": "test|route",
     "style": {
       "padding": 40,
     },
     "type": "group",
   },
   {
+    "children": undefined,
     "data": {
       "vizNode": VisualizationNode {
         "DISABLED_NODE_INTERACTION": {
@@ -3431,7 +3435,7 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
           "path": "route.from.steps.1.to",
           "processorName": "to",
         },
-        "id": "sql-1234",
+        "id": "route.from.steps.1.to",
         "nextNode": undefined,
         "parentNode": VisualizationNode {
           "DISABLED_NODE_INTERACTION": {
@@ -3464,7 +3468,7 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                 "path": "route.from",
                 "processorName": "from",
               },
-              "id": "timer-1234",
+              "id": "route.from",
               "nextNode": VisualizationNode {
                 "DISABLED_NODE_INTERACTION": {
                   "canBeDisabled": false,
@@ -3507,11 +3511,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                           "path": "route.from.steps.0.choice.when.0.steps.0.setHeader",
                           "processorName": "setHeader",
                         },
-                        "id": "setHeader-1234",
+                        "id": "route.from.steps.0.choice.when.0.steps.0.setHeader",
                         "nextNode": undefined,
                         "parentNode": [Circular],
                         "previousNode": undefined,
-                        "title": "setHeader",
+                        "title": "route.from.steps.0.choice.when.0.steps.0.setHeader",
                       },
                     ],
                     "data": {
@@ -3520,11 +3524,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                       "path": "route.from.steps.0.choice.when.0",
                       "processorName": "when",
                     },
-                    "id": "when-1234",
+                    "id": "route.from.steps.0.choice.when.0",
                     "nextNode": undefined,
                     "parentNode": [Circular],
                     "previousNode": undefined,
-                    "title": "when",
+                    "title": "route.from.steps.0.choice.when.0",
                   },
                   VisualizationNode {
                     "DISABLED_NODE_INTERACTION": {
@@ -3556,11 +3560,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                           "path": "route.from.steps.0.choice.otherwise.steps.0.log",
                           "processorName": "log",
                         },
-                        "id": "log-1234",
+                        "id": "route.from.steps.0.choice.otherwise.steps.0.log",
                         "nextNode": undefined,
                         "parentNode": [Circular],
                         "previousNode": undefined,
-                        "title": "log",
+                        "title": "route.from.steps.0.choice.otherwise.steps.0.log",
                       },
                     ],
                     "data": {
@@ -3569,11 +3573,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                       "path": "route.from.steps.0.choice.otherwise",
                       "processorName": "otherwise",
                     },
-                    "id": "otherwise-1234",
+                    "id": "route.from.steps.0.choice.otherwise",
                     "nextNode": undefined,
                     "parentNode": [Circular],
                     "previousNode": undefined,
-                    "title": "otherwise",
+                    "title": "route.from.steps.0.choice.otherwise",
                   },
                 ],
                 "data": {
@@ -3582,15 +3586,15 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                   "path": "route.from.steps.0.choice",
                   "processorName": "choice",
                 },
-                "id": "choice-1234",
+                "id": "route.from.steps.0.choice",
                 "nextNode": [Circular],
                 "parentNode": [Circular],
                 "previousNode": [Circular],
-                "title": "choice",
+                "title": "route.from.steps.0.choice",
               },
               "parentNode": [Circular],
               "previousNode": undefined,
-              "title": "timer",
+              "title": "route.from",
             },
             VisualizationNode {
               "DISABLED_NODE_INTERACTION": {
@@ -3634,11 +3638,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                         "path": "route.from.steps.0.choice.when.0.steps.0.setHeader",
                         "processorName": "setHeader",
                       },
-                      "id": "setHeader-1234",
+                      "id": "route.from.steps.0.choice.when.0.steps.0.setHeader",
                       "nextNode": undefined,
                       "parentNode": [Circular],
                       "previousNode": undefined,
-                      "title": "setHeader",
+                      "title": "route.from.steps.0.choice.when.0.steps.0.setHeader",
                     },
                   ],
                   "data": {
@@ -3647,11 +3651,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                     "path": "route.from.steps.0.choice.when.0",
                     "processorName": "when",
                   },
-                  "id": "when-1234",
+                  "id": "route.from.steps.0.choice.when.0",
                   "nextNode": undefined,
                   "parentNode": [Circular],
                   "previousNode": undefined,
-                  "title": "when",
+                  "title": "route.from.steps.0.choice.when.0",
                 },
                 VisualizationNode {
                   "DISABLED_NODE_INTERACTION": {
@@ -3683,11 +3687,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                         "path": "route.from.steps.0.choice.otherwise.steps.0.log",
                         "processorName": "log",
                       },
-                      "id": "log-1234",
+                      "id": "route.from.steps.0.choice.otherwise.steps.0.log",
                       "nextNode": undefined,
                       "parentNode": [Circular],
                       "previousNode": undefined,
-                      "title": "log",
+                      "title": "route.from.steps.0.choice.otherwise.steps.0.log",
                     },
                   ],
                   "data": {
@@ -3696,11 +3700,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                     "path": "route.from.steps.0.choice.otherwise",
                     "processorName": "otherwise",
                   },
-                  "id": "otherwise-1234",
+                  "id": "route.from.steps.0.choice.otherwise",
                   "nextNode": undefined,
                   "parentNode": [Circular],
                   "previousNode": undefined,
-                  "title": "otherwise",
+                  "title": "route.from.steps.0.choice.otherwise",
                 },
               ],
               "data": {
@@ -3709,7 +3713,7 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                 "path": "route.from.steps.0.choice",
                 "processorName": "choice",
               },
-              "id": "choice-1234",
+              "id": "route.from.steps.0.choice",
               "nextNode": [Circular],
               "parentNode": [Circular],
               "previousNode": VisualizationNode {
@@ -3731,13 +3735,13 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                   "path": "route.from",
                   "processorName": "from",
                 },
-                "id": "timer-1234",
+                "id": "route.from",
                 "nextNode": [Circular],
                 "parentNode": [Circular],
                 "previousNode": undefined,
-                "title": "timer",
+                "title": "route.from",
               },
-              "title": "choice",
+              "title": "route.from.steps.0.choice",
             },
             [Circular],
           ],
@@ -3805,7 +3809,7 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
             "path": "route",
             "processorName": "route",
           },
-          "id": "route-1234",
+          "id": "route",
           "nextNode": undefined,
           "parentNode": undefined,
           "previousNode": undefined,
@@ -3853,11 +3857,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                     "path": "route.from.steps.0.choice.when.0.steps.0.setHeader",
                     "processorName": "setHeader",
                   },
-                  "id": "setHeader-1234",
+                  "id": "route.from.steps.0.choice.when.0.steps.0.setHeader",
                   "nextNode": undefined,
                   "parentNode": [Circular],
                   "previousNode": undefined,
-                  "title": "setHeader",
+                  "title": "route.from.steps.0.choice.when.0.steps.0.setHeader",
                 },
               ],
               "data": {
@@ -3866,11 +3870,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                 "path": "route.from.steps.0.choice.when.0",
                 "processorName": "when",
               },
-              "id": "when-1234",
+              "id": "route.from.steps.0.choice.when.0",
               "nextNode": undefined,
               "parentNode": [Circular],
               "previousNode": undefined,
-              "title": "when",
+              "title": "route.from.steps.0.choice.when.0",
             },
             VisualizationNode {
               "DISABLED_NODE_INTERACTION": {
@@ -3902,11 +3906,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                     "path": "route.from.steps.0.choice.otherwise.steps.0.log",
                     "processorName": "log",
                   },
-                  "id": "log-1234",
+                  "id": "route.from.steps.0.choice.otherwise.steps.0.log",
                   "nextNode": undefined,
                   "parentNode": [Circular],
                   "previousNode": undefined,
-                  "title": "log",
+                  "title": "route.from.steps.0.choice.otherwise.steps.0.log",
                 },
               ],
               "data": {
@@ -3915,11 +3919,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                 "path": "route.from.steps.0.choice.otherwise",
                 "processorName": "otherwise",
               },
-              "id": "otherwise-1234",
+              "id": "route.from.steps.0.choice.otherwise",
               "nextNode": undefined,
               "parentNode": [Circular],
               "previousNode": undefined,
-              "title": "otherwise",
+              "title": "route.from.steps.0.choice.otherwise",
             },
           ],
           "data": {
@@ -3928,7 +3932,7 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
             "path": "route.from.steps.0.choice",
             "processorName": "choice",
           },
-          "id": "choice-1234",
+          "id": "route.from.steps.0.choice",
           "nextNode": [Circular],
           "parentNode": VisualizationNode {
             "DISABLED_NODE_INTERACTION": {
@@ -3961,11 +3965,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                   "path": "route.from",
                   "processorName": "from",
                 },
-                "id": "timer-1234",
+                "id": "route.from",
                 "nextNode": [Circular],
                 "parentNode": [Circular],
                 "previousNode": undefined,
-                "title": "timer",
+                "title": "route.from",
               },
               [Circular],
               [Circular],
@@ -4034,7 +4038,7 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
               "path": "route",
               "processorName": "route",
             },
-            "id": "route-1234",
+            "id": "route",
             "nextNode": undefined,
             "parentNode": undefined,
             "previousNode": undefined,
@@ -4059,7 +4063,7 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
               "path": "route.from",
               "processorName": "from",
             },
-            "id": "timer-1234",
+            "id": "route.from",
             "nextNode": [Circular],
             "parentNode": VisualizationNode {
               "DISABLED_NODE_INTERACTION": {
@@ -4141,32 +4145,32 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                 "path": "route",
                 "processorName": "route",
               },
-              "id": "route-1234",
+              "id": "route",
               "nextNode": undefined,
               "parentNode": undefined,
               "previousNode": undefined,
               "title": "route",
             },
             "previousNode": undefined,
-            "title": "timer",
+            "title": "route.from",
           },
-          "title": "choice",
+          "title": "route.from.steps.0.choice",
         },
-        "title": "sql",
+        "title": "route.from.steps.1.to",
       },
     },
     "height": 75,
-    "id": "sql-1234",
-    "parentNode": "route-1234",
+    "id": "test|route.from.steps.1.to",
+    "parentNode": "test|route",
     "shape": "rect",
     "type": "node",
     "width": 90,
   },
   {
     "children": [
-      "timer-1234",
-      "choice-1234",
-      "sql-1234",
+      "test|route.from",
+      "test|route.from.steps.0.choice",
+      "test|route.from.steps.1.to",
     ],
     "data": {
       "vizNode": VisualizationNode {
@@ -4200,7 +4204,7 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
               "path": "route.from",
               "processorName": "from",
             },
-            "id": "timer-1234",
+            "id": "route.from",
             "nextNode": VisualizationNode {
               "DISABLED_NODE_INTERACTION": {
                 "canBeDisabled": false,
@@ -4243,11 +4247,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                         "path": "route.from.steps.0.choice.when.0.steps.0.setHeader",
                         "processorName": "setHeader",
                       },
-                      "id": "setHeader-1234",
+                      "id": "route.from.steps.0.choice.when.0.steps.0.setHeader",
                       "nextNode": undefined,
                       "parentNode": [Circular],
                       "previousNode": undefined,
-                      "title": "setHeader",
+                      "title": "route.from.steps.0.choice.when.0.steps.0.setHeader",
                     },
                   ],
                   "data": {
@@ -4256,11 +4260,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                     "path": "route.from.steps.0.choice.when.0",
                     "processorName": "when",
                   },
-                  "id": "when-1234",
+                  "id": "route.from.steps.0.choice.when.0",
                   "nextNode": undefined,
                   "parentNode": [Circular],
                   "previousNode": undefined,
-                  "title": "when",
+                  "title": "route.from.steps.0.choice.when.0",
                 },
                 VisualizationNode {
                   "DISABLED_NODE_INTERACTION": {
@@ -4292,11 +4296,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                         "path": "route.from.steps.0.choice.otherwise.steps.0.log",
                         "processorName": "log",
                       },
-                      "id": "log-1234",
+                      "id": "route.from.steps.0.choice.otherwise.steps.0.log",
                       "nextNode": undefined,
                       "parentNode": [Circular],
                       "previousNode": undefined,
-                      "title": "log",
+                      "title": "route.from.steps.0.choice.otherwise.steps.0.log",
                     },
                   ],
                   "data": {
@@ -4305,11 +4309,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                     "path": "route.from.steps.0.choice.otherwise",
                     "processorName": "otherwise",
                   },
-                  "id": "otherwise-1234",
+                  "id": "route.from.steps.0.choice.otherwise",
                   "nextNode": undefined,
                   "parentNode": [Circular],
                   "previousNode": undefined,
-                  "title": "otherwise",
+                  "title": "route.from.steps.0.choice.otherwise",
                 },
               ],
               "data": {
@@ -4318,7 +4322,7 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                 "path": "route.from.steps.0.choice",
                 "processorName": "choice",
               },
-              "id": "choice-1234",
+              "id": "route.from.steps.0.choice",
               "nextNode": VisualizationNode {
                 "DISABLED_NODE_INTERACTION": {
                   "canBeDisabled": false,
@@ -4337,19 +4341,19 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                   "path": "route.from.steps.1.to",
                   "processorName": "to",
                 },
-                "id": "sql-1234",
+                "id": "route.from.steps.1.to",
                 "nextNode": undefined,
                 "parentNode": [Circular],
                 "previousNode": [Circular],
-                "title": "sql",
+                "title": "route.from.steps.1.to",
               },
               "parentNode": [Circular],
               "previousNode": [Circular],
-              "title": "choice",
+              "title": "route.from.steps.0.choice",
             },
             "parentNode": [Circular],
             "previousNode": undefined,
-            "title": "timer",
+            "title": "route.from",
           },
           VisualizationNode {
             "DISABLED_NODE_INTERACTION": {
@@ -4393,11 +4397,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                       "path": "route.from.steps.0.choice.when.0.steps.0.setHeader",
                       "processorName": "setHeader",
                     },
-                    "id": "setHeader-1234",
+                    "id": "route.from.steps.0.choice.when.0.steps.0.setHeader",
                     "nextNode": undefined,
                     "parentNode": [Circular],
                     "previousNode": undefined,
-                    "title": "setHeader",
+                    "title": "route.from.steps.0.choice.when.0.steps.0.setHeader",
                   },
                 ],
                 "data": {
@@ -4406,11 +4410,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                   "path": "route.from.steps.0.choice.when.0",
                   "processorName": "when",
                 },
-                "id": "when-1234",
+                "id": "route.from.steps.0.choice.when.0",
                 "nextNode": undefined,
                 "parentNode": [Circular],
                 "previousNode": undefined,
-                "title": "when",
+                "title": "route.from.steps.0.choice.when.0",
               },
               VisualizationNode {
                 "DISABLED_NODE_INTERACTION": {
@@ -4442,11 +4446,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                       "path": "route.from.steps.0.choice.otherwise.steps.0.log",
                       "processorName": "log",
                     },
-                    "id": "log-1234",
+                    "id": "route.from.steps.0.choice.otherwise.steps.0.log",
                     "nextNode": undefined,
                     "parentNode": [Circular],
                     "previousNode": undefined,
-                    "title": "log",
+                    "title": "route.from.steps.0.choice.otherwise.steps.0.log",
                   },
                 ],
                 "data": {
@@ -4455,11 +4459,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                   "path": "route.from.steps.0.choice.otherwise",
                   "processorName": "otherwise",
                 },
-                "id": "otherwise-1234",
+                "id": "route.from.steps.0.choice.otherwise",
                 "nextNode": undefined,
                 "parentNode": [Circular],
                 "previousNode": undefined,
-                "title": "otherwise",
+                "title": "route.from.steps.0.choice.otherwise",
               },
             ],
             "data": {
@@ -4468,7 +4472,7 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
               "path": "route.from.steps.0.choice",
               "processorName": "choice",
             },
-            "id": "choice-1234",
+            "id": "route.from.steps.0.choice",
             "nextNode": VisualizationNode {
               "DISABLED_NODE_INTERACTION": {
                 "canBeDisabled": false,
@@ -4487,11 +4491,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                 "path": "route.from.steps.1.to",
                 "processorName": "to",
               },
-              "id": "sql-1234",
+              "id": "route.from.steps.1.to",
               "nextNode": undefined,
               "parentNode": [Circular],
               "previousNode": [Circular],
-              "title": "sql",
+              "title": "route.from.steps.1.to",
             },
             "parentNode": [Circular],
             "previousNode": VisualizationNode {
@@ -4513,13 +4517,13 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                 "path": "route.from",
                 "processorName": "from",
               },
-              "id": "timer-1234",
+              "id": "route.from",
               "nextNode": [Circular],
               "parentNode": [Circular],
               "previousNode": undefined,
-              "title": "timer",
+              "title": "route.from",
             },
-            "title": "choice",
+            "title": "route.from.steps.0.choice",
           },
           VisualizationNode {
             "DISABLED_NODE_INTERACTION": {
@@ -4539,7 +4543,7 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
               "path": "route.from.steps.1.to",
               "processorName": "to",
             },
-            "id": "sql-1234",
+            "id": "route.from.steps.1.to",
             "nextNode": undefined,
             "parentNode": [Circular],
             "previousNode": VisualizationNode {
@@ -4584,11 +4588,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                         "path": "route.from.steps.0.choice.when.0.steps.0.setHeader",
                         "processorName": "setHeader",
                       },
-                      "id": "setHeader-1234",
+                      "id": "route.from.steps.0.choice.when.0.steps.0.setHeader",
                       "nextNode": undefined,
                       "parentNode": [Circular],
                       "previousNode": undefined,
-                      "title": "setHeader",
+                      "title": "route.from.steps.0.choice.when.0.steps.0.setHeader",
                     },
                   ],
                   "data": {
@@ -4597,11 +4601,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                     "path": "route.from.steps.0.choice.when.0",
                     "processorName": "when",
                   },
-                  "id": "when-1234",
+                  "id": "route.from.steps.0.choice.when.0",
                   "nextNode": undefined,
                   "parentNode": [Circular],
                   "previousNode": undefined,
-                  "title": "when",
+                  "title": "route.from.steps.0.choice.when.0",
                 },
                 VisualizationNode {
                   "DISABLED_NODE_INTERACTION": {
@@ -4633,11 +4637,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                         "path": "route.from.steps.0.choice.otherwise.steps.0.log",
                         "processorName": "log",
                       },
-                      "id": "log-1234",
+                      "id": "route.from.steps.0.choice.otherwise.steps.0.log",
                       "nextNode": undefined,
                       "parentNode": [Circular],
                       "previousNode": undefined,
-                      "title": "log",
+                      "title": "route.from.steps.0.choice.otherwise.steps.0.log",
                     },
                   ],
                   "data": {
@@ -4646,11 +4650,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                     "path": "route.from.steps.0.choice.otherwise",
                     "processorName": "otherwise",
                   },
-                  "id": "otherwise-1234",
+                  "id": "route.from.steps.0.choice.otherwise",
                   "nextNode": undefined,
                   "parentNode": [Circular],
                   "previousNode": undefined,
-                  "title": "otherwise",
+                  "title": "route.from.steps.0.choice.otherwise",
                 },
               ],
               "data": {
@@ -4659,7 +4663,7 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                 "path": "route.from.steps.0.choice",
                 "processorName": "choice",
               },
-              "id": "choice-1234",
+              "id": "route.from.steps.0.choice",
               "nextNode": [Circular],
               "parentNode": [Circular],
               "previousNode": VisualizationNode {
@@ -4681,15 +4685,15 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                   "path": "route.from",
                   "processorName": "from",
                 },
-                "id": "timer-1234",
+                "id": "route.from",
                 "nextNode": [Circular],
                 "parentNode": [Circular],
                 "previousNode": undefined,
-                "title": "timer",
+                "title": "route.from",
               },
-              "title": "choice",
+              "title": "route.from.steps.0.choice",
             },
-            "title": "sql",
+            "title": "route.from.steps.1.to",
           },
         ],
         "data": {
@@ -4756,7 +4760,7 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
           "path": "route",
           "processorName": "route",
         },
-        "id": "route-1234",
+        "id": "route",
         "nextNode": undefined,
         "parentNode": undefined,
         "previousNode": undefined,
@@ -4764,8 +4768,8 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
       },
     },
     "group": true,
-    "id": "route-1234",
-    "label": "route-1234",
+    "id": "test|route",
+    "label": "route",
     "parentNode": undefined,
     "style": {
       "padding": 40,
@@ -4779,16 +4783,16 @@ exports[`Nodes and Edges should generate edges for steps with branches 2`] = `
 [
   {
     "edgeStyle": "solid",
-    "id": "timer-1234-to-choice-1234",
-    "source": "timer-1234",
-    "target": "choice-1234",
+    "id": "route.from >>> route.from.steps.0.choice",
+    "source": "test|route.from",
+    "target": "test|route.from.steps.0.choice",
     "type": "edge",
   },
   {
     "edgeStyle": "solid",
-    "id": "choice-1234-to-sql-1234",
-    "source": "choice-1234",
-    "target": "sql-1234",
+    "id": "route.from.steps.0.choice >>> route.from.steps.1.to",
+    "source": "test|route.from.steps.0.choice",
+    "target": "test|route.from.steps.1.to",
     "type": "edge",
   },
 ]
diff --git a/packages/ui/src/tests/nodes-edges.test.ts b/packages/ui/src/tests/nodes-edges.test.ts
index 62bce37db..9a94c6855 100644
--- a/packages/ui/src/tests/nodes-edges.test.ts
+++ b/packages/ui/src/tests/nodes-edges.test.ts
@@ -13,7 +13,7 @@ describe('Nodes and Edges', () => {
     const [camelRoute] = camelResource.getVisualEntities();
 
     const rootVizNode = camelRoute.toVizNode();
-    const { nodes, edges } = FlowService.getFlowDiagram(rootVizNode);
+    const { nodes, edges } = FlowService.getFlowDiagram('test', rootVizNode);
 
     expect(nodes).toMatchSnapshot();
     expect(edges).toMatchSnapshot();
diff --git a/packages/ui/src/utils/get-viznodes-from-graph.test.ts b/packages/ui/src/utils/get-viznodes-from-graph.test.ts
index c1698560a..e3911d8b7 100644
--- a/packages/ui/src/utils/get-viznodes-from-graph.test.ts
+++ b/packages/ui/src/utils/get-viznodes-from-graph.test.ts
@@ -34,7 +34,7 @@ describe('getVisualizationNodesFromGraph', () => {
 
   it('should return all visualization nodes from the graph', () => {
     const visualEntity = new CamelRouteVisualEntity(camelRouteWithDisabledSteps);
-    const { nodes, edges } = FlowService.getFlowDiagram(visualEntity.toVizNode());
+    const { nodes, edges } = FlowService.getFlowDiagram('test', visualEntity.toVizNode());
 
     const model: Model = {
       nodes,
@@ -58,7 +58,7 @@ describe('getVisualizationNodesFromGraph', () => {
 
   it('should return all visualization nodes matching the predicate', () => {
     const visualEntity = new CamelRouteVisualEntity(camelRouteWithDisabledSteps);
-    const { nodes, edges } = FlowService.getFlowDiagram(visualEntity.toVizNode());
+    const { nodes, edges } = FlowService.getFlowDiagram('test', visualEntity.toVizNode());
 
     const model: Model = {
       nodes,
@@ -82,7 +82,7 @@ describe('getVisualizationNodesFromGraph', () => {
 
   it('should return all visualization nodes matching a complex predicate', () => {
     const visualEntity = new CamelRouteVisualEntity(camelRouteWithDisabledSteps);
-    const { nodes, edges } = FlowService.getFlowDiagram(visualEntity.toVizNode());
+    const { nodes, edges } = FlowService.getFlowDiagram('test', visualEntity.toVizNode());
 
     const model: Model = {
       nodes,