Merge branch 'develop' into minmaps

cypress/helpers/util.js

@@ -42,8 +42,8 @@ export const imgSnapshotTest = (graphStr, _options, api = false, validation) =>
   if (!options.fontSize) {
     options.fontSize = '16px';
   }
-  // const useAppli = Cypress.env('useAppli');
-  const useAppli = false;
+  const useAppli = Cypress.env('useAppli');
+  //const useAppli = false;
   const branch = Cypress.env('codeBranch');
   cy.log('Hello ' + useAppli ? 'Appli' : 'image-snapshot');
   const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');

cypress/integration/rendering/erDiagram.spec.js

@@ -167,6 +167,21 @@ describe('Entity Relationship Diagram', () => {
     cy.get('svg');
   });
 
+  it.only('should render entities with generic and array attributes', () => {
+    renderGraph(
+      `
+    erDiagram
+        BOOK {
+          string title
+          string[] authors
+          type~T~ type
+        }
+      `,
+      { logLevel: 1 }
+    );
+    cy.get('svg');
+  });
+
   it('should render entities and attributes with big and small entity names', () => {
     renderGraph(
       `

cypress/integration/rendering/gantt.spec.js

@@ -163,6 +163,24 @@ describe('Gantt diagram', () => {
     );
   });
 
+  it('should handle milliseconds', () => {
+    imgSnapshotTest(
+      `
+    gantt
+      title A Gantt Diagram
+      dateFormat x
+      axisFormat %L
+      section Section
+      A task           :a1, 0, 30ms
+      Another task     :after a1, 20ms
+      section Another
+      Another another task      :b1, 20, 12ms
+      Another another another task     :after b1, 24ms
+        `,
+      {}
+    );
+  });
+
   it('should render a gantt diagram when useMaxWidth is true (default)', () => {
     renderGraph(
       `

cypress/platform/knsv.html

@@ -16,11 +16,16 @@
         /* font-size: 18px !important; */
         width: 100%;
         display: flex;
+        flex-direction: column;
+        margin-left: 20px;
         }
       h1 { color: grey;}
       .mermaid2,.mermaid3 {
         display: none;
       }
+      .mermaid {
+        border: 1px solid purple;
+      }
       .mermaid svg {
         /* font-size: 18px !important; */
         border: 1px solid red;
@@ -33,15 +38,37 @@
 
 
 <div class="mermaid2" style="width: 50%;">
-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: Mee
+flowchart LR
+  classDef aPID stroke:#4e4403,fill:#fdde29,color:#4e4403,rx:5px,ry:5px;
+  classDef crm stroke:#333333,fill:#DCDCDC,color:#333333,rx:5px,ry:5px;
+  classDef type stroke:#502604,fill:#FAB565,color:#502604,rx:20px,ry:20px;;
+
+  O0("Joe")
+  class O0 aPID;
+
+  O1("Person")
+  class O1 crm;
+  O0 -- has type -->O1["Person"]
+
+  O2("aat:300411314")
+  class O2 type;
+  click O2 function "Sorry the newline html tags are not being processed correctly<br/> So all of this appears on the <br/> same line."
+  O0 -- has type -->O2["Bug"]
+  click O0 function "Lots of great info about Joe<br>Lots of great info about Joe<br>burt<br>fred";
+</div>
+<div class="mermaid" style="width: 50%;">
+flowchart TD
+    subgraph test
+    direction TB
+    subgraph test2
+      direction LR
+      F --> D
+    end
+    subgraph test3
+      direction TB
+      G --> H
+    end
+    end
 </div>
 <div class="mermaid2" style="width: 50%;">
 mindmap
@@ -138,11 +165,10 @@ mindmap
       accTitle: My Pie Chart Accessibility Title
       accDescr: My Pie Chart Accessibility Description
 
-    title Key elements in Product X
-    "Calcium" : 42.96
-    "Potassium" : 50.05
-    "Magnesium" : 10.01
-    "Iron" :  5
+    A --> B
+    A --> C
+    B --> C
+
 </div>
 <div class="mermaid2" style="width: 50%;">
  gitGraph TB
@@ -394,35 +420,9 @@ flowchart TD
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         flowchart: {
-    nodeSpacing: 10,
-    curve: 'cardinal',
-    htmlLabels: true,
-    useMaxWidth: false,
-    // defaultRenderer: 'dagre-d3',
-  },
-  class: {
-    // defaultRenderer: 'dagre-d3',
-    htmlLabels: true,
-  },
-  sequence: {
-    // mirrorActors: false,'
-    wrap: false,
-  },
-        // gantt: { axisFormat: '%m/%d/%Y' },
-  //       sequence: {
-  //   actorFontFamily: 'courier',
-  //   actorMargin: 50,
-  //   showSequenceNumbers: false,
-  //   // hideUnusedParticipants: true,
-  //   // forceMenus: true,
-  // },
-  //       // sequenceDiagram: { actorMargin: 300, forceMenus: false }, // deprecated
-        // fontFamily: '"times", sans-serif',
-        // fontFamily: 'courier',
-        state: {
-          nodeSpacing: 50,
-          rankSpacing: 50,
-          defaultRenderer: 'dagre-d3',
+          curve: 'curveLinear',
+          useMaxWidth: true,
+          htmlLabels: true,
         },
         logLevel: 1,
         fontSize: 18,

cypress/platform/knsv2.html

@@ -41,7 +41,10 @@
   <body>
     <div>Security check</div>
     <div class="flex">
-      <div id="diagram" class="mermaid"></div>
+      <div id="diagram" class="mermaid">
+sequenceDiagram
+  Nothing:Valid;
+      </div>
       <div id="res" class=""></div>
   <script src="./mermaid.js"></script>
     <script>
@@ -49,28 +52,6 @@
         // console.error('Mermaid error: ', err);
       };
       mermaid.initialize({
-        theme: 'forest',
-        arrowMarkerAbsolute: true,
-        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
-        logLevel: 0,
-        state: {
-          defaultRenderer: 'dagre-wrapper',
-        },
-        flowchart: {
-          // defaultRenderer: 'dagre-wrapper',
-          nodeSpacing: 10,
-    curve: 'cardinal',
-    htmlLabels: true,
-        },
-        htmlLabels: false,
-        // gantt: { axisFormat: '%m/%d/%Y' },
-        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
-        // sequenceDiagram: { actorMargin: 300 } // deprecated
-        // fontFamily: '"times", sans-serif',
-        // fontFamily: 'courier',
-        fontSize: 18,
-        curve: 'basis',
-        securityLevel: 'strict',
         startOnLoad: false,
         // themeVariables: {relationLabelColor: 'red'}
       });
@@ -78,19 +59,12 @@
   alert('It worked');
 }
 
-      var diagram = '%%{init: {"flowchart": {"htmlLabels": "false"}} }%%\n';
-diagram += 'flowchart\n';
-diagram += 'A["<ifra';
-diagram += "me srcdoc='<scrip";
-diagram += 't src=http://localhost:9000/exploit.js>';
-diagram += '</scr';
-diagram += 'ipt>\'></iframe>"]';
-
-console.log(diagram);
 // document.querySelector('#diagram').innerHTML = diagram;
-mermaid.render('diagram', diagram, (res) => {
-  document.querySelector('#res').innerHTML = res;
-});
+try {
+  mermaid.initThrowsErrors(undefined, '#diagram');
+} catch (err) {
+  console.log('Caught error:', err);
+}
     </script>
   </body>
 </html>