Merge branch 'develop' into 1542_take_two

2025-09-23 01:09:42 +02:00 · 2020-08-13 18:27:37 +02:00
parent 61993a032a 9223173ef2
commit 28bc87b873
58 changed files with 2489 additions and 1466 deletions
--- a/cypress/integration/rendering/classDiagram.spec.js
+++ b/cypress/integration/rendering/classDiagram.spec.js
@@ -305,4 +305,52 @@ describe('Class diagram', () => {
    );
    cy.get('svg');
  });
+
+  it('13: should render a simple class diagram with css classes applied', () => {
+    imgSnapshotTest(
+      `
+    classDiagram
+      class Class10 {
+        int[] id
+        List~int~ ids
+        test(List~int~ ids) List~bool~
+        testArray() bool[]
+      }
+
+      cssClass "Class10" exClass
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+
+  it('14: should render a simple class diagram with css classes applied directly', () => {
+    imgSnapshotTest(
+      `
+    classDiagram
+      class Class10:::exClass {
+        int[] id
+        List~int~ ids
+        test(List~int~ ids) List~bool~
+        testArray() bool[]
+      }
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+
+  it('15: should render a simple class diagram with css classes applied two multiple classes', () => {
+    imgSnapshotTest(
+      `
+    classDiagram
+      class Class10
+      class Class20
+
+      cssClass "Class10, class20" exClass
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
 });
--- a/cypress/integration/rendering/flowchart.spec.js
+++ b/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' }
      );
--- a/cypress/platform/current.html
+++ b/cypress/platform/current.html
@@ -74,15 +74,11 @@ stateDiagram-v2
  A --> D: asd123
      </div>
      </div>
-      %%{init: {'theme': 'base', 'themeVariables':{ 'primaryColor': '#ff0000'}}}%%
      <div class="mermaid" style="width: 50%; height: 20%;">
-        %%{init: {'theme': 'base'}}%%
+        %%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
+classDiagram
+	Animal <|-- Duck

-        flowchart TB
-        subgraph apa
-          a --> A %% comment
-          a --> a{apa} %% comment
-        end
      </div>
      <div class="mermaid2" style="width: 50%; height: 20%;">
 graph TD
@@ -106,8 +102,8 @@ Note over Bob,Alice: Looks back
          // console.error('Mermaid error: ', err);
        };
      mermaid.initialize({
-        // theme: 'base',
-        // themeVariables:{primaryColor: '#0000ff'},
+        // theme: 'forest',
+        // themeVariables:{primaryColor: '#ff0000'},
        // arrowMarkerAbsolute: true,
        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
        logLevel: 0,
--- a/cypress/platform/showcase_base.html
+++ b/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%;
@@ -177,7 +176,7 @@ gantt

      </div>
      <div class="mermaid width height2">
-%%{init2: {'securityLevel': 'loose', 'theme':'base'}}%%
+%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
 stateDiagram-v2
        [*] --> Active

@@ -234,7 +233,7 @@ journey
        };
      mermaid.initialize({
        theme: 'base',
-        themeVariables: { primaryColor: '#ff0000'},
+        // themeVariables:
        // arrowMarkerAbsolute: true,
        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
        logLevel: 0,
--- a/cypress/platform/showcase_base_dark.html
+++ b/cypress/platform/showcase_base_dark.html
@@ -0,0 +1,245 @@
+<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: #f4f4f4;
+        background: #222;
+        font-family: 'Arial';
+        height: 100%;
+        width: 100%;
+        margin: 0;
+        padding: 0;
+        }
+      h1 { color: grey;}
+      .mermaid2 {
+        display: none;
+      }
+      .height {
+        min-height: 600px;
+        height: 600px;
+      }
+      .height2 {
+        min-height: 600px;
+        height: 1300px;
+      }
+      .width {
+        width: 33%;
+        border: 1px solid blue;
+        padding: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Showcases of diagrams</h1>
+    <div class="flex flex-wrap">
+      <div class="mermaid width height">
+        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 width height">
+%%{init2: {'securityLevel': 'loose', 'theme':'base'}}%%
+        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
+      </div>
+      <div class="mermaid width height" >
+        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 width height" >
+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
+       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
+      </div>
+      <div class="mermaid width height2">
+      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.
+
+        SomethingElse --> [*]
+
+      </div>
+      <div class="mermaid width height2">
+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.
+
+        SomethingElse2 --> [*]
+      </div>
+      <div class="mermaid width height2">
+      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"
+      </div>
+      <div class="mermaid width height">
+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
+      </div>
+
+  <script src="./mermaid.js"></script>
+    <script>
+      mermaid.parseError = function (err, hash) {
+          // console.error('Mermaid error: ', err);
+        };
+      mermaid.initialize({
+        theme: 'base',
+        themeVariables: { primaryColor: '#9400D3', darkMode: true, background: '#222', textColor:'white', primaryTextColor: '#f4f4f4', nodeBkg: '#ff0000', mainBkg:'#0000ff', tertiaryColor:'#ffffcc' },
+        // arrowMarkerAbsolute: true,
+        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
+        logLevel: 0,
+        flowchart: { 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>
--- a/cypress/platform/showcase_dark.html
+++ b/cypress/platform/showcase_dark.html
@@ -166,6 +166,7 @@ gantt
        }

        Active --> SomethingElse
+        SomethingElse --> [*]
        note right of SomethingElse : This is the note to the right.
      </div>
      <div class="mermaid width height2">
@@ -191,6 +192,7 @@ gantt
        }

        Active --> SomethingElse2
+        SomethingElse2 --> [*]
        note right of SomethingElse2 : This is the note to the right.
      </div>
      <div class="mermaid width height2">
--- a/cypress/platform/showcase_forest.html
+++ b/cypress/platform/showcase_forest.html
@@ -167,6 +167,7 @@ gantt

        Active --> SomethingElse
        note right of SomethingElse : This is the note to the right.
+        SomethingElse --> [*]
      </div>
      <div class="mermaid width height2">
      stateDiagram-v2