Merge branch 'mermaid-js-develop' into develop

.gitignore

@@ -16,4 +16,5 @@ dist/sequenceTest.html
 
 .vscode/
 cypress/platform/current.html
-cypress/platform/experimental.html
+cypress/platform/experimental.html
+local/

cypress/integration/other/webpackUsage.spec.js

@@ -6,6 +6,6 @@ describe('Sequencediagram', () => {
     cy.visit(url);
     cy.get('body')
       .find('svg')
-      .should('have.length', 2);
+      .should('have.length', 1);
   });
 });

cypress/integration/rendering/flowchart-v2.spec.js

@@ -0,0 +1,31 @@
+/* eslint-env jest */
+import { imgSnapshotTest } from '../../helpers/util';
+
+describe('Flowchart v2', () => {
+  it('1: should render a simple flowchart', () => {
+    imgSnapshotTest(
+      `flowchart TD
+      A[Christmas] -->|Get money| B(Go shopping)
+      B --> C{Let me think}
+      C -->|One| D[Laptop]
+      C -->|Two| E[iPhone]
+      C -->|Three| F[fa:fa-car Car]
+      `,
+      {}
+    );
+  });
+
+  it('2: should render a simple flowchart with diagramPadding set to 0', () => {
+    imgSnapshotTest(
+      `flowchart TD
+      A[Christmas] -->|Get money| B(Go shopping)
+      B --> C{Let me think}
+      %% this is a comment
+      C -->|One| D[Laptop]
+      C -->|Two| E[iPhone]
+      C -->|Three| F[fa:fa-car Car]
+      `,
+      { flowchart: { diagramPadding: 0 } }
+    );
+  });
+});

cypress/integration/rendering/flowchart.spec.js

@@ -671,4 +671,18 @@ describe('Flowchart', () => {
       { flowchart: { htmlLabels: false } }
     );
   });
+
+  it('33: should render a simple flowchart with diagramPadding set to 0', () => {
+    imgSnapshotTest(
+      `graph TD
+      A[Christmas] -->|Get money| B(Go shopping)
+      B --> C{Let me think}
+      %% this is a comment
+      C -->|One| D[Laptop]
+      C -->|Two| E[iPhone]
+      C -->|Three| F[fa:fa-car Car]
+      `,
+      { flowchart: { diagramPadding: 0 } }
+    );
+  });
 });

cypress/integration/rendering/gantt.spec.js

@@ -2,6 +2,9 @@
 import { imgSnapshotTest } from '../../helpers/util.js';
 
 describe('Gantt diagram', () => {
+  beforeEach(()=>{
+    cy.clock((new Date('1010-10-10')).getTime())
+  })
   it('should render a gantt chart', () => {
     imgSnapshotTest(
       `

cypress/integration/rendering/theme.spec.js

@@ -0,0 +1,278 @@
+/* eslint-env jest */
+import { imgSnapshotTest } from '../../helpers/util.js';
+
+describe('Pie Chart', () => {
+    // beforeEach(()=>{
+    //   cy.clock((new Date('2014-06-09')).getTime());
+    // });
+
+  ['default', 'forest', 'dark', 'neutral'].forEach(theme=>{
+    describe(theme, () => {
+      it('should render a pie diagram', () => {
+        imgSnapshotTest(
+          `
+        pie title Sports in Sweden
+          "Bandy" : 40
+          "Ice-Hockey" : 80
+          "Football" : 90
+          `,
+          {theme}
+        );
+        cy.get('svg');
+      });
+      it('should render a flowchart diagram', () => {
+        imgSnapshotTest(
+          `
+        %%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
+        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
+          `,
+          {theme}
+        );
+        cy.get('svg');
+      });
+      it('should render a new flowchart diagram', () => {
+        imgSnapshotTest(
+          `
+        %%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
+        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
+          `,
+          {theme}
+        );
+        cy.get('svg');
+      });
+      it('should render a sequence diagram', () => {
+        imgSnapshotTest(
+          `
+        %%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
+        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
+
+
+          `,
+          {theme}
+        );
+        cy.get('svg');
+      });
+
+      it('should render a class diagram', () => {
+        imgSnapshotTest(
+          `
+        %%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
+        classDiagram
+          Animal "*" <|-- "1" Duck
+          Animal "1" <|-- "10" Fish
+          Animal <|-- 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()
+          }
+        classA <|-- classB
+        classC *-- classD
+        classE o-- classF
+        classG <-- classH
+        classI -- classJ
+        classK <.. classL
+        classM <|.. classN
+        classO .. classP
+        classA --|> classB : Inheritance
+        classC --* classD : Composition
+        classE --o classF : Aggregation
+        classG --> classH : Association
+        classI -- classJ : Link(Solid)
+        classK ..> classL : Dependency
+        classM ..|> classN : Realization
+        classO .. classP : Link(Dashed)
+          `,
+          {theme}
+        );
+        cy.get('svg');
+    });
+      it('should render a state diagram', () => {
+        imgSnapshotTest(
+          `
+        %%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
+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.
+          `,
+          {theme}
+        );
+        cy.get('svg');
+    });
+      it('should render a state diagram (v2)', () => {
+        imgSnapshotTest(
+          `
+        %%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
+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.
+          `,
+          {theme}
+        );
+        cy.get('svg');
+    });
+      it('should render a er diagram', () => {
+        imgSnapshotTest(
+          `
+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"
+
+          `,
+          {theme}
+        );
+        cy.get('svg');
+    });
+      it('should render a user journey diagram', () => {
+        imgSnapshotTest(
+          `
+        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          `,
+          {theme}
+        );
+        cy.get('svg');
+    });
+      it('should render a gantt diagram', () => {
+        cy.clock((new Date('2014-01-06')).getTime());
+        imgSnapshotTest(
+          `
+      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
+       `,
+          {theme}
+        );
+        cy.get('svg');
+    });
+    });
+  });
+});

cypress/platform/bundle-test.js

@@ -1,10 +1,36 @@
-import mermaid from '../../dist/mermaid.core'
+import mermaid from '../../dist/mermaid.core';
+
+const code = `graph LR
+Power_Supply --> Transmitter_A
+Power_Supply --> Transmitter_B
+Transmitter_A --> D
+Transmitter_B --> D`;
 
 mermaid.initialize({
   theme: 'forest',
-  gantt: { axisFormatter: [
-    ['%Y-%m-%d', (d) => {
-      return d.getDay() === 1
-    }]
-  ] }
-})
+  fontFamily: '"Lucida Console", Monaco, monospace',
+  startOnLoad: false,
+  flowchart: {
+    htmlLabels: true
+  },
+  gantt: {
+    axisFormatter: [
+      [
+        '%Y-%m-%d',
+        d => {
+          return d.getDay() === 1;
+        }
+      ]
+    ]
+  }
+});
+mermaid.render(
+  'the-id-of-the-svg',
+  code,
+  svg => {
+    console.log(svg);
+    const elem = document.querySelector('#graph-to-be');
+    elem.innerHTML = svg;
+  }
+  // ,document.querySelector('#tmp')
+);

cypress/platform/current.html

@@ -17,58 +17,110 @@
       .mermaid2 {
         display: none;
       }
+      .someClass > *   {
+        /* fill: red !important; */
+      }
     </style>
   </head>
   <body>
     <h1>info below</h1>
-    <div class="flex">
+    <div class="flex flex-wrap">
       <div class="mermaid2" style="width: 50%; height: 20%;">
-flowchart BT
-    subgraph two
-    b1
-    end
-    subgraph three
-    c1-->c2
-    end
-    c1 --apa apa apa--> b1
-    two --> c2
+        %%{init: { 'logLevel': 0, 'theme': 'forest'} }%%
+        pie title Sports in Sweden
+          "Bandy" : 40
+          "Ice-Hockey" : 80
+          "Football" : 90
       </div>
-      <div class="mermaid" 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 class="mermaid2" style="width: 50%; height: 20%;">
+%%{init: { 'logLevel': 0, 'theme': 'default'} }%%
+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" style="width: 50%; height: 200px;">
-        %%{init: {'config': {'wrap': true }}}%%
-        sequenceDiagram
-        participant A as Extremely utterly
-        A->>Bob:  long line of longness which had preivously overflown the actor box as it is much longer than what it should be
-        Bob-->A: Pasten !      </div>
-      <div class="mermaid2" style="width: 50%; height: 200px;">
+      <div class="mermaid2" style="width: 50%; height: 20%;">
+%%{init: { 'logLevel': 1, 'theme': 'forest'} }%%
+      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" style="width: 50%; height: 20%;">
+      %%{init: { 'logLevel': 1, 'theme': 'neutral'} }%%
 
-      flowchart BT
-      subgraph a
-        b1 -- ok --> b2
-      end
-      a -- sert --> c
-      c --> d
-      b1 --> d
-      a --asd123 --> d
+      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="mermaid2" style="width: 50%; height: 20%;">
-stateDiagram-v2
-  state A {
-    B1 --> B2: ok
-  }
-  A --> C: sert
-  C --> D
-  B1 --> D
-  A --> D: asd123
-      </div>
-      </div>
-      <div class="mermaid2" style="width: 50%; height: 20%;">
+      <div class="mermaid2" style="background: #3f3f3f; width: 50%; height: 20%;">
+      %%{init: { 'logLevel': 1, 'theme': 'dark'} }%%
 
+      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="mermaid2" style="background: #3f3f3f; width: 50%; height: 20%;">
+      %%{init: { 'logLevel': 1} }%%
+
+      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>
 
   <script src="./mermaid.js"></script>
     <script>
@@ -76,17 +128,20 @@ stateDiagram-v2
           // console.error('Mermaid error: ', err);
         };
       mermaid.initialize({
+        theme: 'forest',
+        // theme: 'dark',
         // theme: 'dark',
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,
-        flowchart: { curve: 'linear', "htmlLabels": false },
+        flowchart: { useMaxWidth: true },
+        graph: { curve: 'cardinal', "htmlLabels": false },
         // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50, showSequenceNumbers: true },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         fontFamily: '"arial", sans-serif',
-        curve: 'linear',
-        securityLevel: 'loose'
+        curve: 'cardinal',
+        securityLevel: 'strict',
       });
       function callback(){alert('It worked');}
     </script>

cypress/platform/e2e.html

@@ -1,12 +1,16 @@
 <html>
   <head>
+    <meta charset="utf-8"/>
+    <!-- <meta charset="iso-8859-15"/> -->
     <script src="/e2e.js"></script>
-    <link href="https://fonts.googleapis.com/css?family=Mansalva&display=swap" rel="stylesheet" />
-    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
+    <!-- <link href="https://fonts.googleapis.com/css?family=Mansalva&display=swap" rel="stylesheet" /> -->
+    <!-- <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet"> -->
     <style>
       body {
         /* font-family: 'Mansalva', cursive;*/
-        font-family: 'Mansalva', cursive;
+        /* font-family: 'Mansalva', cursive; */
+        /* font-family: '"Noto Sans SC", sans-serif'; */
+        /* font-family: "trebuchet ms", verdana, arial; */
       }
       /* .mermaid-main-font {
         font-family: "trebuchet ms", verdana, arial;
@@ -34,6 +38,7 @@
         // fontFamily: '\"trebuchet ms\", verdana, arial;'
         // fontFamily: '"Comic Sans MS", "Comic Sans", cursive'
         // fontFamily: '"Mansalva", cursive',
+        // fontFamily: '"Noto Sans SC", sans-serif'
         fontFamily: '"Noto Sans SC", sans-serif'
       });
     </script>

cypress/platform/theme-directives.html

@@ -0,0 +1,141 @@
+<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:#333; */
+        font-family: 'Arial';
+        }
+      h1 { color: grey;}
+      .mermaid2 {
+        display: none;
+      }
+      .someClass > *   {
+        /* fill: red !important; */
+      }
+    </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>
+      <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>
+      <div class="mermaid" style="width: 50%; height: 20%;">
+      %%{init: { 'logLevel': 1, 'theme': 'neutral'} }%%
+
+      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
+      </div>
+      <div class="mermaid" style="background: #3f3f3f; width: 50%; height: 20%;">
+      %%{init: { 'logLevel': 1, 'theme': 'dark'} }%%
+
+      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
+      </div>
+    </div>
+
+  <script src="./mermaid.js"></script>
+    <script>
+      mermaid.parseError = function (err, hash) {
+          // console.error('Mermaid error: ', err);
+        };
+      mermaid.initialize({
+        // theme: 'dark',
+        // theme: 'dark',
+        // arrowMarkerAbsolute: true,
+        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
+        logLevel: 0,
+        flowchart: { useMaxWidth: true },
+        graph: { 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/viewer.js

@@ -12,7 +12,9 @@ const contentLoaded = function() {
     pos = pos + 7;
     const graphBase64 = document.location.href.substr(pos);
     const graphObj = JSON.parse(Base64.decode(graphBase64));
-    // const graph = 'hello'
+    if (graphObj.mermaid && graphObj.mermaid.theme === 'dark') {
+      document.body.style.background = '#3f3f3f';
+    }
     console.log(graphObj);
     if (Array.isArray(graphObj.code)) {
       const numCodes = graphObj.code.length;
@@ -30,6 +32,7 @@ const contentLoaded = function() {
       div.innerHTML = graphObj.code;
       document.getElementsByTagName('body')[0].appendChild(div);
     }
+
     global.mermaid.initialize(graphObj.mermaid);
     global.mermaid.init();
   }

cypress/platform/webpackUsage.html

@@ -1,22 +1,17 @@
 <!doctype html>
 <html>
-
+<head>
+  <style>
+  /* .mermaid {
+    font-family: "trebuchet ms", verdana, arial;;
+  } */
+  /* .mermaid {
+    font-family: 'arial';
+  } */
+  </style>
+</head>
 <body>
-  <div class="mermaid">
-graph LR
-A-->B
-  </div>
-  <div class="mermaid">
-gantt
-title A Gantt Diagram
-dateFormat  YYYY-MM-DD
-section Section
-A task           :a1, 2014-01-01, 30d
-Another task     :after a1  , 20d
-section Another
-Task in sec      :2014-01-12  , 12d
-another task      : 24d
-  </div>
+  <div id="graph-to-be"></div>
   <script src="./bundle-test.js" charset="utf-8"></script>
 </body>
 

docs/8.6.0_docs.md

@@ -0,0 +1,196 @@
+# Version 8.6.0 Changes
+
+**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](./8.6.0_docs.md)
+
+## [New Mermaid Live-Editor Beta](https://mermaid-js.github.io/docs/mermaid-live-editor-beta/#/edit/eyJjb2RlIjoiJSV7aW5pdDoge1widGhlbWVcIjogXCJmb3Jlc3RcIiwgXCJsb2dMZXZlbFwiOiAxIH19JSVcbmdyYXBoIFREXG4gIEFbQ2hyaXN0bWFzXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuICBCIC0tPiBDe0xldCBtZSB0aGlua31cbiAgQyAtLT58T25lfCBEW0xhcHRvcF1cbiAgQyAtLT58VHdvfCBFW2lQaG9uZV1cbiAgQyAtLT58VGhyZWV8IEZbZmE6ZmEtY2FyIENhcl1cblx0XHQiLCJtZXJtYWlkIjp7InRoZW1lIjoiZGFyayJ9fQ)
+
+## [CDN](https://unpkg.com/mermaid/)
+
+With version 8.6.0 comes the release of directives for mermaid and a new system for configurations, with the aim of establishing centralized, sane defaults and simple implementation.
+
+the init directive is the main method of configuration for Site and Current Levels.
+
+The three levels of are Configuration, Global, Site and Current.
+
+| Level of Configuration | Description |
+| --- | --- |
+| Global Configuration| Default Mermaid Configurations|
+| Site Configuration| Configurations made by site owner|
+| Current Configuration| Configurations made by Implementors|
+
+
+# Limits to Modifying Configurations
+secure Array
+
+| Parameter | Description |Type | Required | Values|
+| --- | --- | --- | --- | --- |
+| secure | Array of parameters excluded from init directive| Array | Required | Any parameters|
+
+The modifiable parts of the Configuration are limited by the secure array, which is an array of immutable parameters, this array can be expanded by site owners.
+
+**Notes**: secure arrays work like nesting dolls, with the Global Configurations’ secure array being the default and immutable list of immutable parameters, or the smallest doll, to which site owners may add to, but implementors may not modify it.
+
+# Secure Arrays
+
+Site owners can add to the **secure** array using this command:
+mermaidAPI.initialize( { startOnLoad: true, secure: ['parameter1', 'parameter2'] } );
+
+default values for the **secure array** consists of: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']. These default values are immutable.
+
+Implementors can only modify configurations using directives, but cannot change the **secure** array.
+
+# Modifying Configurations and directives:
+The Two types of directives: are “init” or “initialize” and “wrap”.
+
+**Notes**: All directives are enclosed in %%{ }%%.
+
+Older versions of mermaid will not parse directives because %% will comment out the directive.
+
+# Init
+init, or initialize: the init or initialize directive gives the user the ability to overwrite and change the values for configuration parameters, with respect to the secure array that is in effect.
+
+| Parameter | Description |Type | Required | Values|
+| --- | --- | --- | --- | --- |
+| init | modifies configurations| Directive| Optional | Any parameters not included in the secure array|
+
+**Notes:**
+
+init would be an argument-directive: %%{init: { **insert argument here**}}%%
+
+The json object that is passed as {**argument** } must be valid, quoted json or it will be ignored.
+    **for example**:
+    
+%%{init: {"theme": default, "logLevel": 1 }}%%
+
+Configurations that are passed through init cannot change the parameters in secure arrays of higher levels. In the event of a conflict, mermaid will give priority to secure arrays and parse the request, without changing the values of the parameters in conflict.
+
+When deployed within code, init is called before the graph/diagram description.
+**for example**:
+ %%{init: {"theme": "default", "logLevel": 1 }}%%
+  graph LR
+   a-->b
+   b-->c
+   c-->d
+   d-->e
+   e-->f
+   f-->g
+   g-->
+
+# Wrap
+| Parameter | Description |Type | Required | Values|
+| --- | --- | --- | --- | --- |
+| wrap | a callable text-wrap function| Directive| Optional | %%{wrap}%%|
+
+**Notes:**
+
+Wrap is a function that is currently only deployable for sequence diagrams.
+
+wrap respects manually added <br\> so if the user wants to break up their text, they have full control over those breaks by adding their own <br\> tags.
+
+It is a non-argument directive and can be executed thusly:
+
+%%{wrap}%%.
+
+**an example of text wrapping in a sequence diagram**:
+
+![Image showing wrapped text](./img/wrapped%20text.png)
+
+
+# Resetting Configurations:
+There are two more functions in the mermaidAPI that can be called by site owners: **reset** and **globalReset**.
+
+**reset**: resets the configuration to whatever the last configuration was. This can be done to undo more recent changes to the last mermaidAPI.initialize({...}) configuration.
+
+**globalReset** will reset both the current configuration AND the site configuration back to the global defaults.
+
+**Notes**:  both reset and globalReset are only available to site owners, as such implementors would have to edit their configs with init.
+
+# Additional Utils to mermaid
+•	**memoize**: simple caching for computationally expensive functions. It reduces the rendering time for computationally intensive diagrams by about 90%.
+
+•	**assignWithDepth** - this is an improvement on previous functions with config.js and Object.assign. The purpose of this function is to provide a sane mechanism for merging objects, similar to object.assign, but with depth.
+
+Example of **assignWithDepth**:
+
+![Image showing assignWithDepth](./img/assignWithDepth.png)
+
+
+Example of **object.Assign**:
+
+![Image showing object.assign without depth](./img/object.assign%20without%20depth.png)
+
+•	**calculateTextDimensions, calculateTextWidth,** and **calculateTextHeight** - for measuring text dimensions, width and height.
+
+**Notes**:For more information on usage, parameters, and return info for these new functions take a look at the jsdocs for them in the utils package.
+
+
+# New API Requests Introduced in Version 8.6.0
+
+## setSiteConfig
+  
+  | Function | Description         | Type    | Values             |Parameters|Returns|
+  | --------- | ------------------- | ------- | ------------------ | ------------------ | ------------------ |
+  | setSiteConfig|Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array|conf|siteConfig|
+ 
+   **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**
+    
+    
+  ## 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.**
+    
+    
+  ## setConfig
+  | Function  | Description         | Type    | Values             |Parameters|Returns|
+  | --------- | ------------------- | ------- | ------------------ |----------|-------|
+  | setSiteConfig|Sets the siteConfig to desired values | Put Request| Any Values, those in secure array|conf|currentConfig merged with the sanitized conf|
+  
+  
+   **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.**
+  
+
+    
+   ## getConfig
+  | Function  | Description         | Type    | Return Values            |
+  | --------- | ------------------- | ------- | ------------------ |
+  | getConfig |Obtains the currentConfig | Get Request | Any Values from currentConfig|
+  
+   **Notes  :
+  Returns any values in currentConfig.**
+
+
+  ## sanitize
+  | Function  | Description         | Type    | Values             |
+  | --------- | ------------------- | ------- | ------------------ |
+  | sanitize  |Sets the siteConfig to desired values. | Put Request(?) |None|
+  
+  **Note: modifies options in-place
+  Ensures options parameter does not attempt to override siteConfig secure keys.**
+
+  ## reset
+  
+  | Function | Description         | Type    | Required | Values             |Parameter|
+  | --------- | -------------------| ------- | -------- | ------------------ |---------|
+  | reset|Resets currentConfig to conf| Put Request | Required | None| conf|
+  
+  ## conf 
+  | 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()`)**
+    
+ ## For more information, read [Setup](https://mermaid-js.github.io/mermaid/#/Setup).

docs/README.md

@@ -5,17 +5,41 @@
 [![Join the chat at https://gitter.im/knsv/mermaid](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/knsv/mermaid?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 
 ![banner](./img/header.png)
+**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](./README.md)
 
-Generation of diagrams and flowcharts from text in a similar manner as markdown.
-
-Ever wanted to simplify documentation and avoid heavy tools like Visio when explaining your code?
-
-This is why mermaid was born, a simple markdown-like script language for generating charts from text via javascript.
-
-Check out the list of [Integrations and Usages of Mermaid](./integrations.md)
 
 **Mermaid was nominated and won the JS Open Source Awards (2019) in the category "The most exciting use of technology"!!! Thanks to all involved, people committing pull requests, people answering questions and special thanks to Tyler Long who is helping me maintain the project.**
 
+
+
+Mermaid is a tool that generates diagrams and charts, from markdown-inspired text definitions
+
+This allows for simplified generation and updating of even the most complex diagrams and charts, while avoiding time-damanding and heavy tools like visio. 
+
+mermaid, is a simple markdown-inspired script language for generating charts from text-definitions, via javascript. As such, using it cuts the times it takes to create, modify and render diagrams. 
+
+Even non-programmers can create diagrams through the [mermaid live editor](https://github.com/mermaidjs/mermaid-live-editor).
+
+For a more detailed introduction to mermaid, look to the [Beginner's Guide](https://mermaid-js.github.io/mermaid/#/n00b-overview) section.
+
+You should also Check out the list of [Integrations and Usages of Mermaid](./integrations.md)
+
+You can also watch some popular mermaid tutorials.
+
+## [CDN](https://unpkg.com/mermaid/)
+
+## [Documentation](https://mermaidjs.github.io)
+
+## [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md)
+
+
+# New in Version 8.6.0
+
+## [New Mermaid Live-Editor Beta](https://mermaid-js.github.io/docs/mermaid-live-editor-beta/#/edit/eyJjb2RlIjoiJSV7aW5pdDoge1widGhlbWVcIjogXCJmb3Jlc3RcIiwgXCJsb2dMZXZlbFwiOiAxIH19JSVcbmdyYXBoIFREXG4gIEFbQ2hyaXN0bWFzXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuICBCIC0tPiBDe0xldCBtZSB0aGlua31cbiAgQyAtLT58T25lfCBEW0xhcHRvcF1cbiAgQyAtLT58VHdvfCBFW2lQaG9uZV1cbiAgQyAtLT58VGhyZWV8IEZbZmE6ZmEtY2FyIENhcl1cblx0XHQiLCJtZXJtYWlkIjp7InRoZW1lIjoiZGFyayJ9fQ)
+
+## [New Configuration Protocols in version 8.6.0](https://github.com/NeilCuzon/mermaid/edit/develop/docs/8.6.0_docs.md)
+
+
 ## New diagrams in 8.5
 
 With version 8.5 there are some bug fixes and enhancements, plus a new diagram type,  entity relationship diagrams.
@@ -24,10 +48,19 @@ With version 8.5 there are some bug fixes and enhancements, plus a new diagram t
 
 ## Special note regarding version 8.2
 
-In version 8.2 a security improvement was introduced. A securityLevel configuration was introduced which sets the level of trust to be used on the parsed diagrams.
+In version 8.2 a security improvement was introduced. A **securityLevel** configuration was introduced which sets the level of trust to be used on the parsed diagrams.
+
+## securityLevel
+
+| Parameter     | Description                       | Type   | Required | Values        |
+| ------------- | --------------------------------- | ------ | -------- | ------------- |
+| securitylevel | Level of trust for parsed diagram | String | Required | Strict, Loose |
+
+\*\*Notes:
+
+-   **strict**: (**default**) tags in text are encoded, click functionality is disabeled
+-   **loose**: tags in text are allowed, click functionality is enabled
 
-- **true**: (default) tags in text are encoded, click functionality is disabled
-- false: tags in text are allowed, click functionality is enabled
 
 Closed issues:
 
@@ -43,9 +76,9 @@ mermaidAPI.initialize({
 
 **🖖 Keep a steady pulse: mermaid needs more Collaborators [#866](https://github.com/knsv/mermaid/issues/866)**
 
-## Diagrams
+# Diagrams that mermaid can render:
 
-### Flowchart
+### [Flowchart](https://mermaid-js.github.io/mermaid/#/flowchart)
 
 ```
 graph TD;
@@ -57,7 +90,7 @@ graph TD;
 
 ![Flowchart](./img/flow.png)
 
-### Sequence diagram
+### [Sequence diagram](https://mermaid-js.github.io/mermaid/#/sequenceDiagram)
 
 ```
 sequenceDiagram
@@ -75,7 +108,7 @@ sequenceDiagram
 
 ![Sequence diagram](./img/sequence.png)
 
-### Gantt diagram
+### [Gantt diagram](https://mermaid-js.github.io/mermaid/#/gantt)
 
 ```
 gantt
@@ -92,7 +125,7 @@ Future task2               :         des4, after des3, 5d
 
 ![Gantt diagram](./img/gantt.png)
 
-### Class diagram - :exclamation: experimental
+### [Class diagram - :exclamation: experimental](https://mermaid-js.github.io/mermaid/#/classDiagram)
 
 ```
 classDiagram
@@ -134,10 +167,9 @@ commit
 merge newbranch
 
 ```
-
 ![Git graph](./img/git.png)
 
-### Entity Relationship Diagram - :exclamation: experimental
+### [Entity Relationship Diagram - :exclamation: experimental](https://mermaid-js.github.io/mermaid/#/entityRelationshipDiagram)
 
 ```
 erDiagram
@@ -149,6 +181,21 @@ erDiagram
 
 ![ER diagram](./img/simple-er.png)
 
+### [User Journey Diagram](https://mermaid-js.github.io/mermaid/#/user-journey)
+
+```markdown
+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
+```
+![Journey diagram](./img/user-journey.png)
+
 ## Installation
 
 ### CDN
@@ -157,24 +204,43 @@ erDiagram
 https://unpkg.com/mermaid@<version>/dist/
 ```
 
-Replace `<version>` with expected version number.
+To select a version:
 
-Example: https://unpkg.com/mermaid@7.1.0/dist/
+Replace `<version>` with the desired version number.
 
-### Node.js
+Alternatively, you can also adjust the version number in the page itself. 
+
+Latest Version: https://unpkg.com/browse/mermaid@8.6.0/
+
+## Incorporating mermaid to a website
+to support mermaid on your website, all you have to do is add Mermaid’s JavaScript package 
 
 ```
-yarn add mermaid
+1.You will need to isntall node v10 or 12, which would have npm
+
+2. download yarn using npm.
+
+2. enter the following command:
+    yarn add mermaid
+
+3. You can then add mermaid as a dev dependency using this command: 
+    yarn add --dev mermaid
+   
 ```
 
-## Documentation
+## To install mermaid without a bundler, one can use the script tag like so:
 
-https://mermaidjs.github.io
+<script src="https://unpkg.com/mermaid/"></script>
+<script>mermaid.initialize({startOnLoad:true});</script>
+
+## it can then be followed by the diagram definitions as could be found in the [examples in the documentation](https://mermaid-js.github.io/mermaid/#/n00b-gettingStarted).
+
+
+## On your page mermaid will look for tags with class="mermaid". From these tags mermaid will try to read the chart definiton and replace it with an svg chart.
 
 ## Sibling projects
-
-- [mermaid CLI](https://github.com/mermaidjs/mermaid.cli)
 - [mermaid live editor](https://github.com/mermaidjs/mermaid-live-editor)
+- [mermaid CLI](https://github.com/mermaidjs/mermaid.cli)
 - [mermaid webpack demo](https://github.com/mermaidjs/mermaid-webpack-demo)
 - [mermaid Parcel demo](https://github.com/mermaidjs/mermaid-parcel-demo)
 

docs/Setup.md

@@ -13,6 +13,10 @@ In addition to the render function, a number of behavioral configuration options
 
 ## 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:**
 
@@ -42,16 +46,18 @@ mermaid.initialize({
 </script>
 </pre>
 
-A summary of all options and their defaults is found [here][2]. A description of each option follows below.
+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|
+
+| 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>
@@ -83,14 +89,15 @@ theme , the CSS style sheet
 
 ## securityLevel
 
-| Parameter     | Description                       | Type   | Required | Values        |
-| ------------- | --------------------------------- | ------ | -------- | ------------- |
-| securitylevel | Level of trust for parsed diagram | String | Required | Strict, Loose |
+| 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
 
@@ -122,6 +129,15 @@ overriding a site's default security.
 
 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      |
@@ -705,9 +721,21 @@ T = top, B = bottom, L = left, and R = right.
 | --------- | ------------------- | ------- | -------- | ------------------ |
 | fontSize  | Font Size in pixels | Integer |          | Any Positive Value |
 
-**Notes:**Font size (expressed as an integer representing a number of  pixels)
+**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.
@@ -748,7 +776,19 @@ mermaidAPI.initialize({
     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',
     },
@@ -788,11 +828,20 @@ mermaidAPI.initialize({
 
 ## setSiteConfig
 
+## 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\*\*
+
 ### Parameters
 
 -   `conf`  the base currentConfig to use as siteConfig
@@ -801,13 +850,27 @@ Returns **any** the siteConfig
 
 ## getSiteConfig
 
-Obtains the current siteConfig base configuration
+## 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 **any** 
 
 ## setConfig
 
-Sets the currentConfig. The param conf is sanitized based on the siteConfig.secure keys. Any
+## 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.
 
@@ -819,12 +882,25 @@ Returns **any** the currentConfig merged with the sanitized conf
 
 ## getConfig
 
-Obtains the currentConfig
+## getConfig
+
+| Function  | Description               | Type        | Return Values                 |
+| --------- | ------------------------- | ----------- | ----------------------------- |
+| getConfig | Obtains the currentConfig | Get Request | Any Values from currentConfig |
+
+**Notes**:
+Returns **any** the currentConfig
 
 Returns **any** the currentConfig
 
 ## sanitize
 
+## 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
 
@@ -834,12 +910,25 @@ Note: modifies options in-place
 
 ## reset
 
-Resets this currentConfig to conf
+## 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()`)
 
 ### Parameters
 
 -   `conf`  the base currentConfig to reset to (default: current siteConfig ) (optional, default `getSiteConfig()`)
 
-[1]: https://github.com/knsv/mermaid/blob/master/docs/mermaidAPI.md#render
+[1]: Setup.md?id=render
 
-[2]: https://github.com/knsv/mermaid/blob/master/docs/Setup.md#mermaidapi-configuration-defaults
+[2]: 8.6.0_docs.md
+
+[3]: #mermaidapi-configuration-defaults

docs/_sidebar.md

@@ -21,10 +21,10 @@
 - Guide
 
   - [Development](development.md)
-  - [Setup](Setup.md)
+  - [Configurations](Setup.md)
   - [Changelog](CHANGELOG.md)
 
-- I'm a n00b
+- Beginner's Guide
   - [overview](n00b-overview.md)
   - [Getting started - easier](n00b-gettingStarted.md)
   - [Diagram syntax intro](n00b-syntaxReference.md)

docs/directives.md

@@ -1,4 +1,6 @@
-### Directives
+## Directives
+**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](./directives.md)
+### Directives were added in [Version 8.6.0](/8.6.0_docs.md)
 
 #### Init directives
 
@@ -54,4 +56,4 @@ Multiline directives, however, will pose an issue and will render an error. This
 
 ### Wrapping
 
-The `%%{wrap}%%` directive and the inline `wrap:` text hint have also been added for sequence diagrams. This has been explained in my previous comments and has not materially changed.
+The `%%{wrap}%%` directive and the inline `wrap:` text hint have also been added for sequence diagrams. This has been explained in my previous comments and has not materially changed.

docs/entityRelationshipDiagram.md

@@ -5,17 +5,19 @@
 Note that practitioners of ER modelling almost always refer to *entity types* simply as *entities*.  For example the CUSTOMER entity type would be referred to simply as the CUSTOMER entity.  This is so common it would be inadvisable to do anything else, but technically an entity is an abstract *instance* of an entity type, and this is what an ER diagram shows - abstract instances, and the relationships between them.  This is why entities are always named using singular nouns.
 
 Mermaid can render ER diagrams
-```
-erDiagram
-    CUSTOMER ||--o{ ORDER : places
-    ORDER ||--|{ LINE-ITEM : contains
-    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses 
-```
+
 ```mermaid
 erDiagram
     CUSTOMER ||--o{ ORDER : places
     ORDER ||--|{ LINE-ITEM : contains
-    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses 
+    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
+```
+
+```mermaid
+erDiagram
+    CUSTOMER ||--o{ ORDER : places
+    ORDER ||--|{ LINE-ITEM : contains
+    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
 ```
 
 Entity names are often capitalised, although there is no accepted standard on this, and it is not required in Mermaid.
@@ -31,9 +33,11 @@ ER diagrams are a new feature in Mermaid and are **experimental**.  There are li
 ### Entities and Relationships
 
 Mermaid syntax for ER diagrams is compatible with PlantUML, with an extension to label the relationship.  Each statement consists of the following parts, all of which are mandatory:
-```
+
+```mermaid
     <first-entity> <relationship> <second-entity> : <relationship-label>
 ```
+
 Where:
 
 - `first-entity` is the name of an entity.  Names must begin with an alphabetic character and may also contain digits and hyphens
@@ -43,7 +47,7 @@ Where:
 
 For example:
 
-```
+```mermaid
     PROPERTY ||--|{ ROOM : contains
 ```
 
@@ -51,9 +55,9 @@ This statement can be read as *a property contains one or more rooms, and a room
 
 ### Relationship Syntax
 
-The `relationship` part of each statement can be broken down into three sub-components: 
+The `relationship` part of each statement can be broken down into three sub-components:
 
-- the cardinality of the first entity with respect to the second, 
+- the cardinality of the first entity with respect to the second,
 - whether the relationship confers identity on a 'child' entity
 - the cardinality of the second entity with respect to the first
 
@@ -68,13 +72,37 @@ Cardinality is a property that describes how many elements of another entity can
 
 ### Identification
 
-Relationships may be classified as either *identifying* or *non-identifying* and these are rendered with either solid or dashed lines respectively. This is relevant when one of the entities in question can not have independent existence without the other.  For example a firm that insures people to drive cars might need to store data on `NAMED-DRIVER`s. In modelling this we might start out by observing that a `CAR` can be driven by many `PERSON` instances, and a `PERSON` can drive many `CAR`s - both entities can exist without the other, so this is a non-identifying relationship that we might specify in Mermaid as: `PERSON }|..|{ CAR : "driver"`.  Note the two dots in the middle of the relationship that will result in a dashed line being drawn between the two entities.  But when this many-to-many relationship is resolved into two one-to-many relationships, we observe that a `NAMED-DRIVER` cannot exist without both a `PERSON` and a `CAR` - the relationships become identifying and would be specified using hyphens, which translate to a solid line: 
+Relationships may be classified as either *identifying* or *non-identifying* and these are rendered with either solid or dashed lines respectively. This is relevant when one of the entities in question can not have independent existence without the other.  For example a firm that insures people to drive cars might need to store data on `NAMED-DRIVER`s. In modelling this we might start out by observing that a `CAR` can be driven by many `PERSON` instances, and a `PERSON` can drive many `CAR`s - both entities can exist without the other, so this is a non-identifying relationship that we might specify in Mermaid as: `PERSON }|..|{ CAR : "driver"`.  Note the two dots in the middle of the relationship that will result in a dashed line being drawn between the two entities.  But when this many-to-many relationship is resolved into two one-to-many relationships, we observe that a `NAMED-DRIVER` cannot exist without both a `PERSON` and a `CAR` - the relationships become identifying and would be specified using hyphens, which translate to a solid line:
 
-```
+```mermaid
     CAR ||--o{ NAMED-DRIVER : allows
     PERSON ||--o{ NAMED-DRIVER : is
 ```
+
 ### Other Things
 
 - If you want the relationship label to be more than one word, you must use double quotes around the phrase
 - If you don't want a label at all on a relationship, you must use an empty double-quoted string
+
+## Styling
+
+### Config options
+
+For simple color customization:
+
+| Name     | Used as                                                 |
+| :------- | :------------------------------------------------------ |
+| `fill`   | Background color of an entity                           |
+| `stroke` | Border color of an entity, line color of a relationship |
+
+### Classes used
+
+The following CSS class selectors are available for richer styling:
+
+| Selector                   | Description                                           |
+| :------------------------- | :---------------------------------------------------- |
+| `.er.entityBox`            | The box representing an entity                        |
+| `.er.entityLabel`          | The label for an entity                               |
+| `.er.relationshipLabel`    | The label for a relationship                          |
+| `.er.relationshipLabelBox` | The box surrounding a relationship label              |
+| `.er.relationshipLine`     | The line representing a relationship between entities |

docs/flowchart.md

@@ -1,5 +1,6 @@
 # Flowcharts - Basic Syntax
 
+**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](./flowchart.md)
 ## Graph
 
 This statement declares the direction of the Flowchart.

docs/gantt.md

@@ -1,5 +1,7 @@
 # Gantt diagrams
 
+**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](./gantt.md)
+
 > A Gantt chart is a type of bar chart, first developed by Karol Adamiecki in 1896, and independently by Henry Gantt in the 1910s, that illustrates a project schedule and the amount of time it would take for any one project to finish. Gantt charts illustrate number of days between the start and finish dates of the terminal elements and summary elements of a project.
  
  ## A note to users

docs/n00b-gettingStarted.md

@@ -1,16 +1,16 @@
 # A basic mermaid User-Guide for Beginners
 
-Creating diagrams and charts, using mermaid code is simple.
+Creating diagrams and charts using mermaid code is simple.
 
 But how is the code turned into a diagram in a web page? This is done with the use of a mermaid renderer.
 
 Thankfully the mermaid renderer is very accessible, in essence it is a piece of javascript that can be called. 
 
-Most widely used web browsers, such as Firefox, Chrome and Safari, can render mermaid, Internet Explorer however cannot. The web browser also needs access to the online mermaid renderer which it downloads from https://cdn.jsdelivr.net/npm/mermaid
+Most web browsers, such as Firefox, Chrome and Safari, can render mermaid, Internet Explorer however cannot. The web browser also needs access to the online mermaid renderer which it downloads from https://cdn.jsdelivr.net/npm/mermaid
 
 # For beginners, there are three relatively easy ways you can use mermaid:
 1. Using the mermaid [live editor](https://mermaid-js.github.io/mermaid-live-editor/)
-2. Using a mermaid plugin, such as that for Confluence or [Atom](https://atom.io/packages/atom-mermaid).
+2. Using one of the many mermaid plugins
 3. Calling mermaid renderer with HTML, deployed in a friendly browser. 
 
 # Following either of these examples, you can get started with creating your own diagrams using mermaid code.
@@ -126,10 +126,11 @@ This is what needs to go into the html file:
 
 # *Finally*
 # If the three steps mentioned are followed you will end up with something like this:
+
 ```
 <html>
   <body>
-    <script src="https://cdn.jsdelivr.net/npm/mermaid@8.4.0/dist/mermaid.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/mermaid@8.6.0/dist/mermaid.min.js"></script>
     <script>mermaid.initialize({startOnLoad:true});</script>
 
     Here is one mermaid diagram:
@@ -150,7 +151,7 @@ This is what needs to go into the html file:
   </body>
 </html>
 ```
-# Save this to a html file and fetch it with a browser from the web server (or just drag it into your web browser window) and voila!
+# Save this to an html file and open it with a browser from the web server (or just drag it into your web browser window) and voila!
 
 ---
 

docs/pie.md

@@ -1,5 +1,7 @@
 # Pie chart diagrams
 
+**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](./pie.md)
+
 > A pie chart (or a circle chart) is a circular statistical graphic, which is divided into slices to illustrate numerical proportion. In a pie chart, the arc length of each slice (and consequently its central angle and area), is proportional to the quantity it represents. While it is named for its resemblance to a pie which has been sliced, there are variations on the way it can be presented. The earliest known pie chart is generally credited to William Playfair's Statistical Breviary of 1801
 -Wikipedia
 

docs/sequenceDiagram.md

@@ -1,5 +1,7 @@
 # Sequence diagrams
 
+**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](./sequenceDiagram.md)
+
 > A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order.
 
 Mermaid can render sequence diagrams.

docs/stateDiagram.md

@@ -1,5 +1,7 @@
 # State diagrams
 
+**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](./stateDiagram.md)
+
 > "A state diagram is a type of diagram used in computer science and related fields to describe the behavior of systems. State diagrams require that the system described is composed of a finite number of states; sometimes, this is indeed the case, while at other times this is a reasonable abstraction." Wikipedia
 
 Mermaid can render state diagrams. The syntax tries to be compliant with the syntax used in plantUml as this will make it easier for users to share diagrams between mermaid and plantUml.

package.json

@@ -50,16 +50,16 @@
   },
   "dependencies": {
     "@braintree/sanitize-url": "^3.1.0",
-    "crypto-random-string": "^3.0.1",
     "d3": "^5.7.0",
     "dagre": "^0.8.4",
     "dagre-d3": "^0.6.4",
     "entity-decode": "^2.0.2",
     "graphlib": "^2.1.7",
     "he": "^1.2.0",
+    "khroma": "^1.1.0",
     "minify": "^4.1.1",
     "moment-mini": "^2.22.1",
-    "scope-css": "^1.2.1"
+    "stylis": "^3.5.2"
   },
   "devDependencies": {
     "@babel/core": "^7.2.2",

src/config.js

@@ -1,7 +1,18 @@
 import { assignWithDepth } from './utils';
 import { logger } from './logger';
+// import themeVariables from './theme-default';
+// import themeForestVariables from './theme-forest';
+// import themeNeutralVariables from './theme-neutral';
 
+const themes = {};
+
+for (const themeName of ['default', 'forest', 'dark', 'neutral']) {
+  themes[themeName] = require(`./theme-${themeName}.js`).default;
+}
 /**
+ * **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>
@@ -28,7 +39,7 @@ import { logger } from './logger';
  *   mermaid.initialize(config);
  * &lt;/script>
  * </pre>
- * A summary of all options and their defaults is found [here](https://github.com/knsv/mermaid/blob/master/docs/Setup.md#mermaidapi-configuration-defaults). A description of each option follows below.
+ * A summary of all options and their defaults is found [here](#mermaidapi-configuration-defaults). A description of each option follows below.
  *
  * @name Configuration
  */
@@ -36,9 +47,11 @@ 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",
@@ -46,6 +59,7 @@ const config = {
    * </pre>
    */
   theme: 'default',
+  themeVariables: themes.default,
   themeCSS: undefined,
   /* **maxTextSize** - The maximum allowed size of the users text diamgram */
   maxTextSize: 50000,
@@ -77,11 +91,12 @@ const config = {
   /**
    *| Parameter | Description |Type | Required | Values|
    *| --- | --- | --- | --- | --- |
-   *| securitylevel | Level of trust for parsed diagram|String | Required | Strict, Loose |
+   *| 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',
 
@@ -118,6 +133,16 @@ const config = {
    * 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|
      *| --- | --- | --- | --- | --- |
@@ -801,12 +826,27 @@ const config = {
      *| --- | --- | --- | --- | --- |
      *| fontSize| Font Size in pixels| Integer |  | Any Positive Value |
      *
-     ***Notes:**Font size (expressed as an integer representing a number of  pixels)
+     ***Notes:**Font size (expressed as an integer representing a number of pixels)
      ***Default value: 12 **
      */
-    fontSize: 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
   }
 };
+
+// debugger;
 config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
 config.git.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
 export const defaultConfig = Object.freeze(config);
@@ -815,47 +855,83 @@ const siteConfig = assignWithDepth({}, defaultConfig);
 const currentConfig = assignWithDepth({}, defaultConfig);
 
 /**
- * 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
+ *## 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 => {
   assignWithDepth(currentConfig, conf, { clobber: true });
+  // Set theme variables if user has set the theme option
   assignWithDepth(siteConfig, conf);
+
   return getSiteConfig();
 };
 /**
- * Obtains the current siteConfig base configuration
+ *## 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);
 };
 /**
- * Sets the currentConfig. The param 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.
+ *## 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 => {
   sanitize(conf);
+
   assignWithDepth(currentConfig, conf);
   return getConfig();
 };
 /**
- * Obtains the currentConfig
+ *   ## 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);
 };
 /**
- * Ensures options parameter does not attempt to override siteConfig secure keys
- * Note: modifies options in-place
+ *## 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 => {
@@ -872,7 +948,18 @@ export const sanitize = options => {
   });
 };
 /**
- * Resets this currentConfig to conf
+ *## 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()) => {

src/diagrams/class/styles.js

@@ -0,0 +1,63 @@
+const getStyles = options =>
+  `g.classGroup text {
+  fill: ${options.nodeBorder};
+  stroke: none;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-family: var(--mermaid-font-family);
+  font-size: 10px;
+
+  .title {
+    font-weight: bolder;
+  }
+}
+
+g.clickable {
+  cursor: pointer;
+}
+
+g.classGroup rect {
+  fill: ${options.nodeBkg};
+  stroke: ${options.nodeBorder};
+}
+
+g.classGroup line {
+  stroke: ${options.nodeBorder};
+  stroke-width: 1;
+}
+
+.classLabel .box {
+  stroke: none;
+  stroke-width: 0;
+  fill: ${options.nodeBkg};
+  opacity: 0.5;
+}
+
+.classLabel .label {
+  fill: ${options.nodeBorder};
+  font-size: 10px;
+}
+
+.relation {
+  stroke: ${options.nodeBorder};
+  stroke-width: 1;
+  fill: none;
+}
+
+.dashed-line{
+  stroke-dasharray: 3;
+}
+
+#compositionStart, #compositionEnd, #dependencyStart, #dependencyEnd, #extensionStart, #extensionEnd {
+  fill: ${options.nodeBorder};
+  stroke: ${options.nodeBorder};
+  stroke-width: 1;
+}
+
+#aggregationStart, #aggregationEnd  {
+    fill: ${options.nodeBkg};
+  stroke: ${options.nodeBorder};
+  stroke-width: 1;
+}
+`;
+
+export default getStyles;

src/diagrams/common/common.js

@@ -5,6 +5,30 @@ export const getRows = s => {
   return str.split('#br#');
 };
 
+export const removeScript = txt => {
+  var rs = '';
+  var idx = 0;
+
+  while (idx >= 0) {
+    idx = txt.indexOf('<script');
+    if (idx >= 0) {
+      rs += txt.substr(0, idx);
+      txt = txt.substr(idx + 1);
+
+      idx = txt.indexOf('</script>');
+      if (idx >= 0) {
+        idx += 9;
+        txt = txt.substr(idx);
+      }
+    } else {
+      rs += txt;
+      idx = -1;
+      break;
+    }
+  }
+  return rs;
+};
+
 export const sanitizeText = (text, config) => {
   let txt = text;
   let htmlLabels = true;
@@ -14,12 +38,18 @@ export const sanitizeText = (text, config) => {
   )
     htmlLabels = false;
 
-  if (config.securityLevel !== 'loose' && htmlLabels) {
-    // eslint-disable-line
-    txt = breakToPlaceholder(txt);
-    txt = txt.replace(/</g, '&lt;').replace(/>/g, '&gt;');
-    txt = txt.replace(/=/g, '&equals;');
-    txt = placeholderToBreak(txt);
+  if (htmlLabels) {
+    var level = config.securityLevel;
+
+    if (level == 'antiscript') {
+      txt = removeScript(txt);
+    } else if (level !== 'loose') {
+      // eslint-disable-line
+      txt = breakToPlaceholder(txt);
+      txt = txt.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+      txt = txt.replace(/=/g, '&equals;');
+      txt = placeholderToBreak(txt);
+    }
   }
 
   return txt;
@@ -48,5 +78,6 @@ export default {
   sanitizeText,
   hasBreaks,
   splitBreaks,
-  lineBreakRegex
+  lineBreakRegex,
+  removeScript
 };

src/diagrams/common/common.spec.js

@@ -0,0 +1,26 @@
+import { removeScript } from './common';
+
+describe('when securityLevel is antiscript, all script must be removed', function() {
+  it('should remove all script block, script inline.', function() {
+    const labelString = `1
+		Act1: Hello 1<script src="http://abc.com/script1.js"></script>1
+		<b>Act2</b>:
+		1<script>
+			alert('script run......');
+		</script>1
+	1`;
+
+	const result = removeScript(labelString);
+	const hasScript = (result.indexOf("script") >= 0);
+    expect(hasScript).toEqual(false);
+
+	const exactlyString = `1
+		Act1: Hello 11
+		<b>Act2</b>:
+		11
+	1`;
+
+	const isEqual = (result == exactlyString);
+    expect(isEqual).toEqual(true);
+  });
+});

src/diagrams/er/erRenderer.js

@@ -43,6 +43,7 @@ const drawEntities = function(svgNode, entities, graph) {
     const textId = 'entity-' + id;
     const textNode = groupNode
       .append('text')
+      .attr('class', 'er entityLabel')
       .attr('id', textId)
       .attr('x', 0)
       .attr('y', 0)
@@ -65,6 +66,7 @@ const drawEntities = function(svgNode, entities, graph) {
     // Draw the rectangle - insert it before the text so that the text is not obscured
     const rectNode = groupNode
       .insert('rect', '#' + textId)
+      .attr('class', 'er entityBox')
       .attr('fill', conf.fill)
       .attr('fill-opacity', '100%')
       .attr('stroke', conf.stroke)
@@ -148,6 +150,7 @@ const drawRelationshipFromLayout = function(svg, rel, g, insert) {
   // Insert the line at the right place
   const svgPath = svg
     .insert('path', '#' + insert)
+    .attr('class', 'er relationshipLine')
     .attr('d', lineFunction(edge.points))
     .attr('stroke', conf.stroke)
     .attr('fill', 'none');
@@ -224,6 +227,7 @@ const drawRelationshipFromLayout = function(svg, rel, g, insert) {
 
   const labelNode = svg
     .append('text')
+    .attr('class', 'er relationshipLabel')
     .attr('id', labelId)
     .attr('x', labelPoint.x)
     .attr('y', labelPoint.y)
@@ -241,6 +245,7 @@ const drawRelationshipFromLayout = function(svg, rel, g, insert) {
   // Insert the opaque rectangle before the text label
   svg
     .insert('rect', '#' + labelId)
+    .attr('class', 'er relationshipLabelBox')
     .attr('x', labelPoint.x - labelBBox.width / 2)
     .attr('y', labelPoint.y - labelBBox.height / 2)
     .attr('width', labelBBox.width)
@@ -339,9 +344,14 @@ export const draw = function(text, id) {
   const width = svgBounds.width + padding * 2;
   const height = svgBounds.height + padding * 2;
 
-  svg.attr('height', height);
-  svg.attr('width', '100%');
-  svg.attr('style', `max-width: ${width}px;`);
+  if (conf.useMaxWidth) {
+    svg.attr('width', '100%');
+    svg.attr('style', `max-width: ${width}px;`);
+  } else {
+    svg.attr('height', height);
+    svg.attr('width', width);
+  }
+
   svg.attr('viewBox', `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`);
 }; // draw
 

src/diagrams/er/styles.js

@@ -0,0 +1,5 @@
+const getStyles = () =>
+  `
+`;
+
+export default getStyles;

src/diagrams/flowchart/flowRenderer-v2.js

@@ -381,7 +381,7 @@ export const draw = function(text, id) {
     return flowDb.getTooltip(this.id);
   });
 
-  const padding = 8;
+  const padding = conf.diagramPadding;
   const svgBounds = svg.node().getBBox();
   const width = svgBounds.width + padding * 2;
   const height = svgBounds.height + padding * 2;

src/diagrams/flowchart/flowRenderer.js

@@ -394,7 +394,7 @@ export const draw = function(text, id) {
     return flowDb.getTooltip(this.id);
   });
 
-  const padding = 8;
+  const padding = conf.diagramPadding;
   const svgBounds = svg.node().getBBox();
   const width = svgBounds.width + padding * 2;
   const height = svgBounds.height + padding * 2;

src/diagrams/flowchart/styles.js

@@ -0,0 +1,75 @@
+const getStyles = options =>
+  `.label {
+    font-family: ${options.fontFamily};
+    color: #333;
+  }
+
+  .label text {
+    fill: #333;
+  }
+
+  .node rect,
+  .node circle,
+  .node ellipse,
+  .node polygon,
+  .node path {
+    fill: ${options.mainBkg};
+    stroke: ${options.nodeBorder};
+    stroke-width: 1px;
+  }
+
+  .node .label {
+    text-align: center;
+  }
+  .node.clickable {
+    cursor: pointer;
+  }
+
+  .arrowheadPath {
+    fill: ${options.arrowheadColor};
+  }
+
+  .edgePath .path {
+    stroke: ${options.lineColor};
+    stroke-width: 1.5px;
+  }
+
+  .flowchart-link {
+    stroke: ${options.lineColor};
+    fill: none;
+  }
+
+  .edgeLabel {
+    background-color: ${options.edgeLabelBackground};
+    rect {
+      opacity: 0.5;
+    }
+    text-align: center;
+  }
+
+  .cluster rect {
+    fill: ${options.secondBkg};
+    stroke: ${options.clusterBorder};
+    stroke-width: 1px;
+  }
+
+  .cluster text {
+    fill: ${options.titleColor};
+  }
+
+  div.mermaidTooltip {
+    position: absolute;
+    text-align: center;
+    max-width: 200px;
+    padding: 2px;
+    font-family: ${options.fontFamily};
+    font-size: 12px;
+    background: ${options.secondBkg};
+    border: 1px solid ${options.border2};
+    border-radius: 2px;
+    pointer-events: none;
+    z-index: 100;
+  }
+`;
+
+export default getStyles;

src/diagrams/gantt/styles.js

@@ -0,0 +1,261 @@
+const getStyles = options =>
+  `
+  .mermaid-main-font {
+    font-family: "trebuchet ms", verdana, arial;
+    font-family: var(--mermaid-font-family);
+  }
+
+  .section {
+    stroke: none;
+    opacity: 0.2;
+  }
+
+  .section0 {
+    fill: ${options.sectionBkgColor};
+  }
+
+  .section2 {
+    fill: ${options.sectionBkgColor2};
+  }
+
+  .section1,
+  .section3 {
+    fill: ${options.altSectionBkgColor};
+    opacity: 0.2;
+  }
+
+  .sectionTitle0 {
+    fill: ${options.titleColor};
+  }
+
+  .sectionTitle1 {
+    fill: ${options.titleColor};
+  }
+
+  .sectionTitle2 {
+    fill: ${options.titleColor};
+  }
+
+  .sectionTitle3 {
+    fill: ${options.titleColor};
+  }
+
+  .sectionTitle {
+    text-anchor: start;
+    font-size: 11px;
+    text-height: 14px;
+    font-family: 'trebuchet ms', verdana, arial;
+    font-family: var(--mermaid-font-family);
+
+  }
+
+
+  /* Grid and axis */
+
+  .grid .tick {
+    stroke: ${options.gridColor};
+    opacity: 0.8;
+    shape-rendering: crispEdges;
+    text {
+      font-family: 'trebuchet ms', verdana, arial;
+      font-family: var(--mermaid-font-family);
+    }
+  }
+
+  .grid path {
+    stroke-width: 0;
+  }
+
+
+  /* Today line */
+
+  .today {
+    fill: none;
+    stroke: ${options.todayLineColor};
+    stroke-width: 2px;
+  }
+
+
+  /* Task styling */
+
+  /* Default task */
+
+  .task {
+    stroke-width: 2;
+  }
+
+  .taskText {
+    text-anchor: middle;
+    font-family: 'trebuchet ms', verdana, arial;
+    font-family: var(--mermaid-font-family);
+  }
+
+  .taskText:not([font-size]) {
+    font-size: 11px;
+  }
+
+  .taskTextOutsideRight {
+    fill: ${options.taskTextDarkColor};
+    text-anchor: start;
+    font-size: 11px;
+    font-family: 'trebuchet ms', verdana, arial;
+    font-family: var(--mermaid-font-family);
+
+  }
+
+  .taskTextOutsideLeft {
+    fill: ${options.taskTextDarkColor};
+    text-anchor: end;
+    font-size: 11px;
+  }
+
+  /* Special case clickable */
+  .task.clickable {
+    cursor: pointer;
+  }
+  .taskText.clickable {
+    cursor: pointer;
+    fill: ${options.taskTextClickableColor} !important;
+    font-weight: bold;
+  }
+
+  .taskTextOutsideLeft.clickable {
+    cursor: pointer;
+    fill: ${options.taskTextClickableColor} !important;
+    font-weight: bold;
+  }
+
+  .taskTextOutsideRight.clickable {
+    cursor: pointer;
+    fill: ${options.taskTextClickableColor} !important;
+    font-weight: bold;
+  }
+
+  /* Specific task settings for the sections*/
+
+  .taskText0,
+  .taskText1,
+  .taskText2,
+  .taskText3 {
+    fill: ${options.taskTextColor};
+  }
+
+  .task0,
+  .task1,
+  .task2,
+  .task3 {
+    fill: ${options.taskBkgColor};
+    stroke: ${options.taskBorderColor};
+  }
+
+  .taskTextOutside0,
+  .taskTextOutside2
+  {
+    fill: ${options.taskTextOutsideColor};
+  }
+
+  .taskTextOutside1,
+  .taskTextOutside3 {
+    fill: ${options.taskTextOutsideColor};
+  }
+
+
+  /* Active task */
+
+  .active0,
+  .active1,
+  .active2,
+  .active3 {
+    fill: ${options.activeTaskBkgColor};
+    stroke: ${options.activeTaskBorderColor};
+  }
+
+  .activeText0,
+  .activeText1,
+  .activeText2,
+  .activeText3 {
+    fill: ${options.taskTextDarkColor} !important;
+  }
+
+
+  /* Completed task */
+
+  .done0,
+  .done1,
+  .done2,
+  .done3 {
+    stroke: ${options.doneTaskBorderColor};
+    fill: ${options.doneTaskBkgColor};
+    stroke-width: 2;
+  }
+
+  .doneText0,
+  .doneText1,
+  .doneText2,
+  .doneText3 {
+    fill: ${options.taskTextDarkColor} !important;
+  }
+
+
+  /* Tasks on the critical line */
+
+  .crit0,
+  .crit1,
+  .crit2,
+  .crit3 {
+    stroke: ${options.critBorderColor};
+    fill: ${options.critBkgColor};
+    stroke-width: 2;
+  }
+
+  .activeCrit0,
+  .activeCrit1,
+  .activeCrit2,
+  .activeCrit3 {
+    stroke: ${options.critBorderColor};
+    fill: ${options.activeTaskBkgColor};
+    stroke-width: 2;
+  }
+
+  .doneCrit0,
+  .doneCrit1,
+  .doneCrit2,
+  .doneCrit3 {
+    stroke: ${options.critBorderColor};
+    fill: ${options.doneTaskBkgColor};
+    stroke-width: 2;
+    cursor: pointer;
+    shape-rendering: crispEdges;
+  }
+
+  .milestone {
+    transform: rotate(45deg) scale(0.8,0.8);
+  }
+
+  .milestoneText {
+    font-style: italic;
+  }
+  .doneCritText0,
+  .doneCritText1,
+  .doneCritText2,
+  .doneCritText3 {
+    fill: ${options.taskTextDarkColor} !important;
+  }
+
+  .activeCritText0,
+  .activeCritText1,
+  .activeCritText2,
+  .activeCritText3 {
+    fill: ${options.taskTextDarkColor} !important;
+  }
+
+  .titleText {
+    text-anchor: middle;
+    font-size: 18px;
+    fill: ${options.taskTextDarkColor}    ;
+    font-family: 'trebuchet ms', verdana, arial;
+    font-family: var(--mermaid-font-family);
+  }
+`;
+
+export default getStyles;

src/diagrams/git/gitGraphAst.js

@@ -1,5 +1,5 @@
 import { logger } from '../../logger';
-
+import { random } from '../../utils';
 let commits = {};
 let head = null;
 let branches = { master: head };
@@ -7,18 +7,8 @@ let curBranch = 'master';
 let direction = 'LR';
 let seq = 0;
 
-function makeid(length) {
-  var result = '';
-  var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-  var charactersLength = characters.length;
-  for (var i = 0; i < length; i++) {
-    result += characters.charAt(Math.floor(Math.random() * charactersLength));
-  }
-  return result;
-}
-
 function getId() {
-  return makeid(7);
+  return random({ length: 7 });
 }
 
 function isfastforwardable(currentCommit, otherCommit) {

src/diagrams/git/styles.js

@@ -0,0 +1,13 @@
+const getStyles = () =>
+  `
+  .commit-id,
+  .commit-msg,
+  .branch-label {
+    fill: lightgrey;
+    color: lightgrey;
+    font-family: 'trebuchet ms', verdana, arial;
+    font-family: var(--mermaid-font-family);
+  }
+`;
+
+export default getStyles;

src/diagrams/info/styles.js

@@ -0,0 +1,3 @@
+const getStyles = () => ``;
+
+export default getStyles;

src/diagrams/pie/styles.js

@@ -0,0 +1,17 @@
+const getStyles = options =>
+  `.pieTitleText {
+    text-anchor: middle;
+    font-size: 25px;
+    fill: ${options.taskTextDarkColor};
+    font-family: ${options.fontFamily};
+  }
+  .slice {
+    font-family: ${options.fontFamily};
+  }
+  .legend text {
+    font-family: ${options.fontFamily};
+    font-size: 17px;
+  }
+`;
+
+export default getStyles;

src/diagrams/sequence/styles.js

@@ -0,0 +1,100 @@
+const getStyles = options =>
+  `.actor {
+    stroke: ${options.actorBorder};
+    fill: ${options.actorBkg};
+  }
+
+  text.actor > tspan {
+    fill: ${options.actorTextColor};
+    stroke: none;
+  }
+
+  .actor-line {
+    stroke: ${options.actorLineColor};
+  }
+
+  .messageLine0 {
+    stroke-width: 1.5;
+    stroke-dasharray: none;
+    stroke: ${options.signalColor};
+  }
+
+  .messageLine1 {
+    stroke-width: 1.5;
+    stroke-dasharray: 2, 2;
+    stroke: ${options.signalColor};
+  }
+
+  #arrowhead path {
+    fill: ${options.signalColor};
+    stroke: ${options.signalColor};
+  }
+
+  .sequenceNumber {
+    fill: ${options.sequenceNumberColor};
+  }
+
+  #sequencenumber {
+    fill: ${options.signalColor};
+  }
+
+  #crosshead path {
+    fill: ${options.signalColor};
+    stroke: ${options.signalColor};
+  }
+
+  .messageText {
+    fill: ${options.signalTextColor};
+    stroke: ${options.signalTextColor};
+  }
+
+  .labelBox {
+    stroke: ${options.labelBoxBorderColor};
+    fill: ${options.labelBoxBkgColor};
+  }
+
+  .labelText, .labelText > tspan {
+    fill: ${options.labelTextColor};
+    stroke: none;
+  }
+
+  .loopText, .loopText > tspan {
+    fill: ${options.loopTextColor};
+    stroke: none;
+  }
+
+  .loopLine {
+    stroke-width: 2px;
+    stroke-dasharray: 2, 2;
+    stroke: ${options.labelBoxBorderColor};
+    fill: ${options.labelBoxBorderColor};
+  }
+
+  .note {
+    //stroke: #decc93;
+    stroke: ${options.noteBorderColor};
+    fill: ${options.noteBkgColor};
+  }
+
+  .noteText, .noteText > tspan {
+    fill: ${options.noteTextColor};
+    stroke: none;
+  }
+
+  .activation0 {
+    fill: ${options.activationBkgColor};
+    stroke: ${options.activationBorderColor};
+  }
+
+  .activation1 {
+    fill: ${options.activationBkgColor};
+    stroke: ${options.activationBorderColor};
+  }
+
+  .activation2 {
+    fill: ${options.activationBkgColor};
+    stroke: ${options.activationBorderColor};
+  }
+`;
+
+export default getStyles;

src/diagrams/state/styles.js

@@ -0,0 +1,148 @@
+const getStyles = options =>
+  `g.stateGroup text {
+  fill: ${options.nodeBorder};
+  stroke: none;
+  font-size: 10px;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-family: var(--mermaid-font-family);
+}
+g.stateGroup text {
+  fill: ${options.nodeBorder};
+  stroke: none;
+  font-size: 10px;
+
+}
+g.stateGroup .state-title {
+  font-weight: bolder;
+  fill: ${options.labelColor};
+}
+
+g.stateGroup rect {
+  fill: ${options.nodeBkg};
+  stroke: ${options.nodeBorder};
+}
+
+g.stateGroup line {
+  stroke: ${options.nodeBorder};
+  stroke-width: 1;
+}
+
+.transition {
+  stroke: ${options.nodeBorder};
+  stroke-width: 1;
+  fill: none;
+}
+
+.stateGroup .composit {
+  fill: white;
+  border-bottom: 1px
+}
+
+.stateGroup .alt-composit {
+  fill: #e0e0e0;
+  border-bottom: 1px
+}
+
+.state-note {
+  stroke: ${options.noteBorderColor};
+  fill: ${options.noteBkgColor};
+
+  text {
+    fill: black;
+    stroke: none;
+    font-size: 10px;
+  }
+}
+
+.stateLabel .box {
+  stroke: none;
+  stroke-width: 0;
+  fill: ${options.nodeBkg};
+  opacity: 0.5;
+}
+
+.stateLabel text {
+  fill: ${options.labelColor};
+  font-size: 10px;
+  font-weight: bold;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-family: var(--mermaid-font-family);
+}
+
+.node circle.state-start {
+  fill: black;
+  stroke: black;
+}
+.node circle.state-end {
+  fill: black;
+  stroke: white;
+  stroke-width: 1.5
+}
+
+.node rect {
+  fill: ${options.mainBkg};
+  stroke: ${options.nodeBorder};
+  stroke-width: 1px;
+}
+#statediagram-barbEnd {
+  fill: ${options.nodeBorder};
+}
+
+.statediagram-cluster rect {
+  fill: ${options.nodeBkg};
+  stroke: ${options.nodeBorder};
+  stroke-width: 1px;
+}
+.statediagram-cluster rect.outer {
+  rx: 5px;
+  ry: 5px;
+}
+.statediagram-state .divider {
+  stroke: ${options.nodeBorder};
+}
+
+.statediagram-state .title-state {
+  rx: 5px;
+  ry: 5px;
+}
+.statediagram-cluster.statediagram-cluster .inner {
+  fill: white;
+}
+.statediagram-cluster.statediagram-cluster-alt .inner {
+  fill: #e0e0e0;
+}
+
+.statediagram-cluster .inner {
+  rx:0;
+  ry:0;
+}
+
+.statediagram-state rect.basic {
+  rx: 5px;
+  ry: 5px;
+}
+.statediagram-state rect.divider {
+  stroke-dasharray: 10,10;
+  fill: #efefef;
+}
+
+.note-edge {
+  stroke-dasharray: 5;
+}
+
+.statediagram-note rect {
+  fill: ${options.noteBkgColor};
+  stroke: ${options.noteBorderColor};
+  stroke-width: 1px;
+  rx: 0;
+  ry: 0;
+}
+
+#dependencyStart, #dependencyEnd {
+  fill: ${options.nodeBorder};
+  stroke: ${options.nodeBorder};
+  stroke-width: 1;
+}
+`;
+
+export default getStyles;

src/diagrams/user-journey/styles.js

@@ -0,0 +1,77 @@
+const getStyles = options =>
+  `.label {
+    font-family: 'trebuchet ms', verdana, arial;
+    font-family: var(--mermaid-font-family);
+    color: #333;
+  }
+
+  .label text {
+    fill: #333;
+  }
+
+  .node rect,
+  .node circle,
+  .node ellipse,
+  .node polygon,
+  .node path {
+    fill: ${options.mainBkg};
+    stroke: ${options.nodeBorder};
+    stroke-width: 1px;
+  }
+
+  .node .label {
+    text-align: center;
+  }
+  .node.clickable {
+    cursor: pointer;
+  }
+
+  .arrowheadPath {
+    fill: ${options.arrowheadColor};
+  }
+
+  .edgePath .path {
+    stroke: ${options.lineColor};
+    stroke-width: 1.5px;
+  }
+
+  .flowchart-link {
+    stroke: ${options.lineColor};
+    fill: none;
+  }
+
+  .edgeLabel {
+    background-color: ${options.edgeLabelBackground};
+    rect {
+      opacity: 0.5;
+    }
+    text-align: center;
+  }
+
+  .cluster rect {
+    fill: ${options.secondBkg};
+    stroke: ${options.clusterBorder};
+    stroke-width: 1px;
+  }
+
+  .cluster text {
+    fill: ${options.titleColor};
+  }
+
+  div.mermaidTooltip {
+    position: absolute;
+    text-align: center;
+    max-width: 200px;
+    padding: 2px;
+    font-family: 'trebuchet ms', verdana, arial;
+    font-family: var(--mermaid-font-family);
+    font-size: 12px;
+    background: ${options.secondBkg};
+    border: 1px solid ${options.border2};
+    border-radius: 2px;
+    pointer-events: none;
+    z-index: 100;
+  }
+`;
+
+export default getStyles;

src/mermaid.js

@@ -139,6 +139,7 @@ const initialize = function(config) {
     }
   }
   mermaidAPI.initialize(config);
+  // mermaidAPI.reset();
 };
 
 /**

src/mermaidAPI.js

@@ -1,7 +1,7 @@
 /**
  * This is the api to be used when optionally handling the integration with the web page, instead of using the default integration provided by mermaid.js.
  *
- * The core of this api is the [**render**](https://github.com/knsv/mermaid/blob/master/docs/mermaidAPI.md#render) function which, given a graph
+ * The core of this api is the [**render**](Setup.md?id=render) function which, given a graph
  * definition as text, renders the graph/diagram and returns an svg element for the graph.
  *
  * It is is then up to the user of the API to make use of the svg, either insert it somewhere in the page or do something completely different.
@@ -10,8 +10,8 @@
  *
  * @name mermaidAPI
  */
+import Stylis from 'stylis';
 import { select } from 'd3';
-import scope from 'scope-css';
 import pkg from '../package.json';
 import { setConfig, getConfig, setSiteConfig, getSiteConfig } from './config';
 import { logger, setLogLevel } from './logger';
@@ -50,11 +50,11 @@ 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 getStyles from './styles';
 const themes = {};
 
 for (const themeName of ['default', 'forest', 'dark', 'neutral']) {
-  themes[themeName] = require(`./themes/${themeName}/index.scss`);
+  themes[themeName] = require(`./theme-${themeName}.js`);
 }
 
 function parse(text) {
@@ -251,51 +251,52 @@ const render = function(id, _txt, cb, container) {
   const svg = element.firstChild;
   const firstChild = svg.firstChild;
 
-  // pre-defined theme
-  let style = themes[cnf.theme];
-  if (style === undefined) {
-    style = '';
-  }
-
+  let userStyles = '';
   // user provided theme CSS
   if (cnf.themeCSS !== undefined) {
-    style += `\n${cnf.themeCSS}`;
+    userStyles += `\n${cnf.themeCSS}`;
   }
   // user provided theme CSS
   if (cnf.fontFamily !== undefined) {
-    style += `\n:root { --mermaid-font-family: ${cnf.fontFamily}}`;
+    userStyles += `\n:root { --mermaid-font-family: ${cnf.fontFamily}}`;
   }
   // user provided theme CSS
   if (cnf.altFontFamily !== undefined) {
-    style += `\n:root { --mermaid-alt-font-family: ${cnf.altFontFamily}}`;
+    userStyles += `\n:root { --mermaid-alt-font-family: ${cnf.altFontFamily}}`;
   }
 
   // classDef
-  if (graphType === 'flowchart' || graphType === 'flowchart-v2') {
+  if (graphType === 'flowchart' || graphType === 'flowchart-v2' || graphType === 'graph') {
     const classes = flowRenderer.getClasses(txt);
     for (const className in classes) {
-      style += `\n.${className} > * { ${classes[className].styles.join(
+      userStyles += `\n.${className} > * { ${classes[className].styles.join(
         ' !important; '
       )} !important; }`;
       if (classes[className].textStyles) {
-        style += `\n.${className} tspan { ${classes[className].textStyles.join(
+        userStyles += `\n.${className} tspan { ${classes[className].textStyles.join(
           ' !important; '
         )} !important; }`;
       }
     }
   }
+  const stylis = new Stylis();
+  const rules = stylis(`#${id}`, getStyles(graphType, userStyles, cnf.themeVariables));
 
   const style1 = document.createElement('style');
-  style1.innerHTML = scope(style, `#${id}`);
+  style1.innerHTML = rules;
   svg.insertBefore(style1, firstChild);
 
-  const style2 = document.createElement('style');
-  const cs = window.getComputedStyle(svg);
-  style2.innerHTML = `#${id} {
-    color: ${cs.color};
-    font: ${cs.font};
-  }`;
-  svg.insertBefore(style2, firstChild);
+  // Verify that the generated svgs are ok before removing this
+
+  // const style2 = document.createElement('style');
+  // const cs = window.getComputedStyle(svg);
+  // style2.innerHTML = `#d${id} * {
+  //   color: ${cs.color};
+  //   // font: ${cs.font};
+  //   // font-family: Arial;
+  //   // font-size: 24px;
+  // }`;
+  // svg.insertBefore(style2, firstChild);
 
   try {
     switch (graphType) {
@@ -518,7 +519,12 @@ function updateRendererConfigs(conf) {
 }
 
 function reinitialize(options) {
-  console.log(`mermaidAPI.reinitialize: v${pkg.version}`, options);
+  console.warn(`mermaidAPI.reinitialize: v${pkg.version}`, options);
+  if (options.theme && themes[options.theme]) {
+    // Todo merge with user options
+    options.themeVariables = themes[options.theme];
+  }
+
   // Set default options
   const config = typeof options === 'object' ? setConfig(options) : getSiteConfig();
   updateRendererConfigs(config);
@@ -527,9 +533,18 @@ function reinitialize(options) {
 }
 
 function initialize(options) {
-  // console.log(`mermaidAPI.initialize: v${pkg.version}`);
+  console.log(`mermaidAPI.initialize: v${pkg.version} ${options}`);
   // Set default options
+
+  if (options && options.theme && themes[options.theme]) {
+    // Todo merge with user options
+    options.themeVariables = themes[options.theme];
+  } else {
+    if (options) options.themeVariables = themes.default;
+  }
+
   const config = typeof options === 'object' ? setSiteConfig(options) : getSiteConfig();
+
   updateRendererConfigs(config);
   setLogLevel(config.logLevel);
   logger.debug('mermaidAPI.initialize: ', config);
@@ -576,7 +591,19 @@ export default mermaidAPI;
  *     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',
  *     },

src/styles.js

@@ -0,0 +1,77 @@
+import classDiagram from './diagrams/class/styles';
+import er from './diagrams/flowchart/styles';
+import flowchart from './diagrams/flowchart/styles';
+import gantt from './diagrams/gantt/styles';
+import git from './diagrams/git/styles';
+import info from './diagrams/info/styles';
+import pie from './diagrams/pie/styles';
+import sequence from './diagrams/sequence/styles';
+import stateDiagram from './diagrams/state/styles';
+import journey from './diagrams/user-journey/styles';
+
+const themes = {
+  flowchart,
+  'flowchart-v2': flowchart,
+  sequence,
+  gantt,
+  class: classDiagram,
+  stateDiagram,
+  state: stateDiagram,
+  git,
+  info,
+  pie,
+  er,
+  journey
+};
+
+const getStyles = (type, userStyles, options) =>
+  ` {
+    font-family: ${options.fontFamily};
+    font-size: ${options.fontSize};
+  }
+
+  /* Classes common for multiple diagrams */
+
+  .error-icon {
+    fill: ${options.errorBkgColor};
+  }
+  .error-text {
+    fill: ${options.errorTextColor};
+    stroke: ${options.errorTextColor};
+  }
+
+  .edge-thickness-normal {
+    stroke-width: 2px;
+  }
+  .edge-thickness-thick {
+    stroke-width: 3.5px
+  }
+  .edge-pattern-solid {
+    stroke-dasharray: 0;
+  }
+
+  .edge-pattern-dashed{
+    stroke-dasharray: 3;
+  }
+  .edge-pattern-dotted {
+    stroke-dasharray: 2;
+  }
+
+  .marker {
+    fill: ${options.lineColor};
+  }
+  .marker.cross {
+    stroke: ${options.lineColor};
+  }
+
+  svg {
+    font-family: ${options.fontFamily};
+    font-size: ${options.fontSize};
+  }
+
+  ${themes[type](options)}
+
+  ${userStyles}
+`;
+
+export default getStyles;

src/theme-dark.js

@@ -0,0 +1,67 @@
+import { lighten, rgba } from 'khroma';
+
+export const mainBkg = '#1f2020';
+export const secondBkg = lighten('#1f2020', 16);
+export const mainContrastColor = 'lightgrey';
+export const darkTextColor = '#323D47';
+export const lineColor = mainContrastColor;
+export const border1 = '#81B1DB';
+export const border2 = rgba(255, 255, 255, 0.25);
+export const arrowheadColor = mainContrastColor;
+export const fontFamily = '"trebuchet ms", verdana, arial';
+export const fontSize = '16px';
+/* Flowchart variables */
+
+export const nodeBkg = mainBkg;
+export const nodeBorder = border1;
+export const clusterBkg = secondBkg;
+export const clusterBorder = border2;
+export const defaultLinkColor = lineColor;
+export const titleColor = '#F9FFFE';
+export const edgeLabelBackground = '#e8e8e8';
+
+/* Sequence Diagram variables */
+
+export const actorBorder = border1;
+export const actorBkg = mainBkg;
+export const actorTextColor = mainContrastColor;
+export const actorLineColor = mainContrastColor;
+export const signalColor = mainContrastColor;
+export const signalTextColor = mainContrastColor;
+export const labelBoxBkgColor = actorBkg;
+export const labelBoxBorderColor = actorBorder;
+export const labelTextColor = mainContrastColor;
+export const loopTextColor = mainContrastColor;
+export const noteBorderColor = border2;
+export const noteBkgColor = '#fff5ad';
+export const noteTextColor = mainBkg;
+export const activationBorderColor = border1;
+export const activationBkgColor = secondBkg;
+export const sequenceNumberColor = 'black';
+
+/* Gantt chart variables */
+
+export const sectionBkgColor = rgba(255, 255, 255, 0.3);
+export const altSectionBkgColor = 'white';
+export const sectionBkgColor2 = '#EAE8B9';
+export const taskBorderColor = rgba(255, 255, 255, 0.5);
+export const taskBkgColor = mainBkg;
+export const taskTextColor = darkTextColor;
+export const taskTextLightColor = mainContrastColor;
+export const taskTextOutsideColor = taskTextLightColor;
+export const taskTextClickableColor = '#003163';
+export const activeTaskBorderColor = rgba(255, 255, 255, 0.5);
+export const activeTaskBkgColor = '#81B1DB';
+export const gridColor = mainContrastColor;
+export const doneTaskBkgColor = mainContrastColor;
+export const doneTaskBorderColor = 'grey';
+export const critBorderColor = '#E83737';
+export const critBkgColor = '#E83737';
+export const taskTextDarkColor = darkTextColor;
+export const todayLineColor = '#DB5757';
+
+/* state colors */
+export const labelColor = 'black';
+
+export const errorBkgColor = '#a44141';
+export const errorTextColor = '#ddd';

src/theme-default.js

@@ -0,0 +1,64 @@
+export const mainBkg = '#ECECFF';
+export const secondBkg = '#ffffde';
+export const lineColor = '#333333';
+export const border1 = '#CCCCFF';
+export const border2 = '#aaaa33';
+export const arrowheadColor = '#333333';
+export const fontFamily = '"trebuchet ms", verdana, arial';
+export const fontSize = '16px';
+
+/* Flowchart variables */
+
+export const nodeBkg = mainBkg;
+export const nodeBorder = '#9370DB';
+export const clusterBkg = secondBkg;
+export const clusterBorder = border2;
+export const defaultLinkColor = lineColor;
+export const titleColor = '#333';
+export const edgeLabelBackground = '#e8e8e8';
+
+/* Sequence Diagram variables */
+
+export const actorBorder = border1;
+export const actorBkg = mainBkg;
+export const actorTextColor = 'black';
+export const actorLineColor = 'grey';
+export const signalColor = '#333';
+export const signalTextColor = '#333';
+export const labelBoxBkgColor = actorBkg;
+export const labelBoxBorderColor = actorBorder;
+export const labelTextColor = actorTextColor;
+export const loopTextColor = actorTextColor;
+export const noteBorderColor = border2;
+export const noteBkgColor = '#fff5ad';
+export const noteTextColor = actorTextColor;
+export const activationBorderColor = '#666';
+export const activationBkgColor = '#f4f4f4';
+export const sequenceNumberColor = 'white';
+
+/* Gantt chart variables */
+
+export const sectionBkgColor = 'rgba(102; 102; 255; 0.49)';
+export const altSectionBkgColor = 'white';
+export const sectionBkgColor2 = '#fff400';
+export const taskBorderColor = '#534fbc';
+export const taskBkgColor = '#8a90dd';
+export const taskTextLightColor = 'white';
+export const taskTextColor = taskTextLightColor;
+export const taskTextDarkColor = 'black';
+export const taskTextOutsideColor = taskTextDarkColor;
+export const taskTextClickableColor = '#003163';
+export const activeTaskBorderColor = '#534fbc';
+export const activeTaskBkgColor = '#bfc7ff';
+export const gridColor = 'lightgrey';
+export const doneTaskBkgColor = 'lightgrey';
+export const doneTaskBorderColor = 'grey';
+export const critBorderColor = '#ff8888';
+export const critBkgColor = 'red';
+export const todayLineColor = 'red';
+
+/* state colors */
+export const labelColor = 'black';
+
+export const errorBkgColor = '#552222';
+export const errorTextColor = '#552222';

src/theme-forest.js

@@ -0,0 +1,64 @@
+export const mainBkg = '#cde498';
+export const secondBkg = '#cdffb2';
+export const lineColor = 'green';
+export const border1 = '#13540c';
+export const border2 = '#6eaa49';
+export const arrowheadColor = 'green';
+export const fontFamily = '"trebuchet ms", verdana, arial';
+export const fontSize = '16px';
+
+/* Flowchart variables */
+
+export const nodeBkg = mainBkg;
+export const nodeBorder = border1;
+export const clusterBkg = secondBkg;
+export const clusterBorder = border2;
+export const defaultLinkColor = lineColor;
+export const titleColor = '#333';
+export const edgeLabelBackground = '#e8e8e8';
+
+/* Sequence Diagram variables */
+
+export const actorBorder = border1;
+export const actorBkg = mainBkg;
+export const actorTextColor = 'black';
+export const actorLineColor = 'grey';
+export const signalColor = '#333';
+export const signalTextColor = '#333';
+export const labelBoxBkgColor = actorBkg;
+export const labelBoxBorderColor = '#326932';
+export const labelTextColor = actorTextColor;
+export const loopTextColor = actorTextColor;
+export const noteBorderColor = border2;
+export const noteBkgColor = '#fff5ad';
+export const noteTextColor = actorTextColor;
+export const activationBorderColor = '#666';
+export const activationBkgColor = '#f4f4f4';
+export const sequenceNumberColor = 'white';
+
+/* Gantt chart variables */
+
+export const sectionBkgColor = '#6eaa49';
+export const altSectionBkgColor = 'white';
+export const sectionBkgColor2 = '#6eaa49';
+export const taskBorderColor = border1;
+export const taskBkgColor = '#487e3a';
+export const taskTextLightColor = 'white';
+export const taskTextColor = taskTextLightColor;
+export const taskTextDarkColor = 'black';
+export const taskTextOutsideColor = taskTextDarkColor;
+export const taskTextClickableColor = '#003163';
+export const activeTaskBorderColor = taskBorderColor;
+export const activeTaskBkgColor = mainBkg;
+export const gridColor = 'lightgrey';
+export const doneTaskBkgColor = 'lightgrey';
+export const doneTaskBorderColor = 'grey';
+export const critBorderColor = '#ff8888';
+export const critBkgColor = 'red';
+export const todayLineColor = 'red';
+
+/* state colors */
+export const labelColor = 'black';
+
+export const errorBkgColor = '#552222';
+export const errorTextColor = '#552222';

src/theme-neutral.js

@@ -0,0 +1,71 @@
+import { darken, lighten } from 'khroma';
+
+export const mainBkg = '#eee';
+export const contrast = '#26a';
+export const secondBkg = lighten(contrast, 55);
+export const lineColor = '#666';
+export const border1 = '#999';
+export const border2 = contrast;
+export const note = '#ffa';
+export const text = '#333';
+export const critical = '#d42';
+export const done = '#bbb';
+export const arrowheadColor = '#333333';
+export const fontFamily = '"trebuchet ms", verdana, arial';
+export const fontSize = '16px';
+
+/* Flowchart variables */
+
+export const nodeBkg = mainBkg;
+export const nodeBorder = border1;
+export const clusterBkg = secondBkg;
+export const clusterBorder = border2;
+export const defaultLinkColor = lineColor;
+export const titleColor = text;
+export const edgeLabelBackground = 'white';
+
+/* Sequence Diagram variables */
+
+export const actorBorder = border1;
+export const actorBkg = mainBkg;
+export const actorTextColor = text;
+export const actorLineColor = lineColor;
+export const signalColor = text;
+export const signalTextColor = text;
+export const labelBoxBkgColor = actorBkg;
+export const labelBoxBorderColor = actorBorder;
+export const labelTextColor = text;
+export const loopTextColor = text;
+export const noteBorderColor = darken(note, 60);
+export const noteBkgColor = note;
+export const noteTextColor = actorTextColor;
+export const activationBorderColor = '#666';
+export const activationBkgColor = '#f4f4f4';
+export const sequenceNumberColor = 'white';
+
+/* Gantt chart variables */
+
+export const sectionBkgColor = lighten(contrast, 30);
+export const altSectionBkgColor = 'white';
+export const sectionBkgColor2 = lighten(contrast, 30);
+export const taskBorderColor = darken(contrast, 10);
+export const taskBkgColor = contrast;
+export const taskTextLightColor = 'white';
+export const taskTextColor = taskTextLightColor;
+export const taskTextDarkColor = text;
+export const taskTextOutsideColor = taskTextDarkColor;
+export const taskTextClickableColor = '#003163';
+export const activeTaskBorderColor = taskBorderColor;
+export const activeTaskBkgColor = mainBkg;
+export const gridColor = lighten(border1, 30);
+export const doneTaskBkgColor = done;
+export const doneTaskBorderColor = lineColor;
+export const critBkgColor = critical;
+export const critBorderColor = darken(critBkgColor, 10);
+export const todayLineColor = critBkgColor;
+
+/* state colors */
+export const labelColor = 'black';
+
+export const errorBkgColor = '#552222';
+export const errorTextColor = '#552222';

src/themes/mermaid.scss

@@ -1,4 +1,4 @@
-@import 'flowchart';
+// @import 'flowchart';
 @import 'sequence';
 @import 'gantt';
 @import 'class';
@@ -13,8 +13,9 @@
 
 :root {
   --mermaid-font-family: '"trebuchet ms", verdana, arial';
-  --mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive;
-  // --mermaid-alt-font-family: '"Lucida Console", Monaco, monospace';
+  font-family: '"trebuchet ms", verdana, arial';
+  font-family: var(--mermaid-font-family);
+  font-size: 16px;
 }
 
 /* Classes common for multiple diagrams */
@@ -52,3 +53,8 @@
 .marker.cross {
   stroke: $lineColor;
 }
+
+svg {
+  font-family: var(--mermaid-font-family);
+  font-size: 24px;
+}

src/themes/pie.scss

@@ -9,3 +9,8 @@
   font-family: 'trebuchet ms', verdana, arial;
   font-family: var(--mermaid-font-family);
 }
+.legend text {
+  font-family: 'trebuchet ms', verdana, arial;
+  font-family: var(--mermaid-font-family);
+  font-size: 17px;
+}

src/utils.js

@@ -15,7 +15,7 @@ import {
 import { logger } from './logger';
 import { sanitizeUrl } from '@braintree/sanitize-url';
 import common from './diagrams/common/common';
-import cryptoRandomString from 'crypto-random-string';
+// import cryptoRandomString from 'crypto-random-string';
 
 // Effectively an enum of the supported curve types, accessible by name
 const d3CurveTypes = {
@@ -408,8 +408,18 @@ export const generateId = () => {
   );
 };
 
+function makeid(length) {
+  var result = '';
+  var characters = '0123456789abcdef';
+  var charactersLength = characters.length;
+  for (var i = 0; i < length; i++) {
+    result += characters.charAt(Math.floor(Math.random() * charactersLength));
+  }
+  return result;
+}
+
 export const random = options => {
-  return cryptoRandomString(options);
+  return makeid(options.length);
 };
 
 /**

yarn.lock

@@ -3188,13 +3188,6 @@ crypto-browserify@^3.11.0:
     randombytes "^2.0.0"
     randomfill "^1.0.3"
 
-crypto-random-string@^3.0.1:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-3.1.0.tgz#0368382de82e914179ad2ca9c7a788e260184bae"
-  integrity sha512-Tip3yGB+bA7B0W8E4K4mNf2rZhu5r2G5Tb89/utEl5tP1QuLjTF/S9a1b8ifDrR4ORc9Utf6tscpSEtBY3YcPQ==
-  dependencies:
-    type-fest "^0.8.1"
-
 css-b64-images@~0.2.5:
   version "0.2.5"
   resolved "https://registry.yarnpkg.com/css-b64-images/-/css-b64-images-0.2.5.tgz#42005d83204b2b4a5d93b6b1a5644133b5927a02"
@@ -4125,11 +4118,6 @@ escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
 
-escaper@^2.5.3:
-  version "2.5.3"
-  resolved "https://registry.yarnpkg.com/escaper/-/escaper-2.5.3.tgz#8b8fe90ba364054151ab7eff18b4ce43b1e13ab5"
-  integrity sha512-QGb9sFxBVpbzMggrKTX0ry1oiI4CSDAl9vIL702hzl1jGW8VZs7qfqTRX7WDOjoNDoEVGcEtu1ZOQgReSfT2kQ==
-
 escodegen@1.3.x:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.3.3.tgz#f024016f5a88e046fd12005055e939802e6c5f23"
@@ -6039,11 +6027,6 @@ is-regex@^1.0.4, is-regex@^1.0.5:
   dependencies:
     has "^1.0.3"
 
-is-regexp@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-regexp/-/is-regexp-1.0.0.tgz#fd2d883545c46bac5a633e7b9a09e87fa2cb5069"
-  integrity sha1-/S2INUXEa6xaYz57mgnof6LLUGk=
-
 is-relative@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-relative/-/is-relative-1.0.0.tgz#a1bb6935ce8c5dba1e8b9754b9b2dcc020e2260d"
@@ -6722,6 +6705,11 @@ jssha@^2.1.0:
   resolved "https://registry.yarnpkg.com/jssha/-/jssha-2.3.1.tgz#147b2125369035ca4b2f7d210dc539f009b3de9a"
   integrity sha1-FHshJTaQNcpLL30hDcU58Amz3po=
 
+khroma@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/khroma/-/khroma-1.1.0.tgz#cc17723eb719c5245ea66d23dd577d5695452db5"
+  integrity sha512-aTO+YX22tYOLEQJYFiatAj1lc5QZ+H5sHWFRBWNCiKwc5NWNUJZyeSeiHEPeURJ2a1GEVYcmyMUwGjjLe5ec5A==
+
 killable@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/killable/-/killable-1.0.1.tgz#4c8ce441187a061c7474fb87ca08e2a638194892"
@@ -9347,15 +9335,6 @@ schema-utils@^2.6.4:
     ajv "^6.10.2"
     ajv-keywords "^3.4.1"
 
-scope-css@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/scope-css/-/scope-css-1.2.1.tgz#c35768bc900cad030a3e0d663a818c0f6a57f40e"
-  integrity sha512-UjLRmyEYaDNiOS673xlVkZFlVCtckJR/dKgr434VMm7Lb+AOOqXKdAcY7PpGlJYErjXXJzKN7HWo4uRPiZZG0Q==
-  dependencies:
-    escaper "^2.5.3"
-    slugify "^1.3.1"
-    strip-css-comments "^3.0.0"
-
 scss-tokenizer@^0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"
@@ -9563,11 +9542,6 @@ slice-ansi@^2.1.0:
     astral-regex "^1.0.0"
     is-fullwidth-code-point "^2.0.0"
 
-slugify@^1.3.1:
-  version "1.3.6"
-  resolved "https://registry.yarnpkg.com/slugify/-/slugify-1.3.6.tgz#ba5fd6159b570fe4811d02ea9b1f4906677638c3"
-  integrity sha512-wA9XS475ZmGNlEnYYLPReSfuz/c3VQsEMoU43mi6OnKMCdbnFXd4/Yg7J0lBv8jkPolacMpOrWEaoYxuE1+hoQ==
-
 snapdragon-node@^2.0.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"
@@ -10019,13 +9993,6 @@ strip-bom@^3.0.0:
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
   integrity sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=
 
-strip-css-comments@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/strip-css-comments/-/strip-css-comments-3.0.0.tgz#7a5625eff8a2b226cf8947a11254da96e13dae89"
-  integrity sha1-elYl7/iisibPiUehElTaluE9rok=
-  dependencies:
-    is-regexp "^1.0.0"
-
 strip-eof@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf"
@@ -10053,6 +10020,11 @@ strip-json-comments@^3.0.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.0.1.tgz#85713975a91fb87bf1b305cca77395e40d2a64a7"
   integrity sha512-VTyMAUfdm047mwKl+u79WIdrZxtFtn+nBxHeb844XBQ9uMNTuTHdx2hc5RiAJYqwTj3wc/xe5HLSdJSkJ+WfZw==
 
+stylis@^3.5.2:
+  version "3.5.4"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe"
+  integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==
+
 subarg@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/subarg/-/subarg-1.0.0.tgz#f62cf17581e996b48fc965699f54c06ae268b8d2"