#1542 Making sure config and directives works for overriding theme variables using initialize call or directives + tests

.eslintrc.json

@@ -4,6 +4,7 @@
     "es6": true,
     "node": true
   },
+  "parser": "babel-eslint",
   "parserOptions": {
       "ecmaFeatures": {
           "experimentalObjectRestSpread": true,

cypress/integration/rendering/conf-and-directives.spec.js

@@ -0,0 +1,141 @@
+/* eslint-env jest */
+import { imgSnapshotTest } from '../../helpers/util.js';
+
+describe('Configuration and directives - nodes should be light blue', () => {
+    it('No config - use default', () => {
+      imgSnapshotTest(
+        `
+      graph TD
+          A(Default) --> B[/Another/]
+          A --> C[End]
+          subgraph section
+            B
+            C
+          end
+        `,
+        {}
+      );
+      cy.get('svg');
+    });
+    it('Settigns from intitialize - nodes should be green', () => {
+      imgSnapshotTest(
+        `
+graph TD
+          A(Forest) --> B[/Another/]
+          A --> C[End]
+          subgraph section
+            B
+            C
+          end          `,
+        {theme:'forest'}
+      );
+      cy.get('svg');
+    });
+    it('Settings from initialize overriding themeVariable - nodes shold be red', () => {
+      imgSnapshotTest(
+        `
+
+
+        %%{init: { 'theme': 'base', 'themeVariables':{ 'primaryColor': '#ff0000'}}}%%
+graph TD
+          A(Start) --> B[/Another/]
+          A[/Another/] --> C[End]
+          subgraph section
+            B
+            C
+          end
+        `,
+        {theme:'base', themeVariables:{ primaryColor: '#ff0000'}, logLevel: 0}
+      );
+      cy.get('svg');
+    });
+    it('Settings from directive - nodes should be grey', () => {
+      imgSnapshotTest(
+        `
+        %%{init: { 'logLevel': 0, 'theme': 'neutral'} }%%
+graph TD
+          A(Start) --> B[/Another/]
+          A[/Another/] --> C[End]
+          subgraph section
+            B
+            C
+          end
+        `,
+        {}
+      );
+      cy.get('svg');
+    });
+
+    it('Settings from directive overriding theme variable - nodes should be red', () => {
+      imgSnapshotTest(
+        `
+          %%{init: {'theme': 'base', 'themeVariables':{ 'primaryColor': '#ff0000'}}}%%
+graph TD
+          A(Start) --> B[/Another/]
+          A[/Another/] --> C[End]
+          subgraph section
+            B
+            C
+          end
+        `,
+        {}
+      );
+      cy.get('svg');
+  });
+    it('Settings from initialize and directive - nodes should be grey', () => {
+      imgSnapshotTest(
+        `
+      %%{init: { 'logLevel': 0, 'theme': 'neutral'} }%%
+graph TD
+          A(Start) --> B[/Another/]
+          A[/Another/] --> C[End]
+          subgraph section
+            B
+            C
+          end
+        `,
+        {theme:'forest'}
+      );
+      cy.get('svg');
+    });
+    it('Theme from initialize, directive overriding theme variable - nodes should be red', () => {
+      imgSnapshotTest(
+        `
+      %%{init: {'theme': 'base', 'themeVariables':{ 'primaryColor': '#ff0000'}}}%%
+graph TD
+          A(Start) --> B[/Another/]
+          A[/Another/] --> C[End]
+          subgraph section
+            B
+            C
+          end
+        `,
+        {theme:'base'}
+      );
+      cy.get('svg');
+    });
+    it('Theme variable from initialize, theme from directive - nodes should be red', () => {
+      imgSnapshotTest(
+        `
+      %%{init: { 'logLevel': 0, 'theme': 'base'} }%%
+graph TD
+          A(Start) --> B[/Another/]
+          A[/Another/] --> C[End]
+          subgraph section
+            B
+            C
+          end
+        `,
+        {themeVariables:{primaryColor: '#ff0000'}}
+      );
+      cy.get('svg');
+    });
+    describe('when rendering several diagrams', () => {
+      it('diagrams should not taint later diagrams', () => {
+        const url = 'http://localhost:9000/theme-directives.html';
+        cy.visit(url);
+        cy.get('svg');
+        cy.percySnapshot();
+      });
+    });
+  });

cypress/platform/current.html

@@ -33,12 +33,12 @@ flowchart BT
     c1 --apa apa apa--> b1
     two --> c2
       </div>
-      <div class="mermaid" style="width: 50%; height: 200px;">
+      <div class="mermaid2" style="width: 50%; height: 200px;">
 sequenceDiagram
    Alice->>Bob:Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
    Bob->>Alice: I'm short though
       </div>
-      <div class="mermaid" style="width: 50%; height: 200px;">
+      <div class="mermaid2" style="width: 50%; height: 200px;">
         %%{init: {'securityLevel': 'loose'}}%%
       graph TD
         A[Christmas] -->|Get money| B(Go shopping)
@@ -75,11 +75,28 @@ stateDiagram-v2
       </div>
       </div>
       <div class="mermaid" style="width: 50%; height: 20%;">
+        %%{init: {'theme': 'base', 'themeVariables':{ 'primaryColor': '#ff0000'}}}%%
 
-        classDiagram
+        graph TB
-    Customer "1" --> "*" Ticket
+        subgraph apa
-    Student "1" --> "1..*" Course
+          a --> A %% comment
-    Galaxy --> "many" Star : Contains
+          a --> a{apa} %% comment
+        end
+      </div>
+      <div class="mermaid2" style="width: 50%; height: 20%;">
+graph TD
+          A(Start) --> B[/Another/]
+          A[/Another/] --> C[End]
+          subgraph section
+            B
+            C
+          end
+      </div>
+      <div class="mermaid" style="width: 50%; height: 20%;">
+sequenceDiagram
+Alice->Bob: Hello Bob, how are you?
+Note over Alice,Bob: Looks
+Note over Bob,Alice: Looks back
       </div>
 
   <script src="./mermaid.js"></script>
@@ -88,7 +105,8 @@ stateDiagram-v2
           // console.error('Mermaid error: ', err);
         };
       mermaid.initialize({
-        // theme: 'dark',
+        theme: 'base',
+        // themeVariables:{primaryColor: '#ff0000'},
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,

cypress/platform/showcase_dark.html

@@ -40,7 +40,7 @@
     <h1>Showcases of diagrams</h1>
     <div class="flex flex-wrap">
       <div class="mermaid width height">
-         %%{init: {'theme': 'dark'}}%%
+        %%{init: {'theme': 'base', 'themeVariables':{'primaryColor': '#ff0000'}}%%
         graph TD
           A[Christmas] -->|Get money| B(Go shopping)
           B --> C{Let me think}
@@ -197,7 +197,7 @@ gantt
           // console.error('Mermaid error: ', err);
         };
       mermaid.initialize({
-        theme: 'forest',
+        theme: 'dark',
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,

cypress/platform/theme-directives.html

@@ -13,107 +13,109 @@
         /* background:#333; */
         font-family: 'Arial';
         }
-      h1 { color: grey;}
+      h1 {
+        color: #333;
+        font-size: 20px;
+        text-decoration: underline;
+      }
       .mermaid2 {
         display: none;
       }
-      .someClass > *   {
+      .dark {
-        /* fill: red !important; */
+        background: #333;
+      }
+      .dark h1 {
+        color: #f4f4f4;
+      }
+      .size {
+        width: 33%;
+        height: 250px;
       }
     </style>
   </head>
   <body>
-    <h1>info below</h1>
     <div class="flex flex-wrap">
-      <div class="mermaid" style="width: 50%; height: 20%;">
+      <div class="size">
+        <h1>Default</h1>
+        <div class="mermaid" >
   %%{init: { 'logLevel': 0, 'theme': 'default'} }%%
   graph TD
-          A[Default] -->|Get money| B(Go shopping)
+            A(Start) --> B[/Another/]
-          B --> C{Let me think}
+            A[/Another/] --> C[End]
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
             subgraph section
+              B
               C
-            D
-            E
-            F
-            G
             end
         </div>
-      <div class="mermaid" style="width: 50%; height: 20%;">
+      </div>
+      <div class="size">
+        <h1>Forest</h1>
+        <div class="mermaid" >
   %%{init: { 'logLevel': 1, 'theme': 'forest'} }%%
   graph TD
-          A[Forest] -->|Get money| B(Go shopping)
+            A(Start) --> B[/Another/]
-          B --> C{Let me think}
+            A[/Another/] --> C[End]
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
             subgraph section
+              B
               C
-            D
-            E
-            F
-            G
             end
         </div>
-      <div class="mermaid" style="width: 50%; height: 20%;">
+      </div>
+      <div class="size">
+        <h1>Neutral</h1>
+        <div class="mermaid" >
         %%{init: { 'logLevel': 1, 'theme': 'neutral'} }%%
-
   graph TD
-          A[Neutral] -->|Get money| B(Go shopping)
+            A(Start) --> B[/Another/]
-          B --> C{Let me think}
+            A[/Another/] --> C[End]
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
             subgraph section
+              B
               C
-            D
-            E
-            F
-            G
             end
         </div>
-      <div class="mermaid" style="background: #3f3f3f; width: 50%; height: 20%;">
+      </div>
+      <div class="size dark">
+        <h1>Dark</h1>
+        <div class="mermaid">
         %%{init: { 'logLevel': 1, 'theme': 'dark'} }%%
-
   graph TD
-          A[Dark] -->|Get money| B(Go shopping)
+            A(Start) --> B[/Another/]
-          B --> C{Let me think}
+            A[/Another/] --> C[End]
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
             subgraph section
+              B
               C
-            D
-            E
-            F
-            G
             end
         </div>
-      <div class="mermaid" style="background: #3f3f3f; width: 50%; height: 20%;">
+      </div>
+      <div class="size">
+        <h1>Base with overriding themeVariable</h1>
+        <div class="mermaid">
+        %%{init: { 'theme': 'base', 'themeVariables':{ 'primaryColor': '#ff0000'}}}%%
+
+  graph TD
+            A(Start) --> B[/Another/]
+            A[/Another/] --> C[End]
+            subgraph section
+              B
+              C
+            end
+        </div>
+      </div>
+      <div class="size">
+        <h1>Nothing set, should be Default</h1>
+        <div class="mermaid">
         %%{init: { 'logLevel': 1} }%%
 
   graph TD
-          A[None set] -->|Get money| B(Go shopping)
+            A(Start) --> B[/Another/]
-          B --> C{Let me think}
+            A[/Another/] --> C[End]
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
             subgraph section
+              B
               C
-            D
-            E
-            F
-            G
             end
         </div>
       </div>
+    </div>
 
   <script src="./mermaid.js"></script>
     <script>
@@ -126,7 +128,7 @@ graph TD
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,
-        flowchart: { useMaxWidth: true },
+        // flowchart: { useMaxWidth: true },
         graph: { curve: 'cardinal', "htmlLabels": false },
         // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50, showSequenceNumbers: true },

docs/Setup.md

@@ -11,821 +11,6 @@ It is is then up to the user of the API to make use of the svg, either insert it
 
 In addition to the render function, a number of behavioral configuration options are available.
 
-## Configuration
-
-**Configuration methods in Mermaid version 8.6.0 have been updated, to learn more\[[click here][2]].**
-
-## **What follows are config instructions for older versions**
-
-These are the default options which can be overridden with the initialization call like so:
-**Example 1:**
-
-<pre>
-mermaid.initialize({
-  flowchart:{
-    htmlLabels: false
-  }
-});
-</pre>
-
-**Example 2:**
-
-<pre>
-&lt;script>
-  var config = {
-    startOnLoad:true,
-    flowchart:{
-      useMaxWidth:true,
-      htmlLabels:true,
-      curve:'cardinal',
-    },
-
-    securityLevel:'loose',
-  };
-  mermaid.initialize(config);
-&lt;/script>
-</pre>
-
-A summary of all options and their defaults is found [here][3]. A description of each option follows below.
-
-## theme
-
-theme , the CSS style sheet
-
-theme , the CSS style sheet
-
-| Parameter | Description     | Type   | Required | Values                                               |
-| --------- | --------------- | ------ | -------- | ---------------------------------------------------- |
-| Theme     | Built in Themes | String | Optional | Values include, default, forest, dark, neutral, null |
-
-**Notes:**To disable any pre-defined mermaid theme, use "null".
-
-<pre>
- "theme": "forest",
- "themeCSS": ".node rect { fill: red; }"
-</pre>
-
-## fontFamily
-
-| Parameter  | Description                                            | Type   | Required | Values                        |
-| ---------- | ------------------------------------------------------ | ------ | -------- | ----------------------------- |
-| fontFamily | specifies the font to be used in the rendered diagrams | String | Required | Verdana, Arial, Trebuchet MS, |
-
-\*\*notes: Default value is \\"trebuchet ms\\".
-
-## logLevel
-
-| Parameter | Description                                           | Type   | Required | Values        |
-| --------- | ----------------------------------------------------- | ------ | -------- | ------------- |
-| logLevel  | This option decides the amount of logging to be used. | String | Required | 1, 2, 3, 4, 5 |
-
-**Notes:**
-
--   debug: 1.
--   info: 2.
--   warn: 3.
--   error: 4.
--   fatal: 5(default).
-
-## securityLevel
-
-| Parameter     | Description                       | Type   | Required | Values                    |
-| ------------- | --------------------------------- | ------ | -------- | ------------------------- |
-| securitylevel | Level of trust for parsed diagram | String | Required | Strict, Loose, antiscript |
-
-\*\*Notes:
-
--   **strict**: (**default**) tags in text are encoded, click functionality is disabeled
--   **loose**: tags in text are allowed, click functionality is enabled
--   **antiscript**: html tags in text are allowed, (only script element is removed), click functionality is enabled
-
-## startOnLoad
-
-| Parameter   | Description                                   | Type    | Required | Values      |
-| ----------- | --------------------------------------------- | ------- | -------- | ----------- |
-| startOnLoad | Dictates whether mermaind starts on Page load | Boolean | Required | True, False |
-
-**Notes:**
-**Default value: true**
-
-## arrowMarkerAbsolute
-
-| Parameter           | Description                                                                  | Type    | Required | Values      |
-| ------------------- | ---------------------------------------------------------------------------- | ------- | -------- | ----------- |
-| arrowMarkerAbsolute | Controls whether or arrow markers in html code are absolute paths or anchors | Boolean | Required | True, False |
-
-## Notes\*\*: This matters if you are using base tag settings.
-
-**Default value: false**.
-
-## secure
-
-This option controls which currentConfig keys are considered _secure_ and can only be changed via
-call to mermaidAPI.initialize. Calls to mermaidAPI.reinitialize cannot make changes to
-the `secure` keys in the current currentConfig. This prevents malicious graph directives from
-overriding a site's default security.
-
-## flowchart
-
-The object containing configurations specific for flowcharts
-
-### diagramPadding
-
-| Parameter      | Description                                     | Type    | Required | Values             |
-| -------------- | ----------------------------------------------- | ------- | -------- | ------------------ |
-| diagramPadding | amount of padding around the diagram as a whole | Integer | Required | Any Positive Value |
-
-**Notes:**The amount of padding around the diagram as a whole so that embedded diagrams have margins, expressed in pixels
-**Default value: 8**.
-
-### htmlLabels
-
-| Parameter  | Description                                                                                  | Type    | Required | Values      |
-| ---------- | -------------------------------------------------------------------------------------------- | ------- | -------- | ----------- |
-| htmlLabels | Flag for setting whether or not a html tag should be used for rendering labels on the edges. | Boolean | Required | True, False |
-
-**Notes: Default value: true**.
-
-### nodeSpacing
-
-| Parameter   | Description                                         | Type    | Required | Values               |
-| ----------- | --------------------------------------------------- | ------- | -------- | -------------------- |
-| nodeSpacing | Defines the spacing between nodes on the same level | Integer | Required | Any positive Numbers |
-
-**Notes:
-Pertains to horizontal spacing for TB (top to bottom) or BT (bottom to top) graphs, and the vertical spacing for LR as well as RL graphs.**
-**Default value 50**.
-
-### rankSpacing
-
-| Parameter   | Description                                           | Type    | Required | Values               |
-| ----------- | ----------------------------------------------------- | ------- | -------- | -------------------- |
-| rankSpacing | Defines the spacing between nodes on different levels | Integer | Required | Any Positive Numbers |
-
-**Notes: pertains to vertical spacing for TB (top to bottom) or BT (bottom to top), and the horizontal spacing for LR as well as RL graphs.
-**Default value 50\*\*.
-
-### curve
-
-| Parameter | Description                                        | Type   | Required | Values                  |
-| --------- | -------------------------------------------------- | ------ | -------- | ----------------------- |
-| curve     | Defines how mermaid renders curves for flowcharts. | String | Required | Basis, Linear, Cardinal |
-
-**Notes:
-Default Vaue: Linear**
-
-## sequence
-
-The object containing configurations specific for sequence diagrams
-
-### activationWidth
-
-widt of the activation rect
-**Default value 10**.
-
-### diagramMarginX
-
-| Parameter      | Description                                          | Type    | Required | Values              |
-| -------------- | ---------------------------------------------------- | ------- | -------- | ------------------- |
-| diagramMarginX | margin to the right and left of the sequence diagram | Integer | Required | Any Positive Values |
-
-**Notes:**
-**Default value 50**.
-
-### diagramMarginY
-
-| Parameter      | Description                                       | Type    | Required | Values              |
-| -------------- | ------------------------------------------------- | ------- | -------- | ------------------- |
-| diagramMarginY | Margin to the over and under the sequence diagram | Integer | Required | Any Positive Values |
-
-**Notes:**
-**Default value 10**.
-
-### actorMargin
-
-| Parameter   | Description            | Type    | Required | Values             |
-| ----------- | ---------------------- | ------- | -------- | ------------------ |
-| actorMargin | Margin between actors. | Integer | Required | Any Positive Value |
-
-**Notes:**
-**Default value 50**.
-
-### width
-
-| Parameter | Description          | Type    | Required | Values             |
-| --------- | -------------------- | ------- | -------- | ------------------ |
-| width     | Width of actor boxes | Integer | Required | Any Positive Value |
-
-**Notes:**
-**Default value 150**.
-
-### height
-
-| Parameter | Description           | Type    | Required | Values             |
-| --------- | --------------------- | ------- | -------- | ------------------ |
-| height    | Height of actor boxes | Integer | Required | Any Positive Value |
-
-**Notes:**
-**Default value 65**..
-
-### boxMargin
-
-| Parameter | Description              | Type    | Required | Values             |
-| --------- | ------------------------ | ------- | -------- | ------------------ |
-| boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value |
-
-**Notes:**
-
-**Default value 10**.
-
-### boxTextMargin
-
-| Parameter     | Description                                  | Type    | Required | Values             |
-| ------------- | -------------------------------------------- | ------- | -------- | ------------------ |
-| boxTextMargin | margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value |
-
-**Notes:**
-
-**Default value 5**.
-
-### noteMargin
-
-| Parameter  | Description          | Type    | Required | Values             |
-| ---------- | -------------------- | ------- | -------- | ------------------ |
-| noteMargin | margin around notes. | Integer | Required | Any Positive Value |
-
-**Notes:**
-
-**Default value 10**.
-
-### messageMargin
-
-| Parameter     | Description             | Type    | Required | Values             |
-| ------------- | ----------------------- | ------- | -------- | ------------------ |
-| messageMargin | Space between messages. | Integer | Required | Any Positive Value |
-
-**Notes:**
-
-Space between messages.
-**Default value 35**.
-
-### messageAlign
-
-| Parameter    | Description                 | Type    | Required | Values              |
-| ------------ | --------------------------- | ------- | -------- | ------------------- |
-| messageAlign | Multiline message alignment | Integer | Required | left, center, right |
-
-**Notes:**center **default**
-
-### mirrorActors
-
-| Parameter    | Description                  | Type    | Required | Values      |
-| ------------ | ---------------------------- | ------- | -------- | ----------- |
-| mirrorActors | mirror actors under diagram. | Boolean | Required | True, False |
-
-**Notes:**
-
-**Default value true**.
-
-### bottomMarginAdj
-
-| Parameter       | Description                                 | Type    | Required | Values             |
-| --------------- | ------------------------------------------- | ------- | -------- | ------------------ |
-| bottomMarginAdj | Prolongs the edge of the diagram downwards. | Integer | Required | Any Positive Value |
-
-**Notes:**Depending on css styling this might need adjustment.
-**Default value 1**.
-
-### useMaxWidth
-
-| Parameter   | Description | Type    | Required | Values      |
-| ----------- | ----------- | ------- | -------- | ----------- |
-| useMaxWidth | See Notes   | Boolean | Required | True, False |
-
-**Notes:**
-when this flag is set to true, the height and width is set to 100% and is then scaling with the
-available space. If set to false, the absolute space required is used.
-**Default value: True**.
-
-### rightAngles
-
-| Parameter   | Description                          | Type    | Required | Values      |
-| ----------- | ------------------------------------ | ------- | -------- | ----------- |
-| rightAngles | display curve arrows as right angles | Boolean | Required | True, False |
-
-**Notes:**
-
-This will display arrows that start and begin at the same node as right angles, rather than a curve
-**Default value false**.
-
-### showSequenceNumbers
-
-| Parameter           | Description                     | Type    | Required | Values      |
-| ------------------- | ------------------------------- | ------- | -------- | ----------- |
-| showSequenceNumbers | This will show the node numbers | Boolean | Required | True, False |
-
-**Notes:**
-**Default value false**.
-
-### actorFontSize
-
-| Parameter     | Description                                        | Type    | Required | Values             |
-| ------------- | -------------------------------------------------- | ------- | -------- | ------------------ |
-| actorFontSize | This sets the font size of the actor's description | Integer | Require  | Any Positive Value |
-
-**Notes:**
-**Default value 14**..
-
-### actorFontFamily
-
-| Parameter       | Description                                          | Type | Required | Values                |
-| --------------- | ---------------------------------------------------- | ---- | -------- | --------------------- |
-| actorFontFamily | This sets the font family of the actor's description | 3    | 4        | Open-Sans, Sans-Serif |
-
-**Notes:**
-**Default value "Open-Sans", "sans-serif"**.
-
-### actorFontWeight
-
-This sets the font weight of the actor's description
-\*\*Default value 400.
-
-### noteFontSize
-
-| Parameter    | Description                                      | Type    | Required | Values             |
-| ------------ | ------------------------------------------------ | ------- | -------- | ------------------ |
-| noteFontSize | This sets the font size of actor-attached notes. | Integer | Required | Any Positive Value |
-
-**Notes:**
-**Default value 14**..
-
-### noteFontFamily
-
-| Parameter      | Description                                        | Type   | Required | Values                       |
-| -------------- | -------------------------------------------------- | ------ | -------- | ---------------------------- |
-| noteFontFamily | This sets the font family of actor-attached notes. | String | Required | trebuchet ms, verdana, arial |
-
-**Notes:**
-**Default value: trebuchet ms **.
-
-### noteFontWeight
-
-This sets the font weight of the note's description
-\*\*Default value 400.
-
-### noteAlign
-
-| Parameter | Description                                           | Type   | Required | Values              |
-| --------- | ----------------------------------------------------- | ------ | -------- | ------------------- |
-| noteAlign | This sets the text alignment of actor-attached notes. | string | required | left, center, right |
-
-**Notes:**
-**Default value center**.
-
-### messageFontSize
-
-| Parameter       | Description                                | Type    | Required | Values              |
-| --------------- | ------------------------------------------ | ------- | -------- | ------------------- |
-| messageFontSize | This sets the font size of actor messages. | Integer | Required | Any Positive Number |
-
-**Notes:**
-**Default value 16**.
-
-### messageFontFamily
-
-| Parameter         | Description                                  | Type   | Required | Values                       |
-| ----------------- | -------------------------------------------- | ------ | -------- | ---------------------------- |
-| messageFontFamily | This sets the font family of actor messages. | String | Required | trebuchet ms", verdana, aria |
-
-**Notes:**
-**Default value:"trebuchet ms**.
-
-### messageFontWeight
-
-This sets the font weight of the message's description
-\*\*Default value 400.
-
-### wrap
-
-This sets the auto-wrap state for the diagram
-\*\*Default value false.
-
-### wrapPadding
-
-This sets the auto-wrap padding for the diagram (sides only)
-\*\*Default value 10.
-
-### labelBoxWidth
-
-This sets the width of the loop-box (loop, alt, opt, par)
-\*\*Default value 50.
-
-### labelBoxHeight
-
-This sets the height of the loop-box (loop, alt, opt, par)
-\*\*Default value 20.
-
-## gantt
-
-The object containing configurations specific for gantt diagrams\*
-
-### titleTopMargin
-
-### titleTopMargin
-
-| Parameter      | Description                                    | Type    | Required | Values             |
-| -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |
-| titleTopMargin | Margin top for the text over the gantt diagram | Integer | Required | Any Positive Value |
-
-**Notes:**
-**Default value 25**.
-
-### barHeight
-
-| Parameter | Description                         | Type    | Required | Values             |
-| --------- | ----------------------------------- | ------- | -------- | ------------------ |
-| barHeight | The height of the bars in the graph | Integer | Required | Any Positive Value |
-
-**Notes:**
-**Default value 20**.
-
-### barGap
-
-| Parameter | Description                                                       | Type    | Required | Values             |
-| --------- | ----------------------------------------------------------------- | ------- | -------- | ------------------ |
-| barGap    | The margin between the different activities in the gantt diagram. | Integer | Optional | Any Positive Value |
-
-**Notes:**
-**Default value 4**.
-
-### topPadding
-
-| Parameter  | Description                                                                | Type    | Required | Values             |
-| ---------- | -------------------------------------------------------------------------- | ------- | -------- | ------------------ |
-| topPadding | Margin between title and gantt diagram and between axis and gantt diagram. | Integer | Required | Any Positive Value |
-
-**Notes:**
-**Default value 50**.
-
-### leftPadding
-
-| Parameter   | Description                                                             | Type    | Required | Values             |
-| ----------- | ----------------------------------------------------------------------- | ------- | -------- | ------------------ |
-| leftPadding | The space allocated for the section name to the left of the activities. | Integer | Required | Any Positive Value |
-
-**Notes:**
-**Default value 75**.
-
-### gridLineStartPadding
-
-| Parameter            | Description                                   | Type    | Required | Values             |
-| -------------------- | --------------------------------------------- | ------- | -------- | ------------------ |
-| gridLineStartPadding | Vertical starting position of the grid lines. | Integer | Required | Any Positive Value |
-
-**Notes:**
-**Default value 35**.
-
-### fontSize
-
-| Parameter | Description | Type    | Required | Values             |
-| --------- | ----------- | ------- | -------- | ------------------ |
-| fontSize  | Font size   | Integer | Required | Any Positive Value |
-
-**Notes:**
-**Default value 11**.
-
-### fontFamily
-
-| Parameter  | Description | Type   | Required | Values                    |
-| ---------- | ----------- | ------ | -------- | ------------------------- |
-| fontFamily | font Family | string | required | "Open-Sans", "sans-serif" |
-
-**Notes:**
-
-**Default value '"Open-Sans", "sans-serif"'**.
-
-### numberSectionStyles
-
-| Parameter           | Description                              | Type    | Required | Values             |
-| ------------------- | ---------------------------------------- | ------- | -------- | ------------------ |
-| numberSectionStyles | The number of alternating section styles | Integer | 4        | Any Positive Value |
-
-**Notes:**
-**Default value 4**.
-
-### axisFormat
-
-| Parameter  | Description                  | Type | Required | Values           |
-| ---------- | ---------------------------- | ---- | -------- | ---------------- |
-| axisFormat | Datetime format of the axis. | 3    | Required | Date in yy-mm-dd |
-
-**Notes:**
-
-This might need adjustment to match your locale and preferences
-**Default value '%Y-%m-%d'**.
-
-## journey
-
-The object containing configurations specific for journey diagrams
-
-### diagramMarginX
-
-| Parameter      | Description                                          | Type    | Required | Values             |
-| -------------- | ---------------------------------------------------- | ------- | -------- | ------------------ |
-| diagramMarginX | margin to the right and left of the sequence diagram | Integer | Required | Any Positive Value |
-
-**Notes:**
-**Default value 50**.
-
-### diagramMarginY
-
-| Parameter      | Description                                        | Type    | Required | Values             |
-| -------------- | -------------------------------------------------- | ------- | -------- | ------------------ |
-| diagramMarginY | margin to the over and under the sequence diagram. | Integer | Required | Any Positive Value |
-
-**Notes:**
-**Default value 10**..
-
-### actorMargin
-
-| Parameter   | Description            | Type    | Required | Values             |
-| ----------- | ---------------------- | ------- | -------- | ------------------ |
-| actorMargin | Margin between actors. | Integer | Required | Any Positive Value |
-
-**Notes:**
-**Default value 50**.
-
-### width
-
-| Parameter | Description          | Type    | Required | Values             |
-| --------- | -------------------- | ------- | -------- | ------------------ |
-| width     | Width of actor boxes | Integer | Required | Any Positive Value |
-
-**Notes:**
-**Default value 150**.
-
-### height
-
-| Parameter | Description           | Type    | Required | Values             |
-| --------- | --------------------- | ------- | -------- | ------------------ |
-| height    | Height of actor boxes | Integer | Required | Any Positive Value |
-
-**Notes:**
-**Default value 65**.
-
-### boxMargin
-
-| Parameter | Description              | Type    | Required | Values             |
-| --------- | ------------------------ | ------- | -------- | ------------------ |
-| boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value |
-
-**Notes:**
-**Default value 10**.
-
-### boxTextMargin
-
-| Parameter     | Description                                  | Type    | Required | Values             |
-| ------------- | -------------------------------------------- | ------- | -------- | ------------------ |
-| boxTextMargin | margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value |
-
-**Notes:**
-
-### noteMargin
-
-| Parameter  | Description          | Type    | Required | Values             |
-| ---------- | -------------------- | ------- | -------- | ------------------ |
-| noteMargin | margin around notes. | Integer | Required | Any Positive Value |
-
-**Notes:**
-**Default value 10**.
-
-### messageMargin
-
-| Parameter     | Description             | Type    | Required | Values             |
-| ------------- | ----------------------- | ------- | -------- | ------------------ |
-| messageMargin | Space between messages. | Integer | Required | Any Positive Value |
-
-**Notes:**
-
-Space between messages.
-**Default value 35**.
-
-### messageAlign
-
-| Parameter    | Description                 | Type | Required | Values              |
-| ------------ | --------------------------- | ---- | -------- | ------------------- |
-| messageAlign | Multiline message alignment | 3    | 4        | left, center, right |
-
-**Notes:**default:center\*\*
-
-### bottomMarginAdj
-
-| Parameter       | Description                                 | Type    | Required | Values             |
-| --------------- | ------------------------------------------- | ------- | -------- | ------------------ |
-| bottomMarginAdj | Prolongs the edge of the diagram downwards. | Integer | 4        | Any Positive Value |
-
-**Notes:**Depending on css styling this might need adjustment.
-**Default value 1**.
-
-### useMaxWidth
-
-| Parameter   | Description | Type    | Required | Values      |
-| ----------- | ----------- | ------- | -------- | ----------- |
-| useMaxWidth | See notes   | Boolean | 4        | True, False |
-
-**Notes:**when this flag is set the height and width is set to 100% and is then scaling with the
-available space if not the absolute space required is used.
-
-**Default value true**.
-
-### rightAngles
-
-| Parameter   | Description                        | Type | Required | Values      |
-| ----------- | ---------------------------------- | ---- | -------- | ----------- |
-| rightAngles | Curved Arrows become Right Angles, | 3    | 4        | True, False |
-
-**Notes:**This will display arrows that start and begin at the same node as right angles, rather than a curves
-**Default value false**.
-
-## er
-
-The object containing configurations specific for entity relationship diagrams
-
-### diagramPadding
-
-| Parameter      | Description                                     | Type    | Required | Values             |
-| -------------- | ----------------------------------------------- | ------- | -------- | ------------------ |
-| diagramPadding | amount of padding around the diagram as a whole | Integer | Required | Any Positive Value |
-
-**Notes:**The amount of padding around the diagram as a whole so that embedded diagrams have margins, expressed in pixels
-**Default value: 20**.
-
-### layoutDirection
-
-| Parameter       | Description                              | Type   | Required | Values               |
-| --------------- | ---------------------------------------- | ------ | -------- | -------------------- |
-| layoutDirection | Directional bias for layout of entities. | String | Required | "TB", "BT","LR","RL" |
-
-**Notes:**
-'TB' for Top-Bottom, 'BT'for Bottom-Top, 'LR' for Left-Right, or 'RL' for Right to Left.
-T = top, B = bottom, L = left, and R = right.
-**Default value: TB **.
-
-### minEntityWidth
-
-| Parameter      | Description                         | Type    | Required | Values             |
-| -------------- | ----------------------------------- | ------- | -------- | ------------------ |
-| minEntityWidth | The mimimum width of an entity box, | Integer | Required | Any Positive Value |
-
-**Notes:**expressed in pixels
-**Default value: 100**.
-
-### minEntityHeight
-
-| Parameter       | Description                          | Type    | Required | Values             |
-| --------------- | ------------------------------------ | ------- | -------- | ------------------ |
-| minEntityHeight | The minimum height of an entity box, | Integer | 4        | Any Positive Value |
-
-**Notes:**expressed in pixels
-**Default value: 75 **
-
-### entityPadding
-
-| Parameter     | Description                                                  | Type    | Required | Values             |
-| ------------- | ------------------------------------------------------------ | ------- | -------- | ------------------ |
-| entityPadding | minimum internal padding betweentext in box and  box borders | Integer | 4        | Any Positive Value |
-
-**Notes:**The minimum internal padding betweentext in an entity box and the enclosing box borders, expressed in pixels.
-**Default value: 15 **
-
-### stroke
-
-| Parameter | Description                         | Type   | Required | Values               |
-| --------- | ----------------------------------- | ------ | -------- | -------------------- |
-| stroke    | Stroke color of box edges and lines | String | 4        | Any recognized color |
-
-**Default value: gray **
-
-### fill
-
-| Parameter | Description                | Type   | Required | Values               |
-| --------- | -------------------------- | ------ | -------- | -------------------- |
-| fill      | Fill color of entity boxes | String | 4        | Any recognized color |
-
-**Notes:**
-**Default value:'honeydew'**
-
-### fontSize
-
-| Parameter | Description         | Type    | Required | Values             |
-| --------- | ------------------- | ------- | -------- | ------------------ |
-| fontSize  | Font Size in pixels | Integer |          | Any Positive Value |
-
-**Notes:**Font size (expressed as an integer representing a number of pixels)
-**Default value: 12 **
-
-### useMaxWidth
-
-| Parameter   | Description | Type    | Required | Values      |
-| ----------- | ----------- | ------- | -------- | ----------- |
-| useMaxWidth | See Notes   | Boolean | Required | true, false |
-
-**Notes:**
-When this flag is set to true, the diagram width is locked to 100% and
-scaled based on available space. If set to false, the diagram reserves its
-absolute width.
-**Default value: true**.
-
-## render
-
-Function that renders an svg with a graph from a chart definition. Usage example below.
-
-```js
-mermaidAPI.initialize({
-     startOnLoad:true
- });
- $(function(){
-     const graphDefinition = 'graph TB\na-->b';
-     const cb = function(svgGraph){
-         console.log(svgGraph);
-     };
-     mermaidAPI.render('id1',graphDefinition,cb);
- });
-```
-
-### Parameters
-
--   `id`  the id of the element to be rendered
--   `_txt`  the graph definition
--   `cb`  callback which is called after rendering is finished with the svg code as inparam.
--   `container`  selector to element in which a div with the graph temporarily will be inserted. In one is
-    provided a hidden div will be inserted in the body of the page instead. The element will be removed when rendering is
-    completed.
-
-## 
-
-## mermaidAPI configuration defaults
-
-<pre>
-
-&lt;script>
-  var config = {
-    theme:'default',
-    logLevel:'fatal',
-    securityLevel:'strict',
-    startOnLoad:true,
-    arrowMarkerAbsolute:false,
-
-    er:{
-      diagramPadding:20,
-      layoutDirection:'TB',
-      minEntityWidth:100,
-      minEntityHeight:75,
-      entityPadding:15,
-      stroke:'gray',
-      fill:'honeydew',
-      fontSize:12,
-      useMaxWidth:true,
-    },
-    flowchart:{
-      diagramPadding:8,
-      htmlLabels:true,
-      curve:'linear',
-    },
-    sequence:{
-      diagramMarginX:50,
-      diagramMarginY:10,
-      actorMargin:50,
-      width:150,
-      height:65,
-      boxMargin:10,
-      boxTextMargin:5,
-      noteMargin:10,
-      messageMargin:35,
-      messageAlign:'center',
-      mirrorActors:true,
-      bottomMarginAdj:1,
-      useMaxWidth:true,
-      rightAngles:false,
-      showSequenceNumbers:false,
-    },
-    gantt:{
-      titleTopMargin:25,
-      barHeight:20,
-      barGap:4,
-      topPadding:50,
-      leftPadding:75,
-      gridLineStartPadding:35,
-      fontSize:11,
-      fontFamily:'"Open-Sans", "sans-serif"',
-      numberSectionStyles:4,
-      axisFormat:'%Y-%m-%d',
-    }
-  };
-  mermaid.initialize(config);
-&lt;/script>
-</pre>
-
 ## setSiteConfig
 
 ## setSiteConfig
@@ -926,8 +111,94 @@ Note: modifies options in-place
 
 -   `conf`  the base currentConfig to reset to (default: current siteConfig ) (optional, default `getSiteConfig()`)
 
+## render
+
+Function that renders an svg with a graph from a chart definition. Usage example below.
+
+```js
+mermaidAPI.initialize({
+     startOnLoad:true
+ });
+ $(function(){
+     const graphDefinition = 'graph TB\na-->b';
+     const cb = function(svgGraph){
+         console.log(svgGraph);
+     };
+     mermaidAPI.render('id1',graphDefinition,cb);
+ });
+```
+
+### Parameters
+
+-   `id`  the id of the element to be rendered
+-   `_txt`  the graph definition
+-   `cb`  callback which is called after rendering is finished with the svg code as inparam.
+-   `container`  selector to element in which a div with the graph temporarily will be inserted. In one is
+    provided a hidden div will be inserted in the body of the page instead. The element will be removed when rendering is
+    completed.
+
+## 
+
+## mermaidAPI configuration defaults
+
+<pre>
+
+&lt;script>
+  var config = {
+    theme:'default',
+    logLevel:'fatal',
+    securityLevel:'strict',
+    startOnLoad:true,
+    arrowMarkerAbsolute:false,
+
+    er:{
+      diagramPadding:20,
+      layoutDirection:'TB',
+      minEntityWidth:100,
+      minEntityHeight:75,
+      entityPadding:15,
+      stroke:'gray',
+      fill:'honeydew',
+      fontSize:12,
+      useMaxWidth:true,
+    },
+    flowchart:{
+      diagramPadding:8,
+      htmlLabels:true,
+      curve:'linear',
+    },
+    sequence:{
+      diagramMarginX:50,
+      diagramMarginY:10,
+      actorMargin:50,
+      width:150,
+      height:65,
+      boxMargin:10,
+      boxTextMargin:5,
+      noteMargin:10,
+      messageMargin:35,
+      messageAlign:'center',
+      mirrorActors:true,
+      bottomMarginAdj:1,
+      useMaxWidth:true,
+      rightAngles:false,
+      showSequenceNumbers:false,
+    },
+    gantt:{
+      titleTopMargin:25,
+      barHeight:20,
+      barGap:4,
+      topPadding:50,
+      leftPadding:75,
+      gridLineStartPadding:35,
+      fontSize:11,
+      fontFamily:'"Open-Sans", "sans-serif"',
+      numberSectionStyles:4,
+      axisFormat:'%Y-%m-%d',
+    }
+  };
+  mermaid.initialize(config);
+&lt;/script>
+</pre>
+
 [1]: Setup.md?id=render
-
-[2]: 8.6.0_docs.md
-
-[3]: #mermaidapi-configuration-defaults

docs/developer-docs/configuration.md

@@ -0,0 +1,30 @@
+# Configuration
+
+When mermaid starts configuration is extracted to a configuration to be used for a diagram. There a 3 sources for configuration:
+
+* The default configuration
+* Overrides on the site level, set is set by the initialize call and will  be applied for all diagrams in the site/app. The term for this is the **siteConfig**.
+* Directives - diagram authors can update select configuration parameters directly int he diagram code via directives and these are applied to the render config.
+
+**The render config** is configration that is used when rendering by applying these configurations.
+
+## Theme configuration
+
+## Starting mermaid
+
+```mermaid
+sequenceDiagram
+	Site->>mermaid: initialize
+	Site->>mermaid: content loaded
+	mermaid->>mermaidAPI: init
+```
+
+## Initialize
+
+Intialize call is calloed **only once**. It is called by the site integrator in order to override the default configuration on a site level.
+
+## configApi.reset
+
+This method resets the configuration for a diagram to the site configuration, the configuration provided by the site integrator. Before each rendering of a diagram reset is called in the very beginning of render.
+
+##

package.json

@@ -49,6 +49,7 @@
   },
   "dependencies": {
     "@braintree/sanitize-url": "^3.1.0",
+    "babel-eslint": "^10.1.0",
     "d3": "^5.7.0",
     "dagre": "^0.8.4",
     "dagre-d3": "^0.6.4",

src/config.spec.js

@@ -1,9 +1,10 @@
 /* eslint-env jasmine */
-import configApi from './config';
+import * as configApi from './config';
 
 describe('when working with site config', function() {
   beforeEach(() => {
-    configApi.reset(configApi.defaultConfig);
+    // Resets the site config to default config
+    configApi.setSiteConfig({});
   });
   it('should set site config and config properly', function() {
     let config_0 = { foo: 'bar', bar: 0 };
@@ -14,14 +15,13 @@ describe('when working with site config', function() {
     expect(config_1.bar).toEqual(config_0.bar);
     expect(config_1).toEqual(config_2);
   });
-  it('should set config and respect secure keys', function() {
+  it('should respect secure keys when applying directives', function() {
-    let config_0 = { foo: 'bar', bar: 0, secure: [...configApi.defaultConfig.secure, 'bar'] };
+    let config_0 = { foo: 'bar', bar: 'cant-be-changed', secure: [...configApi.defaultConfig.secure, 'bar'] };
     configApi.setSiteConfig(config_0);
-    let config_1 = { foo: 'baf', bar: 'foo'};
+    const directive = { foo: 'baf', bar: 'should-not-be-allowed'};
-    configApi.setConfig(config_1);
+    const cfg = configApi.updateCurrentConfig(config_0,[directive]);
-    let config_2 = configApi.getConfig();
+    expect(cfg.foo).toEqual(directive.foo);
-    expect(config_2.foo).toEqual(config_1.foo);
+    expect(cfg.bar).toBe(config_0.bar)
-    expect(config_2.bar).toEqual(0); // Should be siteConfig.bar
   });
   it('should set reset config properly', function() {
     let config_0 = { foo: 'bar', bar: 0};
@@ -43,10 +43,11 @@ describe('when working with site config', function() {
     expect(config_1.foo).toEqual(config_0.foo);
     let config_2 = configApi.getConfig();
     expect(config_2.foo).toEqual(config_0.foo);
-    configApi.reset(configApi.defaultConfig);
+    configApi.setConfig({ foobar: 'bar0' })
-    let config_3 = configApi.getSiteConfig();
+    let config_3 = configApi.getConfig();
-    expect(config_3.foo).toBeUndefined();
+    expect(config_3.foobar).toEqual('bar0');
+    configApi.reset();
     let config_4 = configApi.getConfig();
-    expect(config_4.foo).toBeUndefined();
+    expect(config_4.foobar).toBeUndefined();
   });
 });

src/config_org.js

@@ -0,0 +1,157 @@
+import { assignWithDepth } from './utils';
+import { logger } from './logger'; // eslint-disable-line
+import theme from './themes';
+import config from './defaultConfig';
+
+// import { unflatten } from 'flat';
+// import flatten from 'flat';
+
+// import themeVariables from './theme-default';
+// import themeForestVariables from './theme-forest';
+// import themeNeutralVariables from './theme-neutral';
+
+const handleThemeVariables = value => {
+  return theme[value] ? theme[value].getThemeVariables() : theme.default.getThemeVariables();
+};
+
+const manipulators = {
+  themeVariables: handleThemeVariables
+};
+
+// debugger;
+config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
+config.git.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
+export const defaultConfig = Object.freeze(config);
+
+const siteConfig = assignWithDepth({}, defaultConfig);
+const currentConfig = assignWithDepth({}, defaultConfig);
+
+/**
+ *## setSiteConfig
+ *| Function | Description         | Type    | Values             |
+ *| --------- | ------------------- | ------- | ------------------ |
+ *| setSiteConfig|Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array|
+ ***Notes:**
+ *Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls to reset() will reset
+ *the currentConfig to siteConfig. Calls to reset(configApi.defaultConfig) will reset siteConfig and currentConfig
+ *to the defaultConfig
+ *Note: currentConfig is set in this function
+ **Default value: At default, will mirror Global Config**
+ * @param conf - the base currentConfig to use as siteConfig
+ * @returns {*} - the siteConfig
+ */
+export const setSiteConfig = conf => {
+  console.log('setSiteConfig');
+
+  Object.keys(conf).forEach(key => {
+    const manipulator = manipulators[key];
+    conf[key] = manipulator ? manipulator(conf[key]) : conf[key];
+  });
+
+  assignWithDepth(currentConfig, conf, { clobber: true });
+  // Set theme variables if user has set the theme option
+  assignWithDepth(siteConfig, conf);
+
+  return getSiteConfig();
+};
+/**
+ *## getSiteConfig
+ *| Function | Description         | Type    |  Values             |
+ *| --------- | ------------------- | ------- |  ------------------ |
+ *| setSiteConfig|Returns the current siteConfig base configuration | Get Request | Returns Any Values  in siteConfig|
+ ***Notes**:
+ *Returns **any** values in siteConfig.
+ * @returns {*}
+ */
+export const getSiteConfig = () => {
+  return assignWithDepth({}, siteConfig);
+};
+/**
+ *## setConfig
+ *| Function  | Description         | Type    | Values             |
+ *| --------- | ------------------- | ------- | ------------------ |
+ *| setSiteConfig|Sets the siteConfig to desired values | Put Request| Any Values, except ones in secure array|
+ ***Notes**:
+ *Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure keys. Any
+ *values found in conf with key found in siteConfig.secure will be replaced with the corresponding
+ *siteConfig value.
+ * @param conf - the potential currentConfig
+ * @returns {*} - the currentConfig merged with the sanitized conf
+ */
+export const setConfig = conf => {
+  console.log('setConfig');
+  sanitize(conf);
+  Object.keys(conf).forEach(key => {
+    const manipulator = manipulators[key];
+    conf[key] = manipulator ? manipulator(conf[key]) : conf[key];
+  });
+
+  assignWithDepth(currentConfig, conf);
+  return getConfig();
+};
+/**
+ *   ## getConfig
+ *| Function  | Description         | Type    | Return Values            |
+ *| --------- | ------------------- | ------- | ------------------ |
+ *| getConfig |Obtains the currentConfig | Get Request | Any Values from currentConfig|
+ ***Notes**:
+ *Returns **any** the currentConfig
+ * @returns {*} - the currentConfig
+ */
+export const getConfig = () => {
+  return assignWithDepth({}, currentConfig);
+};
+/**
+ *## sanitize
+ *| Function | Description         | Type    | Values             |
+ *| --------- | ------------------- | ------- | ------------------ |
+ *| sanitize  |Sets the siteConfig to desired values. | Put Request |None|
+ *Ensures options parameter does not attempt to override siteConfig secure keys
+ *Note: modifies options in-place
+ * @param options - the potential setConfig parameter
+ */
+export const sanitize = options => {
+  Object.keys(siteConfig.secure).forEach(key => {
+    if (typeof options[siteConfig.secure[key]] !== 'undefined') {
+      // DO NOT attempt to print options[siteConfig.secure[key]] within `${}` as a malicious script
+      // can exploit the logger's attempt to stringify the value and execute arbitrary code
+      logger.trace(
+        `Denied attempt to modify a secure key ${siteConfig.secure[key]}`,
+        options[siteConfig.secure[key]]
+      );
+      delete options[siteConfig.secure[key]];
+    }
+  });
+};
+/**
+ *## reset
+ *| Function | Description         | Type    | Required | Values             |
+ *| --------- | ------------------- | ------- | -------- | ------------------ |
+ *| reset|Resets currentConfig to conf| Put Request | Required | None|
+ *
+ *| Parameter | Description |Type | Required | Values|
+ *| --- | --- | --- | --- | --- |
+ *| conf| base set of values, which currentConfig coul be **reset** to.| Dictionary | Required | Any Values, with respect to the secure Array|
+ *
+ **Notes :
+ (default: current siteConfig ) (optional, default `getSiteConfig()`)
+ * @param conf - the base currentConfig to reset to (default: current siteConfig )
+ */
+export const reset = (conf = getSiteConfig()) => {
+  console.warn('reset');
+  Object.keys(siteConfig).forEach(key => delete siteConfig[key]);
+  Object.keys(currentConfig).forEach(key => delete currentConfig[key]);
+  assignWithDepth(siteConfig, conf, { clobber: true });
+  assignWithDepth(currentConfig, conf, { clobber: true });
+};
+
+const configApi = Object.freeze({
+  sanitize,
+  setSiteConfig,
+  getSiteConfig,
+  setConfig,
+  getConfig,
+  reset,
+  defaultConfig
+});
+export default configApi;

src/defaultConfig.js

@@ -0,0 +1,842 @@
+import theme from './themes';
+/**
+ * **Configuration methods in Mermaid version 8.6.0 have been updated, to learn more[[click here](8.6.0_docs.md)].**
+ *
+ * ## **What follows are config instructions for older versions**
+ * These are the default options which can be overridden with the initialization call like so:
+ * **Example 1:**
+ * <pre>
+ * mermaid.initialize({
+ *   flowchart:{
+ *     htmlLabels: false
+ *   }
+ * });
+ * </pre>
+ *
+ * **Example 2:**
+ * <pre>
+ * &lt;script>
+ *   var config = {
+ *     startOnLoad:true,
+ *     flowchart:{
+ *       useMaxWidth:true,
+ *       htmlLabels:true,
+ *       curve:'cardinal',
+ *     },
+ *
+ *     securityLevel:'loose',
+ *   };
+ *   mermaid.initialize(config);
+ * &lt;/script>
+ * </pre>
+ * A summary of all options and their defaults is found [here](#mermaidapi-configuration-defaults). A description of each option follows below.
+ *
+ * @name Configuration
+ */
+const config = {
+  /** theme , the CSS style sheet
+   *
+   * theme , the CSS style sheet
+   *
+   *| Parameter | Description |Type | Required | Values|
+   *| --- | --- | --- | --- | --- |
+   *| Theme |Built in Themes| String | Optional | Values include, default, forest, dark, neutral, null|
+   *
+   ***Notes:**To disable any pre-defined mermaid theme, use "null".
+   * <pre>
+   *  "theme": "forest",
+   *  "themeCSS": ".node rect { fill: red; }"
+   * </pre>
+   */
+  theme: 'default',
+  themeVariables: theme['default'].getThemeVariables(),
+  themeCSS: undefined,
+  /* **maxTextSize** - The maximum allowed size of the users text diamgram */
+  maxTextSize: 50000,
+
+  /**
+   *| Parameter | Description |Type | Required | Values|
+   *| --- | --- | --- | --- | --- |
+   *|fontFamily | specifies the font to be used in the rendered diagrams| String | Required | Verdana, Arial, Trebuchet MS,|
+   *
+   ***notes: Default value is \\"trebuchet ms\\".
+   */
+  fontFamily: '"trebuchet ms", verdana, arial;',
+
+  /**
+   *| Parameter | Description |Type | Required | Values|
+   *| --- | --- | --- | --- | --- |
+   *| logLevel |This option decides the amount of logging to be used.| String | Required | 1, 2, 3, 4, 5 |
+   *
+   *
+   ***Notes:**
+   *-   debug: 1.
+   *-   info: 2.
+   *-   warn: 3.
+   *-   error: 4.
+   *-   fatal: 5(default).
+   */
+  logLevel: 5,
+
+  /**
+   *| Parameter | Description |Type | Required | Values|
+   *| --- | --- | --- | --- | --- |
+   *| securitylevel | Level of trust for parsed diagram|String | Required | Strict, Loose, antiscript |
+   *
+   ***Notes:
+   *-   **strict**: (**default**) tags in text are encoded, click functionality is disabeled
+   *-   **loose**: tags in text are allowed, click functionality is enabled
+   *-   **antiscript**: html tags in text are allowed, (only script element is removed), click functionality is enabled
+   */
+  securityLevel: 'strict',
+
+  /**
+   *| Parameter | Description |Type | Required | Values|
+   *| --- | --- | --- | --- | --- |
+   *| startOnLoad| Dictates whether mermaind starts on Page load | Boolean | Required | True, False |
+   *
+   ***Notes:**
+   ***Default value: true**
+   */
+  startOnLoad: true,
+
+  /**
+   *| Parameter | Description |Type | Required |Values|
+   *| --- | --- | --- | --- | --- |
+   *| arrowMarkerAbsolute | Controls whether or arrow markers in html code are absolute paths or anchors | Boolean | Required |  True, False |
+   *
+   *
+   *## Notes**: This matters if you are using base tag settings.
+   ***Default value: false**.
+   */
+  arrowMarkerAbsolute: false,
+
+  /**
+   * This option controls which currentConfig keys are considered _secure_ and can only be changed via
+   * call to mermaidAPI.initialize. Calls to mermaidAPI.reinitialize cannot make changes to
+   * the `secure` keys in the current currentConfig. This prevents malicious graph directives from
+   * overriding a site's default security.
+   */
+  secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
+
+  /**
+   * The object containing configurations specific for flowcharts
+   */
+  flowchart: {
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| diagramPadding | amount of padding around the diagram as a whole | Integer | Required | Any Positive Value |
+     *
+     ***Notes:**The amount of padding around the diagram as a whole so that embedded diagrams have margins, expressed in pixels
+     ***Default value: 8**.
+     */
+    diagramPadding: 8,
+
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| htmlLabels | Flag for setting whether or not a html tag should be used for rendering labels on the edges. | Boolean| Required | True, False|
+     *
+     ***Notes: Default value: true**.
+     */
+    htmlLabels: true,
+
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| nodeSpacing | Defines the spacing between nodes on the same level | Integer| Required | Any positive Numbers |
+     *
+     ***Notes:
+     *Pertains to horizontal spacing for TB (top to bottom) or BT (bottom to top) graphs, and the vertical spacing for LR as well as RL graphs.**
+     ***Default value 50**.
+     */
+    nodeSpacing: 50,
+
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| rankSpacing | Defines the spacing between nodes on different levels | Integer | Required| Any Positive Numbers |
+     *
+     ***Notes: pertains to vertical spacing for TB (top to bottom) or BT (bottom to top), and the horizontal spacing for LR as well as RL graphs.
+     ***Default value 50**.
+     */
+    rankSpacing: 50,
+
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| curve | Defines how mermaid renders curves for flowcharts. | String | Required | Basis, Linear, Cardinal|
+     *
+     ***Notes:
+     *Default Vaue: Linear**
+     */
+    curve: 'linear',
+    // Only used in new experimental rendering
+    // repreesents the padding between the labels and the shape
+    padding: 15
+  },
+
+  /**
+   * The object containing configurations specific for sequence diagrams
+   */
+  sequence: {
+    /**
+     * widt of the activation rect
+     * **Default value 10**.
+     */
+    activationWidth: 10,
+
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| diagramMarginX | margin to the right and left of the sequence diagram | Integer | Required | Any Positive Values |
+     *
+     ***Notes:**
+     ***Default value 50**.
+     */
+    diagramMarginX: 50,
+
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| diagramMarginY | Margin to the over and under the sequence diagram | Integer | Required | Any Positive Values|
+     *
+     ***Notes:**
+     ***Default value 10**.
+     */
+    diagramMarginY: 10,
+
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| actorMargin | Margin between actors. | Integer | Required | Any Positive Value |
+     *
+     ***Notes:**
+     ***Default value 50**.
+     */
+    actorMargin: 50,
+
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| width | Width of actor boxes | Integer | Required | Any Positive Value |
+     *
+     ***Notes:**
+     ***Default value 150**.
+     */
+    width: 150,
+
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| height | Height of actor boxes | Integer | Required | Any Positive Value|
+     *
+     ***Notes:**
+     ***Default value 65**..
+     */
+    height: 65,
+
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value |
+     *
+     ***Notes:**
+     *
+     ***Default value 10**.
+     */
+    boxMargin: 10,
+
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| boxTextMargin| margin around the text in loop/alt/opt boxes | Integer | Required| Any Positive Value|
+     *
+     ***Notes:**
+     *
+     ***Default value 5**.
+     */
+    boxTextMargin: 5,
+
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| noteMargin | margin around notes. | Integer | Required | Any Positive Value |
+     *
+     ***Notes:**
+     *
+     ***Default value 10**.
+     */
+    noteMargin: 10,
+
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| messageMargin | Space between messages. | Integer | Required | Any Positive Value |
+     *
+     ***Notes:**
+     *
+     *Space between messages.
+     ***Default value 35**.
+     */
+    messageMargin: 35,
+
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| messageAlign | Multiline message alignment | Integer | Required | left, center, right |
+     *
+     ***Notes:**center **default**
+     */
+    messageAlign: 'center',
+
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| mirrorActors | mirror actors under diagram. | Boolean| Required | True, False |
+     *
+     ***Notes:**
+     *
+     ***Default value true**.
+     */
+    mirrorActors: true,
+
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| bottomMarginAdj | Prolongs the edge of the diagram downwards. | Integer | Required | Any Positive Value |
+     *
+     ***Notes:**Depending on css styling this might need adjustment.
+     ***Default value 1**.
+     */
+    bottomMarginAdj: 1,
+
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| useMaxWidth | See Notes | Boolean | Required | True, False |
+     *
+     ***Notes:**
+     *when this flag is set to true, the height and width is set to 100% and is then scaling with the
+     *available space. If set to false, the absolute space required is used.
+     ***Default value: True**.
+     */
+    useMaxWidth: true,
+
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| rightAngles | display curve arrows as right angles| Boolean | Required | True, False |
+     *
+     ***Notes:**
+     *
+     *This will display arrows that start and begin at the same node as right angles, rather than a curve
+     ***Default value false**.
+     */
+    rightAngles: false,
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| showSequenceNumbers | This will show the node numbers | Boolean | Required | True, False |
+     *
+     ***Notes:**
+     ***Default value false**.
+     */
+    showSequenceNumbers: false,
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| actorFontSize| This sets the font size of the actor's description | Integer | Require | Any Positive Value |
+     *
+     ***Notes:**
+     ***Default value 14**..
+     */
+    actorFontSize: 14,
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| actorFontFamily |This sets the font family of the actor's description | 3 | 4 | Open-Sans, Sans-Serif |
+     *
+     ***Notes:**
+     ***Default value "Open-Sans", "sans-serif"**.
+     */
+    actorFontFamily: '"Open-Sans", "sans-serif"',
+    /**
+     * This sets the font weight of the actor's description
+     * **Default value 400.
+     */
+    actorFontWeight: 400,
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| noteFontSize |This sets the font size of actor-attached notes. | Integer | Required | Any Positive Value |
+     *
+     ***Notes:**
+     ***Default value 14**..
+     */
+    noteFontSize: 14,
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| noteFontFamily| This sets the font family of actor-attached notes. | String | Required |  trebuchet ms, verdana, arial |
+     *
+     ***Notes:**
+     ***Default value: trebuchet ms **.
+     */
+    noteFontFamily: '"trebuchet ms", verdana, arial',
+    /**
+     * This sets the font weight of the note's description
+     * **Default value 400.
+     */
+    noteFontWeight: 400,
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| noteAlign | This sets the text alignment of actor-attached notes. | string | required | left, center, right|
+     *
+     ***Notes:**
+     ***Default value center**.
+     */
+    noteAlign: 'center',
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| messageFontSize | This sets the font size of actor messages. | Integer | Required | Any Positive Number |
+     *
+     ***Notes:**
+     ***Default value 16**.
+     */
+    messageFontSize: 16,
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| messageFontFamily | This sets the font family of actor messages. | String| Required | trebuchet ms", verdana, aria |
+     *
+     ***Notes:**
+     ***Default value:"trebuchet ms**.
+     */
+    messageFontFamily: '"trebuchet ms", verdana, arial',
+    /**
+     * This sets the font weight of the message's description
+     * **Default value 400.
+     */
+    messageFontWeight: 400,
+    /**
+     * This sets the auto-wrap state for the diagram
+     * **Default value false.
+     */
+    wrap: false,
+    /**
+     * This sets the auto-wrap padding for the diagram (sides only)
+     * **Default value 10.
+     */
+    wrapPadding: 10,
+    /**
+     * This sets the width of the loop-box (loop, alt, opt, par)
+     * **Default value 50.
+     */
+    labelBoxWidth: 50,
+    /**
+     * This sets the height of the loop-box (loop, alt, opt, par)
+     * **Default value 20.
+     */
+    labelBoxHeight: 20,
+    messageFont: function() {
+      return {
+        fontFamily: this.messageFontFamily,
+        fontSize: this.messageFontSize,
+        fontWeight: this.messageFontWeight
+      };
+    },
+    noteFont: function() {
+      return {
+        fontFamily: this.noteFontFamily,
+        fontSize: this.noteFontSize,
+        fontWeight: this.noteFontWeight
+      };
+    },
+    actorFont: function() {
+      return {
+        fontFamily: this.actorFontFamily,
+        fontSize: this.actorFontSize,
+        fontWeight: this.actorFontWeight
+      };
+    }
+  },
+
+  /**
+   * The object containing configurations specific for gantt diagrams*
+   */
+  gantt: {
+    /**
+     *### titleTopMargin
+     *
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| titleTopMargin | Margin top for the text over the gantt diagram | Integer | Required | Any Positive Value |
+     *
+     ***Notes:**
+     ***Default value 25**.
+     */
+    titleTopMargin: 25,
+
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| barHeight | The height of the bars in the graph | Integer | Required | Any Positive Value |
+     *
+     ***Notes:**
+     ***Default value 20**.
+     */
+    barHeight: 20,
+
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| barGap | The margin between the different activities in the gantt diagram. | Integer | Optional |Any Positive Value |
+     *
+     ***Notes:**
+     ***Default value 4**.
+     */
+    barGap: 4,
+
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| topPadding | Margin between title and gantt diagram and between axis and gantt diagram. | Integer | Required | Any Positive Value |
+     *
+     ***Notes:**
+     ***Default value 50**.
+     */
+    topPadding: 50,
+
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| leftPadding | The space allocated for the section name to the left of the activities. | Integer| Required | Any Positive Value |
+     *
+     ***Notes:**
+     ***Default value 75**.
+     */
+    leftPadding: 75,
+
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| gridLineStartPadding | Vertical starting position of the grid lines. | Integer | Required | Any Positive Value |
+     *
+     ***Notes:**
+     ***Default value 35**.
+     */
+    gridLineStartPadding: 35,
+
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| fontSize | Font size| Integer | Required | Any Positive Value |
+     *
+     ***Notes:**
+     ***Default value 11**.
+     */
+    fontSize: 11,
+
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| fontFamily | font Family | string | required |"Open-Sans", "sans-serif" |
+     *
+     ***Notes:**
+     *
+     ***Default value '"Open-Sans", "sans-serif"'**.
+     */
+    fontFamily: '"Open-Sans", "sans-serif"',
+
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| numberSectionStyles | The number of alternating section styles | Integer | 4 | Any Positive Value |
+     *
+     ***Notes:**
+     ***Default value 4**.
+     */
+    numberSectionStyles: 4,
+
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| axisFormat | Datetime format of the axis. | 3 | Required | Date in yy-mm-dd |
+     *
+     ***Notes:**
+     *
+     * This might need adjustment to match your locale and preferences
+     ***Default value '%Y-%m-%d'**.
+     */
+    axisFormat: '%Y-%m-%d'
+  },
+  /**
+   * The object containing configurations specific for journey diagrams
+   */
+  journey: {
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| diagramMarginX | margin to the right and left of the sequence diagram | Integer | Required | Any Positive Value |
+     *
+     ***Notes:**
+     ***Default value 50**.
+     */
+    diagramMarginX: 50,
+
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| diagramMarginY | margin to the over and under the sequence diagram. | Integer | Required | Any Positive Value|
+     *
+     ***Notes:**
+     ***Default value 10**..
+     */
+    diagramMarginY: 10,
+
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| actorMargin | Margin between actors. | Integer | Required | Any Positive Value|
+     *
+     ***Notes:**
+     ***Default value 50**.
+     */
+    actorMargin: 50,
+
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| width | Width of actor boxes | Integer | Required | Any Positive Value |
+     *
+     ***Notes:**
+     ***Default value 150**.
+     */
+    width: 150,
+
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| height | Height of actor boxes | Integer | Required | Any Positive Value |
+     *
+     ***Notes:**
+     ***Default value 65**.
+     */
+    height: 65,
+
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value |
+     *
+     ***Notes:**
+     ***Default value 10**.
+     */
+    boxMargin: 10,
+
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| boxTextMargin | margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value |
+     *
+     ***Notes:**
+     */
+    boxTextMargin: 5,
+
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| noteMargin | margin around notes. | Integer | Required | Any Positive Value |
+     *
+     ***Notes:**
+     ***Default value 10**.
+     */
+    noteMargin: 10,
+
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| messageMargin |Space between messages. | Integer | Required | Any Positive Value |
+     *
+     ***Notes:**
+     *
+     *Space between messages.
+     ***Default value 35**.
+     */
+    messageMargin: 35,
+
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| messageAlign |Multiline message alignment | 3 | 4 | left, center, right |
+     *
+     ***Notes:**default:center**
+     */
+    messageAlign: 'center',
+
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| bottomMarginAdj | Prolongs the edge of the diagram downwards. | Integer | 4 | Any Positive Value |
+     *
+     ***Notes:**Depending on css styling this might need adjustment.
+     ***Default value 1**.
+     */
+    bottomMarginAdj: 1,
+
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| useMaxWidth | See notes | Boolean | 4 | True, False |
+     *
+     ***Notes:**when this flag is set the height and width is set to 100% and is then scaling with the
+     *available space if not the absolute space required is used.
+     *
+     ***Default value true**.
+     */
+    useMaxWidth: true,
+
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| rightAngles | Curved Arrows become Right Angles,  | 3 | 4 | True, False |
+     *
+     ***Notes:**This will display arrows that start and begin at the same node as right angles, rather than a curves
+     ***Default value false**.
+     */
+    rightAngles: false
+  },
+  class: {
+    arrowMarkerAbsolute: false
+  },
+  git: {
+    arrowMarkerAbsolute: false
+  },
+  state: {
+    dividerMargin: 10,
+    sizeUnit: 5,
+    padding: 8,
+    textHeight: 10,
+    titleShift: -15,
+    noteMargin: 10,
+    forkWidth: 70,
+    forkHeight: 7,
+    // Used
+    miniPadding: 2,
+    // Font size factor, this is used to guess the width of the edges labels before rendering by dagre
+    // layout. This might need updating if/when switching font
+    fontSizeFactor: 5.02,
+    fontSize: 24,
+    labelHeight: 16,
+    edgeLengthFactor: '20',
+    compositTitleSize: 35,
+    radius: 5
+  },
+
+  /**
+   * The object containing configurations specific for entity relationship diagrams
+   */
+  er: {
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| diagramPadding | amount of padding around the diagram as a whole | Integer | Required | Any Positive Value |
+     *
+     ***Notes:**The amount of padding around the diagram as a whole so that embedded diagrams have margins, expressed in pixels
+     ***Default value: 20**.
+     */
+    diagramPadding: 20,
+
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| layoutDirection | Directional bias for layout of entities. | String | Required | "TB", "BT","LR","RL" |
+     *
+     ***Notes:**
+     *'TB' for Top-Bottom, 'BT'for Bottom-Top, 'LR' for Left-Right, or 'RL' for Right to Left.
+     * T = top, B = bottom, L = left, and R = right.
+     ***Default value: TB **.
+     */
+    layoutDirection: 'TB',
+
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| minEntityWidth | The mimimum width of an entity box, | Integer | Required| Any Positive Value  |
+     *
+     ***Notes:**expressed in pixels
+     ***Default value: 100**.
+     */
+    minEntityWidth: 100,
+
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| minEntityHeight| The minimum height of an entity box, | Integer | 4 | Any Positive Value |
+     *
+     ***Notes:**expressed in pixels
+     ***Default value: 75 **
+     */
+    minEntityHeight: 75,
+
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| entityPadding|minimum internal padding betweentext in box and  box borders| Integer | 4 | Any Positive Value |
+     *
+     ***Notes:**The minimum internal padding betweentext in an entity box and the enclosing box borders, expressed in pixels.
+     ***Default value: 15 **
+     */
+    entityPadding: 15,
+
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| stroke | Stroke color of box edges and lines | String | 4 | Any recognized color |
+     ***Default value: gray **
+     */
+    stroke: 'gray',
+
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| fill | Fill color of entity boxes | String | 4 | Any recognized color |
+     *
+     ***Notes:**
+     ***Default value:'honeydew'**
+     */
+    fill: 'honeydew',
+
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| fontSize| Font Size in pixels| Integer |  | Any Positive Value |
+     *
+     ***Notes:**Font size (expressed as an integer representing a number of pixels)
+     ***Default value: 12 **
+     */
+    fontSize: 12,
+
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| useMaxWidth | See Notes | Boolean | Required | true, false |
+     *
+     ***Notes:**
+     *When this flag is set to true, the diagram width is locked to 100% and
+     *scaled based on available space. If set to false, the diagram reserves its
+     *absolute width.
+     ***Default value: true**.
+     */
+    useMaxWidth: true
+  }
+};
+
+config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
+config.git.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
+
+export default config;

src/diagrams/class/classDb.js

@@ -1,13 +1,13 @@
 import { select } from 'd3';
 import { logger } from '../../logger';
-import configApi, { getConfig } from '../../config';
+import * as configApi from '../../config';
 import common from '../common/common';
 import utils from '../../utils';
 import mermaidAPI from '../../mermaidAPI';
 
 const MERMAID_DOM_ID_PREFIX = 'classid-';
 
-const config = getConfig();
+const config = configApi.getConfig();
 
 let relations = [];
 let classes = {};

src/diagrams/er/erDb.js

@@ -3,7 +3,7 @@
  */
 import { logger } from '../../logger';
 import mermaidAPI from '../../mermaidAPI';
-import configApi from '../../config';
+import * as configApi from '../../config';
 
 let entities = {};
 let relationships = [];

src/diagrams/flowchart/flowDb.js

@@ -1,13 +1,13 @@
 import { select } from 'd3';
 import utils from '../../utils';
-import configApi, { getConfig } from '../../config';
+import * as configApi from '../../config';
 import common from '../common/common';
 import mermaidAPI from '../../mermaidAPI';
 
 // const MERMAID_DOM_ID_PREFIX = 'mermaid-dom-id-';
 const MERMAID_DOM_ID_PREFIX = '';
 
-let config = getConfig();
+let config = configApi.defaultConfig;
 let vertices = {};
 let edges = [];
 let classes = [];
@@ -48,7 +48,7 @@ export const addVertex = function(_id, text, type, style, classes) {
     vertices[id] = { id: id, styles: [], classes: [] };
   }
   if (typeof text !== 'undefined') {
-    config = getConfig();
+    config = configApi.defaultConfig;
     txt = common.sanitizeText(text.trim(), config);
 
     // strip quotes if string starts and ends with a quote
@@ -224,7 +224,7 @@ const setTooltip = function(ids, tooltip) {
 const setClickFun = function(_id, functionName) {
   let id = _id;
   if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
-  if (getConfig().securityLevel !== 'loose') {
+  if (configApi.defaultConfig.securityLevel !== 'loose') {
     return;
   }
   if (typeof functionName === 'undefined') {
@@ -622,7 +622,7 @@ const destructLink = (_str, _startStr) => {
 
 export default {
   parseDirective,
-  getConfig: () => configApi.getConfig().flowchart,
+  defaultConfig: () => configApi.defaultConfig.flowchart,
   addVertex,
   addLink,
   updateLinkInterpolate,

src/diagrams/flowchart/styles.js

@@ -48,7 +48,7 @@ const getStyles = options =>
   }
 
   .cluster rect {
-    fill: ${options.secondBkg};
+    fill: ${options.clusterBkg};
     stroke: ${options.clusterBorder};
     stroke-width: 1px;
   }

src/diagrams/gantt/ganttDb.js

@@ -1,7 +1,7 @@
 import moment from 'moment-mini';
 import { sanitizeUrl } from '@braintree/sanitize-url';
 import { logger } from '../../logger';
-import configApi, { getConfig } from '../../config';
+import * as configApi from '../../config';
 import utils from '../../utils';
 import mermaidAPI from '../../mermaidAPI';
 
@@ -473,7 +473,7 @@ const compileTasks = function() {
  */
 export const setLink = function(ids, _linkStr) {
   let linkStr = _linkStr;
-  if (getConfig().securityLevel !== 'loose') {
+  if (configApi.getConfig().securityLevel !== 'loose') {
     linkStr = sanitizeUrl(_linkStr);
   }
   ids.split(',').forEach(function(id) {
@@ -502,7 +502,7 @@ export const setClass = function(ids, className) {
 };
 
 const setClickFun = function(id, functionName, functionArgs) {
-  if (getConfig().securityLevel !== 'loose') {
+  if (configApi.getConfig().securityLevel !== 'loose') {
     return;
   }
   if (typeof functionName === 'undefined') {

src/diagrams/pie/pieDb.js

@@ -3,7 +3,7 @@
  */
 import { logger } from '../../logger';
 import mermaidAPI from '../../mermaidAPI';
-import configApi from '../../config';
+import * as configApi from '../../config';
 
 let sections = {};
 let title = '';

src/diagrams/sequence/sequenceDb.js

@@ -1,5 +1,5 @@
 import mermaidAPI from '../../mermaidAPI';
-import configApi from '../../config';
+import * as configApi from '../../config';
 import common from '../common/common';
 import { logger } from '../../logger';
 

src/diagrams/sequence/sequenceDiagram.spec.js

@@ -1,6 +1,7 @@
 /* eslint-env jasmine */
 import { parser } from './parser/sequenceDiagram';
 import sequenceDb from './sequenceDb';
+import * as configApi from '../../config';
 import renderer from './sequenceRenderer';
 import mermaidAPI from '../../mermaidAPI';
 
@@ -925,7 +926,7 @@ describe('when checking the bounds in a sequenceDiagram', function() {
   });
 });
 
-describe('when rendering a sequenceDiagram', function() {
+describe('when rendering a sequenceDiagram APA', function() {
   beforeAll(() => {
     let conf = {
       diagramMarginX: 50,
@@ -941,14 +942,30 @@ describe('when rendering a sequenceDiagram', function() {
       wrap: false,
       mirrorActors: false
     };
-    mermaidAPI.initialize({ sequence: conf });
+    configApi.setSiteConfig({ logLevel: 5, sequence: conf });
+    // console.warn('Config = ', configApi.getConfig())
   });
   let conf;
   beforeEach(function() {
     mermaidAPI.reset();
+    conf = {
+      diagramMarginX: 50,
+      diagramMarginY: 10,
+      actorMargin: 50,
+      width: 150,
+      // Height of actor boxes
+      height: 65,
+      boxMargin: 10,
+      messageMargin: 40,
+      boxTextMargin: 15,
+      noteMargin: 25,
+      wrap: false,
+      mirrorActors: false
+    };
+    configApi.setSiteConfig({ logLevel: 5, sequence: conf });
     parser.yy = sequenceDb;
     parser.yy.clear();
-    conf = parser.yy.getConfig();
+    // conf = parser.yy.getConfig();
   });
   ['tspan', 'fo', 'old', undefined].forEach(function(textPlacement) {
     it(`
@@ -1093,7 +1110,7 @@ Alice->Bob: Hello Bob, how are you?
 Note over Alice,Bob: Looks
 Note over Bob,Alice: Looks back
 `;
-    mermaidAPI.initialize({logLevel:0})
+    // mermaidAPI.initialize({logLevel:0})
     mermaidAPI.parse(str);
     renderer.draw(str, 'tst');
 
@@ -1232,6 +1249,7 @@ Bob->>Alice: Fine!`;
     const { bounds, models } = renderer.bounds.getBounds();
     const msgs = parser.yy.getMessages();
     const mermaid = mermaidAPI.getConfig();
+    console.log(mermaid)
     expect(bounds.startx).toBe(-(conf.width / 2) - conf.actorMargin / 2);
     expect(bounds.starty).toBe(0);
     expect(mermaid.theme).toBe('dark');

src/diagrams/sequence/sequenceRenderer.js

@@ -4,11 +4,12 @@ import { logger } from '../../logger';
 import { parser } from './parser/sequenceDiagram';
 import common from '../common/common';
 import sequenceDb from './sequenceDb';
+import * as configApi from '../../config';
 import utils, { assignWithDepth } from '../../utils';
 
 parser.yy = sequenceDb;
 
-const conf = {};
+let conf = {};
 
 export const bounds = {
   data: {
@@ -191,6 +192,7 @@ export const bounds = {
     return this.verticalPos;
   },
   getBounds: function() {
+    console.log('here', this.data);
     return { bounds: this.data, models: this.models };
   }
 };
@@ -242,6 +244,28 @@ const drawNote = function(elem, noteModel) {
   bounds.models.addNote(noteModel);
 };
 
+const messageFont = cnf => {
+  return {
+    fontFamily: cnf.messageFontFamily,
+    fontSize: cnf.messageFontSize,
+    fontWeight: cnf.messageFontWeight
+  };
+};
+const noteFont = cnf => {
+  return {
+    fontFamily: cnf.noteFontFamily,
+    fontSize: cnf.noteFontSize,
+    fontWeight: cnf.noteFontWeight
+  };
+};
+const actorFont = cnf => {
+  return {
+    fontFamily: cnf.actorFontFamily,
+    fontSize: cnf.actorFontSize,
+    fontWeight: cnf.actorFontWeight
+  };
+};
+
 /**
  * Draws a message
  * @param g - the parent of the message element
@@ -251,7 +275,7 @@ const drawMessage = function(g, msgModel) {
   bounds.bumpVerticalPos(10);
   const { startx, stopx, starty, message, type, sequenceIndex, wrap } = msgModel;
   const lines = common.splitBreaks(message).length;
-  let textDims = utils.calculateTextDimensions(message, conf.messageFont());
+  let textDims = utils.calculateTextDimensions(message, messageFont(conf));
   const lineHeight = textDims.height / lines;
   msgModel.height += lineHeight;
 
@@ -457,7 +481,7 @@ function adjustLoopHeightForWrap(loopWidths, msg, preMargin, postMargin, addLoop
   let heightAdjust = postMargin;
   if (msg.id && msg.message && loopWidths[msg.id]) {
     let loopWidth = loopWidths[msg.id].width;
-    let textConf = conf.messageFont();
+    let textConf = messageFont(conf);
     msg.message = utils.wrapLabel(`[${msg.message}]`, loopWidth - 2 * conf.wrapPadding, textConf);
     msg.width = loopWidth;
     msg.wrap = true;
@@ -478,6 +502,8 @@ function adjustLoopHeightForWrap(loopWidths, msg, preMargin, postMargin, addLoop
  * @param id
  */
 export const draw = function(text, id) {
+  conf = configApi.getConfig().sequence;
+  console.log('there ', conf);
   parser.yy.clear();
   parser.yy.setWrap(conf.wrap);
   parser.parse(text + '\n');
@@ -734,7 +760,7 @@ const getMaxMessageWidthPerActor = function(actors, messages) {
       const isNote = msg.placement !== undefined;
       const isMessage = !isNote;
 
-      const textFont = isNote ? conf.noteFont() : conf.messageFont();
+      const textFont = isNote ? noteFont(conf) : messageFont(conf);
       let wrappedMessage = msg.wrap
         ? utils.wrapLabel(msg.message, conf.width - 2 * conf.wrapPadding, textFont)
         : msg.message;
@@ -827,10 +853,10 @@ const calculateActorMargins = function(actors, actorToMessageWidth) {
       actor.description = utils.wrapLabel(
         actor.description,
         conf.width - 2 * conf.wrapPadding,
-        conf.actorFont()
+        actorFont(conf)
       );
     }
-    const actDims = utils.calculateTextDimensions(actor.description, conf.actorFont());
+    const actDims = utils.calculateTextDimensions(actor.description, actorFont(conf));
     actor.width = actor.wrap
       ? conf.width
       : Math.max(conf.width, actDims.width + 2 * conf.wrapPadding);
@@ -868,8 +894,8 @@ const buildNoteModel = function(msg, actors) {
   let shouldWrap = msg.wrap && msg.message;
 
   let textDimensions = utils.calculateTextDimensions(
-    shouldWrap ? utils.wrapLabel(msg.message, conf.width, conf.noteFont()) : msg.message,
+    shouldWrap ? utils.wrapLabel(msg.message, conf.width, noteFont(conf)) : msg.message,
-    conf.noteFont()
+    noteFont(conf)
   );
   let noteModel = {
     width: shouldWrap
@@ -901,13 +927,9 @@ const buildNoteModel = function(msg, actors) {
   } else if (msg.to === msg.from) {
     textDimensions = utils.calculateTextDimensions(
       shouldWrap
-        ? utils.wrapLabel(
+        ? utils.wrapLabel(msg.message, Math.max(conf.width, actors[msg.from].width), noteFont(conf))
-            msg.message,
-            Math.max(conf.width, actors[msg.from].width),
-            conf.noteFont()
-          )
         : msg.message,
-      conf.noteFont()
+      noteFont(conf)
     );
     noteModel.width = shouldWrap
       ? Math.max(conf.width, actors[msg.from].width)
@@ -926,7 +948,7 @@ const buildNoteModel = function(msg, actors) {
     noteModel.message = utils.wrapLabel(
       msg.message,
       noteModel.width - 2 * conf.wrapPadding,
-      conf.noteFont()
+      noteFont(conf)
     );
   }
   logger.debug(
@@ -958,12 +980,12 @@ const buildMessageModel = function(msg, actors) {
   const toIdx = fromBounds[0] < toBounds[0] ? 0 : 1;
   const allBounds = fromBounds.concat(toBounds);
   const boundedWidth = Math.abs(toBounds[toIdx] - fromBounds[fromIdx]);
-  const msgDims = utils.calculateTextDimensions(msg.message, conf.messageFont());
+  const msgDims = utils.calculateTextDimensions(msg.message, messageFont(conf));
   if (msg.wrap && msg.message) {
     msg.message = utils.wrapLabel(
       msg.message,
       Math.max(boundedWidth + 2 * conf.wrapPadding, conf.width),
-      conf.messageFont()
+      messageFont(conf)
     );
   }
   return {

src/diagrams/state/stateDb.js

@@ -1,7 +1,7 @@
 import { logger } from '../../logger';
 import { generateId } from '../../utils';
 import mermaidAPI from '../../mermaidAPI';
-import configApi from '../../config';
+import * as configApi from '../../config';
 
 const clone = o => JSON.parse(JSON.stringify(o));
 

src/diagrams/user-journey/journeyDb.js

@@ -1,5 +1,5 @@
 import mermaidAPI from '../../mermaidAPI';
-import configApi from '../../config';
+import * as configApi from '../../config';
 
 let title = '';
 let currentSection = '';

src/mermaid.js

@@ -31,7 +31,7 @@ import utils from './utils';
  */
 const init = function() {
   const conf = mermaidAPI.getConfig();
-  // console.log('Starting rendering diagrams (init) - mermaid.init');
+  console.log('Starting rendering diagrams (init) - mermaid.init', conf);
   let nodes;
   if (arguments.length >= 2) {
     /*! sequence config was passed as #1 */
@@ -71,11 +71,11 @@ const init = function() {
   logger.debug('Start On Load before: ' + mermaid.startOnLoad);
   if (typeof mermaid.startOnLoad !== 'undefined') {
     logger.debug('Start On Load inner: ' + mermaid.startOnLoad);
-    mermaidAPI.initialize({ startOnLoad: mermaid.startOnLoad });
+    mermaidAPI.updateSiteConfig({ startOnLoad: mermaid.startOnLoad });
   }
 
   if (typeof mermaid.ganttConfig !== 'undefined') {
-    mermaidAPI.initialize({ gantt: mermaid.ganttConfig });
+    mermaidAPI.updateSiteConfig({ gantt: mermaid.ganttConfig });
   }
 
   let txt;

src/mermaidAPI.js

@@ -13,7 +13,15 @@
 import Stylis from 'stylis';
 import { select } from 'd3';
 import pkg from '../package.json';
-import { setConfig, getConfig, setSiteConfig, getSiteConfig } from './config';
+// import * as configApi from './config';
+// // , {
+// //   setConfig,
+// //   configApi.getConfig,
+// //   configApi.updateSiteConfig,
+// //   configApi.setSiteConfig,
+// //   configApi.getSiteConfig,
+// //   configApi.defaultConfig
+// // }
 import { logger, setLogLevel } from './logger';
 import utils, { assignWithDepth } from './utils';
 import flowRenderer from './diagrams/flowchart/flowRenderer';
@@ -50,7 +58,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';
+import * as configApi from './config';
 import getStyles from './styles';
 import theme from './themes';
 
@@ -198,17 +206,19 @@ export const decodeEntities = function(text) {
  * completed.
  */
 const render = function(id, _txt, cb, container) {
+  configApi.reset();
   let txt = _txt;
   const graphInit = utils.detectInit(txt);
   if (graphInit) {
-    reinitialize(graphInit);
+    configApi.addDirective(graphInit);
   } else {
     configApi.reset();
-    const siteConfig = getSiteConfig();
+    const siteConfig = configApi.getSiteConfig();
-    reinitialize(siteConfig);
+    configApi.addDirective(siteConfig);
   }
 
-  const cnf = getConfig();
+  const cnf = configApi.getConfig();
+  console.log('Render', cnf);
   // 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';
@@ -482,6 +492,7 @@ const handleDirective = function(p, directive, type) {
       });
 
       reinitialize(directive.args);
+      configApi.addDirective(directive.args);
       break;
     }
     case 'wrap':
@@ -520,22 +531,23 @@ function updateRendererConfigs(conf) {
   errorRenderer.setConf(conf.class);
 }
 
-function reinitialize(options) {
+function reinitialize() {
-  // console.warn(`mermaidAPI.reinitialize: v${pkg.version}`, options);
+  // `mermaidAPI.reinitialize: v${pkg.version}`,
-  if (options.theme && theme[options.theme]) {
+  //   JSON.stringify(options),
-    // Todo merge with user options
+  //   options.themeVariables.primaryColor;
-    options.themeVariables = options.theme;
+  // // if (options.theme && theme[options.theme]) {
-  }
+  // //   options.themeVariables = theme[options.theme].getThemeVariables(options.themeVariables);
-
+  // // }
-  // Set default options
+  // // Set default options
-  const config = typeof options === 'object' ? setConfig(options) : getSiteConfig();
+  // const config =
-  updateRendererConfigs(config);
+  //   typeof options === 'object' ? configApi.setConfig(options) : configApi.getSiteConfig();
-  setLogLevel(config.logLevel);
+  // updateRendererConfigs(config);
-  logger.debug('mermaidAPI.reinitialize: ', config);
+  // setLogLevel(config.logLevel);
+  // logger.debug('mermaidAPI.reinitialize: ', config);
 }
 
 function initialize(options) {
-  // console.log(`mermaidAPI.initialize: v${pkg.version} ${options}`);
+  logger.debug(`mermaidAPI.initialize: v${pkg.version} ${options}`);
   // Set default options
 
   if (options && options.theme && theme[options.theme]) {
@@ -545,40 +557,39 @@ function initialize(options) {
     if (options) options.themeVariables = theme.default.getThemeVariables();
   }
 
-  const config = typeof options === 'object' ? setSiteConfig(options) : getSiteConfig();
+  const config =
+    typeof options === 'object' ? configApi.setSiteConfig(options) : configApi.getSiteConfig();
 
   updateRendererConfigs(config);
   setLogLevel(config.logLevel);
-  logger.debug('mermaidAPI.initialize: ', config);
+  // logger.debug('mermaidAPI.initialize: ', config);
 }
 
-// function getConfig () {
-//   console.warn('get config')
-//   return config
-// }
 const mermaidAPI = Object.freeze({
   render,
   parse,
   parseDirective,
   initialize,
   reinitialize,
-  getConfig,
+  getConfig: configApi.getConfig,
-  getSiteConfig,
+  setConfig: configApi.setConfig,
+  getSiteConfig: configApi.getSiteConfig,
+  updateSiteConfig: configApi.updateSiteConfig,
   reset: () => {
-    // console.warn('reset');
+    console.warn('reset');
     configApi.reset();
-    const siteConfig = getSiteConfig();
+    const siteConfig = configApi.getSiteConfig();
     updateRendererConfigs(siteConfig);
   },
   globalReset: () => {
     configApi.reset(configApi.defaultConfig);
-    updateRendererConfigs(getConfig());
+    updateRendererConfigs(configApi.getConfig());
   },
   defaultConfig: configApi.defaultConfig
 });
 
-setLogLevel(getConfig().logLevel);
+setLogLevel(configApi.getConfig().logLevel);
-configApi.reset(getConfig());
+configApi.reset(configApi.getConfig());
 
 export default mermaidAPI;
 /**

src/mermaidAPI.spec.js

@@ -31,7 +31,7 @@ describe('when using mermaidAPI and ', function() {
       let config = mermaidAPI.getConfig();
 
       expect(config.testObject.test1).toBe(1);
-      mermaidAPI.initialize({ testObject: { test3: true } });
+      mermaidAPI.updateSiteConfig({ testObject: { test3: true } });
       config = mermaidAPI.getConfig();
 
       expect(config.testObject.test1).toBe(1);
@@ -44,49 +44,14 @@ describe('when using mermaidAPI and ', function() {
         securityLevel: 'loose'
       };
       mermaidAPI.initialize(config);
+      mermaidAPI.setConfig({securityLevel:'strict', logLevel: 1});
+      expect(mermaidAPI.getConfig().logLevel).toBe(1);
+      expect(mermaidAPI.getConfig().securityLevel).toBe('strict');
+      mermaidAPI.globalReset();
       expect(mermaidAPI.getConfig().logLevel).toBe(0);
       expect(mermaidAPI.getConfig().securityLevel).toBe('loose');
-      mermaidAPI.globalReset();
-      expect(mermaidAPI.getConfig()).toEqual(mermaidAPI.defaultConfig);
-    });
-    it('should reset mermaid config to site defaults', function() {
-      let config = {
-        logLevel: 0
-      };
-      mermaidAPI.initialize(config);
-      const siteConfig = mermaidAPI.getSiteConfig();
-      expect(mermaidAPI.getConfig().logLevel).toBe(0);
-      config.logLevel = 3;
-      config.securityLevel = 'loose';
-      mermaidAPI.reinitialize(config);
-      expect(mermaidAPI.getConfig().logLevel).toBe(3);
-      expect(mermaidAPI.getConfig().securityLevel).toBe('strict');
-      mermaidAPI.reset();
-      expect(mermaidAPI.getSiteConfig()).toEqual(siteConfig)
-      expect(mermaidAPI.getConfig()).toEqual(siteConfig);
-    });
-    it('should allow site config secure to global defaults', function() {
-      let config = {
-        logLevel: 0,
-        secure: ['foo']
-      };
-      mermaidAPI.initialize(config);
-      const siteConfig = mermaidAPI.getSiteConfig();
-      expect(mermaidAPI.getConfig().logLevel).toBe(0);
-      expect(mermaidAPI.getConfig().secure).toContain('foo');
-      config = {
-        logLevel: 3,
-        securityLevel: 'loose',
-        secure: ['foo', 'bar']
-      };
-      mermaidAPI.reinitialize(config);
-      expect(mermaidAPI.getConfig().secure).toEqual(mermaidAPI.getSiteConfig().secure);
-      expect(mermaidAPI.getConfig().securityLevel).toBe('strict');
-      expect(mermaidAPI.getConfig().secure).not.toContain('bar');
-      mermaidAPI.reset();
-      expect(mermaidAPI.getSiteConfig()).toEqual(siteConfig)
-      expect(mermaidAPI.getConfig()).toEqual(siteConfig);
     });
+
     it('should prevent changes to site defaults (sneaky)', function() {
       let config = {
         logLevel: 0

src/themes/theme-base.js

@@ -40,7 +40,7 @@ class Theme {
     /* Main */
     this.secondaryColor = adjust(this.primaryColor, { h: 120 });
     this.tertiaryColor = adjust(this.primaryColor, { h: -160 });
-
+    console.warn('primary color', this.primaryColor, 'tertiary - color', this.tertiaryColor);
     this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode);
     this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode);
     this.tertiaryBorderColor = mkBorder(this.tertiaryColor, this.darkMode);

src/themes/theme-default.js

@@ -161,6 +161,6 @@ class Theme {
 export const getThemeVariables = userOverrides => {
   const theme = new Theme();
   theme.calculate(userOverrides);
-  console.info('Theme(default)', { userOverrides, theme });
+  // console.info('Theme(default)', { userOverrides, theme });
   return theme;
 };

yarn.lock

@@ -9,6 +9,13 @@
   dependencies:
     "@babel/highlight" "^7.8.3"
 
+"@babel/code-frame@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.10.4.tgz#168da1a36e90da68ae8d49c0f1b48c7c6249213a"
+  integrity sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==
+  dependencies:
+    "@babel/highlight" "^7.10.4"
+
 "@babel/compat-data@^7.8.4":
   version "7.8.5"
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.8.5.tgz#d28ce872778c23551cbb9432fc68d28495b613b9"
@@ -49,6 +56,15 @@
     lodash "^4.17.13"
     source-map "^0.5.0"
 
+"@babel/generator@^7.10.5":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.10.5.tgz#1b903554bc8c583ee8d25f1e8969732e6b829a69"
+  integrity sha512-3vXxr3FEW7E7lJZiWQ3bM4+v/Vyr9C+hpolQ8BGFr9Y8Ri2tFLWTixmwKBafDujO1WVah4fhZBeU1bieKdghig==
+  dependencies:
+    "@babel/types" "^7.10.5"
+    jsesc "^2.5.1"
+    source-map "^0.5.0"
+
 "@babel/helper-annotate-as-pure@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.8.3.tgz#60bc0bc657f63a0924ff9a4b4a0b24a13cf4deee"
@@ -129,6 +145,15 @@
     "@babel/traverse" "^7.8.3"
     "@babel/types" "^7.8.3"
 
+"@babel/helper-function-name@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.10.4.tgz#d2d3b20c59ad8c47112fa7d2a94bc09d5ef82f1a"
+  integrity sha512-YdaSyz1n8gY44EmN7x44zBn9zQ1Ry2Y+3GTA+3vH6Mizke1Vw0aWDM66FOYEPw8//qKkmqOckrGgTYa+6sceqQ==
+  dependencies:
+    "@babel/helper-get-function-arity" "^7.10.4"
+    "@babel/template" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
 "@babel/helper-function-name@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.8.3.tgz#eeeb665a01b1f11068e9fb86ad56a1cb1a824cca"
@@ -138,6 +163,13 @@
     "@babel/template" "^7.8.3"
     "@babel/types" "^7.8.3"
 
+"@babel/helper-get-function-arity@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.4.tgz#98c1cbea0e2332f33f9a4661b8ce1505b2c19ba2"
+  integrity sha512-EkN3YDB+SRDgiIUnNgcmiD361ti+AVbL3f3Henf6dqqUyr5dMsorno0lJWJuLhDhkI5sYEpgj6y9kB8AOU1I2A==
+  dependencies:
+    "@babel/types" "^7.10.4"
+
 "@babel/helper-get-function-arity@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.8.3.tgz#b894b947bd004381ce63ea1db9f08547e920abd5"
@@ -226,6 +258,13 @@
     "@babel/template" "^7.8.3"
     "@babel/types" "^7.8.3"
 
+"@babel/helper-split-export-declaration@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.10.4.tgz#2c70576eaa3b5609b24cb99db2888cc3fc4251d1"
+  integrity sha512-pySBTeoUff56fL5CBU2hWm9TesA4r/rOkI9DyJLvvgz09MB9YtfIYe3iBriVaYNaPe+Alua0vBIOVOLs2buWhg==
+  dependencies:
+    "@babel/types" "^7.10.4"
+
 "@babel/helper-split-export-declaration@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.8.3.tgz#31a9f30070f91368a7182cf05f831781065fc7a9"
@@ -233,6 +272,11 @@
   dependencies:
     "@babel/types" "^7.8.3"
 
+"@babel/helper-validator-identifier@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz#a78c7a7251e01f616512d31b10adcf52ada5e0d2"
+  integrity sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==
+
 "@babel/helper-wrap-function@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.8.3.tgz#9dbdb2bb55ef14aaa01fe8c99b629bd5352d8610"
@@ -252,6 +296,15 @@
     "@babel/traverse" "^7.8.4"
     "@babel/types" "^7.8.3"
 
+"@babel/highlight@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.10.4.tgz#7d1bdfd65753538fabe6c38596cdb76d9ac60143"
+  integrity sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.10.4"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
 "@babel/highlight@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.8.3.tgz#28f173d04223eaaa59bc1d439a3836e6d1265797"
@@ -271,6 +324,11 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.8.4.tgz#d1dbe64691d60358a974295fa53da074dd2ce8e8"
   integrity sha512-0fKu/QqildpXmPVaRBoXOlyBb3MC+J0A66x97qEfLOMkn3u6nfY5esWogQwi/K0BjASYy4DbnsEWnpNL6qT5Mw==
 
+"@babel/parser@^7.10.4", "@babel/parser@^7.10.5", "@babel/parser@^7.7.0":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.10.5.tgz#e7c6bf5a7deff957cec9f04b551e2762909d826b"
+  integrity sha512-wfryxy4bE1UivvQKSQDU4/X6dr+i8bctjUjj8Zyt3DQy7NtPizJXT8M52nqpNKL+nq2PW8lxk4ZqLj0fD4B4hQ==
+
 "@babel/plugin-proposal-async-generator-functions@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.8.3.tgz#bad329c670b382589721b27540c7d288601c6e6f"
@@ -956,6 +1014,15 @@
     pirates "^4.0.0"
     source-map-support "^0.5.16"
 
+"@babel/template@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.10.4.tgz#3251996c4200ebc71d1a8fc405fba940f36ba278"
+  integrity sha512-ZCjD27cGJFUB6nmCB1Enki3r+L5kJveX9pq1SvAUKoICy6CZ9yD8xO086YXdYhvNjBdnekm4ZnaP5yC8Cs/1tA==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/parser" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
 "@babel/template@^7.4.0", "@babel/template@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.8.3.tgz#e02ad04fe262a657809327f578056ca15fd4d1b8"
@@ -980,6 +1047,21 @@
     globals "^11.1.0"
     lodash "^4.17.13"
 
+"@babel/traverse@^7.7.0":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.10.5.tgz#77ce464f5b258be265af618d8fddf0536f20b564"
+  integrity sha512-yc/fyv2gUjPqzTz0WHeRJH2pv7jA9kA7mBX2tXl/x5iOE81uaVPuGPtaYk7wmkx4b67mQ7NqI8rmT2pF47KYKQ==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/generator" "^7.10.5"
+    "@babel/helper-function-name" "^7.10.4"
+    "@babel/helper-split-export-declaration" "^7.10.4"
+    "@babel/parser" "^7.10.5"
+    "@babel/types" "^7.10.5"
+    debug "^4.1.0"
+    globals "^11.1.0"
+    lodash "^4.17.19"
+
 "@babel/types@^7.0.0", "@babel/types@^7.1.3", "@babel/types@^7.3.0", "@babel/types@^7.4.0", "@babel/types@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.8.3.tgz#5a383dffa5416db1b73dedffd311ffd0788fb31c"
@@ -989,6 +1071,15 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.10.4", "@babel/types@^7.10.5", "@babel/types@^7.7.0":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.10.5.tgz#d88ae7e2fde86bfbfe851d4d81afa70a997b5d15"
+  integrity sha512-ixV66KWfCI6GKoA/2H9v6bQdbfXEwwpOdQ8cRvb4F+eyvhlaHxWFMQB4+3d9QFJXZsiiiqVrewNV0DFEQpyT4Q==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.10.4"
+    lodash "^4.17.19"
+    to-fast-properties "^2.0.0"
+
 "@braintree/sanitize-url@^3.1.0":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@braintree/sanitize-url/-/sanitize-url-3.1.0.tgz#8ff71d51053cd5ee4981e5a501d80a536244f7fd"
@@ -2022,6 +2113,18 @@ babel-core@7.0.0-bridge.0:
   resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-7.0.0-bridge.0.tgz#95a492ddd90f9b4e9a4a1da14eb335b87b634ece"
   integrity sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg==
 
+babel-eslint@^10.1.0:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-10.1.0.tgz#6968e568a910b78fb3779cdd8b6ac2f479943232"
+  integrity sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@babel/parser" "^7.7.0"
+    "@babel/traverse" "^7.7.0"
+    "@babel/types" "^7.7.0"
+    eslint-visitor-keys "^1.0.0"
+    resolve "^1.12.0"
+
 babel-jest@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-24.9.0.tgz#3fc327cb8467b89d14d7bc70e315104a783ccd54"
@@ -4178,6 +4281,11 @@ eslint-utils@^1.4.3:
   dependencies:
     eslint-visitor-keys "^1.1.0"
 
+eslint-visitor-keys@^1.0.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz#30ebd1ef7c2fdff01c3a4f151044af25fab0523e"
+  integrity sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==
+
 eslint-visitor-keys@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz#e2a82cea84ff246ad6fb57f9bde5b46621459ec2"
@@ -6963,6 +7071,11 @@ lodash@4.17.15, lodash@^4.0.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.13
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
   integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
 
+lodash@^4.17.19:
+  version "4.17.19"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.19.tgz#e48ddedbe30b3321783c5b4301fbd353bc1e4a4b"
+  integrity sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==
+
 log-driver@^1.2.7:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/log-driver/-/log-driver-1.2.7.tgz#63b95021f0702fedfa2c9bb0a24e7797d71871d8"
@@ -9143,6 +9256,13 @@ resolve@^1.1.3, resolve@^1.10.0, resolve@^1.3.2, resolve@^1.8.1:
   dependencies:
     path-parse "^1.0.6"
 
+resolve@^1.12.0:
+  version "1.17.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.17.0.tgz#b25941b54968231cc2d1bb76a79cb7f2c0bf8444"
+  integrity sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==
+  dependencies:
+    path-parse "^1.0.6"
+
 restore-cursor@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-1.0.1.tgz#34661f46886327fed2991479152252df92daa541"