Refactored rendering sequence diagrams

Fixed default config clobbering issues
Updated/corrected sequenceDiagram.spec to set the config using mermaidAPI
Enabled freeze on mermaidAPI to protect defaultConfig

cypress/integration/rendering/sequencediagram.spec.js

@@ -493,6 +493,16 @@ context('Sequence diagram', () => {
         {}
       );
     });
+    it('should render with an init directive', () => {
+      imgSnapshotTest(
+`%%{init: { "theme": "dark", 'config': { "fontFamily": "Menlo", "fontSize": 18, "fontWeight": 400, "wrapEnabled": true }}}%%
+          sequenceDiagram
+          Alice->>Bob: Hello Bob, how are you? If you are not available right now, I can leave you a message. Please get back to me as soon as you can!
+          Note left of Alice: Bob thinks
+          Bob->>Alice: Fine!`,
+        {}
+      )
+    });
   });
   context('directives', () => {
       it('should overide config with directive settings', () => {

src/config.js

@@ -6,11 +6,14 @@ export const setConfig = conf => {
 };
 export const getConfig = () => config;
 
+export const reset = conf => {
+  Object.keys(config).forEach(key => delete config[key]);
+  assignWithDepth(config, conf, { clobber: true });
+};
+
 const configApi = {
   setConfig,
-  getConfig
+  getConfig,
-  // get conf() {
+  reset
-  //   return config;
-  // }
 };
 export default configApi;

src/diagrams/sequence/sequenceDb.js

@@ -1,6 +1,5 @@
 import { logger } from '../../logger';
 import mermaidAPI from '../../mermaidAPI';
-import { detectType } from '../../utils';
 
 let prevActor = undefined;
 let actors = {};
@@ -45,7 +44,6 @@ const handleDirective = function(directive) {
   switch (directive.type) {
     case 'init':
     case 'initialize':
-      logger.debug('init/initialize is handled in mermaid/mermaidAPI');
       ['config'].forEach(prop => {
         if (typeof directive.args[prop] !== 'undefined') {
           directive.args.sequence = directive.args[prop];

src/diagrams/sequence/sequenceDiagram.spec.js

@@ -10,26 +10,6 @@ function addConf(conf, key, value) {
   }
   return conf;
 }
-describe('when processing', function() {
-  beforeEach(function() {
-    parser.yy = sequenceDb;
-    parser.yy.clear();
-  });
-  it('should handle long opts', function() {
-    const str = `
-      %%{init: {'config': { 'fontFamily': 'Menlo'}}}%%
-        sequenceDiagram
-        participant A as wrap:Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
-        A->>Bob: Hola
-        Bob-->A: Pasten !
-        `;
-    mermaidAPI.parse(str);
-    renderer.setConf(mermaidAPI.getConfig().sequence);
-    renderer.draw(str, 'tst');
-    const messages = parser.yy.getMessages();
-    expect(messages).toBeTruthy();
-  });
-});
 describe('when parsing a sequenceDiagram', function() {
   beforeEach(function() {
     parser.yy = sequenceDb;
@@ -793,6 +773,7 @@ end`;
 describe('when checking the bounds in a sequenceDiagram', function() {
   let conf;
   beforeEach(function() {
+    mermaidAPI.reset();
     parser.yy = sequenceDb;
     parser.yy.clear();
     conf = {
@@ -807,10 +788,11 @@ describe('when checking the bounds in a sequenceDiagram', function() {
       boxTextMargin: 15,
       noteMargin: 25
     };
-    renderer.setConf(conf);
+
+    mermaidAPI.initialize({ sequence: conf });
+    renderer.bounds.init();
   });
   it('it should handle a simple bound call', function() {
-    renderer.bounds.init();
 
     renderer.bounds.insert(100, 100, 200, 200);
 
@@ -821,7 +803,6 @@ describe('when checking the bounds in a sequenceDiagram', function() {
     expect(bounds.stopy).toBe(200);
   });
   it('it should handle an expanding bound', function() {
-    renderer.bounds.init();
 
     renderer.bounds.insert(100, 100, 200, 200);
     renderer.bounds.insert(25, 50, 300, 400);
@@ -833,7 +814,6 @@ describe('when checking the bounds in a sequenceDiagram', function() {
     expect(bounds.stopy).toBe(400);
   });
   it('it should handle inserts within the bound without changing the outer bounds', function() {
-    renderer.bounds.init();
 
     renderer.bounds.insert(100, 100, 200, 200);
     renderer.bounds.insert(25, 50, 300, 400);
@@ -846,7 +826,6 @@ describe('when checking the bounds in a sequenceDiagram', function() {
     expect(bounds.stopy).toBe(400);
   });
   it('it should handle a loop without expanding the area', function() {
-    renderer.bounds.init();
 
     renderer.bounds.insert(25, 50, 300, 400);
     renderer.bounds.verticalPos = 150;
@@ -869,7 +848,6 @@ describe('when checking the bounds in a sequenceDiagram', function() {
     expect(bounds.stopy).toBe(400);
   });
   it('it should handle multiple loops withtout expanding the bounds', function() {
-    renderer.bounds.init();
 
     renderer.bounds.insert(100, 100, 1000, 1000);
     renderer.bounds.verticalPos = 200;
@@ -902,7 +880,6 @@ describe('when checking the bounds in a sequenceDiagram', function() {
     expect(bounds.stopy).toBe(1000);
   });
   it('it should handle a loop that expands the area', function() {
-    renderer.bounds.init();
 
     renderer.bounds.insert(100, 100, 200, 200);
     renderer.bounds.verticalPos = 200;
@@ -929,6 +906,7 @@ describe('when checking the bounds in a sequenceDiagram', function() {
 describe('when rendering a sequenceDiagram', function() {
   let conf;
   beforeEach(function() {
+    mermaidAPI.reset();
     parser.yy = sequenceDb;
     parser.yy.clear();
 
@@ -946,18 +924,18 @@ describe('when rendering a sequenceDiagram', function() {
       wrapEnabled: false,
       mirrorActors: false
     };
-    renderer.setConf(conf);
+    mermaidAPI.initialize({ sequence: conf });
     renderer.bounds.init();
   });
   ['tspan', 'fo', 'old', undefined].forEach(function(textPlacement) {
     it(`
 it should handle one actor, when textPlacement is ${textPlacement}`, function() {
-      renderer.setConf(addConf(conf, 'textPlacement', textPlacement));
-      renderer.bounds.init();
       const str = `
 sequenceDiagram
 participant Alice`;
 
+      mermaidAPI.initialize(addConf(conf, 'textPlacement', textPlacement));
+      renderer.bounds.init();
       parser.parse(str);
       renderer.draw(str, 'tst');
 
@@ -969,8 +947,6 @@ participant Alice`;
     });
   });
   it('it should handle same actor with different whitespace properly', function() {
-    renderer.bounds.init();
-
     const str = `
 sequenceDiagram
 participant Alice
@@ -984,7 +960,6 @@ participant Alice
     expect(Object.keys(actors)).toEqual(['Alice']);
   });
   it('it should handle one actor and a centered note', function() {
-    renderer.bounds.init();
     const str = `
 sequenceDiagram
 participant Alice
@@ -1002,7 +977,6 @@ Note over Alice: Alice thinks
     expect(bounds.stopy).toBe(conf.height + conf.boxMargin + 2 * conf.noteMargin + 10);
   });
   it('it should handle one actor and a note to the left', function() {
-    renderer.bounds.init();
     const str = `
 sequenceDiagram
 participant Alice
@@ -1019,7 +993,6 @@ Note left of Alice: Alice thinks`;
     expect(bounds.stopy).toBe(conf.height + conf.boxMargin + 2 * conf.noteMargin + 10);
   });
   it('it should handle one actor and a note to the right', function() {
-    renderer.bounds.init();
     const str = `
 sequenceDiagram
 participant Alice
@@ -1036,7 +1009,6 @@ Note right of Alice: Alice thinks`;
     expect(bounds.stopy).toBe(conf.height + conf.boxMargin + 2 * conf.noteMargin + 10);
   });
   it('it should handle two actors', function() {
-    renderer.bounds.init();
     const str = `
 sequenceDiagram
 Alice->Bob: Hello Bob, how are you?`;
@@ -1048,16 +1020,15 @@ Alice->Bob: Hello Bob, how are you?`;
     expect(bounds.startx).toBe(0);
     expect(bounds.starty).toBe(0);
     expect(bounds.stopx).toBe(conf.width * 2 + conf.actorMargin);
-    expect(bounds.stopy).toBe(0 + conf.messageMargin + conf.height);
+    expect(bounds.stopy).toBe(conf.messageMargin + conf.height);
   });
   it('it should handle two actors with init directive', function() {
-    renderer.bounds.init();
     const str = `
 %%{init: {'logLevel': 0}}%%
 sequenceDiagram
 Alice->Bob: Hello Bob, how are you?`;
 
-    mermaidAPI.parse(str);
+    parser.parse(str);
     renderer.draw(str, 'tst');
 
     const bounds = renderer.bounds.getBounds();
@@ -1066,10 +1037,9 @@ Alice->Bob: Hello Bob, how are you?`;
     expect(bounds.startx).toBe(0);
     expect(bounds.starty).toBe(0);
     expect(bounds.stopx).toBe(conf.width * 2 + conf.actorMargin);
-    expect(bounds.stopy).toBe(conf.messageMargin + conf.height);
+    expect(bounds.stopy).toBe(conf.height + conf.messageMargin + (conf.mirrorActors ?  2 * conf.boxMargin + conf.height : 0));
   });
   it('it should handle two actors with init directive with multiline directive', function() {
-    renderer.bounds.init();
     const str = `
 %%{init: { 'logLevel': 0}}%%
 sequenceDiagram
@@ -1081,16 +1051,18 @@ Alice->Bob: Hello Bob, how are you?`;
     parser.parse(str);
     renderer.draw(str, 'tst');
 
+    const msgs = parser.yy.getMessages();
     const bounds = renderer.bounds.getBounds();
     const mermaid = mermaidAPI.getConfig();
     expect(mermaid.logLevel).toBe(0);
     expect(bounds.startx).toBe(0);
     expect(bounds.starty).toBe(0);
     expect(bounds.stopx).toBe(conf.width * 2 + conf.actorMargin);
-    expect(bounds.stopy).toBe(0 + conf.messageMargin + conf.height);
+    expect(bounds.stopy).toBe(conf.messageMargin + conf.height);
+    expect(msgs.every(v => v.wrap)).toBe(true);
+
   });
   it('it should handle two actors and two centered shared notes', function() {
-    renderer.bounds.init();
     const str = `
 sequenceDiagram
 Alice->Bob: Hello Bob, how are you?
@@ -1110,7 +1082,6 @@ Note over Bob,Alice: Looks back
     );
   });
   it('it should draw two actors and two messages', function() {
-    renderer.bounds.init();
     const str = `
 sequenceDiagram
 Alice->Bob: Hello Bob, how are you?
@@ -1126,7 +1097,6 @@ Bob->Alice: Fine!`;
     expect(bounds.stopy).toBe(0 + 2 * conf.messageMargin + conf.height);
   });
   it('it should draw two actors notes to the right', function() {
-    renderer.bounds.init();
     const str = `
 sequenceDiagram
 Alice->Bob: Hello Bob, how are you?
@@ -1148,7 +1118,6 @@ Bob->Alice: Fine!`;
     );
   });
   it('it should draw two actors notes to the left', function() {
-    renderer.bounds.init();
     const str = `
 sequenceDiagram
 Alice->Bob: Hello Bob, how are you?
@@ -1168,7 +1137,6 @@ Bob->Alice: Fine!`;
     );
   });
   it('it should draw two actors notes to the left with text wrapped (inline)', function() {
-    renderer.bounds.init();
     const str = `
 sequenceDiagram
 Alice->>Bob:wrap: Hello Bob, how are you? If you are not available right now, I can leave you a message. Please get back to me as soon as you can!
@@ -1190,7 +1158,6 @@ Bob->>Alice: Fine!`;
     );
   });
   it('it should draw two actors notes to the left with text wrapped (directive)', function() {
-    renderer.bounds.init();
     const str = `
 %%{init: { 'theme': 'dark' } }%%
 sequenceDiagram
@@ -1216,7 +1183,6 @@ Bob->>Alice: Fine!`;
     );
   });
   it('it should draw two actors notes to the left with text wrapped and the init directive sets the theme to dark', function() {
-    renderer.bounds.init();
     const str = `
 %%{init:{'theme':'dark'}}%%
 sequenceDiagram
@@ -1224,6 +1190,7 @@ sequenceDiagram
 Alice->>Bob: Hello Bob, how are you? If you are not available right now, I can leave you a message. Please get back to me as soon as you can!
 Note left of Alice: Bob thinks
 Bob->>Alice: Fine!`;
+
     parser.parse(str);
     renderer.draw(str, 'tst');
 
@@ -1240,18 +1207,16 @@ Bob->>Alice: Fine!`;
       2 * conf.messageMargin + conf.height + conf.boxMargin + 10 + 2 * conf.noteMargin
     );
   });
-  it('it should draw two actors notes to the left with text wrapped and the init directive sets the theme to dark and fontFamily to Menlo, fontSize to 18, and fontWeight to 800', function() {
+  it('it should draw two actors, notes to the left with text wrapped and the init directive sets the theme to dark and fontFamily to Menlo, fontSize to 18, and fontWeight to 800', function() {
-    renderer.bounds.init();
     const str = `
 %%{init: { "theme": "dark", 'config': { "fontFamily": "Menlo", "fontSize": 18, "fontWeight": 400, "wrapEnabled": true }}}%%
 sequenceDiagram
 Alice->>Bob: Hello Bob, how are you? If you are not available right now, I can leave you a message. Please get back to me as soon as you can!
 Note left of Alice: Bob thinks
 Bob->>Alice: Fine!`;
-    mermaidAPI.parse(str);
+
-    renderer.setConf(mermaidAPI.getConfig().sequence);
-    parser.yy.clear();
     parser.parse(str);
+    // renderer.setConf(mermaidAPI.getConfig().sequence);
     renderer.draw(str, 'tst');
 
     const bounds = renderer.bounds.getBounds();
@@ -1271,13 +1236,13 @@ Bob->>Alice: Fine!`;
     );
   });
   it('it should draw two loops', function() {
-    renderer.bounds.init();
     const str = `
 sequenceDiagram
 Alice->Bob: Hello Bob, how are you?
 loop Cheers
 Bob->Alice: Fine!
 end`;
+
     parser.parse(str);
     renderer.draw(str, 'tst');
 
@@ -1291,7 +1256,6 @@ end`;
     );
   });
   it('it should draw background rect', function() {
-    renderer.bounds.init();
     const str = `
       sequenceDiagram
         Alice->Bob: Hello Bob, are you alright?
@@ -1313,6 +1277,7 @@ end`;
 describe('when rendering a sequenceDiagram with actor mirror activated', function() {
   let conf;
   beforeEach(function() {
+    mermaidAPI.reset();
     parser.yy = sequenceDb;
     parser.yy.clear();
 
@@ -1332,11 +1297,12 @@ describe('when rendering a sequenceDiagram with actor mirror activated', functio
       // Prolongs the edge of the diagram downwards
       bottomMarginAdj: 1
     };
-    renderer.setConf(conf);
+    mermaidAPI.initialize({ sequence: conf });
+    renderer.bounds.init();
   });
   ['tspan', 'fo', 'old', undefined].forEach(function(textPlacement) {
     it('it should handle one actor, when textPlacement is' + textPlacement, function() {
-      renderer.setConf(addConf(conf, 'textPlacement', textPlacement));
+      mermaidAPI.initialize(addConf(conf, 'textPlacement', textPlacement));
       renderer.bounds.init();
       const str = `
 sequenceDiagram
@@ -1357,6 +1323,7 @@ participant Alice`;
 describe('when rendering a sequenceDiagram with directives', function() {
   let conf;
   beforeEach(function() {
+    mermaidAPI.reset();
     parser.yy = sequenceDb;
     parser.yy.clear();
     conf = {
@@ -1371,11 +1338,11 @@ describe('when rendering a sequenceDiagram with directives', function() {
       boxTextMargin: 15,
       noteMargin: 25
     };
-    renderer.setConf(conf);
+    mermaidAPI.initialize({ sequence: conf });
+    renderer.bounds.init();
   });
 
   it('it should handle one actor, when theme is dark and logLevel is 1 DX1', function() {
-    renderer.bounds.init();
     const str = `
 %%{init: { "theme": "dark", "logLevel": 1 } }%%
 sequenceDiagram
@@ -1396,7 +1363,6 @@ participant Alice
     expect(bounds.stopy).toBe(2 * conf.height + 2 * conf.boxMargin);
   });
   it('it should handle one actor, when logLevel is 3', function() {
-    renderer.bounds.init();
     const str = `
 %%{initialize: { "logLevel": 3 }}%%
 sequenceDiagram

src/diagrams/sequence/sequenceRenderer.js

@@ -4,7 +4,7 @@ import { logger } from '../../logger';
 import { parser } from './parser/sequenceDiagram';
 import common from '../common/common';
 import sequenceDb from './sequenceDb';
-import utils from '../../utils';
+import utils, { assignWithDepth } from '../../utils';
 
 parser.yy = sequenceDb;
 
@@ -436,7 +436,7 @@ export const drawActors = function(diagram, actors, actorKeys, verticalPos) {
     const actor = actors[actorKeys[i]];
 
     // Add some rendering data to the object
-    actor.width = actor.width || calculateActorWidth(actor);
+    actor.width = typeof actor.width === 'undefined' ? calculateActorWidth(actor) : actor.width;
     actor.height = conf.height;
     actor.margin = conf.actorMargin;
 
@@ -456,26 +456,16 @@ export const drawActors = function(diagram, actors, actorKeys, verticalPos) {
 };
 
 export const setConf = function(cnf) {
-  const keys = Object.keys(cnf);
+  assignWithDepth(conf, cnf);
-
-  keys.forEach(function(key) {
-    conf[key] = cnf[key];
-  });
 
   if (cnf.fontFamily) {
     conf.actorFontFamily = conf.noteFontFamily = conf.messageFontFamily = cnf.fontFamily;
-  } else {
-    conf.fontFamily = conf.messageFontFamily;
   }
   if (cnf.fontSize) {
     conf.actorFontSize = conf.noteFontSize = conf.messageFontSize = cnf.fontSize;
-  } else {
-    conf.fontSize = conf.messageFontSize;
   }
   if (cnf.fontWeight) {
     conf.actorFontWeight = conf.noteFontWeight = conf.messageFontWeight = cnf.fontWeight;
-  } else {
-    conf.fontWeight = conf.messageFontWeight;
   }
 };
 
@@ -536,23 +526,18 @@ function adjustLoopHeightForWrap(loopWidths, msg, preMargin, postMargin, addLoop
       Math.round((3 * conf.fontSize) / 4) < 10
         ? conf.fontSize
         : Math.round((3 * conf.fontSize) / 4);
+    let textConf = {
+      fontSize: minSize,
+      fontFamily: conf.messageFontFamily,
+      fontWeight: conf.messageFontWeight,
+      margin: conf.wrapPadding
+    };
     msg.message = msg.message
-      ? utils.wrapLabel(`[${msg.message}]`, loopWidth, {
+      ? utils.wrapLabel(`[${msg.message}]`, loopWidth, textConf)
-          fontSize: minSize,
-          fontFamily: conf.fontFamily,
-          fontWeight: conf.fontWeight,
-          margin: conf.wrapPadding
-        })
       : msg.message;
     heightAdjust = Math.max(
       0,
-      utils.calculateTextHeight(msg.message, {
+      utils.calculateTextHeight(msg.message, textConf) - (preMargin + postMargin)
-        fontSize: minSize,
-        fontFamily: conf.fontFamily,
-        fontWeight: conf.fontWeight,
-        margin: conf.wrapPadding
-      }) -
-        (preMargin + postMargin)
     );
   }
   addLoopFn(msg);
@@ -616,6 +601,7 @@ export const draw = function(text, id) {
     let loopData,
       noteWidth,
       textWidth,
+      textConf,
       shouldWrap = msg.wrap && msg.message && !common.lineBreakRegex.test(msg.message);
 
     switch (msg.type) {
@@ -624,12 +610,18 @@ export const draw = function(text, id) {
 
         startx = actors[msg.from].x;
         stopx = actors[msg.to].x;
-        textWidth = utils.calculateTextWidth(msg.message, conf);
+        textConf = {
+          fontSize: conf.noteFontSize,
+          fontFamily: conf.noteFontFamily,
+          fontWeight: conf.noteFontWeight,
+          margin: conf.wrapPadding
+        };
+        textWidth = utils.calculateTextWidth(msg.message, textConf);
         noteWidth = shouldWrap ? conf.width : Math.max(conf.width, textWidth);
 
         if (msg.placement === parser.yy.PLACEMENT.RIGHTOF) {
           if (shouldWrap) {
-            msg.message = utils.wrapLabel(msg.message, noteWidth, conf);
+            msg.message = utils.wrapLabel(msg.message, noteWidth, textConf);
           }
           drawNote(
             diagram,
@@ -640,7 +632,7 @@ export const draw = function(text, id) {
           );
         } else if (msg.placement === parser.yy.PLACEMENT.LEFTOF) {
           if (shouldWrap) {
-            msg.message = utils.wrapLabel(msg.message, noteWidth, conf);
+            msg.message = utils.wrapLabel(msg.message, noteWidth, textConf);
           }
           drawNote(
             diagram,
@@ -652,7 +644,7 @@ export const draw = function(text, id) {
         } else if (msg.to === msg.from) {
           // Single-actor over
           if (shouldWrap) {
-            msg.message = utils.wrapLabel(msg.message, noteWidth, conf);
+            msg.message = utils.wrapLabel(msg.message, noteWidth, textConf);
           }
           drawNote(
             diagram,
@@ -666,7 +658,7 @@ export const draw = function(text, id) {
           forceWidth = Math.abs(startx - stopx) + conf.actorMargin / 2;
           if (shouldWrap) {
             noteWidth = forceWidth;
-            msg.message = utils.wrapLabel(msg.message, noteWidth, conf);
+            msg.message = utils.wrapLabel(msg.message, noteWidth, textConf);
           } else {
             noteWidth = Math.max(forceWidth, textWidth - 2 * conf.noteMargin);
           }
@@ -769,6 +761,12 @@ export const draw = function(text, id) {
           const toIdx = fromBounds[0] < toBounds[0] ? 0 : 1;
           startx = fromBounds[fromIdx];
           stopx = toBounds[toIdx];
+          textConf = {
+            fontSize: conf.messageFontSize,
+            fontFamily: conf.messageFontFamily,
+            fontWeight: conf.messageFontWeight,
+            margin: conf.wrapPadding
+          };
           if (shouldWrap) {
             msg.message = utils.wrapLabel(
               msg.message,
@@ -776,7 +774,7 @@ export const draw = function(text, id) {
                 Math.abs(stopx - startx) + conf.messageMargin * 2,
                 conf.width + conf.messageMargin * 2
               ),
-              conf
+              textConf
             );
           }
 

src/mermaidAPI.js

@@ -49,6 +49,7 @@ import erRenderer from './diagrams/er/erRenderer';
 import journeyParser from './diagrams/user-journey/parser/journey';
 import journeyDb from './diagrams/user-journey/journeyDb';
 import journeyRenderer from './diagrams/user-journey/journeyRenderer';
+import configApi from './config';
 
 const themes = {};
 for (const themeName of ['default', 'forest', 'dark', 'neutral']) {
@@ -556,11 +557,12 @@ const config = {
     fontSize: 12
   }
 };
+export const defaultConfig = Object.freeze(assignWithDepth({}, config));
 config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
 config.git.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
 
 setLogLevel(config.logLevel);
-setConfig(config);
+configApi.reset(config);
 
 function parse(text) {
   const graphInit = utils.detectInit(text);
@@ -635,6 +637,7 @@ function parse(text) {
   };
 
   parser.parse(text);
+  return parser;
 }
 
 export const encodeEntities = function(text) {
@@ -702,7 +705,6 @@ export const decodeEntities = function(text) {
  */
 const render = function(id, _txt, cb, container) {
   const cnf = getConfig();
-  console.warn(cnf);
   // Check the maximum allowed text size
   let txt = _txt;
   if (_txt.length > cnf.maxTextSize) {
@@ -930,21 +932,36 @@ const render = function(id, _txt, cb, container) {
   return svgCode;
 };
 
-let firstInit = true;
+function updateRendererConfigs(conf) {
+  gitGraphRenderer.setConf(conf.git);
+  flowRenderer.setConf(conf.flowchart);
+  flowRendererV2.setConf(conf.flowchart);
+  if (typeof conf['sequenceDiagram'] !== 'undefined') {
+    sequenceRenderer.setConf(assignWithDepth(conf.sequence, conf['sequenceDiagram']));
+  }
+  sequenceRenderer.setConf(conf.sequence);
+  ganttRenderer.setConf(conf.gantt);
+  classRenderer.setConf(conf.class);
+  stateRenderer.setConf(conf.state);
+  stateRendererV2.setConf(conf.state);
+  infoRenderer.setConf(conf.class);
+  pieRenderer.setConf(conf.class);
+  erRenderer.setConf(conf.er);
+  journeyRenderer.setConf(conf.journey);
+  errorRenderer.setConf(conf.class);
+}
+
 function initialize(options) {
-  console.log('mermaidAPI.initialize');
+  console.log(`mermaidAPI.initialize: v${pkg.version}`);
   // Set default options
   if (typeof options === 'object') {
-    if (firstInit) {
+    assignWithDepth(config, options);
-      firstInit = false;
+    updateRendererConfigs(config);
-      setConfig(config);
-    }
-    setConfig(options);
   }
-  assignWithDepth(config, getConfig());
+  setConfig(config);
-  console.warn(`Initializing mermaidAPI: v${pkg.version} theme: ${config.theme}`);
 
-  setLogLevel(getConfig().logLevel);
+  setLogLevel(config.logLevel);
+  logger.debug('mermaidAPI.initialize: ', config);
 }
 
 // function getConfig () {
@@ -952,7 +969,7 @@ function initialize(options) {
 //   return config
 // }
 
-const mermaidAPI = {
+const mermaidAPI = Object.freeze({
   render,
   parse,
   initialize,
@@ -960,9 +977,12 @@ const mermaidAPI = {
   setConfig,
   reset: () => {
     // console.warn('reset');
-    firstInit = true;
+    configApi.reset(defaultConfig);
-  }
+    assignWithDepth(config, defaultConfig, { clobber: true });
-};
+    updateRendererConfigs(config);
+  },
+  defaultConfig
+});
 
 export default mermaidAPI;
 /**

src/mermaidAPI.spec.js

@@ -1,10 +1,12 @@
 /* eslint-env jasmine */
 import mermaidAPI from './mermaidAPI';
+import { assignWithDepth } from './utils';
 
 describe('when using mermaidAPI and ', function() {
   describe('doing initialize ', function() {
     beforeEach(function() {
       document.body.innerHTML = '';
+      mermaidAPI.reset();
     });
 
     it('should copy a literal into the configuration', function() {
@@ -38,6 +40,52 @@ describe('when using mermaidAPI and ', function() {
       expect(config.testObject.test2).toBe(false);
       expect(config.testObject.test3).toBe(true);
     });
+    it('should reset mermaid config to global defaults', function() {
+      let config = {
+        logLevel: 0
+      };
+      mermaidAPI.initialize(config);
+      expect(mermaidAPI.getConfig().logLevel).toBe(0);
+      mermaidAPI.reset();
+      expect(mermaidAPI.getConfig()).toEqual(mermaidAPI.defaultConfig);
+    });
+    it('should prevent clobbering global defaults (direct)', function() {
+      let config = assignWithDepth({}, mermaidAPI.defaultConfig);
+      assignWithDepth(config, { logLevel: 0 });
+
+      let error = { message: '' };
+      try {
+        mermaidAPI['defaultConfig'] = config;
+      } catch(e) {
+        error = e;
+      }
+      expect(error.message).toBe('Cannot assign to read only property \'defaultConfig\' of object \'#<Object>\'');
+      expect(mermaidAPI.defaultConfig['logLevel']).toBe(5);
+    });
+    it('should prevent changes to global defaults (direct)', function() {
+      let error = { message: '' };
+      try {
+        mermaidAPI.defaultConfig.logLevel = 0;
+      } catch(e) {
+        error = e;
+      }
+      expect(error.message).toBe('Cannot assign to read only property \'logLevel\' of object \'#<Object>\'');
+      expect(mermaidAPI.defaultConfig['logLevel']).toBe(5);
+    });
+    it('should prevent sneaky changes to global defaults (assignWithDepth)', function() {
+      let config = {
+        logLevel: 0
+      };
+      let error = { message: '' };
+      try {
+        assignWithDepth(mermaidAPI.defaultConfig, config);
+      } catch(e) {
+        error = e;
+      }
+      expect(error.message).toBe('Cannot assign to read only property \'logLevel\' of object \'#<Object>\'');
+      expect(mermaidAPI.defaultConfig['logLevel']).toBe(5);
+    });
+
   });
   describe('checking validity of input ', function() {
     it('it should throw for an invalid definiton', function() {

src/utils.js

@@ -613,7 +613,7 @@ export const calculateTextDimensions = function(text, config) {
   // We don't want to leak DOM elements - if a removal operation isn't available
   // for any reason, do not continue.
   if (!body.remove) {
-    return 0;
+    return { width: 0, height: 0 };
   }
 
   const g = body.append('svg');