improve mermaid node with default content and better centering and sizing

Author: devhelpr

apps/vps-web/src/app/custom-nodes/classes/mermaid-node-class.tsx

@@ -47,13 +47,40 @@ export class MermaidNode {
               followPath: undefined,
             });
           });
+      } else {
+        mermaid
+          .render(
+            `_${this.id.replaceAll('-', '')}Mermaid`,
+            `flowchart TD
+    A[Hello] --> B[Mermaid]
+`
+          )
+          .then((renderResult) => {
+            if (this.nodeRenderElement) {
+              this.nodeRenderElement.innerHTML = renderResult.svg;
+            }
+
+            resolve({
+              result: input,
+              output: input,
+              followPath: undefined,
+            });
+          })
+          .catch((error) => {
+            console.error('Error rendering mermaid diagram', error);
+            resolve({
+              result: input,
+              output: input,
+              followPath: undefined,
+            });
+          });
       }
     });
   };
 
   render = () => {
     return (
-      <div class="mermaid w-min h-min p-4 border-4 border-slate-400 border-solid rounded"></div>
+      <div class="mermaid w-min h-min p-4 border-4 border-slate-400 border-solid rounded flex items-center justify-center"></div>
     );
   };
 }

apps/vps-web/src/app/custom-nodes/mermaid.tsx

@@ -92,13 +92,13 @@ export const getMermaidNode =
         if (nodeRenderElement) {
           mermaidNode.nodeRenderElement = nodeRenderElement;
           const resizeObserver = new ResizeObserver(() => {
-            // if (rect && rect.resize) {
-            //   rect.resize(
-            //     undefined,
-            //     true,
-            //     '.child-node-wrapper > *:first-child'
-            //   );
-            // }
+            if (rect && rect.resize) {
+              rect.resize(
+                undefined,
+                true,
+                '.child-node-wrapper > *:first-child'
+              );
+            }
           });
           resizeObserver.observe(nodeRenderElement);
           if (node?.nodeInfo) {