Merge pull request #24 from mermaid-js/develop

merge from mermaid-js:develop

.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/integration/rendering/flowchart.spec.js

@@ -529,17 +529,19 @@ describe('Flowchart', () => {
     imgSnapshotTest(
       `graph TB
       TITLE["Link Click Events<br>(click the nodes below)"]
-      A[link test]
-      B[anchor test]
-      C[mailto test]
-      D[other protocol test]
-      E[script test]
-      TITLE --> A & B & C & D & E
-      click A "https://mermaid-js.github.io/mermaid/#/" "link test"
-      click B "#link-clicked" "anchor test"
-      click C "mailto:user@user.user" "mailto test"
-      click D "notes://do-your-thing/id" "other protocol test"
-      click E "javascript:alert('test')" "script test"
+      A["link test (open in same tab)"]
+      B["link test (open in new tab)"]
+      C[anchor test]
+      D[mailto test]
+      E[other protocol test]
+      F[script test]
+      TITLE --> A & B & C & D & E & F
+      click A "https://mermaid-js.github.io/mermaid/#/" "link test (open in same tab)"
+      click B "https://mermaid-js.github.io/mermaid/#/" "link test (open in new tab)" _blank
+      click C "#link-clicked"
+      click D "mailto:user@user.user" "mailto test"
+      click E "notes://do-your-thing/id" "other protocol test"
+      click F "javascript:alert('test')" "script test"
       `,
       { securityLevel: 'loose' }
       );

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)
@@ -74,12 +74,30 @@ stateDiagram-v2
   A --> D: asd123
       </div>
       </div>
+      %%{init: {'theme': 'base', 'themeVariables':{ 'primaryColor': '#ff0000'}}}%%
       <div class="mermaid" style="width: 50%; height: 20%;">
+        %%{init: {'theme': 'dark'}}%%
 
-        classDiagram
-    Customer "1" --> "*" Ticket
-    Student "1" --> "1..*" Course
-    Galaxy --> "many" Star : Contains
+        flowchart TB
+        subgraph apa
+          a --> A %% comment
+          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="mermaid2" 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 +106,8 @@ stateDiagram-v2
           // console.error('Mermaid error: ', err);
         };
       mermaid.initialize({
-        // theme: 'dark',
+        theme: 'forest',
+        // themeVariables:{primaryColor: '#ff0000'},
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,

cypress/platform/showcase_base.html

@@ -11,7 +11,6 @@
       body {
         /* background: rgb(221, 208, 208); */
         background: #f4f4f4;
-        /* background: #0c0c0c; */
         font-family: 'Arial';
         height: 100%;
         width: 100%;
@@ -93,6 +92,31 @@
                 John-->Alice: Great!
             end
       </div>
+      <div class="mermaid width height" >
+%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
+
+classDiagram
+	Animal "1" <|-- Duck
+	Animal <|-- Fish
+	Animal <--o Zebra
+	Animal : +int age
+	Animal : +String gender
+	Animal: +isMammal()
+	Animal: +mate()
+	class Duck{
+		+String beakColor
+		+swim()
+		+quack()
+	}
+	class Fish{
+		-int sizeInFeet
+		-canEat()
+	}
+	class Zebra{
+		+bool is_wild
+		+run()
+	}
+      </div>
       <div class="mermaid width height">
 gantt
        dateFormat                :YYYY-MM-DD
@@ -152,7 +176,7 @@ gantt
 
       </div>
       <div class="mermaid width height2">
-%%{init2: {'securityLevel': 'loose', 'theme':'base'}}%%
+%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
 stateDiagram-v2
         [*] --> Active
 
@@ -209,7 +233,7 @@ journey
         };
       mermaid.initialize({
         theme: 'base',
-        themeVariables: { primaryColor: '#ff0000'},
+        // themeVariables:
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,

cypress/platform/showcase_base_dark.html

@@ -0,0 +1,245 @@
+<html>
+  <head>
+    <link
+      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+    />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
+    <style>
+      body {
+        /* background: rgb(221, 208, 208); */
+        background: #f4f4f4;
+        background: #222;
+        font-family: 'Arial';
+        height: 100%;
+        width: 100%;
+        margin: 0;
+        padding: 0;
+        }
+      h1 { color: grey;}
+      .mermaid2 {
+        display: none;
+      }
+      .height {
+        min-height: 600px;
+        height: 600px;
+      }
+      .height2 {
+        min-height: 600px;
+        height: 1300px;
+      }
+      .width {
+        width: 33%;
+        border: 1px solid blue;
+        padding: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Showcases of diagrams</h1>
+    <div class="flex flex-wrap">
+      <div class="mermaid width height">
+        graph TD
+          A[Christmas] -->|Get money| B(Go shopping)
+          B --> C{Let me think}
+          B --> G[/Another/]
+          C ==>|One| D[Laptop]
+          C -->|Two| E[iPhone]
+          C -->|Three| F[fa:fa-car Car]
+          subgraph section
+            C
+            D
+            E
+            F
+            G
+          end
+      </div>
+      <div class="mermaid width height">
+%%{init2: {'securityLevel': 'loose', 'theme':'base'}}%%
+        flowchart TD
+          A[Christmas] -->|Get money| B(Go shopping)
+          B --> C{Let me think}
+          B --> G[Another]
+          C ==>|One| D[Laptop]
+          C x--x|Two| E[iPhone]
+          C o--o|Three| F[fa:fa-car Car]
+          subgraph section
+            C
+            D
+            E
+            F
+            G
+          end
+      </div>
+      <div class="mermaid width height" >
+        sequenceDiagram
+          autonumber
+          par Action 1
+            Alice->>John: Hello John, how are you?
+          and Action 2
+            Alice->>Bob: Hello Bob, how are you?
+          end
+          Alice->>+John: Hello John, how are you?
+          Alice->>+John: John, can you hear me?
+          John-->>-Alice: Hi Alice, I can hear you!
+          Note right of John: John is perceptive
+          John-->>-Alice: I feel great!
+              loop Every minute
+                John-->Alice: Great!
+            end
+      </div>
+      <div class="mermaid width height" >
+classDiagram
+	Animal "1" <|-- Duck
+	Animal <|-- Fish
+	Animal <--o Zebra
+	Animal : +int age
+	Animal : +String gender
+	Animal: +isMammal()
+	Animal: +mate()
+	class Duck{
+		+String beakColor
+		+swim()
+		+quack()
+	}
+	class Fish{
+		-int sizeInFeet
+		-canEat()
+	}
+	class Zebra{
+		+bool is_wild
+		+run()
+	}
+      </div>
+      <div class="mermaid width height">
+gantt
+       dateFormat                :YYYY-MM-DD
+       title                     Adding GANTT diagram functionality to mermaid
+       excludes                  :excludes the named dates/days from being included in a charted task..
+       section A section
+       Completed task            :done,    des1, 2014-01-06,2014-01-08
+       Active task               :active,  des2, 2014-01-09, 3d
+       Future task               :         des3, after des2, 5d
+       Future task2              :         des4, after des3, 5d
+
+       section Critical tasks
+       Completed task in the critical line :crit, done, 2014-01-06,24h
+       Implement parser and jison          :crit, done, after des1, 2d
+       Create tests for parser             :crit, active, 3d
+       Future task in critical line        :crit, 5d
+       Create tests for renderer           :2d
+       Add to mermaid                      :1d
+
+       section Documentation
+       Describe gantt syntax               :active, a1, after des1, 3d
+       Add gantt diagram to demo page      :after a1  , 20h
+       Add another diagram to demo page    :doc1, after a1  , 48h
+
+       section Last section
+       Describe gantt syntax               :after doc1, 3d
+       Add gantt diagram to demo page      :20h
+       Add another diagram to demo page    :48h
+      </div>
+      <div class="mermaid width height2">
+      stateDiagram
+        [*] --> Active
+
+        state Active {
+            [*] --> NumLockOff
+            NumLockOff --> NumLockOn : EvNumLockPressed
+            NumLockOn --> NumLockOff : EvNumLockPressed
+            --
+            [*] --> CapsLockOff
+            CapsLockOff --> CapsLockOn : EvCapsLockPressed
+            CapsLockOn --> CapsLockOff : EvCapsLockPressed
+            --
+            [*] --> ScrollLockOff
+            ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
+            ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
+        }
+        state SomethingElse {
+          A --> B
+          B --> A
+        }
+
+        Active --> SomethingElse
+        note right of SomethingElse : This is the note to the right.
+
+        SomethingElse --> [*]
+
+      </div>
+      <div class="mermaid width height2">
+stateDiagram-v2
+        [*] --> Active
+
+        state Active {
+            [*] --> NumLockOff
+            NumLockOff --> NumLockOn : EvNumLockPressed
+            NumLockOn --> NumLockOff : EvNumLockPressed
+            --
+            [*] --> CapsLockOff
+            CapsLockOff --> CapsLockOn : EvCapsLockPressed
+            CapsLockOn --> CapsLockOff : EvCapsLockPressed
+            --
+            [*] --> ScrollLockOff
+            ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
+            ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
+        }
+        state SomethingElse {
+          A --> B
+          B --> A
+        }
+
+        Active --> SomethingElse2
+        note right of SomethingElse2 : This is the note to the right.
+
+        SomethingElse2 --> [*]
+      </div>
+      <div class="mermaid width height2">
+      erDiagram
+        CUSTOMER }|..|{ DELIVERY-ADDRESS : has
+        CUSTOMER ||--o{ ORDER : places
+        CUSTOMER ||--o{ INVOICE : "liable for"
+        DELIVERY-ADDRESS ||--o{ ORDER : receives
+        INVOICE ||--|{ ORDER : covers
+        ORDER ||--|{ ORDER-ITEM : includes
+        PRODUCT-CATEGORY ||--|{ PRODUCT : contains
+        PRODUCT ||--o{ ORDER-ITEM : "ordered in"
+      </div>
+      <div class="mermaid width height">
+journey
+            title My working day
+            section Go to work
+              Make tea: 5: Me
+              Go upstairs: 3: Me
+              Do work: 1: Me, Cat
+            section Go home
+              Go downstairs: 5: Me
+              Sit down: 5: Me
+      </div>
+
+  <script src="./mermaid.js"></script>
+    <script>
+      mermaid.parseError = function (err, hash) {
+          // console.error('Mermaid error: ', err);
+        };
+      mermaid.initialize({
+        theme: 'base',
+        themeVariables: { primaryColor: '#9400D3', darkMode: true, background: '#222', textColor:'white', primaryTextColor: '#f4f4f4', nodeBkg: '#ff0000', mainBkg:'#0000ff', tertiaryColor:'#ffffcc' },
+        // arrowMarkerAbsolute: true,
+        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
+        logLevel: 0,
+        flowchart: { curve: 'cardinal', "htmlLabels": false },
+        // gantt: { axisFormat: '%m/%d/%Y' },
+        sequence: { actorMargin: 50, showSequenceNumbers: true },
+        // sequenceDiagram: { actorMargin: 300 } // deprecated
+        fontFamily: '"arial", sans-serif',
+        curve: 'cardinal',
+        // securityLevel: 'strict'
+      });
+      function callback(){alert('It worked');}
+    </script>
+  </body>
+</html>

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}
@@ -88,6 +88,31 @@
               loop Every minute
                 John-->Alice: Great!
             end
+      </div>
+            <div class="mermaid width height" >
+%%{init: {'theme':'dark'}}%%
+
+classDiagram
+	Animal "1" <|-- Duck
+	Animal <|-- Fish
+	Animal <--o Zebra
+	Animal : +int age
+	Animal : +String gender
+	Animal: +isMammal()
+	Animal: +mate()
+	class Duck{
+		+String beakColor
+		+swim()
+		+quack()
+	}
+	class Fish{
+		-int sizeInFeet
+		-canEat()
+	}
+	class Zebra{
+		+bool is_wild
+		+run()
+	}
       </div>
       <div class="mermaid width height">
 gantt
@@ -141,6 +166,7 @@ gantt
         }
 
         Active --> SomethingElse
+        SomethingElse --> [*]
         note right of SomethingElse : This is the note to the right.
       </div>
       <div class="mermaid width height2">
@@ -166,6 +192,7 @@ gantt
         }
 
         Active --> SomethingElse2
+        SomethingElse2 --> [*]
         note right of SomethingElse2 : This is the note to the right.
       </div>
       <div class="mermaid width height2">
@@ -197,7 +224,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/showcase_default.html

@@ -88,6 +88,29 @@
                 John-->Alice: Great!
             end
       </div>
+      <div class="mermaid width height" >
+classDiagram
+	Animal "1" <|-- Duck
+	Animal <|-- Fish
+	Animal <--o Zebra
+	Animal : +int age
+	Animal : +String gender
+	Animal: +isMammal()
+	Animal: +mate()
+	class Duck{
+		+String beakColor
+		+swim()
+		+quack()
+	}
+	class Fish{
+		-int sizeInFeet
+		-canEat()
+	}
+	class Zebra{
+		+bool is_wild
+		+run()
+	}
+      </div>
       <div class="mermaid width height">
 gantt
        dateFormat                :YYYY-MM-DD

cypress/platform/showcase_forest.html

@@ -89,6 +89,31 @@
                 John-->Alice: Great!
             end
       </div>
+      <div class="mermaid width height" >
+%%{init: {'theme':'forest'}}%%
+
+classDiagram
+	Animal "1" <|-- Duck
+	Animal <|-- Fish
+	Animal <--o Zebra
+	Animal : +int age
+	Animal : +String gender
+	Animal: +isMammal()
+	Animal: +mate()
+	class Duck{
+		+String beakColor
+		+swim()
+		+quack()
+	}
+	class Fish{
+		-int sizeInFeet
+		-canEat()
+	}
+	class Zebra{
+		+bool is_wild
+		+run()
+	}
+      </div>
       <div class="mermaid width height">
 gantt
        dateFormat                :YYYY-MM-DD
@@ -142,6 +167,7 @@ gantt
 
         Active --> SomethingElse
         note right of SomethingElse : This is the note to the right.
+        SomethingElse --> [*]
       </div>
       <div class="mermaid width height2">
       stateDiagram-v2

cypress/platform/showcase_neutral.html

@@ -89,6 +89,31 @@
                 John-->Alice: Great!
             end
       </div>
+      <div class="mermaid width height" >
+%%{init: {'theme':'neutral'}}%%
+
+classDiagram
+	Animal "1" <|-- Duck
+	Animal <|-- Fish
+	Animal <--o Zebra
+	Animal : +int age
+	Animal : +String gender
+	Animal: +isMammal()
+	Animal: +mate()
+	class Duck{
+		+String beakColor
+		+swim()
+		+quack()
+	}
+	class Fish{
+		-int sizeInFeet
+		-canEat()
+	}
+	class Zebra{
+		+bool is_wild
+		+run()
+	}
+      </div>
       <div class="mermaid width height">
 gantt
        dateFormat                :YYYY-MM-DD

cypress/platform/theme-directives.html

@@ -13,105 +13,107 @@
         /* background:#333; */
         font-family: 'Arial';
         }
-      h1 { color: grey;}
+      h1 {
+        color: #333;
+        font-size: 20px;
+        text-decoration: underline;
+      }
       .mermaid2 {
         display: none;
       }
-      .someClass > *   {
-        /* fill: red !important; */
+      .dark {
+        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%;">
-%%{init: { 'logLevel': 0, 'theme': 'default'} }%%
-graph TD
-          A[Default] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
+      <div class="size">
+        <h1>Default</h1>
+        <div class="mermaid" >
+  %%{init: { 'logLevel': 0, 'theme': 'default'} }%%
+  graph TD
+            A(Start) --> B[/Another/]
+            A[/Another/] --> C[End]
+            subgraph section
+              B
+              C
+            end
+        </div>
       </div>
-      <div class="mermaid" style="width: 50%; height: 20%;">
-%%{init: { 'logLevel': 1, 'theme': 'forest'} }%%
-      graph TD
-          A[Forest] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
+      <div class="size">
+        <h1>Forest</h1>
+        <div class="mermaid" >
+  %%{init: { 'logLevel': 1, 'theme': 'forest'} }%%
+  graph TD
+            A(Start) --> B[/Another/]
+            A[/Another/] --> C[End]
+            subgraph section
+              B
+              C
+            end
+        </div>
       </div>
-      <div class="mermaid" style="width: 50%; height: 20%;">
-      %%{init: { 'logLevel': 1, 'theme': 'neutral'} }%%
+      <div class="size">
+        <h1>Neutral</h1>
+        <div class="mermaid" >
+        %%{init: { 'logLevel': 1, 'theme': 'neutral'} }%%
+  graph TD
+            A(Start) --> B[/Another/]
+            A[/Another/] --> C[End]
+            subgraph section
+              B
+              C
+            end
+        </div>
+      </div>
+      <div class="size dark">
+        <h1>Dark</h1>
+        <div class="mermaid">
+        %%{init: { 'logLevel': 1, 'theme': 'dark'} }%%
+  graph TD
+            A(Start) --> B[/Another/]
+            A[/Another/] --> C[End]
+            subgraph section
+              B
+              C
+            end
+        </div>
+      </div>
+      <div class="size">
+        <h1>Base with overriding themeVariable</h1>
+        <div class="mermaid">
+        %%{init: { 'theme': 'base', 'themeVariables':{ 'primaryColor': '#ff0000'}}}%%
 
-      graph TD
-          A[Neutral] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
+  graph TD
+            A(Start) --> B[/Another/]
+            A[/Another/] --> C[End]
+            subgraph section
+              B
+              C
+            end
+        </div>
       </div>
-      <div class="mermaid" style="background: #3f3f3f; width: 50%; height: 20%;">
-      %%{init: { 'logLevel': 1, 'theme': 'dark'} }%%
+      <div class="size">
+        <h1>Nothing set, should be Default</h1>
+        <div class="mermaid">
+        %%{init: { 'logLevel': 1} }%%
 
-      graph TD
-          A[Dark] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-      </div>
-      <div class="mermaid" style="background: #3f3f3f; width: 50%; height: 20%;">
-      %%{init: { 'logLevel': 1} }%%
-
-      graph TD
-          A[None set] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
+  graph TD
+            A(Start) --> B[/Another/]
+            A[/Another/] --> C[End]
+            subgraph section
+              B
+              C
+            end
+        </div>
       </div>
     </div>
 
@@ -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 },

dist/index.html

@@ -393,17 +393,19 @@ graph TB
   <div class="mermaid">
     graph TB
     TITLE["Link Click Events<br>(click the nodes below)"]
-    A[link test]
-    B[anchor test]
-    C[mailto test]
-    D[other protocol test]
-    E[script test]
-    TITLE --> A & B & C & D & E
-    click A "https://mermaid-js.github.io/mermaid/#/" "link test"
-    click B "#link-clicked" "anchor test"
-    click C "mailto:user@user.user" "mailto test"
-    click D "notes://do-your-thing/id" "other protocol test"
-    click E "javascript:alert('test')" "script test"
+    A["link test (open in same tab)"]
+    B["link test (open in new tab)"]
+    C[anchor test]
+    D[mailto test]
+    E[other protocol test]
+    F[script test]
+    TITLE --> A & B & C & D & E & F
+    click A "https://mermaid-js.github.io/mermaid/#/" "link test (open in same tab)"
+    click B "https://mermaid-js.github.io/mermaid/#/" "link test (open in new tab)" _blank
+    click C "#link-clicked"
+    click D "mailto:user@user.user" "mailto test"
+    click E "notes://do-your-thing/id" "other protocol test"
+    click F "javascript:alert('test')" "script test"
   </div>
   <hr/>
   <div class="mermaid">

docs/8.6.0_docs.md

@@ -25,7 +25,7 @@ The three levels of are Configuration, Global, Site and Current.
 
 
 # Limits to Modifying Configurations
-secure Array
+**secure Array**
 
 | Parameter | Description |Type | Required | Values|
 | --- | --- | --- | --- | --- |

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.
+
+##

docs/flowchart.md

@@ -562,6 +562,23 @@ graph LR
 
 ?> Due to limitations with how Docsify handles JavaScript callback functions, an alternate working demo for the above code can be viewed at [this jsfiddle](https://jsfiddle.net/s37cjoau/3/).
 
+Links are opened in the same browser tab/window by default. It is possible to change this by adding a link target to the click definition (`_self`, `_blank`, `_parent` and `_top` are supported):
+```
+graph LR;
+    A-->B;
+    B-->C;
+    click A "http://www.github.com" _blank
+    click B "http://www.github.com" "Open this in a new tab" _blank
+```
+
+```mermaid
+graph LR;
+    A-->B;
+    B-->C;
+    click A "http://www.github.com" _blank
+    click B "http://www.github.com" "Open this in a new tab" _blank
+```
+
 Beginners tip, a full example using interactive links in a html context:
 ```
 <body>
@@ -623,13 +640,13 @@ It is possible to apply specific styles such as a thicker border or a different
 graph LR
     id1(Start)-->id2(Stop)
     style id1 fill:#f9f,stroke:#333,stroke-width:4px
-    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5, 5
+    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
 ```
 ```mermaid
 graph LR
     id1(Start)-->id2(Stop)
     style id1 fill:#f9f,stroke:#333,stroke-width:4px
-    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5, 5
+    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
 ```
 
 

docs/theming.md

@@ -1,14 +1,25 @@
 # Theming
 
-Mermaid as a system for theming in place. With it a site integrator can override a vast majority of attributes used when rendering a diagram.
+**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/theming.md)
 
-The settings for a theme can be set globally for the site with the initialize call. The example below highlights how that can look:
+With Version 8.7.0 Mermaid comes out with a system for dynamic and integrated setting of the diagram's theme. The objective of this is to increase the customizability of mermaid, by allowing for the customization of themes through the `%%init%%` directive and `initialize`. With it a site integrator can override a vast majority of attributes used when rendering a diagram.
 
+Themes, for all intents and purposes also follow the Levels of Configuration and employ `directives` to modify configurations, as they were introduced in Version [8.6.0](./8.6.0_docs.md).
+
+## Site-wide Themes
+Site-wide themes are still declared via `initialize` by site owners.
+
+Example of `Initalize` call:
 ```
- // example
+    mermaidAPI.initialize({
+        'securityLevel': 'loose', 'theme': 'base'
+    });
 ```
+**Notes**: Only site owners can use the `mermaidAPI.initialize` call to set values. Site-Users will have to use `%%init%%` to modify configurations, everytime they create a diagram.
+
+## Themes at the Local or Current Level
+When Generating a diagram using on a webpage that supports mermaid. It is also possible to override site-wide theme settings locally, for a specific diagram, using directives, as long as it is not prohibited by the `secure` array.
 
-It is also possible to override theme settings locally in a diagram using directives.
 
 ```
 %%{init: {'theme':'base'}}%%
@@ -16,15 +27,11 @@ It is also possible to override theme settings locally in a diagram using direct
     a --> b
 ```
 
-The easiest way to make a custom theme is to start with the base theme, the theme named base and just modify these variables:
-* primaryColor   - the base color for the theme
 
-More specific color variables it is possible to change:
-* lineColor
-* textColor
+Here is an example of how `%%init%%` can set the theme to 'base', this assumes that `themeVariables` are set to default:
 
-Here is an example of a showcase flowchart with theme set to base, with the default variables set:
-```mermaid
+```
+mermaid
 %%{init: {'theme':'base'}}%%
         graph TD
           A[Christmas] -->|Get money| B(Go shopping)
@@ -42,8 +49,112 @@ Here is an example of a showcase flowchart with theme set to base, with the defa
           end
 ```
 
-Here is an example of overriding the primary color and giving everything a little different look.
-```mermaid
+# Making a Custom Theme  with `themeVariables`
+
+The easiest way to make a custom theme is to start with the base theme, and just modify theme variables through `themeVariables`, via `%%init%%`.
+
+|   Parameter    |                            Description                             | Type  | Required |         Objects contained          |
+| -------------- | ------------------------------------------------------------------ | ----- | -------- | ---------------------------------- |
+| themeVariables | Array containing objects, modifiable with the `%%init%%` directive | Array | Required | primaryColor, lineColor, textColor |
+
+**Notes**:
+Leaving it empty will set the values to default
+* primaryColor- the base color for the theme
+* lineColor- the line color for the theme
+* textColor-the text color for the theme
+
+The minimum required to create a custom rendering would be to change the primary color. If you are using a dark background, set dark mode to true as this will affect how colors are beeing calculated. It is possiebl to override the calculations using the variable names below.
+
+Reference over theme variables used in the base theme and their effect:
+
+|         name         |         Default value          | Calc |                                                           Description                                                            |
+| -------------------- | ------------------------------ | ---- | -------------------------------------------------------------------------------------------------------------------------------- |
+| darkMode             | false                          |      | Helps the theme to know how to calculate colors.                                                                                 |
+| background           | #f4f4f4                        |      | Used to calculate color for items that should either be background colored or contrasting to the background.                     |
+| primaryColor         | #fff4dd                        |      | Color to be used as background in nodes, other colors will be derived from this                                                  |
+| fontFamily           | "trebuchet ms", verdana, arial |      |                                                                                                                                  |
+| fontSize             | 16px                           |      |                                                                                                                                  |
+| secondaryColor       | based on primaryColor          | *    |                                                                                                                                  |
+| tertiaryColor        | based on primaryColor          | *    |                                                                                                                                  |
+| primaryBorderColor   | based on primaryColor          | *    | Color to be used as border in nodes using primaryColor                                                                           |
+| primaryTextColor     | based on darkMode #ddd/#333    | *    | Color to be used as text color in nodesusing primaryColor                                                                        |
+| secondaryBorderColor | based on secondaryColor        | *    | Color to be used as border in nodes using secondaryColor                                                                         |
+| secondaryTextColor   | based on secondaryColor        | *    | Color to be used as text color in nodesusing secondaryColor                                                                      |
+| tertiaryBorderColor  | based on tertiaryColor         | *    | Color to be used as border in nodes using tertiaryColor                                                                          |
+| tertiaryTextColor    | based on tertiaryColor         | *    | Color to be used as text color in nodesusing tertiaryColor                                                                       |
+| noteBkgColor         | #fff5ad                        |      | Color used as background in notes                                                                                                |
+| noteTextColor        | #333                           |      | Text color in note rects.                                                                                                        |
+| noteBorderColor      | based on noteBkgColor          | *    | Border color in note rects.                                                                                                      |
+| lineColor            | based on background            | *    |                                                                                                                                  |
+| textColor            | based on primaryTextColor      | *    | Text in diagram over the background for instance text on labels and on signals in sequence diagram or the title in gantt diagram |
+| mainBkg              | based on primaryColor          | *    | Background in flowchart objects like rects/circles, class diagram classes, sequence diagram  etc                                 |
+| errorBkgColor        | tertiaryColor                  | *    | Color for syntax error message                                                                                                   |
+| errorTextColor       | tertiaryTextColor              | *    | Color for syntax error message                                                                                                   |
+
+## Flowchart
+
+|         name         |         Default value          | Calc |                                                           Description                                                            |
+| -------------------- | ------------------------------ | ---- | -------------------------------------------------------------------------------------------------------------------------------- |
+| nodeBorder           | primaryBorderColor             | *    |                                                                                                                                  |
+| clusterBkg           | tertiaryColor                  | *    | Background in subgraphs                                                                                                          |
+| clusterBorder        | tertiaryBorderColor            | *    |                                                                                                                                  |
+| defaultLinkColor     | lineColor                      | *    |                                                                                                                                  |
+| titleColor           | tertiaryTextColor              | *    |                                                                                                                                  |
+| edgeLabelBackground  | based on secondaryColor        | *    |                                                                                                                                  |
+| nodeTextColor        | primaryTextColor               | *    |                                                                                                                                  |
+
+# sequence diagram
+|         name          |      Default value      | Calc | Description |
+| --------------------- | ----------------------- | ---- | ----------- |
+| actorBorder           | primaryBorderColor      | *    |             |
+| actorBkg              | mainBkg                 | *    |             |
+| actorTextColor        | primaryTextColor        | *    |             |
+| actorLineColor        | grey                    | *    |             |
+| labelBoxBkgColor      | actorBkg                | *    |             |
+| signalColor           | textColor               | *    |             |
+| signalTextColor       | textColor               | *    |             |
+| labelBoxBorderColor   | actorBorder             | *    |             |
+| labelTextColor        | actorTextColor          | *    |             |
+| loopTextColor         | actorTextColor          | *    |             |
+| activationBorderColor | based on secondaryColor | *    |             |
+| activationBkgColor    | secondaryColor          | *    |             |
+| sequenceNumberColor   | based on lineColor      | *    |             |
+
+# state colors
+
+|     name      |  Default value   | Calc |                 Description                 |
+| ------------- | ---------------- | ---- | ------------------------------------------- |
+| labelColor    | primaryTextColor | *    |                                             |
+| altBackground | tertiaryColor    | *    | Used for background in deep composit states |
+
+# class colors
+
+|   name    | Default value | Calc |      Description       |
+| --------- | ------------- | ---- | ---------------------- |
+| classText | textColor     | *    | Text in class diagrams |
+
+# User journey colors
+
+|   name    |      Default value       | Calc |               Description               |
+| --------- | ------------------------ | ---- | --------------------------------------- |
+| fillType0 | primaryColor             | *    | Fill for 1st section in journey diagram |
+| fillType1 | secondaryColor           | *    | Fill for 2nd section in journey diagram |
+| fillType2 | based on primaryColor    | *    | Fill for 3rd section in journey diagram |
+| fillType3 | based on  secondaryColor | *    | Fill for 4th section in journey diagram |
+| fillType4 | based on primaryColor    | *    | Fill for 5th section in journey diagram |
+| fillType5 | based on secondaryColor  | *    | Fill for 6th section in journey diagram |
+| fillType6 | based on primaryColor    | *    | Fill for 7th section in journey diagram |
+| fillType7 | based on secondaryColor  | *    | Fill for 8th section in journey diagram |
+
+
+Variables derived from the ones above:
+
+| name      | Default value | Description |
+
+
+**Here is an example of overriding `primaryColor` and giving everything a ifferent look, using `%%init%%`.
+```
+mermaid
 %%{init: {'theme':'base', 'themeVariables': {primaryColor: '#ff0000'}}%%
         graph TD
           A[Christmas] -->|Get money| B(Go shopping)
@@ -60,13 +171,18 @@ Here is an example of overriding the primary color and giving everything a littl
             G
           end
 ```
-As the theming engine is using color codes to calculate values from the base color/base colors it needs proper color values contrain the actual color data. Aliases like color names is not supported so for instance, the color value 'red' will not work but '#ff0000' will work.
+The Theming Engine does not admit color codes and will only accept proper color values. Color Names is not supported so for instance, the color value 'red' will not work, but '#ff0000' will work.
 
-## Showcases
+# Common theming activities
 
-When adjusting a theme it might be helpful to look at the theme with these diagrams to evaluate that everything is visiable and looks good.
+## How to change the color of the arrows
 
-### flowchart
+# Examples:
+
+When adjusting a theme it might be helpful to look at how your preferred theme goes with the diagrams, to evaluate whether everything is visible and looks good.
+In the following examples, the directive `init` is used, with the `theme` being declared as `base`. For more information on using directives, read the documentation for [Version 8.6.0](/8.6.0_docs.md)
+
+### Flowchart
 ```
 %%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
         graph TD
@@ -102,8 +218,9 @@ When adjusting a theme it might be helpful to look at the theme with these diagr
           end
 ```
 
-### flowchart (beta)
-```mermaid
+### Flowchart (beta)
+```
+mermaid
 %%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
         flowchart TD
           A[Christmas] -->|Get money| B(Go shopping)
@@ -123,7 +240,8 @@ When adjusting a theme it might be helpful to look at the theme with these diagr
 
 ### Sequence diagram
 
-```mermaid
+```
+mermaid
 %%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
 
         sequenceDiagram
@@ -143,9 +261,39 @@ When adjusting a theme it might be helpful to look at the theme with these diagr
             end
 ```
 
-### Gantt
+### class diagram
 
 ```mermaid
+%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
+
+classDiagram
+	Animal "1" <|-- Duck
+	Animal <|-- Fish
+	Animal <--o Zebra
+	Animal : +int age
+	Animal : +String gender
+	Animal: +isMammal()
+	Animal: +mate()
+	class Duck{
+		+String beakColor
+		+swim()
+		+quack()
+	}
+	class Fish{
+		-int sizeInFeet
+		-canEat()
+	}
+	class Zebra{
+		+bool is_wild
+		+run()
+	}
+
+```
+
+### Gantt
+
+```
+mermaid
 gantt
        dateFormat                :YYYY-MM-DD
        title                     Adding GANTT diagram functionality to mermaid
@@ -176,7 +324,8 @@ gantt
 ```
 
 ### State diagram
-```mermaid
+```
+mermaid
 %%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
       stateDiagram
         [*] --> Active
@@ -208,7 +357,8 @@ gantt
 
 ### State diagram (beta)
 
-```mermaid
+```
+mermaid
 %%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
 stateDiagram-v2
         [*] --> Active
@@ -239,7 +389,8 @@ stateDiagram-v2
 
 ### Entity Relations diagram
 
-```mermaid
+```
+mermaid
       erDiagram
         CUSTOMER }|..|{ DELIVERY-ADDRESS : has
         CUSTOMER ||--o{ ORDER : places
@@ -251,8 +402,9 @@ stateDiagram-v2
         PRODUCT ||--o{ ORDER-ITEM : "ordered in"
 ```
 
-### User journet diagram
-```mermaid
+### User journey diagram
+```
+mermaid
 journey
             title My working day
             section Go to work
@@ -262,4 +414,4 @@ journey
             section Go home
               Go downstairs: 5: Me
               Sit down: 5: Me
-```
+```

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.js

@@ -1,867 +1,39 @@
 import { assignWithDepth } from './utils';
 import { logger } from './logger';
 import theme from './themes';
-
-// 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
-};
-
-/**
- * **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
-  }
-};
+import config from './defaultConfig';
 
 // 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);
+let siteConfig = assignWithDepth({}, defaultConfig);
+let directives = [];
+let currentConfig = assignWithDepth({}, defaultConfig);
 
+export const updateCurrentConfig = (siteCfg, _directives) => {
+  let cfg = assignWithDepth({}, siteCfg);
+
+  // Apply directives
+  let themeVariables = {};
+  for (let i = 0; i < _directives.length; i++) {
+    const d = _directives[i];
+    sanitize(d);
+    cfg = assignWithDepth(cfg, d);
+    if (d.theme) {
+      cfg.themeVariables = theme[cfg.theme].getThemeVariables(d.themeVariables);
+    }
+  }
+  if (cfg.theme && theme[cfg.theme]) {
+    let tVars = assignWithDepth({}, cfg.themeVariables);
+    tVars = assignWithDepth(tVars, themeVariables);
+    const variables = theme[cfg.theme].getThemeVariables(tVars);
+    cfg.themeVariables = variables;
+  }
+
+  currentConfig = cfg;
+  return cfg;
+};
 /**
  *## setSiteConfig
  *| Function | Description         | Type    | Values             |
@@ -877,16 +49,22 @@ const currentConfig = assignWithDepth({}, defaultConfig);
  * @returns {*} - the siteConfig
  */
 export const setSiteConfig = conf => {
-  Object.keys(conf).forEach(key => {
-    const manipulator = manipulators[key];
-    conf[key] = manipulator ? manipulator(conf[key]) : conf[key];
-  });
+  console.warn('Setting site config');
+  siteConfig = assignWithDepth({}, defaultConfig);
+  siteConfig = assignWithDepth(siteConfig, conf);
 
-  assignWithDepth(currentConfig, conf, { clobber: true });
-  // Set theme variables if user has set the theme option
-  assignWithDepth(siteConfig, conf);
+  if (conf.theme) {
+    siteConfig.themeVariables = theme[conf.theme].getThemeVariables(conf.themeVariables);
+  }
 
-  return getSiteConfig();
+  currentConfig = updateCurrentConfig(siteConfig, directives);
+  return siteConfig;
+};
+export const updateSiteConfig = conf => {
+  siteConfig = assignWithDepth(siteConfig, conf);
+  updateCurrentConfig(siteConfig, directives);
+
+  return siteConfig;
 };
 /**
  *## getSiteConfig
@@ -913,15 +91,17 @@ export const getSiteConfig = () => {
  * @returns {*} - the currentConfig merged with the sanitized conf
  */
 export const setConfig = conf => {
-  sanitize(conf);
-  Object.keys(conf).forEach(key => {
-    const manipulator = manipulators[key];
-    conf[key] = manipulator ? manipulator(conf[key]) : conf[key];
-  });
+  // 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            |
@@ -948,7 +128,7 @@ export const sanitize = options => {
     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.warn(
+      logger.debug(
         `Denied attempt to modify a secure key ${siteConfig.secure[key]}`,
         options[siteConfig.secure[key]]
       );
@@ -956,6 +136,12 @@ export const sanitize = options => {
     }
   });
 };
+
+export const addDirective = directive => {
+  directives.push(directive);
+  updateCurrentConfig(siteConfig, directives);
+};
+
 /**
  *## reset
  *| Function | Description         | Type    | Required | Values             |
@@ -970,20 +156,8 @@ export const sanitize = options => {
  (default: current siteConfig ) (optional, default `getSiteConfig()`)
  * @param conf - the base currentConfig to reset to (default: current siteConfig )
  */
-export const reset = (conf = getSiteConfig()) => {
-  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 });
+export const reset = () => {
+  // Replace current config with siteConfig
+  directives = [];
+  updateCurrentConfig(siteConfig, directives);
 };
-
-const configApi = Object.freeze({
-  sanitize,
-  setSiteConfig,
-  getSiteConfig,
-  setConfig,
-  getConfig,
-  reset,
-  defaultConfig
-});
-export default configApi;

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() {
-    let config_0 = { foo: 'bar', bar: 0, secure: [...configApi.defaultConfig.secure, 'bar'] };
+  it('should respect secure keys when applying directives', function() {
+    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'};
-    configApi.setConfig(config_1);
-    let config_2 = configApi.getConfig();
-    expect(config_2.foo).toEqual(config_1.foo);
-    expect(config_2.bar).toEqual(0); // Should be siteConfig.bar
+    const directive = { foo: 'baf', bar: 'should-not-be-allowed'};
+    const cfg = configApi.updateCurrentConfig(config_0,[directive]);
+    expect(cfg.foo).toEqual(directive.foo);
+    expect(cfg.bar).toBe(config_0.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);
-    let config_3 = configApi.getSiteConfig();
-    expect(config_3.foo).toBeUndefined();
+    configApi.setConfig({ foobar: 'bar0' })
+    let config_3 = configApi.getConfig();
+    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/dagre-wrapper/intersect/intersect-node.js

@@ -1,6 +1,6 @@
 module.exports = intersectNode;
 
 function intersectNode(node, point) {
-  console.info('Intersect Node');
+  // console.info('Intersect Node');
   return node.intersect(point);
 }

src/dagre-wrapper/intersect/intersect-polygon.js

@@ -44,7 +44,7 @@ function intersectPolygon(node, polyPoints, point) {
   }
 
   if (!intersections.length) {
-    console.log('NO INTERSECTION FOUND, RETURN NODE CENTER', node);
+    // console.log('NO INTERSECTION FOUND, RETURN NODE CENTER', node);
     return node;
   }
 

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/class/styles.js

@@ -31,7 +31,7 @@ g.clickable {
 }
 
 g.classGroup rect {
-  fill: ${options.nodeBkg};
+  fill: ${options.mainBkg};
   stroke: ${options.nodeBorder};
 }
 
@@ -43,7 +43,7 @@ g.classGroup line {
 .classLabel .box {
   stroke: none;
   stroke-width: 0;
-  fill: ${options.nodeBkg};
+  fill: ${options.mainBkg};
   opacity: 0.5;
 }
 
@@ -99,13 +99,13 @@ g.classGroup line {
 }
 
 #aggregationStart, .aggregation {
-  fill: ${options.nodeBkg} !important;
+  fill: ${options.mainBkg} !important;
   stroke: ${options.lineColor} !important;
   stroke-width: 1;
 }
 
 #aggregationEnd, .aggregation {
-  fill: ${options.nodeBkg} !important;
+  fill: ${options.mainBkg} !important;
   stroke: ${options.lineColor} !important;
   stroke-width: 1;
 }

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/er/styles.js

@@ -7,7 +7,7 @@ const getStyles = options =>
 
   .relationshipLabelBox {
     fill: ${options.tertiaryColor};
-    opacity: 0.3;
+    opacity: 0.7;
     background-color: ${options.tertiaryColor};
       rect {
         opacity: 0.5;

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.getConfig().securityLevel !== 'loose') {
     return;
   }
   if (typeof functionName === 'undefined') {
@@ -252,12 +252,13 @@ const setClickFun = function(_id, functionName) {
  * @param linkStr URL to create a link for
  * @param tooltip Tooltip for the clickable element
  */
-export const setLink = function(ids, linkStr, tooltip) {
+export const setLink = function(ids, linkStr, tooltip, target) {
   ids.split(',').forEach(function(_id) {
     let id = _id;
     if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
     if (typeof vertices[id] !== 'undefined') {
       vertices[id].link = utils.formatUrl(linkStr, config);
+      vertices[id].linkTarget = target;
     }
   });
   setTooltip(ids, tooltip);
@@ -622,7 +623,7 @@ const destructLink = (_str, _startStr) => {
 
 export default {
   parseDirective,
-  getConfig: () => configApi.getConfig().flowchart,
+  defaultConfig: () => configApi.defaultConfig.flowchart,
   addVertex,
   addLink,
   updateLinkInterpolate,

src/diagrams/flowchart/flowRenderer-v2.js

@@ -468,7 +468,7 @@ export const draw = function(text, id) {
       rect.setAttribute('ry', 0);
       rect.setAttribute('width', dim.width);
       rect.setAttribute('height', dim.height);
-      rect.setAttribute('style', 'fill:#e8e8e8;');
+      // rect.setAttribute('style', 'fill:#e8e8e8;');
 
       label.insertBefore(rect, label.firstChild);
     }
@@ -486,6 +486,9 @@ export const draw = function(text, id) {
         link.setAttributeNS('http://www.w3.org/2000/svg', 'class', vertex.classes.join(' '));
         link.setAttributeNS('http://www.w3.org/2000/svg', 'href', vertex.link);
         link.setAttributeNS('http://www.w3.org/2000/svg', 'rel', 'noopener');
+        if (vertex.linkTarget) {
+          link.setAttributeNS('http://www.w3.org/2000/svg', 'target', vertex.linkTarget);
+        }
 
         const linkNode = node.insert(function() {
           return link;

src/diagrams/flowchart/flowRenderer.js

@@ -451,7 +451,7 @@ export const draw = function(text, id) {
       rect.setAttribute('ry', 0);
       rect.setAttribute('width', dim.width);
       rect.setAttribute('height', dim.height);
-      rect.setAttribute('style', 'fill:#e8e8e8;');
+      // rect.setAttribute('style', 'fill:#e8e8e8;');
 
       label.insertBefore(rect, label.firstChild);
     }
@@ -469,6 +469,9 @@ export const draw = function(text, id) {
         link.setAttributeNS('http://www.w3.org/2000/svg', 'class', vertex.classes.join(' '));
         link.setAttributeNS('http://www.w3.org/2000/svg', 'href', vertex.link);
         link.setAttributeNS('http://www.w3.org/2000/svg', 'rel', 'noopener');
+        if (vertex.linkTarget) {
+          link.setAttributeNS('http://www.w3.org/2000/svg', 'target', vertex.linkTarget);
+        }
 
         const linkNode = node.insert(function() {
           return link;

src/diagrams/flowchart/parser/flow-interactions.spec.js

@@ -39,7 +39,7 @@ describe('[Interactions] when parsing', () => {
     const vert = flow.parser.yy.getVertices();
     const edges = flow.parser.yy.getEdges();
 
-    expect(flowDb.setLink).toHaveBeenCalledWith('A', 'click.html', undefined);
+    expect(flowDb.setLink).toHaveBeenCalledWith('A', 'click.html', undefined, undefined);
   });
 
   it('should handle interaction - click to a link with tooltip', function() {
@@ -49,6 +49,26 @@ describe('[Interactions] when parsing', () => {
     const vert = flow.parser.yy.getVertices();
     const edges = flow.parser.yy.getEdges();
 
-    expect(flowDb.setLink).toHaveBeenCalledWith('A', 'click.html', 'tooltip');
+    expect(flowDb.setLink).toHaveBeenCalledWith('A', 'click.html', 'tooltip', undefined);
+  });
+
+  it('should handle interaction - click to a link with target', function() {
+    spyOn(flowDb, 'setLink');
+    const res = flow.parser.parse('graph TD\nA-->B\nclick A "click.html" _blank');
+
+    const vert = flow.parser.yy.getVertices();
+    const edges = flow.parser.yy.getEdges();
+
+    expect(flowDb.setLink).toHaveBeenCalledWith('A', 'click.html', undefined, '_blank');
+  });
+
+  it('should handle interaction - click to a link with tooltip and target', function() {
+    spyOn(flowDb, 'setLink');
+    const res = flow.parser.parse('graph TD\nA-->B\nclick A "click.html" "tooltip" _blank');
+
+    const vert = flow.parser.yy.getVertices();
+    const edges = flow.parser.yy.getEdges();
+
+    expect(flowDb.setLink).toHaveBeenCalledWith('A', 'click.html', 'tooltip', '_blank');
   });
 });

src/diagrams/flowchart/parser/flow.jison

@@ -36,6 +36,12 @@
 "flowchart"            {if(yy.lex.firstGraph()){this.begin("dir");}  return 'GRAPH';}
 "subgraph"            return 'subgraph';
 "end"\b\s*            return 'end';
+
+"_self"               return 'LINK_TARGET';
+"_blank"              return 'LINK_TARGET';
+"_parent"             return 'LINK_TARGET';
+"_top"                return 'LINK_TARGET';
+
 <dir>(\r?\n)*\s*\n       {   this.popState();  return 'NODIR'; }
 <dir>\s*"LR"             {   this.popState();  return 'DIR'; }
 <dir>\s*"RL"             {   this.popState();  return 'DIR'; }
@@ -439,10 +445,12 @@ classStatement:CLASS SPACE alphaNum SPACE alphaNum
     ;
 
 clickStatement
-    : CLICK SPACE alphaNum SPACE alphaNum           {$$ = $1;yy.setClickEvent($3, $5, undefined);}
-    | CLICK SPACE alphaNum SPACE alphaNum SPACE STR {$$ = $1;yy.setClickEvent($3, $5, $7)       ;}
-    | CLICK SPACE alphaNum SPACE STR                {$$ = $1;yy.setLink($3, $5, undefined);}
-    | CLICK SPACE alphaNum SPACE STR SPACE STR      {$$ = $1;yy.setLink($3, $5, $7       );}
+    : CLICK SPACE alphaNum SPACE alphaNum                         {$$ = $1;yy.setClickEvent($3, $5, undefined);}
+    | CLICK SPACE alphaNum SPACE alphaNum SPACE STR               {$$ = $1;yy.setClickEvent($3, $5, $7)       ;}
+    | CLICK SPACE alphaNum SPACE STR                              {$$ = $1;yy.setLink($3, $5, undefined, undefined);}
+    | CLICK SPACE alphaNum SPACE STR SPACE STR                    {$$ = $1;yy.setLink($3, $5, $7, undefined       );}
+    | CLICK SPACE alphaNum SPACE STR SPACE LINK_TARGET            {$$ = $1;yy.setLink($3, $5, undefined, $7       );}
+    | CLICK SPACE alphaNum SPACE STR SPACE STR SPACE LINK_TARGET  {$$ = $1;yy.setLink($3, $5, $7, $9              );}
     ;
 
 styleStatement:STYLE SPACE alphaNum SPACE stylesOpt

src/diagrams/flowchart/styles.js

@@ -1,11 +1,11 @@
 const getStyles = options =>
   `.label {
     font-family: ${options.fontFamily};
-    color: ${options.textColor};
+    color: ${options.nodeTextColor || options.textColor};
   }
 
   .label text {
-    fill: ${options.textColor};
+    fill: ${options.nodeTextColor || options.textColor};
   }
 
   .node rect,
@@ -43,12 +43,14 @@ const getStyles = options =>
     background-color: ${options.edgeLabelBackground};
     rect {
       opacity: 0.5;
+      background-color: ${options.edgeLabelBackground};
+      fill: ${options.edgeLabelBackground};
     }
     text-align: center;
   }
 
   .cluster rect {
-    fill: ${options.secondBkg};
+    fill: ${options.clusterBkg};
     stroke: ${options.clusterBorder};
     stroke-width: 1px;
   }
@@ -64,7 +66,7 @@ const getStyles = options =>
     padding: 2px;
     font-family: ${options.fontFamily};
     font-size: 12px;
-    background: ${options.secondBkg};
+    background: ${options.tertiaryColor};
     border: 1px solid ${options.border2};
     border-radius: 2px;
     pointer-events: none;

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 });
+    console.warn('Set site config');
+    configApi.setSiteConfig({ logLevel: 5, sequence: conf });
   });
   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');
 
@@ -1221,7 +1238,7 @@ Bob->>Alice: Fine!`;
   });
   it('it should draw two actors, notes to the left with text wrapped and the init directive sets the theme to dark and fontFamily to Menlo, fontSize to 18, and fontWeight to 800', function() {
     const str = `
-%%{init: { "theme": "dark", 'config': { "fontFamily": "Menlo", "fontSize": 18, "fontWeight": 400, "wrap": true }}}%%
+    %%{init: { "theme": "dark", 'config': { "fontFamily": "Menlo", "fontSize": 18, "fontWeight": 400, "wrap": true }}}%%
 sequenceDiagram
 Alice->>Bob: Hello Bob, how are you? If you are not available right now, I can leave you a message. Please get back to me as soon as you can!
 Note left of Alice: Bob thinks
@@ -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,
-    conf.noteFont()
+    shouldWrap ? utils.wrapLabel(msg.message, conf.width, noteFont(conf)) : msg.message,
+    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(
-            msg.message,
-            Math.max(conf.width, actors[msg.from].width),
-            conf.noteFont()
-          )
+        ? utils.wrapLabel(msg.message, Math.max(conf.width, actors[msg.from].width), noteFont(conf))
         : 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/shapes.js

@@ -14,8 +14,9 @@ import { logger } from '../../logger';
 export const drawStartState = g =>
   g
     .append('circle')
-    .style('stroke', 'black')
-    .style('fill', 'black')
+    // .style('stroke', 'black')
+    // .style('fill', 'black')
+    .attr('class', 'start-state')
     .attr('r', getConfig().state.sizeUnit)
     .attr('cx', getConfig().state.padding + getConfig().state.sizeUnit)
     .attr('cy', getConfig().state.padding + getConfig().state.sizeUnit);
@@ -241,8 +242,9 @@ export const addTitleAndBox = (g, stateDef, altBkg) => {
 
 const drawEndState = g => {
   g.append('circle')
-    .style('stroke', 'black')
-    .style('fill', 'white')
+    // .style('stroke', 'black')
+    // .style('fill', 'white')
+    .attr('class', 'end-state-outer')
     .attr('r', getConfig().state.sizeUnit + getConfig().state.miniPadding)
     .attr(
       'cx',
@@ -253,13 +255,16 @@ const drawEndState = g => {
       getConfig().state.padding + getConfig().state.sizeUnit + getConfig().state.miniPadding
     );
 
-  return g
-    .append('circle')
-    .style('stroke', 'black')
-    .style('fill', 'black')
-    .attr('r', getConfig().state.sizeUnit)
-    .attr('cx', getConfig().state.padding + getConfig().state.sizeUnit + 2)
-    .attr('cy', getConfig().state.padding + getConfig().state.sizeUnit + 2);
+  return (
+    g
+      .append('circle')
+      // .style('stroke', 'black')
+      // .style('fill', 'black')
+      .attr('class', 'end-state-inner')
+      .attr('r', getConfig().state.sizeUnit)
+      .attr('cx', getConfig().state.padding + getConfig().state.sizeUnit + 2)
+      .attr('cy', getConfig().state.padding + getConfig().state.sizeUnit + 2)
+  );
 };
 const drawForkJoinState = (g, stateDef) => {
   let width = getConfig().state.forkWidth;

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/state/styles.js

@@ -18,7 +18,7 @@ g.stateGroup .state-title {
 }
 
 g.stateGroup rect {
-  fill: ${options.nodeBkg};
+  fill: ${options.mainBkg};
   stroke: ${options.nodeBorder};
 }
 
@@ -57,17 +57,20 @@ g.stateGroup line {
 .stateLabel .box {
   stroke: none;
   stroke-width: 0;
-  fill: ${options.nodeBkg};
+  fill: ${options.mainBkg};
   opacity: 0.5;
 }
 
 .edgeLabel .label rect {
   fill: ${options.tertiaryColor};
-  opacity: 0.2;
+  opacity: 0.5;
 }
 .edgeLabel .label text {
   fill: ${options.tertiaryTextColor};
 }
+.label div .edgeLabel {
+  color: ${options.tertiaryTextColor};
+}
 
 .stateLabel text {
   fill: ${options.labelColor};
@@ -78,7 +81,7 @@ g.stateGroup line {
 }
 
 .node circle.state-start {
-  fill: ${options.primaryBorderColor};
+  fill: ${options.lineColor};
   stroke: black;
 }
 .node circle.state-end {
@@ -86,6 +89,11 @@ g.stateGroup line {
   stroke: ${options.background};
   stroke-width: 1.5
 }
+.end-state-inner {
+  fill: ${options.background};
+  // stroke: ${options.background};
+  stroke-width: 1.5
+}
 
 .node rect {
   fill: ${options.mainBkg};
@@ -97,7 +105,7 @@ g.stateGroup line {
 }
 
 .statediagram-cluster rect {
-  fill: ${options.nodeBkg};
+  fill: ${options.mainBkg};
   stroke: ${options.nodeBorder};
   stroke-width: 1px;
 }

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/diagrams/user-journey/styles.js

@@ -68,9 +68,6 @@ const getStyles = options =>
   }
 
   .cluster rect {
-    fill: ${options.secondBkg};
-    stroke: ${options.clusterBorder};
-    stroke-width: 1px;
   }
 
   .cluster text {
@@ -85,7 +82,7 @@ const getStyles = options =>
     font-family: 'trebuchet ms', verdana, arial;
     font-family: var(--mermaid-font-family);
     font-size: 12px;
-    background: ${options.secondBkg};
+    background: ${options.tertiaryColor};
     border: 1px solid ${options.border2};
     border-radius: 2px;
     pointer-events: none;

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;
@@ -129,7 +129,7 @@ const init = function() {
 };
 
 const initialize = function(config) {
-  mermaidAPI.reset();
+  // mermaidAPI.reset();
   if (typeof config.mermaid !== 'undefined') {
     if (typeof config.mermaid.startOnLoad !== 'undefined') {
       mermaid.startOnLoad = config.mermaid.startOnLoad;

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,21 @@ 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);
-  } else {
-    configApi.reset();
-    const siteConfig = getSiteConfig();
-    reinitialize(siteConfig);
+    configApi.addDirective(graphInit);
   }
+  // else {
+  //   configApi.reset();
+  //   const siteConfig = configApi.getSiteConfig();
+  //   configApi.addDirective(siteConfig);
+  // }
+  // console.warn('Render fetching config');
 
-  const cnf = getConfig();
+  const cnf = configApi.getConfig();
+  console.warn('Render with config after adding new directives', cnf.themeVariables.primaryColor);
   // 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';
@@ -284,6 +296,9 @@ const render = function(id, _txt, cb, container) {
       }
     }
   }
+
+  // logger.warn(cnf.themeVariables);
+
   const stylis = new Stylis();
   const rules = stylis(`#${id}`, getStyles(graphType, userStyles, cnf.themeVariables));
 
@@ -482,6 +497,7 @@ const handleDirective = function(p, directive, type) {
       });
 
       reinitialize(directive.args);
+      configApi.addDirective(directive.args);
       break;
     }
     case 'wrap':
@@ -520,22 +536,23 @@ function updateRendererConfigs(conf) {
   errorRenderer.setConf(conf.class);
 }
 
-function reinitialize(options) {
-  // console.warn(`mermaidAPI.reinitialize: v${pkg.version}`, options);
-  if (options.theme && theme[options.theme]) {
-    // Todo merge with user options
-    options.themeVariables = options.theme;
-  }
-
-  // Set default options
-  const config = typeof options === 'object' ? setConfig(options) : getSiteConfig();
-  updateRendererConfigs(config);
-  setLogLevel(config.logLevel);
-  logger.debug('mermaidAPI.reinitialize: ', config);
+function reinitialize() {
+  // `mermaidAPI.reinitialize: v${pkg.version}`,
+  //   JSON.stringify(options),
+  //   options.themeVariables.primaryColor;
+  // // if (options.theme && theme[options.theme]) {
+  // //   options.themeVariables = theme[options.theme].getThemeVariables(options.themeVariables);
+  // // }
+  // // Set default options
+  // const config =
+  //   typeof options === 'object' ? configApi.setConfig(options) : configApi.getSiteConfig();
+  // updateRendererConfigs(config);
+  // setLogLevel(config.logLevel);
+  // logger.debug('mermaidAPI.reinitialize: ', config);
 }
 
 function initialize(options) {
-  // console.log(`mermaidAPI.initialize: v${pkg.version} ${options}`);
+  console.warn(`mermaidAPI.initialize: v${pkg.version} `, options);
   // Set default options
 
   if (options && options.theme && theme[options.theme]) {
@@ -545,40 +562,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,
-  getSiteConfig,
+  getConfig: configApi.getConfig,
+  setConfig: configApi.setConfig,
+  getSiteConfig: configApi.getSiteConfig,
+  updateSiteConfig: configApi.updateSiteConfig,
   reset: () => {
     // console.warn('reset');
     configApi.reset();
-    const siteConfig = getSiteConfig();
-    updateRendererConfigs(siteConfig);
+    // const siteConfig = configApi.getSiteConfig();
+    // updateRendererConfigs(siteConfig);
   },
   globalReset: () => {
     configApi.reset(configApi.defaultConfig);
-    updateRendererConfigs(getConfig());
+    updateRendererConfigs(configApi.getConfig());
   },
   defaultConfig: configApi.defaultConfig
 });
 
-setLogLevel(getConfig().logLevel);
-configApi.reset(getConfig());
+setLogLevel(configApi.getConfig().logLevel);
+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

@@ -1,132 +1,131 @@
 import { darken, lighten, adjust, invert } from 'khroma';
-
-const mkBorder = (col, darkMode) =>
-  darkMode ? adjust(col, { s: -40, l: 10 }) : adjust(col, { s: -40, l: -10 });
+import { mkBorder } from './theme-helpers';
 class Theme {
   constructor() {
     /** # Base variables */
     /** * background - used to know what the background color is of the diagram. This is used for deducing colors for istance line color. Defaulr value is #f4f4f4. */
     this.background = '#f4f4f4';
-    // this.background = '#0c0c0c';
-    /** * darkMode -In darkMode the color generation deduces other colors from the primary colors */
     this.darkMode = false;
+
+    // this.background = '#0c0c0c';
     // this.darkMode = true;
+    this.primaryColor = '#fff4dd';
+    // this.background = '#0c0c0c';
     // this.primaryColor = '#1f1f00';
 
     this.noteBkgColor = '#fff5ad';
     this.noteTextColor = '#333';
+
+    // dark
+
+    // this.primaryColor = '#034694';
+    // this.primaryColor = '#f2ee7e';
     // this.primaryColor = '#9f33be';
-    this.primaryColor = '#f0fff0';
+    // this.primaryColor = '#f0fff0';
     // this.primaryColor = '#fa255e';
     // this.primaryColor = '#ECECFF';
 
     // this.secondaryColor = '#c39ea0';
     // this.tertiaryColor = '#f8e5e5';
 
-    this.secondaryColor = '#dfdfde';
-    this.tertiaryColor = '#CCCCFF';
+    // this.secondaryColor = '#dfdfde';
+    // this.tertiaryColor = '#CCCCFF';
 
-    this.border1 = '#9370DB';
-    this.arrowheadColor = '#333333';
     this.fontFamily = '"trebuchet ms", verdana, arial';
     this.fontSize = '16px';
-    this.textColor = '#333';
-    this.updateColors();
-    this.relationColor = '#000';
+    // this.updateColors();
   }
   updateColors() {
-    this.secondBkg = this.tertiaryColor;
+    // The || is to make sure that if the variable has been defiend by a user override that value is to be used
 
     /* Main */
-    this.secondaryColor = adjust(this.primaryColor, { h: 120 });
-    this.tertiaryColor = adjust(this.primaryColor, { h: -160 });
+    this.primaryTextColor = this.primaryTextColor || (this.darkMode ? '#ddd' : '#333'); // invert(this.primaryColor);
+    this.secondaryColor = this.secondaryColor || adjust(this.primaryColor, { h: -120 });
+    this.tertiaryColor = this.tertiaryColor || adjust(this.primaryColor, { h: 180, l: 5 });
 
-    this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode);
-    this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode);
-    this.tertiaryBorderColor = mkBorder(this.tertiaryColor, this.darkMode);
-    this.noteBorderColor = mkBorder(this.noteBkgColor, this.darkMode);
+    this.primaryBorderColor = this.primaryBorderColor || mkBorder(this.primaryColor, this.darkMode);
+    this.secondaryBorderColor =
+      this.secondaryBorderColor || mkBorder(this.secondaryColor, this.darkMode);
+    this.tertiaryBorderColor =
+      this.tertiaryBorderColor || mkBorder(this.tertiaryColor, this.darkMode);
+    this.noteBorderColor = this.noteBorderColor || mkBorder(this.noteBkgColor, this.darkMode);
 
-    this.primaryTextColor = invert(this.primaryColor);
-    this.secondaryTextColor = invert(this.secondaryColor);
-    this.tertiaryTextColor = invert(this.tertiaryColor);
-    this.lineColor = invert(this.background);
-    this.textColor = invert(this.background);
+    this.secondaryTextColor = this.secondaryTextColor || invert(this.secondaryColor);
+    this.tertiaryTextColor = this.tertiaryTextColor || invert(this.tertiaryColor);
+    this.lineColor = this.lineColor || invert(this.background);
+    this.textColor = this.textColor || this.primaryTextColor;
 
     /* Flowchart variables */
-
-    this.nodeBkg = this.primaryColor;
-    this.mainBkg = this.primaryColor;
-    this.nodeBorder = this.primaryBorderColor;
-    this.clusterBkg = this.tertiaryColor;
-    this.clusterBorder = this.tertiaryBorderColor;
-    this.defaultLinkColor = this.lineColor;
-    this.titleColor = this.tertiaryTextColor;
-    this.edgeLabelBackground = this.labelBackground;
-
+    this.nodeBkg = this.nodeBkg || this.primaryColor;
+    this.mainBkg = this.mainBkg || this.primaryColor;
+    this.nodeBorder = this.nodeBorder || this.primaryBorderColor;
+    this.clusterBkg = this.clusterBkg || this.tertiaryColor;
+    this.clusterBorder = this.clusterBorder || this.tertiaryBorderColor;
+    this.defaultLinkColor = this.defaultLinkColor || this.lineColor;
+    this.titleColor = this.titleColor || this.tertiaryTextColor;
+    this.edgeLabelBackground =
+      this.edgeLabelBackground || this.darkMode
+        ? darken(this.secondaryColor, 30)
+        : this.secondaryColor;
+    this.nodeTextColor = this.nodeTextColor || this.primaryTextColor;
     /* Sequence Diagram variables */
 
     // this.actorBorder = lighten(this.border1, 0.5);
-    this.actorBorder = this.primaryBorderColor;
-    this.actorBkg = this.mainBkg;
-    this.actorTextColor = this.primaryTextColor;
-    this.actorLineColor = 'grey';
-    this.labelBoxBkgColor = this.actorBkg;
-    this.signalColor = this.textColor;
-    this.signalTextColor = this.textColor;
-    this.labelBoxBorderColor = this.actorBorder;
-    this.labelTextColor = this.actorTextColor;
-    this.loopTextColor = this.actorTextColor;
-    // this.noteTextColor = this.actorTextColor;
-    this.activationBorderColor = darken(this.secondaryColor, 10);
-    this.activationBkgColor = this.secondaryColor;
-    this.sequenceNumberColor = 'white';
+    this.actorBorder = this.actorBorder || this.primaryBorderColor;
+    this.actorBkg = this.actorBkg || this.mainBkg;
+    this.actorTextColor = this.actorTextColor || this.primaryTextColor;
+    this.actorLineColor = this.actorLineColor || 'grey';
+    this.labelBoxBkgColor = this.labelBoxBkgColor || this.actorBkg;
+    this.signalColor = this.signalColor || this.textColor;
+    this.signalTextColor = this.signalTextColor || this.textColor;
+    this.labelBoxBorderColor = this.labelBoxBorderColor || this.actorBorder;
+    this.labelTextColor = this.labelTextColor || this.actorTextColor;
+    this.loopTextColor = this.loopTextColor || this.actorTextColor;
+    this.activationBorderColor = this.activationBorderColor || darken(this.secondaryColor, 10);
+    this.activationBkgColor = this.activationBkgColor || this.secondaryColor;
+    this.sequenceNumberColor = this.sequenceNumberColor || invert(this.lineColor);
 
     /* Gantt chart variables */
 
-    this.sectionBkgColor = this.tertiaryColor;
-    this.altSectionBkgColor = 'white';
-    this.sectionBkgColor = this.secondaryColor;
-    this.sectionBkgColor2 = this.tertiaryColor;
-    this.altSectionBkgColor = 'white';
-    this.sectionBkgColor2 = this.primaryColor;
-    this.taskBorderColor = this.primaryBorderColor;
-    this.taskBkgColor = this.primaryColor;
-    this.activeTaskBorderColor = this.primaryColor;
-    this.activeTaskBkgColor = lighten(this.primaryColor, 23);
-    this.gridColor = 'lightgrey';
-    this.doneTaskBkgColor = 'lightgrey';
-    this.doneTaskBorderColor = 'grey';
-    this.critBorderColor = '#ff8888';
-    this.critBkgColor = 'red';
-    this.todayLineColor = 'red';
-    this.taskTextColor = this.textColor;
-    this.taskTextOutsideColor = this.textColor;
-    this.taskTextLightColor = this.textColor;
-    this.taskTextColor = this.primaryTextColor;
-    this.taskTextDarkColor = this.textColor;
-    this.taskTextOutsideColor = 'calculated';
-    this.taskTextClickableColor = '#003163';
-
-    /* state colors */
-    this.labelColor = this.primaryTextColor;
-    this.altBackground = this.tertiaryColor;
-    this.errorBkgColor = '#552222';
-    this.errorTextColor = '#552222';
+    this.sectionBkgColor = this.sectionBkgColor || this.tertiaryColor;
+    this.altSectionBkgColor = this.altSectionBkgColor || 'white';
+    this.sectionBkgColor = this.sectionBkgColor || this.secondaryColor;
+    this.sectionBkgColor2 = this.sectionBkgColor2 || this.primaryColor;
+    this.taskBorderColor = this.taskBorderColor || this.primaryBorderColor;
+    this.taskBkgColor = this.taskBkgColor || this.primaryColor;
+    this.activeTaskBorderColor = this.activeTaskBorderColor || this.primaryColor;
+    this.activeTaskBkgColor = this.activeTaskBkgColor || lighten(this.primaryColor, 23);
+    this.gridColor = this.gridColor || 'lightgrey';
+    this.doneTaskBkgColor = this.doneTaskBkgColor || 'lightgrey';
+    this.doneTaskBorderColor = this.doneTaskBorderColor || 'grey';
+    this.critBorderColor = this.critBorderColor || '#ff8888';
+    this.critBkgColor = this.critBkgColor || 'red';
+    this.todayLineColor = this.todayLineColor || 'red';
+    this.taskTextColor = this.taskTextColor || this.textColor;
+    this.taskTextOutsideColor = this.taskTextOutsideColor || this.textColor;
+    this.taskTextLightColor = this.taskTextLightColor || this.textColor;
+    this.taskTextColor = this.taskTextColor || this.primaryTextColor;
+    this.taskTextDarkColor = this.taskTextDarkColor || this.textColor;
+    this.taskTextClickableColor = this.taskTextClickableColor || '#003163';
 
     /* state colors */
+    this.labelColor = this.labelColor || this.primaryTextColor;
+    this.altBackground = this.altBackground || this.tertiaryColor;
+    this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
+    this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;
 
     /* class */
-    this.classText = this.textColor;
+    this.classText = this.classText || this.textColor;
 
     /* user-journey */
-    this.fillType0 = this.primaryColor;
-    this.fillType1 = this.secondaryColor;
-    this.fillType2 = adjust(this.primaryColor, { h: 64 });
-    this.fillType3 = adjust(this.secondaryColor, { h: 64 });
-    this.fillType4 = adjust(this.primaryColor, { h: -64 });
-    this.fillType5 = adjust(this.secondaryColor, { h: -64 });
-    this.fillType6 = adjust(this.primaryColor, { h: 128 });
-    this.fillType7 = adjust(this.secondaryColor, { h: 128 });
+    this.fillType0 = this.fillType0 || this.primaryColor;
+    this.fillType1 = this.fillType1 || this.secondaryColor;
+    this.fillType2 = this.fillType2 || adjust(this.primaryColor, { h: 64 });
+    this.fillType3 = this.fillType3 || adjust(this.secondaryColor, { h: 64 });
+    this.fillType4 = this.fillType4 || adjust(this.primaryColor, { h: -64 });
+    this.fillType5 = this.fillType5 || adjust(this.secondaryColor, { h: -64 });
+    this.fillType6 = this.fillType6 || adjust(this.primaryColor, { h: 128 });
+    this.fillType7 = this.fillType7 || adjust(this.secondaryColor, { h: 128 });
   }
   calculate(overrides) {
     if (typeof overrides !== 'object') {

src/themes/theme-dark.js

@@ -1,10 +1,21 @@
 import { invert, lighten, darken, rgba, adjust } from 'khroma';
-
+import { mkBorder } from './theme-helpers';
 class Theme {
   constructor() {
     this.background = '#333';
     this.primaryColor = '#1f2020';
     this.secondaryColor = lighten(this.primaryColor, 16);
+
+    this.tertiaryColor = adjust(this.primaryColor, { h: -160 });
+    this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode);
+    this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode);
+    this.tertiaryBorderColor = mkBorder(this.tertiaryColor, this.darkMode);
+    this.primaryTextColor = invert(this.primaryColor);
+    this.secondaryTextColor = invert(this.secondaryColor);
+    this.tertiaryTextColor = invert(this.tertiaryColor);
+    this.lineColor = invert(this.background);
+    this.textColor = invert(this.background);
+
     this.mainBkg = '#1f2020';
     this.secondBkg = 'calculated';
     this.mainContrastColor = 'lightgrey';
@@ -127,7 +138,7 @@ class Theme {
     this.fillType6 = adjust(this.primaryColor, { h: 128 });
     this.fillType7 = adjust(this.secondaryColor, { h: 128 });
     /* class */
-    this.classText = this.nodeBorder;
+    this.classText = this.primaryTextColor;
   }
   calculate(overrides) {
     if (typeof overrides !== 'object') {

src/themes/theme-default.js

@@ -1,10 +1,26 @@
-import { lighten, rgba, adjust } from 'khroma';
+import { invert, lighten, rgba, adjust } from 'khroma';
+import { mkBorder } from './theme-helpers';
 
 class Theme {
   constructor() {
     /* Base variables */
+    this.background = '#f4f4f4';
     this.primaryColor = '#ECECFF';
+
+    this.secondaryColor = adjust(this.primaryColor, { h: 120 });
     this.secondaryColor = '#ffffde';
+    this.tertiaryColor = adjust(this.primaryColor, { h: -160 });
+    this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode);
+    this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode);
+    this.tertiaryBorderColor = mkBorder(this.tertiaryColor, this.darkMode);
+    // this.noteBorderColor = mkBorder(this.noteBkgColor, this.darkMode);
+
+    this.primaryTextColor = invert(this.primaryColor);
+    this.secondaryTextColor = invert(this.secondaryColor);
+    this.tertiaryTextColor = invert(this.tertiaryColor);
+    this.lineColor = invert(this.background);
+    this.textColor = invert(this.background);
+
     this.background = 'white';
     this.mainBkg = '#ECECFF';
     this.secondBkg = '#ffffde';
@@ -124,7 +140,7 @@ class Theme {
 
     /* state colors */
     /* class */
-    this.classText = this.nodeBorder;
+    this.classText = this.primaryTextColor;
     /* journey */
     this.fillType0 = this.primaryColor;
     this.fillType1 = this.secondaryColor;
@@ -161,6 +177,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;
 };

src/themes/theme-forest.js

@@ -1,7 +1,9 @@
-import { darken, adjust } from 'khroma';
+import { darken, lighten, adjust, invert } from 'khroma';
+import { mkBorder } from './theme-helpers';
 class Theme {
   constructor() {
     /* Base vales */
+    this.background = '#f4f4f4';
     this.primaryColor = '#cde498';
     this.secondaryColor = '#cdffb2';
     this.background = 'white';
@@ -14,8 +16,17 @@ class Theme {
     this.fontFamily = '"trebuchet ms", verdana, arial';
     this.fontSize = '16px';
 
-    /* Flowchart variables */
+    this.tertiaryColor = lighten('#cde498', 10);
+    this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode);
+    this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode);
+    this.tertiaryBorderColor = mkBorder(this.tertiaryColor, this.darkMode);
+    this.primaryTextColor = invert(this.primaryColor);
+    this.secondaryTextColor = invert(this.secondaryColor);
+    this.tertiaryTextColor = invert(this.primaryColor);
+    this.lineColor = invert(this.background);
+    this.textColor = invert(this.background);
 
+    /* Flowchart variables */
     this.nodeBkg = 'calculated';
     this.nodeBorder = 'calculated';
     this.clusterBkg = 'calculated';
@@ -99,7 +110,7 @@ class Theme {
 
     /* state colors */
     /* class */
-    this.classText = this.nodeBorder;
+    this.classText = this.primaryTextColor;
     /* journey */
     this.fillType0 = this.primaryColor;
     this.fillType1 = this.secondaryColor;

src/themes/theme-helpers.js

@@ -0,0 +1,4 @@
+import { adjust } from 'khroma';
+
+export const mkBorder = (col, darkMode) =>
+  darkMode ? adjust(col, { s: -40, l: 10 }) : adjust(col, { s: -40, l: -10 });

src/themes/theme-neutral.js

@@ -1,4 +1,5 @@
-import { darken, lighten, adjust } from 'khroma';
+import { invert, darken, lighten, adjust } from 'khroma';
+import { mkBorder } from './theme-helpers';
 
 // const Color = require ( 'khroma/dist/color' ).default
 // Color.format.hex.stringify(Color.parse('hsl(210, 66.6666666667%, 95%)')); // => "#EAF2FB"
@@ -8,7 +9,23 @@ class Theme {
     this.primaryColor = '#eee';
     this.contrast = '#26a';
     this.secondaryColor = lighten(this.contrast, 55);
-    this.background = 'white';
+    this.background = '#ffffff';
+
+    // 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);
+    // this.noteBorderColor = mkBorder(this.noteBkgColor, this.darkMode);
+
+    this.primaryTextColor = invert(this.primaryColor);
+    this.secondaryTextColor = invert(this.secondaryColor);
+    this.tertiaryTextColor = invert(this.tertiaryColor);
+    this.lineColor = invert(this.background);
+    this.textColor = invert(this.background);
+
+    this.altBackground = lighten(this.contrast, 55);
     this.mainBkg = '#eee';
     this.secondBkg = 'calculated';
     this.lineColor = '#666';
@@ -131,7 +148,7 @@ class Theme {
 
     /* state colors */
     /* class */
-    this.classText = this.nodeBorder;
+    this.classText = this.primaryTextColor;
     /* journey */
     this.fillType0 = this.primaryColor;
     this.fillType1 = this.secondaryColor;

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"
@@ -2177,9 +2280,9 @@ bluebird@3.7.2, bluebird@^3.5.0, bluebird@^3.5.1, bluebird@^3.5.5:
   integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
 
 bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0:
-  version "4.11.8"
-  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f"
-  integrity sha512-ItfYfPLkWHUjckQCk8xC+LwxgK8NYcXywGigJgSwOP8Y2iyWT4f2vsZnoOXTTbo+o5yXmIUJ4gn5538SO5S3gA==
+  version "4.11.9"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.9.tgz#26d556829458f9d1e81fc48952493d0ba3507828"
+  integrity sha512-E6QoYqCKZfgatHTdHzs1RRKP7ip4vvm+EyRUeE2RF0NblwVvb0p6jSVeNTOFxPn26QXN2o6SMfNxKp6kU8zQaw==
 
 body-parser@1.19.0, body-parser@^1.18.3:
   version "1.19.0"
@@ -3963,9 +4066,9 @@ elegant-spinner@^1.0.1:
   integrity sha1-2wQ1IcldfjA/2PNFvtwzSc+wcp4=
 
 elliptic@^6.0.0:
-  version "6.5.2"
-  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.2.tgz#05c5678d7173c049d8ca433552224a495d0e3762"
-  integrity sha512-f4x70okzZbIQl/NSRLkI/+tteV/9WqL98zx+SQ69KbXxmVrmjwsNUPn/gYJJ0sHvEak24cZgHIPegRePAtA/xw==
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.3.tgz#cb59eb2efdaf73a0bd78ccd7015a62ad6e0f93d6"
+  integrity sha512-IMqzv5wNQf+E6aHeIqATs0tOLeOTwj1QKbRcS3jBbYkl5oLAserA8yJTT7/VyHUYG91PRmPyeQDObKLPpeS4dw==
   dependencies:
     bn.js "^4.4.0"
     brorand "^1.0.1"
@@ -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"