diff --git a/cypress/integration/other/interaction.spec.js b/cypress/integration/other/interaction.spec.js
index d3e6a73b7..3e0f26b7b 100644
--- a/cypress/integration/other/interaction.spec.js
+++ b/cypress/integration/other/interaction.spec.js
@@ -1,44 +1,89 @@
 /* eslint-env jest */
 describe('Interaction', () => {
   describe('Interaction - security level loose', () => {
-    it('should handle a click on a node with a bound function', () => {
+    it('Graph: should handle a click on a node with a bound function', () => {
       const url = 'http://localhost:9000/click_security_loose.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
       cy.get('body')
-        .find('g#Function')
+        .find('g#flowchart-Function-2')
         .click();
 
       cy.get('.created-by-click').should('have.text', 'Clicked By Flow');
     });
-    it('should handle a click on a node with a bound function where the node starts with a number', () => {
+    it('Graph: should handle a click on a node with a bound function where the node starts with a number', () => {
       const url = 'http://localhost:9000/click_security_loose.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
       cy.get('body')
-        .find('g[id="1Function"]')
+        .find('g[id="flowchart-1Function-6"]')
         .click();
 
       cy.get('.created-by-click').should('have.text', 'Clicked By Flow');
     });
-    it('should handle a click on a node with a bound url', () => {
+    it('Graph: should handle a click on a node with a bound url', () => {
       const url = 'http://localhost:9000/click_security_loose.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
       cy.get('body')
-        .find('g#URL')
+        .find('#flowchart-URL-3')
         .click();
 
       cy.location().should(location => {
         expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
       });
     });
-    it('should handle a click on a node with a bound url where the node starts with a number', () => {
+    it('Graph: should handle a click on a node with a bound url where the node starts with a number', () => {
       const url = 'http://localhost:9000/click_security_loose.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
       cy.get('body')
-        .find('g[id="2URL"]')
+        .find('g[id="flowchart-2URL-7"]')
+        .click();
+
+      cy.location().should(location => {
+        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+      });
+    });
+
+    it('Flowchart-v2: should handle a click on a node with a bound function', () => {
+      const url = 'http://localhost:9000/click_security_loose.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('body')
+        .find('g#flowchart-Function-10')
+        .click();
+
+      cy.get('.created-by-click').should('have.text', 'Clicked By Flow');
+    });
+    it('Flowchart-v2: should handle a click on a node with a bound function where the node starts with a number', () => {
+      const url = 'http://localhost:9000/click_security_loose.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('body')
+        .find('g[id="flowchart-1Function-14"]')
+        .click();
+
+      cy.get('.created-by-click').should('have.text', 'Clicked By Flow');
+    });
+    it('Flowchart-v2: should handle a click on a node with a bound url', () => {
+      const url = 'http://localhost:9000/click_security_loose.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('body')
+        .find('#flowchart-URL-11')
+        .click();
+
+      cy.location().should(location => {
+        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+      });
+    });
+    it('Flowchart-v2: should handle a click on a node with a bound url where the node starts with a number', () => {
+      const url = 'http://localhost:9000/click_security_loose.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('body')
+        .find('g[id="flowchart-2URL-15"]')
         .click();
 
       cy.location().should(location => {
@@ -120,7 +165,7 @@ describe('Interaction', () => {
       cy.viewport(1440, 1024);
       cy.visit(url);
       cy.get('body')
-        .find('g#Function')
+        .find('g#flowchart-Function-2')
         .click();
 
       cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');
@@ -130,7 +175,7 @@ describe('Interaction', () => {
       cy.viewport(1440, 1024);
       cy.visit(url);
       cy.get('body')
-        .find('g[id="1Function"]')
+        .find('g[id="flowchart-1Function-6"]')
         .click();
 
       cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');
@@ -140,7 +185,7 @@ describe('Interaction', () => {
       cy.viewport(1440, 1024);
       cy.visit(url);
       cy.get('body')
-        .find('g#URL')
+        .find('g#flowchart-URL-3')
         .click();
 
       cy.location().should(location => {
@@ -152,7 +197,7 @@ describe('Interaction', () => {
       cy.viewport(1440, 1024);
       cy.visit(url);
       cy.get('body')
-        .find('g[id="2URL"]')
+        .find('g[id="flowchart-2URL-7"]')
         .click();
 
       cy.location().should(location => {
@@ -208,31 +253,31 @@ describe('Interaction', () => {
 
   describe('Interaction - security level other, missspelling', () => {
     it('should handle a click on a node with a bound function', () => {
-      const url = 'http://localhost:9000/click_security_strict.html';
+      const url = 'http://localhost:9000/click_security_other.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
       cy.get('body')
-        .find('g#Function')
+        .find('g#flowchart-Function-2')
         .click();
 
       cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');
     });
     it('should handle a click on a node with a bound function where the node starts with a number', () => {
-      const url = 'http://localhost:9000/click_security_strict.html';
+      const url = 'http://localhost:9000/click_security_other.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
       cy.get('body')
-        .find('g[id="1Function"]')
+        .find('g[id="flowchart-1Function-6"]')
         .click();
 
       cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');
     });
     it('should handle a click on a node with a bound url', () => {
-      const url = 'http://localhost:9000/click_security_strict.html';
+      const url = 'http://localhost:9000/click_security_other.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
       cy.get('body')
-        .find('g#URL')
+        .find('g#flowchart-URL-3')
         .click();
 
       cy.location().should(location => {
@@ -241,7 +286,7 @@ describe('Interaction', () => {
     });
 
     it('should handle a click on a task with a bound function', () => {
-      const url = 'http://localhost:9000/click_security_strict.html';
+      const url = 'http://localhost:9000/click_security_other.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
       cy.get('body')
@@ -251,7 +296,7 @@ describe('Interaction', () => {
       cy.get('.created-by-gant-click').should('not.have.text', 'Clicked By Gant cl2');
     });
     it('should handle a click on a task with a bound function', () => {
-      const url = 'http://localhost:9000/click_security_strict.html';
+      const url = 'http://localhost:9000/click_security_other.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
       cy.get('body')
diff --git a/cypress/platform/click_security_loose.html b/cypress/platform/click_security_loose.html
index 8d7b7f244..79c0ac2f2 100644
--- a/cypress/platform/click_security_loose.html
+++ b/cypress/platform/click_security_loose.html
@@ -29,13 +29,13 @@
     flowchart TB
       Function-->URL
       click Function clickByFlow "Add a div"
-      click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+      click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
 </div>
 <div id="FirstLine" class="mermaid">
   flowchart TB
     1Function--->2URL
     click 1Function clickByFlow "Add a div"
-    click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+    click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
 </div>
 
 <div id="FirstLine" class="mermaid">
diff --git a/src/diagrams/flowchart/flowDb.js b/src/diagrams/flowchart/flowDb.js
index 951ce5d55..591eb4054 100644
--- a/src/diagrams/flowchart/flowDb.js
+++ b/src/diagrams/flowchart/flowDb.js
@@ -226,7 +226,7 @@ export const setDirection = function(dir) {
  */
 export const setClass = function(ids, className) {
   ids.split(',').forEach(function(_id) {
-    let id = _id;
+    let id = version === 'gen-1' ? lookUpDomId(_id) : _id;
     // if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
     if (typeof vertices[id] !== 'undefined') {
       vertices[id].classes.push(className);
@@ -241,7 +241,7 @@ export const setClass = function(ids, className) {
 const setTooltip = function(ids, tooltip) {
   ids.split(',').forEach(function(id) {
     if (typeof tooltip !== 'undefined') {
-      tooltips[id] = common.sanitizeText(tooltip, config);
+      tooltips[version === 'gen-1' ? lookUpDomId(id) : id] = common.sanitizeText(tooltip, config);
     }
   });
 };
@@ -280,8 +280,6 @@ const setClickFun = function(id, functionName) {
  */
 export const setLink = function(ids, linkStr, tooltip, target) {
   ids.split(',').forEach(function(id) {
-    // let domId = lookUpDomId(id);
-    // if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
     if (typeof vertices[id] !== 'undefined') {
       vertices[id].link = utils.formatUrl(linkStr, config);
       vertices[id].linkTarget = target;
diff --git a/src/diagrams/flowchart/flowRenderer.js b/src/diagrams/flowchart/flowRenderer.js
index 8cb1e9a11..b4a007773 100644
--- a/src/diagrams/flowchart/flowRenderer.js
+++ b/src/diagrams/flowchart/flowRenderer.js
@@ -143,7 +143,7 @@ export const addVertices = function(vert, g, svgId) {
       ry: radious,
       class: classStr,
       style: styles.style,
-      id: vertex.id
+      id: flowDb.lookUpDomId(vertex.id)
     });
   });
 };
@@ -425,10 +425,13 @@ export const draw = function(text, id) {
   // reposition labels
   for (i = 0; i < subGraphs.length; i++) {
     subG = subGraphs[i];
-
     if (subG.title !== 'undefined') {
-      const clusterRects = document.querySelectorAll('#' + id + ' [id="' + subG.id + '"] rect');
-      const clusterEl = document.querySelectorAll('#' + id + ' [id="' + subG.id + '"]');
+      const clusterRects = document.querySelectorAll(
+        '#' + id + ' [id="' + flowDb.lookUpDomId(subG.id) + '"] rect'
+      );
+      const clusterEl = document.querySelectorAll(
+        '#' + id + ' [id="' + flowDb.lookUpDomId(subG.id) + '"]'
+      );
 
       const xPos = clusterRects[0].x.baseVal.value;
       const yPos = clusterRects[0].y.baseVal.value;
@@ -470,7 +473,7 @@ export const draw = function(text, id) {
     const vertex = vert[key];
 
     if (vertex.link) {
-      const node = select('#' + id + ' [id="' + key + '"]');
+      const node = select('#' + id + ' [id="' + flowDb.lookUpDomId(key) + '"]');
       if (node) {
         const link = document.createElementNS('http://www.w3.org/2000/svg', 'a');
         link.setAttributeNS('http://www.w3.org/2000/svg', 'class', vertex.classes.join(' '));