Merge pull request #2031 from mermaid-js/2029_option_to_configure_renderer

2029 option to configure renderer

cypress/platform/knsv.html

@@ -55,7 +55,7 @@ flowchart TD
   class T TestSub
   linkStyle 0,1 color:orange, stroke: orange;
 </div>
-      <div class="mermaid2" style="width: 100%; height: 20%;">
+      <div class="mermaid" style="width: 100%; height: 20%;">
 stateDiagram-v2
     [*] --> Off
     Off --> On
@@ -102,12 +102,13 @@ stateDiagram-v2
 
 
       </div>
-<div class="mermaid" style="width: 100%; height: 20%;">
+<div class="mermaid2" style="width: 100%; height: 20%;">
 stateDiagram-v2
 state "Not Shooting State" as NotShooting {
-  state "Idle mode" as Idle
   state "Configuring mode" as Configuring
   [*] --> Idle
+  Idle : this is a string
+  Idle : this is another string
   Idle --> Configuring : EvConfig
   Configuring --> Idle : EvConfig
 }
@@ -115,15 +116,49 @@ state "Not Shooting State" as NotShooting {
 </div>
       <div class="mermaid2" style="width: 100%; height: 20%;">
 stateDiagram-v2
-state S1 {
+    [*] --> Off
-sub1 -->sub2
+    Off --> On
-}
+    On --> Select
-state S2 {
+    Select --> Washing
-    sub4
+    Washing --> Finished
-}
+    Finished --> [*]
-S1 --> S2
+    state Select
-sub1 --> sub4
+    {
+      state "Program 1" as Prg1
+      [*] --> Prg1
+      Prg1 --> [*]
+      [*] --> Prg2
+      Prg2 --> [*]
+      [*] --> Prg3
+      Prg3 --> [*]
+    }
 
+    state Washing {
+      state Using_Prg1 {
+        [*] --> P1Step1
+        P1Step1 --> P1Step2
+        P1Step2 --> P1Step3
+        P1Step3 --> [*]
+      }
+      state Using_Prg2 {
+        [*] --> P2Step1
+        P2Step1 --> P2Step2
+        P2Step2 --> P2Step3
+        P2Step3 --> [*]
+      }
+
+      state Using_Prg3 {
+        [*] --> Step1
+        Step1 --> Step2
+        Step2 --> [*]
+      }
+      [*] --> Using_Prg1
+      [*] --> Using_Prg2
+      [*] --> Using_Prg3
+      Using_Prg1 --> [*]
+      Using_Prg2 --> [*]
+      Using_Prg3 --> [*]
+    }
       </div>
 <div class="mermaid2" style="width: 100%; height: 20%;">
   requirementDiagram
@@ -233,7 +268,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%;">
+      <div class="mermaid" style="width: 100%; height: 20%;">
-flowchart TD
+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
+graph TB
-  state S1 {
+  A --> B
-    sub1 -->sub2
-  }
-
-  state S2 {
-    sub4
-  }
-  S1 --> S2
-  sub1 --> sub4
 </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 },

dist/mermaid.core.js

@@ -2813,6 +2813,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _createLabel__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./createLabel */ "./src/dagre-wrapper/createLabel.js");
 /* harmony import */ var _shapes_note__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./shapes/note */ "./src/dagre-wrapper/shapes/note.js");
 /* harmony import */ var _diagrams_class_svgDraw__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../diagrams/class/svgDraw */ "./src/diagrams/class/svgDraw.js");
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 
  // eslint-disable-line
 
@@ -3158,9 +3160,10 @@ var rectWithTitle = function rectWithTitle(parent, node) {
 
   var innerLine = shapeSvg.insert('line');
   var label = shapeSvg.insert('g').attr('class', 'label');
-  var text2 = node.labelText.flat();
+  var text2prim = node.labelText.flat ? node.labelText.flat() : node.labelText;
-  _logger__WEBPACK_IMPORTED_MODULE_1__["log"].info('Label text', text2[0]);
+  var text2 = _typeof(text2prim) === 'object' ? text2prim[0] : text2prim;
-  var text = label.node().appendChild(Object(_createLabel__WEBPACK_IMPORTED_MODULE_5__["default"])(text2[0], node.labelStyle, true, true));
+  _logger__WEBPACK_IMPORTED_MODULE_1__["log"].info('Label text', text2);
+  var text = label.node().appendChild(Object(_createLabel__WEBPACK_IMPORTED_MODULE_5__["default"])(text2, node.labelStyle, true, true));
   var bbox;
 
   if (Object(_config__WEBPACK_IMPORTED_MODULE_3__["getConfig"])().flowchart.htmlLabels) {
@@ -3174,7 +3177,7 @@ var rectWithTitle = function rectWithTitle(parent, node) {
   _logger__WEBPACK_IMPORTED_MODULE_1__["log"].info('Text 2', text2);
   var textRows = text2.slice(1, text2.length);
   var titleBox = text.getBBox();
-  var descr = label.node().appendChild(Object(_createLabel__WEBPACK_IMPORTED_MODULE_5__["default"])(textRows.join('<br/>'), node.labelStyle, true, true));
+  var descr = label.node().appendChild(Object(_createLabel__WEBPACK_IMPORTED_MODULE_5__["default"])(textRows.join ? textRows.join('<br/>') : textRows, node.labelStyle, true, true));
 
   if (Object(_config__WEBPACK_IMPORTED_MODULE_3__["getConfig"])().flowchart.htmlLabels) {
     var _div = descr.children[0];
@@ -3978,7 +3981,22 @@ var config = {
      *
      * Default value: true
      */
-    useMaxWidth: true
+    useMaxWidth: true,
+
+    /**
+     * | Parameter | Description | Type | Required | Values|
+     * | --- | --- | --- | --- | --- |
+     * | defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper |
+     *
+     * **Notes:**
+     *
+     * Decides which rendering engine that is to be used for the rendering. Legal values are:
+     * * dagre-d3
+     * * dagre-wrapper - wrapper for dagre implemented in mermaid
+     *
+     * Default value: 'dagre-d3'
+     */
+    defaultRenderer: 'dagre-d3'
   },
 
   /**
@@ -4619,7 +4637,22 @@ var config = {
      *
      * Default value: true
      */
-    useMaxWidth: true
+    useMaxWidth: true,
+
+    /**
+     * | Parameter | Description | Type | Required | Values|
+     * | --- | --- | --- | --- | --- |
+     * | defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper |
+     *
+     * **Notes:**
+     *
+     * Decides which rendering engine that is to be used for the rendering. Legal values are:
+     * * dagre-d3
+     * * dagre-wrapper - wrapper for dagre implemented in mermaid
+     *
+     * Default value: 'dagre-d3'
+     */
+    defaultRenderer: 'dagre-d3'
   },
   git: {
     arrowMarkerAbsolute: false,
@@ -4671,7 +4704,22 @@ var config = {
      *
      * Default value: true
      */
-    useMaxWidth: true
+    useMaxWidth: true,
+
+    /**
+     * | Parameter | Description | Type | Required | Values|
+     * | --- | --- | --- | --- | --- |
+     * | defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper |
+     *
+     * **Notes:**
+     *
+     * Decides which rendering engine that is to be used for the rendering. Legal values are:
+     * * dagre-d3
+     * * dagre-wrapper - wrapper for dagre implemented in mermaid
+     *
+     * Default value: 'dagre-d3'
+     */
+    defaultRenderer: 'dagre-d3'
   },
 
   /**
@@ -21507,7 +21555,7 @@ case 13:return 16;
 break;
 case 14:this.popState();
 break;
-case 15: this.pushState('STATE'); 
+case 15: console.log('Starting STATE');this.pushState('STATE'); 
 break;
 case 16:this.popState();yy_.yytext=yy_.yytext.slice(0,-8).trim(); /*console.warn('Fork Fork: ',yy_.yytext);*/return 23;
 break;
@@ -21517,7 +21565,7 @@ case 18:this.popState();yy_.yytext=yy_.yytext.slice(0,-8).trim();/*console.warn(
 break;
 case 19:this.popState();yy_.yytext=yy_.yytext.slice(0,-8).trim();/*console.warn('Fork Join: ',yy_.yytext);*/return 24;
 break;
-case 20:this.begin("STATE_STRING");
+case 20: console.log('Starting STATE_STRING');this.begin("STATE_STRING");
 break;
 case 21:this.popState();this.pushState('STATE_ID');return "AS";
 break;
@@ -21525,7 +21573,7 @@ case 22:this.popState();/* console.log('STATE_ID', yy_.yytext);*/return "ID";
 break;
 case 23:this.popState();
 break;
-case 24: /*console.log('Long description:', yy_.yytext);*/return "STATE_DESCR";
+case 24: console.log('Long description:', yy_.yytext);return "STATE_DESCR";
 break;
 case 25:/*console.log('COMPOSIT_STATE', yy_.yytext);*/return 17;
 break;
@@ -22389,6 +22437,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _dagre_wrapper_index_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../dagre-wrapper/index.js */ "./src/dagre-wrapper/index.js");
 /* harmony import */ var _logger__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../logger */ "./src/logger.js");
 /* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../utils */ "./src/utils.js");
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 
 
 
@@ -22484,7 +22534,7 @@ var setupNode = function setupNode(g, parent, node, altFlag) {
     var nodeData = {
       labelStyle: '',
       shape: nodeDb[node.id].shape,
-      labelText: nodeDb[node.id].description,
+      labelText: _typeof(nodeDb[node.id].description) === 'object' ? nodeDb[node.id].description[0] : nodeDb[node.id].description,
       classes: nodeDb[node.id].classes,
       //classStr,
       style: '',
@@ -24884,13 +24934,14 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 
 function parse(text) {
   var graphInit = _utils__WEBPACK_IMPORTED_MODULE_44__["default"].detectInit(text);
+  var cnf = _config__WEBPACK_IMPORTED_MODULE_3__["getConfig"]();
 
   if (graphInit) {
     reinitialize(graphInit);
     _logger__WEBPACK_IMPORTED_MODULE_41__["log"].debug('reinit ', graphInit);
   }
 
-  var graphType = _utils__WEBPACK_IMPORTED_MODULE_44__["default"].detectType(text);
+  var graphType = _utils__WEBPACK_IMPORTED_MODULE_44__["default"].detectType(text, cnf);
   var parser;
   _logger__WEBPACK_IMPORTED_MODULE_41__["log"].debug('Type ' + graphType);
 
@@ -25090,7 +25141,7 @@ var render = function render(id, _txt, cb, container) {
   window.txt = txt;
   txt = encodeEntities(txt);
   var element = Object(d3__WEBPACK_IMPORTED_MODULE_0__["select"])('#d' + id).node();
-  var graphType = _utils__WEBPACK_IMPORTED_MODULE_44__["default"].detectType(txt); // insert inline style into svg
+  var graphType = _utils__WEBPACK_IMPORTED_MODULE_44__["default"].detectType(txt, cnf); // insert inline style into svg
 
   var svg = element.firstChild;
   var firstChild = svg.firstChild;
@@ -25370,6 +25421,7 @@ var handleDirective = function handleDirective(p, directive, type) {
 };
 
 function updateRendererConfigs(conf) {
+  // Todo remove, all diagrams should get config on demoand from the config object, no need for this
   _diagrams_git_gitGraphRenderer__WEBPACK_IMPORTED_MODULE_19__["default"].setConf(conf.git);
   _diagrams_flowchart_flowRenderer__WEBPACK_IMPORTED_MODULE_12__["default"].setConf(conf.flowchart);
   _diagrams_flowchart_flowRenderer_v2__WEBPACK_IMPORTED_MODULE_13__["default"].setConf(conf.flowchart);
@@ -26992,7 +27044,7 @@ var detectType = function detectType(text) {
   }
 
   if (text.match(/^\s*classDiagram/)) {
-    return 'class';
+    if (cnf && cnf.class && cnf.class) return 'class';
   }
 
   if (text.match(/^\s*stateDiagram-v2/)) {

dist/mermaid.js

@@ -51188,6 +51188,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _createLabel__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./createLabel */ "./src/dagre-wrapper/createLabel.js");
 /* harmony import */ var _shapes_note__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./shapes/note */ "./src/dagre-wrapper/shapes/note.js");
 /* harmony import */ var _diagrams_class_svgDraw__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../diagrams/class/svgDraw */ "./src/diagrams/class/svgDraw.js");
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 
  // eslint-disable-line
 
@@ -51533,9 +51535,10 @@ var rectWithTitle = function rectWithTitle(parent, node) {
 
   var innerLine = shapeSvg.insert('line');
   var label = shapeSvg.insert('g').attr('class', 'label');
-  var text2 = node.labelText.flat();
+  var text2prim = node.labelText.flat ? node.labelText.flat() : node.labelText;
-  _logger__WEBPACK_IMPORTED_MODULE_1__["log"].info('Label text', text2[0]);
+  var text2 = _typeof(text2prim) === 'object' ? text2prim[0] : text2prim;
-  var text = label.node().appendChild(Object(_createLabel__WEBPACK_IMPORTED_MODULE_5__["default"])(text2[0], node.labelStyle, true, true));
+  _logger__WEBPACK_IMPORTED_MODULE_1__["log"].info('Label text', text2);
+  var text = label.node().appendChild(Object(_createLabel__WEBPACK_IMPORTED_MODULE_5__["default"])(text2, node.labelStyle, true, true));
   var bbox;
 
   if (Object(_config__WEBPACK_IMPORTED_MODULE_3__["getConfig"])().flowchart.htmlLabels) {
@@ -51549,7 +51552,7 @@ var rectWithTitle = function rectWithTitle(parent, node) {
   _logger__WEBPACK_IMPORTED_MODULE_1__["log"].info('Text 2', text2);
   var textRows = text2.slice(1, text2.length);
   var titleBox = text.getBBox();
-  var descr = label.node().appendChild(Object(_createLabel__WEBPACK_IMPORTED_MODULE_5__["default"])(textRows.join('<br/>'), node.labelStyle, true, true));
+  var descr = label.node().appendChild(Object(_createLabel__WEBPACK_IMPORTED_MODULE_5__["default"])(textRows.join ? textRows.join('<br/>') : textRows, node.labelStyle, true, true));
 
   if (Object(_config__WEBPACK_IMPORTED_MODULE_3__["getConfig"])().flowchart.htmlLabels) {
     var _div = descr.children[0];
@@ -52352,7 +52355,22 @@ var config = {
      *
      * Default value: true
      */
-    useMaxWidth: true
+    useMaxWidth: true,
+
+    /**
+     * | Parameter | Description | Type | Required | Values|
+     * | --- | --- | --- | --- | --- |
+     * | defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper |
+     *
+     * **Notes:**
+     *
+     * Decides which rendering engine that is to be used for the rendering. Legal values are:
+     * * dagre-d3
+     * * dagre-wrapper - wrapper for dagre implemented in mermaid
+     *
+     * Default value: 'dagre-d3'
+     */
+    defaultRenderer: 'dagre-d3'
   },
 
   /**
@@ -52993,7 +53011,22 @@ var config = {
      *
      * Default value: true
      */
-    useMaxWidth: true
+    useMaxWidth: true,
+
+    /**
+     * | Parameter | Description | Type | Required | Values|
+     * | --- | --- | --- | --- | --- |
+     * | defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper |
+     *
+     * **Notes:**
+     *
+     * Decides which rendering engine that is to be used for the rendering. Legal values are:
+     * * dagre-d3
+     * * dagre-wrapper - wrapper for dagre implemented in mermaid
+     *
+     * Default value: 'dagre-d3'
+     */
+    defaultRenderer: 'dagre-d3'
   },
   git: {
     arrowMarkerAbsolute: false,
@@ -53045,7 +53078,22 @@ var config = {
      *
      * Default value: true
      */
-    useMaxWidth: true
+    useMaxWidth: true,
+
+    /**
+     * | Parameter | Description | Type | Required | Values|
+     * | --- | --- | --- | --- | --- |
+     * | defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper |
+     *
+     * **Notes:**
+     *
+     * Decides which rendering engine that is to be used for the rendering. Legal values are:
+     * * dagre-d3
+     * * dagre-wrapper - wrapper for dagre implemented in mermaid
+     *
+     * Default value: 'dagre-d3'
+     */
+    defaultRenderer: 'dagre-d3'
   },
 
   /**
@@ -69867,7 +69915,7 @@ case 13:return 16;
 break;
 case 14:this.popState();
 break;
-case 15: this.pushState('STATE'); 
+case 15: console.log('Starting STATE');this.pushState('STATE'); 
 break;
 case 16:this.popState();yy_.yytext=yy_.yytext.slice(0,-8).trim(); /*console.warn('Fork Fork: ',yy_.yytext);*/return 23;
 break;
@@ -69877,7 +69925,7 @@ case 18:this.popState();yy_.yytext=yy_.yytext.slice(0,-8).trim();/*console.warn(
 break;
 case 19:this.popState();yy_.yytext=yy_.yytext.slice(0,-8).trim();/*console.warn('Fork Join: ',yy_.yytext);*/return 24;
 break;
-case 20:this.begin("STATE_STRING");
+case 20: console.log('Starting STATE_STRING');this.begin("STATE_STRING");
 break;
 case 21:this.popState();this.pushState('STATE_ID');return "AS";
 break;
@@ -69885,7 +69933,7 @@ case 22:this.popState();/* console.log('STATE_ID', yy_.yytext);*/return "ID";
 break;
 case 23:this.popState();
 break;
-case 24: /*console.log('Long description:', yy_.yytext);*/return "STATE_DESCR";
+case 24: console.log('Long description:', yy_.yytext);return "STATE_DESCR";
 break;
 case 25:/*console.log('COMPOSIT_STATE', yy_.yytext);*/return 17;
 break;
@@ -70747,6 +70795,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _dagre_wrapper_index_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../dagre-wrapper/index.js */ "./src/dagre-wrapper/index.js");
 /* harmony import */ var _logger__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../logger */ "./src/logger.js");
 /* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../utils */ "./src/utils.js");
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 
 
 
@@ -70842,7 +70892,7 @@ var setupNode = function setupNode(g, parent, node, altFlag) {
     var nodeData = {
       labelStyle: '',
       shape: nodeDb[node.id].shape,
-      labelText: nodeDb[node.id].description,
+      labelText: _typeof(nodeDb[node.id].description) === 'object' ? nodeDb[node.id].description[0] : nodeDb[node.id].description,
       classes: nodeDb[node.id].classes,
       //classStr,
       style: '',
@@ -73236,13 +73286,14 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 
 function parse(text) {
   var graphInit = _utils__WEBPACK_IMPORTED_MODULE_44__["default"].detectInit(text);
+  var cnf = _config__WEBPACK_IMPORTED_MODULE_3__["getConfig"]();
 
   if (graphInit) {
     reinitialize(graphInit);
     _logger__WEBPACK_IMPORTED_MODULE_41__["log"].debug('reinit ', graphInit);
   }
 
-  var graphType = _utils__WEBPACK_IMPORTED_MODULE_44__["default"].detectType(text);
+  var graphType = _utils__WEBPACK_IMPORTED_MODULE_44__["default"].detectType(text, cnf);
   var parser;
   _logger__WEBPACK_IMPORTED_MODULE_41__["log"].debug('Type ' + graphType);
 
@@ -73442,7 +73493,7 @@ var render = function render(id, _txt, cb, container) {
   window.txt = txt;
   txt = encodeEntities(txt);
   var element = Object(d3__WEBPACK_IMPORTED_MODULE_0__["select"])('#d' + id).node();
-  var graphType = _utils__WEBPACK_IMPORTED_MODULE_44__["default"].detectType(txt); // insert inline style into svg
+  var graphType = _utils__WEBPACK_IMPORTED_MODULE_44__["default"].detectType(txt, cnf); // insert inline style into svg
 
   var svg = element.firstChild;
   var firstChild = svg.firstChild;
@@ -73722,6 +73773,7 @@ var handleDirective = function handleDirective(p, directive, type) {
 };
 
 function updateRendererConfigs(conf) {
+  // Todo remove, all diagrams should get config on demoand from the config object, no need for this
   _diagrams_git_gitGraphRenderer__WEBPACK_IMPORTED_MODULE_19__["default"].setConf(conf.git);
   _diagrams_flowchart_flowRenderer__WEBPACK_IMPORTED_MODULE_12__["default"].setConf(conf.flowchart);
   _diagrams_flowchart_flowRenderer_v2__WEBPACK_IMPORTED_MODULE_13__["default"].setConf(conf.flowchart);
@@ -75343,7 +75395,7 @@ var detectType = function detectType(text) {
   }
 
   if (text.match(/^\s*classDiagram/)) {
-    return 'class';
+    if (cnf && cnf.class && cnf.class) return 'class';
   }
 
   if (text.match(/^\s*stateDiagram-v2/)) {

docs/Setup.md

@@ -219,6 +219,21 @@ available space if not the absolute space required is used.
 
 Default value: true
 
+### defaultRenderer
+
+| Parameter       | Description | Type    | Required | Values                  |
+| --------------- | ----------- | ------- | -------- | ----------------------- |
+| defaultRenderer | See notes   | boolean | 4        | dagre-d3, dagre-wrapper |
+
+**Notes:**
+
+Decides which rendering engine that is to be used for the rendering. Legal values are:
+
+-   dagre-d3
+-   dagre-wrapper - wrapper for dagre implemented in mermaid
+
+Default value: 'dagre-d3'
+
 ## sequence
 
 The object containing configurations specific for sequence diagrams
@@ -764,6 +779,21 @@ available space if not the absolute space required is used.
 
 Default value: true
 
+## defaultRenderer
+
+| Parameter       | Description | Type    | Required | Values                  |
+| --------------- | ----------- | ------- | -------- | ----------------------- |
+| defaultRenderer | See notes   | boolean | 4        | dagre-d3, dagre-wrapper |
+
+**Notes:**
+
+Decides which rendering engine that is to be used for the rendering. Legal values are:
+
+-   dagre-d3
+-   dagre-wrapper - wrapper for dagre implemented in mermaid
+
+Default value: 'dagre-d3'
+
 ## useMaxWidth
 
 | Parameter   | Description | Type    | Required | Values      |
@@ -790,6 +820,21 @@ available space if not the absolute space required is used.
 
 Default value: true
 
+## defaultRenderer
+
+| Parameter       | Description | Type    | Required | Values                  |
+| --------------- | ----------- | ------- | -------- | ----------------------- |
+| defaultRenderer | See notes   | boolean | 4        | dagre-d3, dagre-wrapper |
+
+**Notes:**
+
+Decides which rendering engine that is to be used for the rendering. Legal values are:
+
+-   dagre-d3
+-   dagre-wrapper - wrapper for dagre implemented in mermaid
+
+Default value: 'dagre-d3'
+
 ## er
 
 The object containing configurations specific for entity relationship diagrams

src/dagre-wrapper/createLabel.js

@@ -85,6 +85,7 @@ function addHtmlLabel(node) {
 
 const createLabel = (_vertexText, style, isTitle, isNode) => {
   let vertexText = _vertexText || '';
+  if (typeof vertexText === 'object') vertexText = vertexText[0];
   if (getConfig().flowchart.htmlLabels) {
     // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
     vertexText = vertexText.replace(/\\n|\n/g, '<br />');

src/dagre-wrapper/index.js

@@ -17,7 +17,7 @@ import { log } from '../logger';
 const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
   log.info('Graph in recursive render: XXX', graphlib.json.write(graph), parentCluster);
   const dir = graph.graph().rankdir;
-  log.warn('Dir in recursive render - dir:', dir);
+  log.trace('Dir in recursive render - dir:', dir);
 
   const elem = _elem.insert('g').attr('class', 'root'); // eslint-disable-line
   if (!graph.nodes()) {
@@ -26,7 +26,7 @@ const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
     log.info('Recursive render XXX', graph.nodes());
   }
   if (graph.edges().length > 0) {
-    log.info('Recursive edges', graph.edge(graph.edges()[0]));
+    log.trace('Recursive edges', graph.edge(graph.edges()[0]));
   }
   const clusters = elem.insert('g').attr('class', 'clusters'); // eslint-disable-line
   const edgePaths = elem.insert('g').attr('class', 'edgePaths');
@@ -43,7 +43,7 @@ const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
       log.info('Setting data for cluster XXX (', v, ') ', data, parentCluster);
       graph.setNode(parentCluster.id, data);
       if (!graph.parent(v)) {
-        log.warn('Setting parent', v, parentCluster.id);
+        log.trace('Setting parent', v, parentCluster.id);
         graph.setParent(v, parentCluster.id, data);
       }
     }

src/dagre-wrapper/mermaid-graphlib.js

@@ -17,7 +17,7 @@ export const clear = () => {
 const isDecendant = (id, ancenstorId) => {
   // if (id === ancenstorId) return true;
 
-  log.debug(
+  log.trace(
     'In isDecendant',
     ancenstorId,
     ' ',
@@ -358,13 +358,20 @@ export const extractor = (graph, depth) => {
       );
 
       const graphSettings = graph.graph();
+      let dir = graphSettings.rankdir === 'TB' ? 'LR' : 'TB';
+      if (clusterDb[node]) {
+        if (clusterDb[node].clusterData && clusterDb[node].clusterData.dir) {
+          dir = clusterDb[node].clusterData.dir;
+          log.warn('Fixing dir', clusterDb[node].clusterData.dir, dir);
+        }
+      }
 
       const clusterGraph = new graphlib.Graph({
         multigraph: true,
         compound: true
       })
         .setGraph({
-          rankdir: graphSettings.rankdir === 'TB' ? 'LR' : 'TB', // Todo: set proper spacing
+          rankdir: dir, // Todo: set proper spacing
           nodesep: 50,
           ranksep: 50,
           marginx: 8,

src/dagre-wrapper/nodes.js

@@ -319,12 +319,18 @@ const rectWithTitle = (parent, node) => {
 
   const label = shapeSvg.insert('g').attr('class', 'label');
 
-  const text2prim = node.labelText.flat ? node.labelText.flat() : node.labelText;
+  const text2 = node.labelText.flat ? node.labelText.flat() : node.labelText;
-  const text2 = typeof text2prim === 'object' ? text2prim[0] : text2prim;
+  // const text2 = typeof text2prim === 'object' ? text2prim[0] : text2prim;
 
-  log.info('Label text', text2);
+  let title = '';
+  if (typeof text2 === 'object') {
+    title = text2[0];
+  } else {
+    title = text2;
+  }
+  log.info('Label text abc79', title, text2, typeof text2 === 'object');
 
-  const text = label.node().appendChild(createLabel(text2, node.labelStyle, true, true));
+  const text = label.node().appendChild(createLabel(title, node.labelStyle, true, true));
   let bbox;
   if (getConfig().flowchart.htmlLabels) {
     const div = text.children[0];

src/defaultConfig.js

@@ -226,7 +226,22 @@ const config = {
      *
      * Default value: true
      */
-    useMaxWidth: true
+    useMaxWidth: true,
+
+    /**
+     * | Parameter | Description | Type | Required | Values|
+     * | --- | --- | --- | --- | --- |
+     * | defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper |
+     *
+     * **Notes:**
+     *
+     * Decides which rendering engine that is to be used for the rendering. Legal values are:
+     * * dagre-d3
+     * * dagre-wrapper - wrapper for dagre implemented in mermaid
+     *
+     * Default value: 'dagre-d3'
+     */
+    defaultRenderer: 'dagre-d3'
   },
 
   /**
@@ -871,7 +886,21 @@ top of the chart
      *
      * Default value: true
      */
-    useMaxWidth: true
+    useMaxWidth: true,
+    /**
+     * | Parameter | Description | Type | Required | Values|
+     * | --- | --- | --- | --- | --- |
+     * | defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper |
+     *
+     * **Notes:**
+     *
+     * Decides which rendering engine that is to be used for the rendering. Legal values are:
+     * * dagre-d3
+     * * dagre-wrapper - wrapper for dagre implemented in mermaid
+     *
+     * Default value: 'dagre-d3'
+     */
+    defaultRenderer: 'dagre-d3'
   },
   git: {
     arrowMarkerAbsolute: false,
@@ -923,7 +952,21 @@ top of the chart
      *
      * Default value: true
      */
-    useMaxWidth: true
+    useMaxWidth: true,
+    /**
+     * | Parameter | Description | Type | Required | Values|
+     * | --- | --- | --- | --- | --- |
+     * | defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper |
+     *
+     * **Notes:**
+     *
+     * Decides which rendering engine that is to be used for the rendering. Legal values are:
+     * * dagre-d3
+     * * dagre-wrapper - wrapper for dagre implemented in mermaid
+     *
+     * Default value: 'dagre-d3'
+     */
+    defaultRenderer: 'dagre-d3'
   },
 
   /**

src/diagrams/state/stateRenderer-v2.js

@@ -96,13 +96,14 @@ const setupNode = (g, parent, node, altFlag) => {
     const nodeData = {
       labelStyle: '',
       shape: nodeDb[node.id].shape,
-      labelText:
+      labelText: nodeDb[node.id].description,
-        typeof nodeDb[node.id].description === 'object'
+      // typeof nodeDb[node.id].description === 'object'
-          ? nodeDb[node.id].description[0]
+      //   ? nodeDb[node.id].description[0]
-          : nodeDb[node.id].description,
+      //   : nodeDb[node.id].description,
       classes: nodeDb[node.id].classes, //classStr,
       style: '', //styles.style,
       id: node.id,
+      dir: altFlag ? 'LR' : 'TB',
       domId: 'state-' + node.id + '-' + cnt,
       type: nodeDb[node.id].type,
       padding: 15 //getConfig().flowchart.padding
@@ -167,12 +168,12 @@ const setupNode = (g, parent, node, altFlag) => {
 
   if (parent) {
     if (parent.id !== 'root') {
-      log.info('Setting node ', node.id, ' to be child of its parent ', parent.id);
+      log.trace('Setting node ', node.id, ' to be child of its parent ', parent.id);
       g.setParent(node.id, parent.id);
     }
   }
   if (node.doc) {
-    log.info('Adding nodes children ');
+    log.trace('Adding nodes children ');
     setupDoc(g, node, node.doc, !altFlag);
   }
 };

src/mermaidAPI.js

@@ -69,12 +69,13 @@ import theme from './themes';
 import utils, { assignWithDepth } from './utils';
 
 function parse(text) {
-  const graphInit = utils.detectInit(text);
+  const cnf = configApi.getConfig();
+  const graphInit = utils.detectInit(text, cnf);
   if (graphInit) {
     reinitialize(graphInit);
     log.debug('reinit ', graphInit);
   }
-  const graphType = utils.detectType(text);
+  const graphType = utils.detectType(text, cnf);
   let parser;
 
   log.debug('Type ' + graphType);
@@ -232,7 +233,7 @@ const render = function(id, _txt, cb, container) {
   // }
   // console.warn('Render fetching config');
 
-  const cnf = configApi.getConfig();
+  let cnf = configApi.getConfig();
   // Check the maximum allowed text size
   if (_txt.length > cnf.maxTextSize) {
     txt = 'graph TB;a[Maximum text size in diagram exceeded];style a fill:#faa';
@@ -274,7 +275,7 @@ const render = function(id, _txt, cb, container) {
   txt = encodeEntities(txt);
 
   const element = select('#d' + id).node();
-  const graphType = utils.detectType(txt);
+  const graphType = utils.detectType(txt, cnf);
 
   // insert inline style into svg
   const svg = element.firstChild;
@@ -560,6 +561,7 @@ const handleDirective = function(p, directive, type) {
 };
 
 function updateRendererConfigs(conf) {
+  // Todo remove, all diagrams should get config on demoand from the config object, no need for this
   gitGraphRenderer.setConf(conf.git);
   flowRenderer.setConf(conf.flowchart);
   flowRendererV2.setConf(conf.flowchart);

src/utils.js

@@ -65,7 +65,7 @@ const anyComment = /\s*%%.*\n/gm;
  * @param {string} text The text defining the graph
  * @returns {object} the json object representing the init passed to mermaid.initialize()
  */
-export const detectInit = function(text) {
+export const detectInit = function(text, cnf) {
   let inits = detectDirective(text, /(?:init\b)|(?:initialize\b)/);
   let results = {};
   if (Array.isArray(inits)) {
@@ -75,7 +75,7 @@ export const detectInit = function(text) {
     results = inits.args;
   }
   if (results) {
-    let type = detectType(text);
+    let type = detectType(text, cnf);
     ['config'].forEach(prop => {
       if (typeof results[prop] !== 'undefined') {
         if (type === 'flowchart-v2') {
@@ -173,7 +173,7 @@ export const detectDirective = function(text, type = null) {
  * @param {string} text The text defining the graph
  * @returns {string} A graph definition key
  */
-export const detectType = function(text) {
+export const detectType = function(text, cnf) {
   text = text.replace(directive, '').replace(anyComment, '\n');
   log.debug('Detecting diagram type based on the text ' + text);
   if (text.match(/^\s*sequenceDiagram/)) {
@@ -187,6 +187,7 @@ export const detectType = function(text) {
     return 'classDiagram';
   }
   if (text.match(/^\s*classDiagram/)) {
+    if (cnf && cnf.class && cnf.class.defaultRenderer === 'dagre-wrapper') return 'classDiagram';
     return 'class';
   }
 
@@ -195,6 +196,7 @@ export const detectType = function(text) {
   }
 
   if (text.match(/^\s*stateDiagram/)) {
+    if (cnf && cnf.class && cnf.state.defaultRenderer === 'dagre-wrapper') return 'stateDiagram';
     return 'state';
   }
 
@@ -223,6 +225,8 @@ export const detectType = function(text) {
   if (text.match(/^\s*requirement/) || text.match(/^\s*requirementDiagram/)) {
     return 'requirement';
   }
+  if (cnf && cnf.flowchart && cnf.flowchart.defaultRenderer === 'dagre-wrapper')
+    return 'flowchart-v2';
 
   return 'flowchart';
 };