#2029 Adding option to configure default renderer

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/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';
 };