Merge branch 'develop' of https://github.com/knsv/mermaid into 1542_take_two

2025-11-01 11:24:16 +01:00 · 2020-09-09 18:43:53 +02:00
parent c95b9ffc43 117988d26d
commit 28c01f6476
118 changed files with 2940 additions and 1355 deletions
--- a/cypress/platform/class.html
+++ b/cypress/platform/class.html
@@ -21,7 +21,7 @@
  <body>
    <h1>info below</h1>
      <div class="mermaid" style="width: 100%; height: 20%;">
-        %%{init: {'theme': 'base',  'fontFamily': 'arial', 'themeVariables': {  'primaryColor': '#ff0000'}}}%%
+        %%{init: {'theme': 'base',  'fontFamily': 'courier', 'themeVariables': {  'primaryColor': '#fff000'}}}%%
        classDiagram-v2
         class BankAccount{
          +String owner
@@ -29,6 +29,24 @@
          +deposit(amount) bool
          +withdrawl(amount) int
      }
+      </div>
+      <div class="mermaid" style="width: 100%; height: 20%;">
+      flowchart TB
+      a_a(Aftonbladet) --> b_b[gorilla]:::apa --> c_c{chimp}:::apa -->a_a
+      a_a --> c --> d_d --> c_c
+      classDef apa fill:#f9f,stroke:#333,stroke-width:4px;
+      class a_a apa;
+      click a_a "http://www.aftonbladet.se" "apa"
+        
+      </div>
+
+      <div class="mermaid2" style="width: 100%; height: 20%;">
+        classDiagram-v2
+
+        classA -- classB : Inheritance
+        classA -- classC : link
+        classC -- classD : link
+        classB -- classD
        classA --|> classB : Inheritance
        classC --* classD : Composition
        classE --o classF : Aggregation
@@ -42,15 +60,15 @@
        classA : method1()
        &lt;&lt;interface&gt;&gt; classB
        classB : method2() int
-      </div>

-      <div class="mermaid" style="width: 100%; height: 20%;">
-        classDiagram-v2
+        Customer "1" --> "*" Ticket
+        Student "1" --> "1..*" Course
+        Galaxy --> "many" Star : Contains
+        &lt;&lt;interface&gt;&gt; Customer

-        classA -- classB : Inheritance
-        classA -- classC : link
-        classC -- classD : link
-        classB -- classD
+        class Shape
+        callback Shape "callbackFunction" "This is a tooltip for a callback"
+        
      </div>
      <script src="./mermaid.js"></script>
    <script>
@@ -62,7 +80,7 @@
        // arrowMarkerAbsolute: true,
        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
        logLevel: 0,
-        flowchart: { curve: 'linear', "htmlLabels": false },
+        flowchart: { curve: 'linear', "htmlLabels": true },
        // gantt: { axisFormat: '%m/%d/%Y' },
        sequence: { actorMargin: 50, showSequenceNumbers: true },
        // sequenceDiagram: { actorMargin: 300 } // deprecated
--- a/cypress/platform/current.html
+++ b/cypress/platform/current.html
@@ -74,30 +74,93 @@ stateDiagram-v2
  A --> D: asd123
      </div>
      </div>
-      <div class="mermaid" style="width: 50%; height: 20%;">
-        %%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
-flowchart TD
-%%subgraph A
-  C -->|Label1 long long long| E1
-  C --> E3
-  C ==>E3
-%%end
+      <div class="mermaid" style="width: 50%; height: 40%;">
+%% this does not produce the desired result
+flowchart TB
+  subgraph container_Beta
+    process_C-->Process_D
+  end
+  subgraph container_Alpha
+    process_A-->process_B
+    process_B-->|via_AWSBatch|container_Beta
+    process_A-->|messages|process_C
+  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 class="mermaid" style="width: 50%; height: 40%;">
+        %%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
+flowchart TB
+    b-->B
+    a-->c
+    subgraph O
+      A
+    end
+    subgraph B
+      c
+    end
+    subgraph A
+        a
+        b
+        B
+    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 class="mermaid" style="width: 50%; height: 50%;">
+flowchart TB
+  internet
+  nat
+  routeur
+  lb1
+  lb2
+  compute1
+  compute2
+  subgraph project
+  routeur
+  nat
+    subgraph subnet1
+      compute1
+      lb1
+    end
+    subgraph subnet2
+      compute2
+      lb2
+    end
+  end
+  internet --> routeur
+  routeur --> subnet1 & subnet2
+  subnet1 & subnet2 --> nat --> internet
+      </div>
+      <div class="mermaid" style="width: 50%; height: 50%;">
+flowchart TD
+
+subgraph one[One]
+    subgraph sub_one[Sub One]
+        _sub_one
+    end
+end
+
+subgraph two[Two]
+    _two
+end
+
+sub_one --> two
+      </div>
+      <div class="mermaid" style="width: 50%; height: 50%;">
+flowchart TD
+
+subgraph one[One]
+    subgraph sub_one[Sub One]
+        _sub_one
+    end
+    subgraph sub_two[Sub Two]
+        _sub_two
+    end
+    _one
+end
+
+%% here, either the first or the second one
+sub_one --> sub_two
+_one --> b
      </div>

  <script src="./mermaid.js"></script>
--- a/cypress/platform/current2.html
+++ b/cypress/platform/current2.html
@@ -0,0 +1,129 @@
+<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:#333; */
+        font-family: 'Arial';
+        }
+      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="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="mermaid2" style="width: 50%; height: 200px;">
+        %%{init: {'securityLevel': 'loose'}}%%
+      graph TD
+        A[Christmas] -->|Get money| B(Go shopping)
+        B --> C{{Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?}}
+        C -->|One| D[Laptop]
+        C -->|Two| E[iPhone]
+        C -->|Three| F[Car]
+        click A "index.html#link-clicked" "link test"
+        click B callback "click test"
+        classDef someclass fill:#f96;
+        class A someclass;
+        class C someclass;
+      </div>
+      <div class="mermaid2" style="width: 50%; height: 200px;">
+
+      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%;">
+        %%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
+flowchart LR
+  a -->b
+  subgraph A
+  B
+  end
+  subgraph B
+  b
+  end
+
+      </div>
+      <div class="mermaid" style="width: 50%; height: 20%;">
+flowchart TB
+    subgraph A
+    b-->B
+    a-->c
+    end
+    subgraph 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>
+    <script>
+      mermaid.parseError = function (err, hash) {
+          // console.error('Mermaid error: ', err);
+        };
+      mermaid.initialize({
+        // theme: 'forest',
+        // themeVariables:{primaryColor: '#ff0000'},
+        // 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/knsv.html
+++ b/cypress/platform/knsv.html
@@ -23,13 +23,10 @@
    <h1>info below</h1>
    <div class="flex">
      <div class="mermaid" style="width: 50%; height: 400px;">
-sequenceDiagram
-	Alice->>+John: Hello John, how are you?
-	Alice->>+John: John, can you hear me?
-	John-->>-Alice: Hi Alice, I can hear you!
-	John-->>-Alice: I feel great!
+      graph TD
+        a["<strong>Haiya</strong>"]-->b
      </div>
-      <div class="mermaid" style="width: 50%; height: 20%;">
+      <div class="mermaid2" style="width: 50%; height: 20%;">
        %%{init: { 'theme': 'base', 'themeVariables':{ 'primaryColor': '#ff0000'}}}%%
 graph TD
          A(Start) --> B[/Another/]
@@ -83,14 +80,15 @@ graph TD
        // arrowMarkerAbsolute: true,
        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
        logLevel: 0,
-        flowchart: { curve: 'cardinal', "htmlLabels": true },
+        flowchart: { curve: 'cardinal', htmlLabels: true },
+        htmlLabels: true,
        // gantt: { axisFormat: '%m/%d/%Y' },
        sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: true },
        // sequenceDiagram: { actorMargin: 300 } // deprecated
        // fontFamily: '"arial", sans-serif',
        fontFamily: 'courier',
        curve: 'cardinal',
-        securityLevel: 'strict'
+        securityLevel: 'loose'
      });
      function callback(){alert('It worked');}
    </script>