fix: change mermaid hidden class definition

workaround issue mermaid-js/mermaid#6452

Signed-off-by: Jean-Baptiste Bianchi <[email protected]>

Author: JBBianchi

Diff for: README.md

@@ -339,7 +339,7 @@ flowchart TD
     root-entry-node --> /do/0/step1
 
 
-classDef hidden display: none;
+classDef hidden width: 1px, height: 0px, opacity: 0;
 */
 ```
 
@@ -352,7 +352,7 @@ flowchart TD
     root-entry-node --> /do/0/step1
 
 
-classDef hidden display: none;
+classDef hidden width: 1px, height: 0px, opacity: 0;
 ```
 
 You can refer to the mermaid browser example for a live demo.

Diff for: src/lib/mermaid-converter.ts

@@ -79,7 +79,7 @@ export function convertToMermaidCode(workflow: Workflow): string {
     convertGraphToCode(graph) +
     `
 
-classDef hidden display: none;`
+classDef hidden width: 1px, height: 0px, opacity: 0;` // should be "classDef hidden display: none;" but it can induce a Mermaid bug - https://github.com/mermaid-js/mermaid/issues/6452
   );
 }
 

Diff for: tests/mermaid/mermaid.spec.ts

@@ -24,7 +24,7 @@ do:
     root-entry-node --> /do/0/initialize
 
 
-classDef hidden display: none;`.trim(),
+classDef hidden width: 1px, height: 0px, opacity: 0;`.trim(),
     );
   });
 
@@ -49,7 +49,7 @@ do:
     root-entry-node --> /do/0/initialize
 
 
-classDef hidden display: none;`.trim(),
+classDef hidden width: 1px, height: 0px, opacity: 0;`.trim(),
     );
   });
 
@@ -81,7 +81,7 @@ classDef hidden display: none;`.trim(),
     root-entry-node --> /do/0/initialize
 
 
-classDef hidden display: none;`.trim(),
+classDef hidden width: 1px, height: 0px, opacity: 0;`.trim(),
     );
   });
 
@@ -106,7 +106,7 @@ do:
     root-entry-node --> /do/0/initialize
 
 
-classDef hidden display: none;`.trim(),
+classDef hidden width: 1px, height: 0px, opacity: 0;`.trim(),
     );
   });
 
@@ -133,7 +133,7 @@ do:
     root-entry-node --> root-exit-node
 
 
-classDef hidden display: none;`.trim(),
+classDef hidden width: 1px, height: 0px, opacity: 0;`.trim(),
     );
   });
 
@@ -176,7 +176,7 @@ do:
     root-entry-node --- /do/0/checkup-entry-node
 
 
-classDef hidden display: none;`.trim(),
+classDef hidden width: 1px, height: 0px, opacity: 0;`.trim(),
     );
   });
 });