Merge pull request #1484 from chrismoran-bkt/develop

PR 1482 redux
mermaid-js · Jun 19, 2020 · 280c89a · 280c89a
2 parents feb9ffa + 809ba2b
commit 280c89a
Show file tree

Hide file tree

Showing 26 changed files with 2,361 additions and 1,550 deletions.
diff --git a/README.md b/README.md
@@ -214,7 +214,7 @@ pie
 
 ## Related projects
 
-- [Command Line Interface](https://github.com/mermaid-js/mermaid-cli)
+- [Command Line Interface](https://github.com/mermaid-js/mermaid.cli)
 - [Live Editor](https://github.com/mermaid-js/mermaid-live-editor)
 - [HTTP Server](https://github.com/TomWright/mermaid-server)
 

diff --git a/cypress/integration/other/configuration.spec.js b/cypress/integration/other/configuration.spec.js
@@ -88,7 +88,7 @@ describe('Configuration', () => {
         C -->|Three| F[fa:fa-car Car]
         `,
         {
-          logLevel:0, arrowMarkerAbsolute: true,fontFamily: '"Noto Sans SC", sans-serif'
+          arrowMarkerAbsolute: true
         }
       );
 

diff --git a/cypress/integration/other/rerender.spec.js b/cypress/integration/other/rerender.spec.js
@@ -1,5 +1,11 @@
 /* eslint-env jest */
 describe('Rerendering', () => {
+    it('should be able to render after an error has occured', () => {
+      const url = 'http://localhost:9000/render-after-error.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('#graphDiv').should('exist');
+    });
 
     it('should be able to render and rerender a graph via API', () => {
       const url = 'http://localhost:9000/rerender.html';

diff --git a/cypress/platform/current.html b/cypress/platform/current.html
@@ -4,60 +4,75 @@
       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;
+        /* background:#333; */
         font-family: 'Arial';
         }
-      h1 { color: white;}
+      h1 { color: grey;}
       .mermaid2 {
         display: none;
       }
     </style>
   </head>
   <body>
     <h1>info below</h1>
+    <div class="flex">
+      <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
+      </div>
       <div class="mermaid" style="width: 50%; height: 20%;">
 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="mermaid2" style="width: 50%; height: 20%;">
 flowchart TB
-  subgraph 1
-    A --> B;
-    A -.-> C;
-    A ==> D;
-    A ==> E;
-    B <--> F
-    C <--> F
-    D <--> F
-    E <--> F
-  end
-  subgraph 2
-    A2 --x B2;
-    A2 -.-x C2;
-    A2 ==x D2;
-    A2 ==x E2;
-    B2 x--x F2
-    C2 x--x F2
-    D2 x--x F2
-    E2 x--x F2
-  end
-  subgraph 3
-    A3 --o B3;
-    A3 -.-o C3;
-    A3 ==o D3;
-    A3 ==o E3;
-    B3 o--o F3
-    C3 o--o F3
-    D3 o--o F3
-    E3 o--o F3
-  end
+    subgraph two
+    b1
+    end
+    subgraph three
+    c1-->c2
+    end
+    c1 --apa apa apa--> b1
+    b1 --> c2
+      </div>
+      <div class="mermaid" style="width: 50%; height: 20%;">
+
+      flowchart BT
+      subgraph a
+        b1 -- ok --> b2
+      end
+      a -- sert --> c
+      c --> d
+      b1 --> d
+      a --asd123 --> d
+      </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>
 
   <script src="./mermaid.js"></script>
@@ -66,18 +81,17 @@ <h1>info below</h1>
           // console.error('Mermaid error: ', err);
         };
       mermaid.initialize({
-        theme: 'dark',
+        // theme: 'dark',
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,
-        flowchart: { curve: 'linear',htmlLabels: false },
+        flowchart: { curve: 'linear', "htmlLabels": false },
         // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50, showSequenceNumbers: true },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         fontFamily: '"arial", sans-serif',
         curve: 'linear',
-        securityLevel: 'loose',
-        htmlLabels: false
+        securityLevel: 'loose'
       });
       function callback(){alert('It worked');}
     </script>

diff --git a/cypress/platform/e2e.html b/cypress/platform/e2e.html
@@ -6,12 +6,12 @@
     <style>
       body {
         /* font-family: 'Mansalva', cursive;*/
-        font-family: '"Noto Sans SC", sans-serif';
-      }
-      .mermaid-main-font {
-        font-family: '"Noto Sans SC", sans-serif';
-        /* font-family: var(--mermaid-font-family); */
+        font-family: 'Mansalva', cursive;
       }
+      /* .mermaid-main-font {
+        font-family: "trebuchet ms", verdana, arial;
+        font-family: var(--mermaid-font-family);
+      } */
       /* :root {
         --mermaid-font-family: '"trebuchet ms", verdana, arial';
         --mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive;
@@ -27,16 +27,15 @@
     <script>
       // Notice startOnLoad=false
       // This prevents default handling in mermaid from render before the e2e logic is applied
-      window.mermaidDefault = {
+      mermaid.initialize({
         startOnLoad: false,
         useMaxWidth: true,
         // "themeCSS": ":root { --mermaid-font-family: \"trebuchet ms\", verdana, arial;}",
         // fontFamily: '\"trebuchet ms\", verdana, arial;'
         // fontFamily: '"Comic Sans MS", "Comic Sans", cursive'
         // fontFamily: '"Mansalva", cursive',
         fontFamily: '"Noto Sans SC", sans-serif'
-      };
-      mermaid.initialize(window.mermaidDefault);
+      });
     </script>
   </body>
 </html>
diff --git a/cypress/platform/render-after-error.html b/cypress/platform/render-after-error.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <title>Mermaid Quick Test Page</title>
+        <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
+    </head>
+    <body>
+        <div id="graph">
+        </div>
+
+        <script src="./mermaid.js"></script>
+        <script>
+
+         mermaid.init({ startOnLoad: false });
+         mermaid.mermaidAPI.initialize();
+
+         try{
+             mermaid.mermaidAPI.render("graphDiv",
+                                       `>`);
+         } catch(e){}
+
+         mermaid.mermaidAPI.render("graphDiv",
+                                   `graph LR\n a --> b`, html => {
+                                      document.getElementById('graph').innerHTML=html;
+         });
+
+        </script>
+
+    </body>
+</html>
diff --git a/cypress/platform/viewer.js b/cypress/platform/viewer.js
@@ -30,11 +30,6 @@ const contentLoaded = function() {
       div.innerHTML = graphObj.code;
       document.getElementsByTagName('body')[0].appendChild(div);
     }
-
-    if (window.mermaidDefault.fontFamily) {
-      graphObj.mermaid.fontFamily = window.mermaidDefault.fontFamily;
-    }
-
     global.mermaid.initialize(graphObj.mermaid);
     global.mermaid.init();
   }

diff --git a/dist/mermaid.core.js b/dist/mermaid.core.js
diff --git a/dist/mermaid.core.js.map b/dist/mermaid.core.js.map
diff --git a/dist/mermaid.js b/dist/mermaid.js
diff --git a/dist/mermaid.js.map b/dist/mermaid.js.map
diff --git a/dist/mermaid.min.js b/dist/mermaid.min.js
diff --git a/dist/mermaid.min.js.map b/dist/mermaid.min.js.map
diff --git a/docs/index.html b/docs/index.html
@@ -34,7 +34,7 @@
     window.$docsify = {
       search: 'auto',
       name: 'mermaid',
-      repo: 'https://github.com/mermaid-js/mermaid',
+      repo: 'https://github.com/knsv/mermaid',
       loadSidebar: true,
       mergeNavbar: true,
       maxLevel: 4,
-Original file line number
+Diff line change
@@ Expand Up / @@ -88,7 +88,7 @@ describe('Configuration', () => { @@
             C -->|Three| F[fa:fa-car Car]
             `,
             {
-              logLevel:0, arrowMarkerAbsolute: true,fontFamily: '"Noto Sans SC", sans-serif'
+              arrowMarkerAbsolute: true
             }
           );
@@ Expand Down @@