#5237 Setting layout algorithm and handrawn or not via configuration

cSpell.json

@@ -60,6 +60,7 @@
     "grav",
     "greywolf",
     "gzipped",
+    "handdrawn",
     "huynh",
     "huynhicode",
     "iife",
@@ -170,7 +171,11 @@
     "zune"
   ],
   "patterns": [
-    { "name": "Markdown links", "pattern": "\\((.*)\\)", "description": "" },
+    {
+      "name": "Markdown links",
+      "pattern": "\\((.*)\\)",
+      "description": ""
+    },
     {
       "name": "Markdown code blocks",
       "pattern": "/^(\\s*`{3,}).*[\\s\\S]*?^\\1/gmx",
@@ -181,14 +186,25 @@
       "pattern": "\\`([^\\`\\r\\n]+?)\\`",
       "description": "https://stackoverflow.com/questions/41274241/how-to-capture-inline-markdown-code-but-not-a-markdown-code-fence-with-regex"
     },
-    { "name": "Link contents", "pattern": "\\<a(.*)\\>", "description": "" },
-    { "name": "Snippet references", "pattern": "-- snippet:(.*)", "description": "" },
+    {
+      "name": "Link contents",
+      "pattern": "\\<a(.*)\\>",
+      "description": ""
+    },
+    {
+      "name": "Snippet references",
+      "pattern": "-- snippet:(.*)",
+      "description": ""
+    },
     {
       "name": "Snippet references 2",
       "pattern": "\\<\\[sample:(.*)",
       "description": "another kind of snippet reference"
     },
-    { "name": "Multi-line code blocks", "pattern": "/^\\s*```[\\s\\S]*?^\\s*```/gm" },
+    {
+      "name": "Multi-line code blocks",
+      "pattern": "/^\\s*```[\\s\\S]*?^\\s*```/gm"
+    },
     {
       "name": "HTML Tags",
       "pattern": "<[^>]*>",

cypress/platform/knsv2.html

@@ -75,10 +75,15 @@
     <pre id="diagram" class="mermaid">
 stateDiagram-v2
     Chimp --> A
+    Chimp --> B
+    Chimp --> C
 
   </pre
     >
     <pre id="diagram" class="mermaid">
+---
+  handdrawn: false
+---
 stateDiagram-v2
     state First {
 second
@@ -95,10 +100,17 @@ stateDiagram-v2
   </pre
     >
     <pre id="diagram" class="mermaid2">
-    flowchart TB
-      subgraph First
-        Second
-      end
+   stateDiagram-v2
+    state fork_state <<fork>>
+      [*] --> fork_state
+      fork_state --> State2
+      fork_state --> State3
+
+      state join_state <<join>>
+      State2 --> join_state
+      State3 --> join_state
+      join_state --> State4
+      State4 --> [*]
     </pre>
     <pre id="diagram" class="mermaid2">
     flowchart TB
@@ -474,8 +486,9 @@ mindmap
       //   useMaxWidth: false,
       // });
       mermaid.initialize({
+        handdrawn: true,
+        layout: 'elk',
         flowchart: { titleTopMargin: 10 },
-        /* fontFamily: 'Kalam', */
         fontFamily: 'Caveat',
         sequence: {
           actorFontFamily: 'courier',

packages/mermaid/src/config.type.ts

@@ -64,6 +64,7 @@ export interface MermaidConfig {
   theme?: 'default' | 'forest' | 'dark' | 'neutral' | 'null';
   themeVariables?: any;
   themeCSS?: string;
+  handdrawn?: boolean; // Different from theme as it could be combined with any theme in the future
   /**
    * The maximum allowed size of the users text diagram
    */

packages/mermaid/src/diagrams/state/stateDb.js

@@ -846,7 +846,9 @@ export const getData = () => {
   extract(getRootDocV2());
   const diagramStates = getStates();
 
-  const useRough = false;
+  console.log('Config - DAGA', getConfig());
+
+  const useRough = getConfig().handdrawn;
   dataFetcher(undefined, getRootDocV2(), diagramStates, nodes, edges, true, useRough);
 
   return { nodes, edges, other: {} };

packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts

@@ -88,7 +88,8 @@ export const draw = async function (text: string, id: string, _version: string,
 
   data4Layout.type = diag.type;
   // data4Layout.layoutAlgorithm = 'dagre-wrapper';
-  data4Layout.layoutAlgorithm = 'elk';
+  // data4Layout.layoutAlgorithm = 'elk';
+  data4Layout.layoutAlgorithm = getConfig().layout;
   data4Layout.direction = DIR;
   data4Layout.nodeSpacing = conf.nodeSpacing || 50;
   data4Layout.rankSpacing = conf.rankSpacing || 50;

packages/mermaid/src/rendering-util/render.js

@@ -1,6 +1,6 @@
 export const render = async (data4Layout, svg, element) => {
   switch (data4Layout.layoutAlgorithm) {
-    case 'dagre-wrapper': {
+    case 'dagre': {
       const layoutRenderer = await import('./layout-algorithms/dagre/index.js');
       return layoutRenderer.render(data4Layout, svg, element);
     }

packages/mermaid/src/schemas/config.schema.yaml

@@ -70,6 +70,16 @@ properties:
     tsType: any
   themeCSS:
     type: string
+  handdrawn:
+    description: |
+      Defines whether or not to use the handdrawn effect in the diagram.
+    type: boolean
+    default: false
+  layout:
+    description: |
+      Defines which layout algorithm to use for rendering the diagram.
+    type: string
+    default: 'dagre'
   maxTextSize:
     description: The maximum allowed size of the users text diagram
     type: number