Merge pull request #4113 from mermaid-js/3192_invisible_edges

Adding the ability to use invisible edges
mermaid-js · Feb 20, 2023 · 22b18a4 · 22b18a4
2 parents 786023f + eb04d80
commit 22b18a4
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 0 deletions.
diff --git 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/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:

diff --git 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
@@ -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
@@ -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
@@ -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';

diff --git 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: