Merge branch 'develop' into feature/2249_sequence_diagram_popup_menus

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

@@ -370,7 +370,21 @@ describe('Class diagram V2', () => {
     );
     cy.get('svg');
   });
-  it('16: should handle the direction statemment with TB', () => {
+
+  it('16a: should render a simple class diagram with static field', () => {
+    imgSnapshotTest(
+      `
+    classDiagram-v2
+      Foo {
+        +String bar$
+      }
+            `,
+       {logLevel : 1, flowchart: { "htmlLabels": false },}
+    );
+    cy.get('svg');
+  });
+
+  it('16b: should handle the direction statemnent with TB', () => {
     imgSnapshotTest(
       `
       classDiagram
@@ -394,55 +408,8 @@ describe('Class diagram V2', () => {
     );
     cy.get('svg');
   });
-  it('17: should handle the direction statemment with BT', () => {
-    imgSnapshotTest(
-      `
-      classDiagram
-        direction BT
-        class Student {
-          -idCard : IdCard
-        }
-        class IdCard{
-          -id : int
-          -name : string
-        }
-        class Bike{
-          -id : int
-          -name : string
-        }
-        Student "1" --o "1" IdCard : carries
-        Student "1" --o "1" Bike : rides
-
-      `,
-       {logLevel : 1, flowchart: { "htmlLabels": false },}
-    );
-    cy.get('svg');
-  });
-  it('17: should handle the direction statemment with RL', () => {
-    imgSnapshotTest(
-      `
-      classDiagram
-        direction RL
-        class Student {
-          -idCard : IdCard
-        }
-        class IdCard{
-          -id : int
-          -name : string
-        }
-        class Bike{
-          -id : int
-          -name : string
-        }
-        Student "1" --o "1" IdCard : carries
-        Student "1" --o "1" Bike : rides
-
-      `,
-       {logLevel : 1, flowchart: { "htmlLabels": false },}
-    );
-    cy.get('svg');
-  });
-  it('18: should handle the direction statemment with LR', () => {
+  
+  it('18: should handle the direction statemnent with LR', () => {
     imgSnapshotTest(
       `
       classDiagram
@@ -466,4 +433,52 @@ describe('Class diagram V2', () => {
     );
     cy.get('svg');
   });
+  it('17a: should handle the direction statemnent with BT', () => {
+    imgSnapshotTest(
+      `
+      classDiagram
+        direction BT
+        class Student {
+          -idCard : IdCard
+        }
+        class IdCard{
+          -id : int
+          -name : string
+        }
+        class Bike{
+          -id : int
+          -name : string
+        }
+        Student "1" --o "1" IdCard : carries
+        Student "1" --o "1" Bike : rides
+
+      `,
+       {logLevel : 1, flowchart: { "htmlLabels": false },}
+    );
+    cy.get('svg');
+  });
+  it('17b: should handle the direction statemment with RL', () => {
+    imgSnapshotTest(
+      `
+      classDiagram
+        direction RL
+        class Student {
+          -idCard : IdCard
+        }
+        class IdCard{
+          -id : int
+          -name : string
+        }
+        class Bike{
+          -id : int
+          -name : string
+        }
+        Student "1" --o "1" IdCard : carries
+        Student "1" --o "1" Bike : rides
+
+      `,
+       {logLevel : 1, flowchart: { "htmlLabels": false },}
+    );
+    cy.get('svg');
+  });
 });

cypress/integration/rendering/erDiagram.spec.js

@@ -186,4 +186,15 @@ describe('Entity Relationship Diagram', () => {
     cy.get('svg');
   });
 
+  it('should render entities with keys and comments', () => {
+    renderGraph(
+      `
+    erDiagram
+        BOOK { string title PK "comment"}
+      `,
+      { logLevel : 1 }
+    );
+    cy.get('svg');
+  });
+
 });

cypress/integration/rendering/sequencediagram.spec.js

@@ -173,6 +173,18 @@ context('Sequence diagram', () => {
         {}
       );
     });
+    it('should be possible to use actor symbols instead of boxes', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+          actor Alice
+          actor Bob
+          Alice->>Bob: Hi Bob
+          Bob->>Alice: Hi Alice
+      `,
+        {}
+      );
+    });
     it('should render long notes left of actor', () => {
       imgSnapshotTest(
         `

cypress/platform/knsv.html

@@ -10,9 +10,10 @@
     <style>
       body {
         /* background: rgb(221, 208, 208); */
-        background:#333;
+        /* background:#333; */
         font-family: 'Arial';
         /* font-size: 18px !important; */
+        width: 100%;
         }
       h1 { color: grey;}
       .mermaid2,.mermaid3 {
@@ -25,7 +26,7 @@
   </head>
   <body>
     <div>info below</div>
-    <div class="flex">
+    <div class="flex flex-wrap">
 
 <div class="mermaid2" style="width: 100%; height: 20%;">
 classDiagram
@@ -53,28 +54,56 @@ stateDiagram
 
 </div>
 <div class="mermaid" style="width: 100%; height: 20%;">
-flowchart LR
-  one --> two
-  three -.-> four[whoa, big arrowhead nine o'clock]
+sequenceDiagram
+  %%{init: {'config': {'wrap': true }}}%%
+  actor Alice as Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+  actor Bob
+  participant John as John2
+  participant Mandy
+  Alice->>Bob: Hi Bob
+  Bob->>Alice: Hi Alice
+  Alice->>John: Hi John
+  John->>Mandy: Hi Mandy
+  Mandy ->>Joan: Hi Joan
 
 </div>
-<div class="mermaid2" style="width: 100%; height: 20%;">
-%%{init: { "apa":"b", "theme":"forest"}}%%
+<div class="mermaid" style="width: 100%; height: 20%;">
+%%{int: { "apa":"b", "theme":"forest"}}%%
 sequenceDiagram
 Alice->>Bob: Hi Bob
 Bob->>Alice: Hi Alice
 </div>
-    <div class="mermaid2">
-      %%{init: { 'theme':'base', '__proto__': {'polluted': 'asdf'}} }%%
-      %%{init: { 'theme':'base', '__proto__': {'polluted': 'asdf'}} }%%
-      graph LR
-          A --> B
-    </div>
-<div class="mermaid2" style="width: 100%; height: 20%;">
-flowchart TD
-  Link --> b
-  click Link href "&#x6A&#x61&#x76&#x61&#x73&#x63&#x72&#x69&#x70&#x74&#x3A&#x61&#x6C&#x65&#x72&#x74&#x28&#x27&#x58&#x53&#x53&#x27&#x29" "Tooltip for
-Amet"
+<div class="mermaid">
+sequenceDiagram
+  autonumber
+  par Action 1
+    Alice->>John: Hello John, how are you?
+  and Action 2
+    Alice->>Bob: Hello Bob, how are you?
+  end
+  Alice->>+John: Hello John, how are you?
+  Alice->>+John: John, can you hear me?
+  John-->>-Alice: Hi Alice, I can hear you!
+  Note right of John: John is perceptive
+  John-->>-Alice: I feel great!
+      loop Every minute
+        John-->Alice: Great!
+    end
+</div>
+<div class="mermaid">
+sequenceDiagram
+  %%{init: {'config': {'wrap': true }}}%%
+  actor Alice
+  actor Bob
+  Alice->>Bob: Hi Bob
+  Bob->>Alice: Hi Alice
+</div>
+<div class="mermaid" style="width: 100%; height: 20%;">
+        %%{init: {'config': {'wrap': true }}}%%
+        sequenceDiagram
+        participant A as Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+        A->>Bob: Hola
+        Bob-->A: Pasten !
   </div>
 <div class="mermaid2" style="width: 100%; height: 20%;">
 stateDiagram-v2
@@ -112,8 +141,8 @@ YourState
           // console.error('Mermaid error: ', err);
         };
       mermaid.initialize({
-        theme: 'dark',
-        // theme: 'forest',
+        // theme: 'dark',
+        theme: 'forest',
         arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 2,