Merge pull request #24 from mermaid-js/develop

merge from mermaid-js:develop

.eslintrc.json

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

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

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

cypress/integration/rendering/flowchart.spec.js

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

cypress/platform/current.html

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

cypress/platform/showcase_base.html

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