#2029 Adding option to configure default renderer

cypress/platform/knsv.html

@@ -102,8 +102,8 @@ stateDiagram-v2
 
 
       </div>
-<div class="mermaid" style="width: 100%; height: 20%;">
-stateDiagram-v2
+<div class="mermaid2" style="width: 100%; height: 20%;">
+state
 state "Not Shooting State" as NotShooting {
   state "Idle mode" as Idle
   state "Configuring mode" as Configuring
@@ -113,8 +113,8 @@ state "Not Shooting State" as NotShooting {
 }
 
 </div>
-      <div class="mermaid2" style="width: 100%; height: 20%;">
-stateDiagram-v2
+      <div class="mermaid" style="width: 100%; height: 20%;">
+stateDiagram
 state S1 {
 sub1 -->sub2
 }
@@ -233,7 +233,9 @@ style N stroke:#0000ff,fill:#ccccff,color:#0000ff
         state:{
           nodeSpacing: 50,
           rankSpacing: 50,
+          defaultRenderer: 'dagre-wrapper',
         },
+
         fontSize: 18,
         curve: 'cardinal',
         securityLevel: 'loose',

cypress/platform/knsv2.html

@@ -55,8 +55,8 @@ flowchart TD
   class T TestSub
   linkStyle 0,1 color:orange, stroke: orange;
 </div>
-      <div class="mermaid2" style="width: 100%; height: 20%;">
-flowchart TD
+      <div class="mermaid" style="width: 100%; height: 20%;">
+graph TD
    subgraph S1
     sub1 -->sub2
    end
@@ -67,16 +67,8 @@ flowchart TD
    sub1 --> sub4
       </div>
 <div class="mermaid" style="width: 100%; height: 20%;">
-stateDiagram-v2
-  state S1 {
-    sub1 -->sub2
-  }
-
-  state S2 {
-    sub4
-  }
-  S1 --> S2
-  sub1 --> sub4
+graph TB
+  A --> B
 </div>
       <div class="mermaid2" style="width: 100%; height: 20%;">
 stateDiagram-v2
@@ -184,11 +176,17 @@ style N stroke:#0000ff,fill:#ccccff,color:#0000ff
           // console.error('Mermaid error: ', err);
         };
       mermaid.initialize({
-        theme: 'neutral',
+        theme: 'forest',
         arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,
-        flowchart: { nodeSpacing: 10, curve: 'cardinal', htmlLabels: true },
+        state: {
+          defaultRenderer: 'dagre-wrapper',
+        },
+        flowchart: {
+          // defaultRenderer: 'dagre-wrapper',
+          nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
+        },
         htmlLabels: true,
         // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },