Merge branch 'develop' into pr/rhysd/4359

* develop: (453 commits) chore: Minor fixes chore: Build docs Use develop as base on develop branch. Update renovate json update link update announcement and blog pages Remove `--force` flag Tweak editor.bash update link chore: update browsers list Update integrations-community: add Drupal and module. Support Firefox Address review comments Change run symbol feat: Make the examples interactive in the documentation site. Add langium chore: update browsers list chore(deps): update all patch dependencies chore(deps): update all minor dependencies Update keywords and description ...
2025-11-17 03:04:07 +01:00 · 2024-03-23 13:46:26 +05:30
parent 7d0faa3fed be1270d070
commit ecfa149efc
346 changed files with 15640 additions and 7799 deletions
--- a/cypress/platform/e2e.html
+++ b/cypress/platform/e2e.html
@@ -1,7 +1,7 @@
 <html>
  <head>
    <meta charset="utf-8" />
-    <script src="./viewer.js" type="module"></script>
+    <script type="module" src="./viewer.js"></script>
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
      rel="stylesheet"
--- a/cypress/platform/external-diagrams-example-diagram.html
+++ b/cypress/platform/external-diagrams-example-diagram.html
@@ -11,8 +11,7 @@ example-diagram
    <!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> -->
    <!-- <script type="module" src="./external-diagrams-mindmap.mjs" /> -->
    <script type="module">
-      import exampleDiagram from '../../packages/mermaid-example-diagram/dist/mermaid-example-diagram.core.mjs';
-      // import example from '../../packages/mermaid-example-diagram/src/detector';
+      import exampleDiagram from './mermaid-example-diagram.esm.mjs';
      import mermaid from './mermaid.esm.mjs';

      await mermaid.registerExternalDiagrams([exampleDiagram]);
--- a/cypress/platform/flow-elk.html
+++ b/cypress/platform/flow-elk.html
@@ -0,0 +1,28 @@
+<html>
+  <body>
+    <pre class="mermaid">
+      flowchart-elk
+      a[hello] --> b[world]
+      b --> c{test}
+      c --> one
+      c --> two
+      c --> three
+    </pre>
+
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+      import elk from './mermaid-flowchart-elk.esm.min.mjs';
+      if (window.location.search.includes('elk')) {
+        await mermaid.registerExternalDiagrams([elk]);
+      }
+      mermaid.initialize({
+        logLevel: 3,
+        startOnLoad: false,
+      });
+      await mermaid.run();
+      if (window.Cypress) {
+        window.rendered = true;
+      }
+    </script>
+  </body>
+</html>
--- a/cypress/platform/iife.html
+++ b/cypress/platform/iife.html
@@ -0,0 +1,29 @@
+<html>
+  <body>
+    <pre id="diagram" class="mermaid">
+graph TB
+      a --> b
+      a --> c
+      b --> d
+      c --> d
+    </pre>
+
+    <div id="d2"></div>
+
+    <script src="/mermaid.min.js"></script>
+    <script>
+      mermaid.initialize({
+        startOnLoad: true,
+      });
+      const value = `graph TD\nHello --> World`;
+      const el = document.getElementById('d2');
+      mermaid.render('did', value).then(({ svg }) => {
+        console.log(svg);
+        el.innerHTML = svg;
+        if (window.Cypress) {
+          window.rendered = true;
+        }
+      });
+    </script>
+  </body>
+</html>
--- a/cypress/platform/interaction.html
+++ b/cypress/platform/interaction.html
@@ -17,20 +17,20 @@
    graph TB
      Function-->URL
      click Function clickByFlow "Add a div"
-      click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+      click URL "http://localhost:9000/info.html" "Visit <strong>mermaid docs</strong>"
      </pre>
      <pre id="FirstLine" class="mermaid2">
  graph TB
    1Function-->2URL
    click 1Function clickByFlow "Add a div"
-    click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+    click 2URL "http://localhost:9000/info.html" "Visit <strong>mermaid docs</strong>"
      </pre>

      <pre id="FirstLine" class="mermaid2">
  classDiagram
    class Test
    class ShapeLink
-    link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
+    link ShapeLink "http://localhost:9000/info.html" "This is a tooltip for a link"
    class ShapeCallback
    callback ShapeCallback "clickByClass" "This is a tooltip for a callback"
      </pre>
@@ -42,7 +42,7 @@
      <pre id="FirstLine" class="mermaid">
  classDiagram-v2
    class ShapeLink
-    link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
+    link ShapeLink "http://localhost:9000/info.html" "This is a tooltip for a link"
      </pre>
    </div>

@@ -77,7 +77,7 @@
    Calling a Callback (look at the console log) :cl2, after cl1, 3d
    Calling a Callback with args :cl3, after cl1, 3d

-    click cl1 href "http://localhost:9000/webpackUsage.html"
+    click cl1 href "http://localhost:9000/info.html"
    click cl2 call clickByGantt()
    click cl3 call clickByGantt("test1", test2, test3)

@@ -102,9 +102,15 @@
        div.className = 'created-by-gant-click';
        div.style = 'padding: 20px; background: green; color: white;';
        div.innerText = 'Clicked By Gant';
-        if (arg1) div.innerText += ' ' + arg1;
-        if (arg2) div.innerText += ' ' + arg2;
-        if (arg3) div.innerText += ' ' + arg3;
+        if (arg1) {
+          div.innerText += ' ' + arg1;
+        }
+        if (arg2) {
+          div.innerText += ' ' + arg2;
+        }
+        if (arg3) {
+          div.innerText += ' ' + arg3;
+        }

        document.getElementsByTagName('body')[0].appendChild(div);
      }
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -17,24 +17,30 @@
    <style>
      body {
        /* background: rgb(221, 208, 208); */
-        /* background:#333; */
+        background: #333;
        font-family: 'Arial';
        /* font-size: 18px !important; */
      }
      h1 {
        color: grey;
      }
+      .mermaid {
+        border: 1px solid #ddd;
+        margin: 10px;
+      }
      .mermaid2 {
        display: none;
      }
      .mermaid svg {
        /* font-size: 18px !important; */
-        background-color: #efefef;
-        background-image: radial-gradient(#fff 51%, transparent 91%),
-          radial-gradient(#fff 51%, transparent 91%);
+        /* background-color: #efefef; */
+        background-color: #333;
+        background-image: radial-gradient(#333 51%, transparent 91%),
+          radial-gradient(#333 51%, transparent 91%);
        background-size: 20px 20px;
        background-position: 0 0, 10px 10px;
        background-repeat: repeat;
+        border: 2px solid rgb(131, 142, 205);
      }
      .malware {
        position: fixed;
@@ -58,46 +64,192 @@
  </head>
  <body>
    <pre id="diagram" class="mermaid">
-flowchart TB
-    C & D & E & F & G & H & I & J & K & L & M & N & O & P & Q & R & S & T & U & V & W & X & Y & Z & A1 & A2 & A3 & A4 & A5 & A6 & A7 & A8
-      ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
-    C & D & E & F & G & H & I & J & K & L & M & N & O & P & Q & R & S & T & U & V & W & X & Y & Z & A1 & A2 & A3 & A4 & A5 & A6 & A7 & A8
+      block-beta
+  blockArrowId<["Label"]>(right)
+  blockArrowId2<["Label"]>(left)
+  blockArrowId3<["Label"]>(up)
+  blockArrowId4<["Label"]>(down)
+  blockArrowId5<["Label"]>(x)
+  blockArrowId6<["Label"]>(y)
+  blockArrowId6<["Label"]>(x, down)
+    </pre>
+    <pre id="diagram" class="mermaid">
+block-beta
+  block:e:4
+    columns 2
+      f
+      g
+  end
+
+    </pre>
+    <pre id="diagram" class="mermaid">
+block-beta
+  block:e:4
+    columns 2
+      f
+      g
+      h
+  end
+
+    </pre>
+    <pre id="diagram" class="mermaid">
+block-beta
+  columns 4
+  a b c d
+  block:e:4
+    columns 2
+      f
+      g
+      h
+  end
+  i:4

    </pre>
    <pre id="diagram" class="mermaid2">
-    flowchart TB
-      A & A & A & A & A & A & A & A --->  C & D & E & F & G & H & I & J & K & L & M & N & O & P & Q & R & S & T & U & V & W & X & Y & Z
+flowchart LR
+  X-- "y" -->z
    </pre>
    <pre id="diagram" class="mermaid2">
-    flowchart TB
-      A1 & A2 & A3 & A4 & A5 & A6 & A7 & A8 -->  C & D & E & F & G & H & I & J & K & L & M & N & O & P & Q & R & S & T & U & V & W & X & Y & Z
+block-beta
+columns 5
+   A space B
+   A --x B
    </pre>
+    <pre id="diagram" class="mermaid2">
+block-beta
+columns 3
+  a["A wide one"] b:2 c:2 d
+    </pre>
+    <pre id="diagram" class="mermaid2">
+block-beta
+  block:e
+      f
+  end
+    </pre>
+    <pre id="diagram" class="mermaid2">
+block-beta
+  columns 3
+  a:3
+  block:e:3
+      f
+  end
+  g
+    </pre>
+    <pre id="diagram" class="mermaid2">
+block-beta
+  columns 3
+  a:3
+  block:e:3
+      f
+      g
+  end
+  h
+  i
+  j
+
+    </pre>
+    <pre id="diagram" class="mermaid2">
+block-beta
+columns 3
+  a b:2
+  block:e:3
+      f
+  end
+  g h i
+    </pre>
+    <pre id="diagram" class="mermaid">
+block-beta
+columns 3
+  a b c
+  e:3
+  f g h
+    </pre>
+    <pre id="diagram" class="mermaid">
+block-beta
+columns 1
+  db(("DB"))
+  blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
+  block:ID
+    A
+    B["A wide one in the middle"]
+    C
+  end
+  space
+  D
+  ID --> D
+  C --> D
+  style B fill:#f9F,stroke:#333,stroke-width:4px
+    </pre>
+    <pre id="diagram" class="mermaid">
+block-beta
+  columns 5
+  A1:3
+  A2:1
+  A3
+  B1 B2 B3:3
+    </pre>
+    <pre id="diagram" class="mermaid2">
+block-beta
+  block
+    D
+    E
+  end
+  db("This is the text in the box")
+    </pre>
+    <pre id="diagram" class="mermaid2">
+block-beta
+
+      block
+        D
+      end
+      A["A: I am a wide one"]
+    </pre>
+    <pre id="diagram" class="mermaid2">
+block-beta
+    A["square"]
+    B("rounded")
+    C(("circle"))
+    </pre>
+    <pre id="diagram" class="mermaid2">
+block-beta
+    A>"rect_left_inv_arrow"]
+    B{"diamond"}
+    C{{"hexagon"}}
+    </pre>
+    <pre id="diagram" class="mermaid2">
+block-beta
+    A(["stadium"])
+    </pre>
+    <pre id="diagram" class="mermaid2">
+block-beta
+    %% A[["subroutine"]]
+    %% B[("cylinder")]
+    C>"surprise"]
+    </pre>
+    <pre id="diagram" class="mermaid2">
+block-beta
+    A[/"lean right"/]
+    B[\"lean left"\]
+    C[/"trapezoid"\]
+    D[\"trapezoid"/]
+    </pre>
+
    <pre id="diagram" class="mermaid2">
 flowchart
-Node1:::class1 --> Node2:::class2
-Node1:::class1 --> Node3:::class2
-Node3 --> Node4((I am a circle)):::larger
+      B
+      style B fill:#f9F,stroke:#333,stroke-width:4px
+    </pre>

-classDef class1 fill:lightblue
-classDef class2 fill:pink
-classDef larger font-size:30px,fill:yellow
-      </pre
-    >
    <pre id="diagram" class="mermaid2">
-stateDiagram-v2
-    [*] --> Still
-    Still --> [*]
-    Still --> Moving
-    Moving --> Still
-    Moving --> Crash
-    Crash --> [*]    </pre
-    >
+      flowchart LR
+      a1 -- apa --> b1
+    </pre>
+
    <pre id="diagram" class="mermaid2">
 flowchart RL
-    subgraph "`one`"
-      a1 -- l1 --> a2
-      a1 -- l2 --> a2
-    end
+  subgraph "`one`"
+    id
+  end
    </pre>
    <pre id="diagram" class="mermaid2">
 flowchart RL
@@ -442,14 +594,8 @@ mindmap
      //   useMaxWidth: false,
      // });
      mermaid.initialize({
-        flowchart: { titleTopMargin: 10 },
-        fontFamily: 'courier',
-        sequence: {
-          actorFontFamily: 'courier',
-          noteFontFamily: 'courier',
-          messageFontFamily: 'courier',
-        },
-        fontSize: 16,
+        theme: 'dark',
+        startOnLoad: true,
        logLevel: 0,
      });
      function callback() {
--- a/cypress/platform/viewer.js
+++ b/cypress/platform/viewer.js
@@ -1,6 +1,6 @@
-import mermaid2 from './mermaid.esm.mjs';
-import externalExample from '../../packages/mermaid-example-diagram/dist/mermaid-example-diagram.core.mjs';
-import zenUml from '../../packages/mermaid-zenuml/dist/mermaid-zenuml.core.mjs';
+import mermaid from './mermaid.esm.mjs';
+import externalExample from './mermaid-example-diagram.esm.mjs';
+import zenUml from './mermaid-zenuml.esm.mjs';

 function b64ToUtf8(str) {
  return decodeURIComponent(escape(window.atob(str)));
@@ -45,9 +45,9 @@ const contentLoaded = async function () {
      document.getElementsByTagName('body')[0].appendChild(div);
    }

-    await mermaid2.registerExternalDiagrams([externalExample, zenUml]);
-    mermaid2.initialize(graphObj.mermaid);
-    await mermaid2.run();
+    await mermaid.registerExternalDiagrams([externalExample, zenUml]);
+    mermaid.initialize(graphObj.mermaid);
+    await mermaid.run();
  }
 };

@@ -95,18 +95,14 @@ const contentLoadedApi = async function () {
        divs[i] = div;
      }

-      const defaultE2eCnf = { theme: 'forest' };
+      const defaultE2eCnf = { theme: 'forest', startOnLoad: false };

      const cnf = merge(defaultE2eCnf, graphObj.mermaid);

-      mermaid2.initialize(cnf);
+      mermaid.initialize(cnf);

      for (let i = 0; i < numCodes; i++) {
-        const { svg, bindFunctions } = await mermaid2.render(
-          'newid' + i,
-          graphObj.code[i],
-          divs[i]
-        );
+        const { svg, bindFunctions } = await mermaid.render('newid' + i, graphObj.code[i], divs[i]);
        div.innerHTML = svg;
        bindFunctions(div);
      }
@@ -114,18 +110,21 @@ const contentLoadedApi = async function () {
      const div = document.createElement('div');
      div.id = 'block';
      div.className = 'mermaid';
-      console.warn('graphObj.mermaid', graphObj.mermaid);
+      console.warn('graphObj', graphObj);
      document.getElementsByTagName('body')[0].appendChild(div);
-      mermaid2.initialize(graphObj.mermaid);
-
-      const { svg, bindFunctions } = await mermaid2.render('newid', graphObj.code, div);
+      mermaid.initialize(graphObj.mermaid);
+      const { svg, bindFunctions } = await mermaid.render('newid', graphObj.code, div);
      div.innerHTML = svg;
+      console.log(div.innerHTML);
      bindFunctions(div);
    }
  }
 };

 if (typeof document !== 'undefined') {
+  mermaid.initialize({
+    startOnLoad: false,
+  });
  /*!
   * Wait for document loaded before starting the execution
   */
--- a/cypress/platform/webpackUsage.html
+++ b/cypress/platform/webpackUsage.html
@@ -1,19 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <style>
-      /* .mermaid {
-    font-family: "trebuchet ms", verdana, arial;;
-  } */
-      /* .mermaid {
-    font-family: 'arial';
-  } */
-    </style>
-  </head>
-  <body>
-    <div id="graph-to-be"></div>
-    <script type="module" charset="utf-8">
-      import './bundle-test.js';
-    </script>
-  </body>
-</html>
--- a/cypress/platform/xss.html
+++ b/cypress/platform/xss.html
@@ -1,6 +1,5 @@
 <html>
  <head>
-    <script src="./viewer.js" type="module"></script>
    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
    <style>
      .malware {
@@ -33,12 +32,6 @@
    </script>
  </head>
  <body>
-    <script type="module">
-      import mermaid from './mermaid.esm.mjs';
-      mermaid.initialize({
-        startOnLoad: false,
-        useMaxWidth: true,
-      });
-    </script>
+    <script type="module" src="./viewer.js"></script>
  </body>
 </html>