diff --git a/dist/index.html b/dist/index.html
index 6609d63852..da7b4441b2 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -14,6 +14,8 @@
 C -->|One| D[Laptop]
 C -->|Two| E[iPhone]
 C -->|Three| F[Car]
+click A "index.html#link-clicked" "link test"
+click B testClick "click test"
   </div>
 
   <hr/>
@@ -101,5 +103,18 @@
   <script>
     mermaid.initialize({startOnLoad: true, theme: 'forest'});
   </script>
+  <script>
+    function testClick(nodeId) {
+      console.log("clicked", nodeId);
+      var originalBgColor = document.querySelector('body').style.backgroundColor;
+      document.querySelector('body').style.backgroundColor = 'yellow';
+      setTimeout(function() {
+        document.querySelector('body').style.backgroundColor = originalBgColor;
+      }, 100);
+
+    }
+
+  </script>
+
 </body>
 </html>
diff --git a/src/diagrams/flowchart/graphDb.js b/src/diagrams/flowchart/graphDb.js
index 880695d290..d7aca48014 100644
--- a/src/diagrams/flowchart/graphDb.js
+++ b/src/diagrams/flowchart/graphDb.js
@@ -204,11 +204,13 @@ export const setClickEvent = function (id, functionName, link, tooltip) {
       setTooltip(id2, tooltip)
       setClickFun(id2, functionName)
       setLink(id2, link)
+      setClass(id, 'clickable')
     })
   } else {
     setTooltip(id, tooltip)
     setClickFun(id, functionName)
     setLink(id, link)
+    setClass(id, 'clickable')
   }
 }
 
diff --git a/src/less/dark/flow.less b/src/less/dark/flow.less
index dcabafdd0c..ac833b34e6 100644
--- a/src/less/dark/flow.less
+++ b/src/less/dark/flow.less
@@ -11,6 +11,10 @@
   stroke-width: 1px;
 }
 
+.node.clickable {
+  cursor: pointer;
+}
+
 .arrowheadPath {
   fill: @arrowheadColor;
 }
diff --git a/src/less/default/flow.less b/src/less/default/flow.less
index aa97b01775..7a9ead9295 100644
--- a/src/less/default/flow.less
+++ b/src/less/default/flow.less
@@ -11,6 +11,10 @@
   stroke-width: 1px;
 }
 
+.node.clickable {
+  cursor: pointer;
+}
+
 .arrowheadPath {
   fill: @arrowheadColor;
 }
diff --git a/src/less/forest/flow.less b/src/less/forest/flow.less
index 2b3469b6ed..e7602646a0 100644
--- a/src/less/forest/flow.less
+++ b/src/less/forest/flow.less
@@ -12,6 +12,10 @@
   stroke-width: 1px;
 }
 
+.node.clickable {
+  cursor: pointer;
+}
+
 .arrowheadPath {
   fill: @arrowheadColor;
 }