Merge pull request #1 from neuroglia-io/fix-graph-improvements

Fix graph improvements

Author: JBBianchi

README.md

@@ -340,7 +340,7 @@ flowchart TD
     root-entry-node --> /do/0/step1
 
 
-classDef hidden display: none;
+classDef hidden width: 1px, height: 0px, opacity: 0;
 */
 ```
 
@@ -353,9 +353,11 @@ 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.
+
 ### Building Locally
 
 To build the project and run tests locally, use the following commands:
@@ -366,4 +368,10 @@ cd sdk-typescript
 npm install && npm run build && npm run test
 ```
 
+You can also run the browser examples by executing:
+
+```sh
+npm run serve
+```
+
 If you're interested in contributing, reading the [Tooling Architecture](/tools/README.md) is a good place to start.

examples/browser/mermaid.html

@@ -106,7 +106,7 @@
         try {
             const workflow = Classes.Workflow.deserialize(inputTextarea.value);
             const mermaidCode = convertToMermaidCode(workflow);
-            document.getElementById('output').innerHTML = `--- YAML ---\n${Classes.Workflow.serialize(workflow)}\n\n--- JSON ---\n${Classes.Workflow.serialize(workflow, 'json')}\n\n--- MERMAID ---\n${mermaidCode}`;
+            document.getElementById('output').innerHTML = `--- MERMAID ---\n${mermaidCode}`;
             mermaid.initialize({ startOnLoad: false });
             const { svg, bindFunctions } = await mermaid.render('sw-diagram', mermaidCode);
             diagramContainerEl.innerHTML = svg;