From 3a71618a49375c0e1674be8b23e5db2a49dbe35d Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Wed, 12 Oct 2022 11:48:51 +0200
Subject: [PATCH 1/3] #3192 Adding the ability to create invisible links in
 flowcharts(v2)

---
 packages/mermaid/src/dagre-wrapper/edges.js                | 3 +++
 packages/mermaid/src/diagrams/flowchart/flowDb.js          | 4 ++++
 packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js | 5 +++++
 packages/mermaid/src/diagrams/flowchart/parser/flow.jison  | 1 +
 4 files changed, 13 insertions(+)

diff --git a/packages/mermaid/src/dagre-wrapper/edges.js b/packages/mermaid/src/dagre-wrapper/edges.js
index 71183eab5..f8c113694 100644
--- a/packages/mermaid/src/dagre-wrapper/edges.js
+++ b/packages/mermaid/src/dagre-wrapper/edges.js
@@ -453,6 +453,9 @@ export const insertEdge = function (elem, e, edge, clusterDb, diagramType, graph
     case 'thick':
       strokeClasses = 'edge-thickness-thick';
       break;
+    case 'invisible':
+      strokeClasses = 'edge-thickness-thick';
+      break;
     default:
       strokeClasses = '';
   }
diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.js b/packages/mermaid/src/diagrams/flowchart/flowDb.js
index 2e6b840b5..31196ba96 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js
@@ -677,6 +677,10 @@ const destructEndLink = (_str) => {
     stroke = 'thick';
   }
 
+  if (line[0] === '~') {
+    stroke = 'invisible';
+  }
+
   let dots = countChar('.', line);
 
   if (dots) {
diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
index 03bda7611..2d3e21a44 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
@@ -280,6 +280,11 @@ export const addEdges = function (edges, g, diagObj) {
         edgeData.pattern = 'solid';
         edgeData.style = 'stroke-width: 3.5px;fill:none;';
         break;
+      case 'invisible':
+        edgeData.thickness = 'invisible';
+        edgeData.pattern = 'solid';
+        edgeData.style = 'stroke-width: 0;fill:none;';
+        break;
     }
     if (edge.style !== undefined) {
       const styles = getStylesFromArray(edge.style);
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
index 05473b4a0..e2dad5881 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
@@ -121,6 +121,7 @@ that id.
 \s*[xo<]?\-\-+[-xo>]\s*     return 'LINK';
 \s*[xo<]?\=\=+[=xo>]\s*     return 'LINK';
 \s*[xo<]?\-?\.+\-[xo>]?\s*  return 'LINK';
+\s*\~\~[\~]+\s*  return 'LINK';
 \s*[xo<]?\-\-\s*            return 'START_LINK';
 \s*[xo<]?\=\=\s*            return 'START_LINK';
 \s*[xo<]?\-\.\s*            return 'START_LINK';

From b6cac3a4317feee6369f1f3c78e395accecfe32d Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Mon, 20 Feb 2023 11:19:23 +0100
Subject: [PATCH 2/3] #3192 Adding docs and visual test

---
 cypress/integration/rendering/flowchart-v2.spec.js | 11 +++++++++++
 packages/mermaid/src/docs/syntax/flowchart.md      |  9 +++++++++
 2 files changed, 20 insertions(+)

diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js
index 30ae4f0d2..8debde1b9 100644
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/cypress/integration/rendering/flowchart-v2.spec.js
@@ -670,6 +670,17 @@ title: Simple flowchart
 ---
 flowchart TD
 A --> B
+`,
+      { titleTopMargin: 0 }
+    );
+  });
+  it('3192: It should be possieble to render flowcharts with invisisble edges', () => {
+    imgSnapshotTest(
+      `---
+title: Simple flowchart with invisisble edges
+---
+flowchart TD
+A ~~~ B
 `,
       { titleTopMargin: 0 }
     );
diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md
index 5896e0518..6f80d9982 100644
--- a/packages/mermaid/src/docs/syntax/flowchart.md
+++ b/packages/mermaid/src/docs/syntax/flowchart.md
@@ -245,6 +245,15 @@ flowchart LR
    A == text ==> B
 ```
 
+### An invisisble link
+
+This can be a usefull tool in some instances where you want to alter the default positining of a node.
+
+```mermaid-example
+flowchart LR
+    A ~~~ B
+```
+
 ### Chaining of links
 
 It is possible declare many links in the same line as per below:

From eb04d80df01c73a8e74b09e10d728725254976ef Mon Sep 17 00:00:00 2001
From: knsv <knsv@users.noreply.github.com>
Date: Mon, 20 Feb 2023 10:23:13 +0000
Subject: [PATCH 3/3] Update docs

---
 docs/syntax/flowchart.md | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md
index fd0408c45..4a2f6cca5 100644
--- a/docs/syntax/flowchart.md
+++ b/docs/syntax/flowchart.md
@@ -391,6 +391,20 @@ flowchart LR
    A == text ==> B
 ```
 
+### An invisisble link
+
+This can be a usefull tool in some instances where you want to alter the default positining of a node.
+
+```mermaid-example
+flowchart LR
+    A ~~~ B
+```
+
+```mermaid
+flowchart LR
+    A ~~~ B
+```
+
 ### Chaining of links
 
 It is possible declare many links in the same line as per below: