Merge branch 'develop' into next

* develop: (124 commits) chore(deps): update all patch dependencies fix typo cutomers => customers chore(deps): update all minor dependencies Fix macOS onboarding issues Bump @zenuml/core and update render options in mermaid-zenuml (#5257) Fixed Typo in ErrorRenderer.ts (#5256) #3358 Removing redundant file #3358 Fix after review Fix selector #3358 Renaming of IOperation to ActionFun chore: Add interface naming build(deps-dev): bump vite from 4.4.12 to 4.5.2 Update container Update container Remove pnpm cache 3358 Adding types for blockArrowHelper #3358n Updated lockfile Update docs #3358 Another set of review changes Use `.node-version` file in workflows ...
2025-11-30 17:44:08 +01:00 · 2024-02-11 19:56:55 +05:30
parent 969e2c1ff1 9c6ad54681
commit e047755a21
99 changed files with 5560 additions and 1368 deletions
--- a/demos/block.html
+++ b/demos/block.html
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Mermaid Block diagram demo page</title>
+    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
+  </head>
+
+  <body>
+    <h1>Block diagram demos</h1>
+    <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
+    A1["square"]
+    B1("rounded")
+    C1(("circle"))
+    A2>"rect_left_inv_arrow"]
+    B2{"diamond"}
+    C2{{"hexagon"}}
+    </pre>
+
+    <pre id="diagram" class="mermaid">
+block-beta
+    A1(["stadium"])
+    A2[["subroutine"]]
+    B1[("cylinder")]
+    C1>"surprise"]
+    A3[/"lean right"/]
+    B2[\"lean left"\]
+    C2[/"trapezoid"\]
+    D2[\"trapezoid"/]
+    </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 3
+  a:3
+  block:e:3
+      f
+      g
+  end
+  h
+  i
+  j
+
+    </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="mermaid">
+flowchart LR
+  X-- "a label" -->z
+    </pre>
+    <pre id="diagram" class="mermaid">
+block-beta
+columns 5
+   A space B
+   A --x B
+    </pre>
+    <pre id="diagram" class="mermaid">
+block-beta
+columns 3
+  a["A wide one"] b:2 c:2 d
+    </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
+
+  A1:3
+  A2:1
+  A3
+    </pre>
+
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+      mermaid.initialize({
+        theme: 'default',
+        logLevel: 3,
+        securityLevel: 'loose',
+        block: {
+          padding: 10,
+        },
+      });
+    </script>
+  </body>
+</html>
--- a/demos/gantt.html
+++ b/demos/gantt.html
@@ -30,6 +30,21 @@
    </pre>
    <hr />

+    <pre class="mermaid">
+      gantt
+        title #; Gantt Diagrams Allow Semicolons and Hashtags #;!
+        accTitle: A simple sample gantt diagram
+        accDescr: 2 sections with 2 tasks each, from 2014
+        dateFormat  YYYY-MM-DD
+        section #;Section
+        #;A task           :a1, 2014-01-01, 30d
+        #;Another task     :after a1  , 20d
+        section #;Another
+        Task in sec      :2014-01-12  , 12d
+        another task      : 24d
+    </pre>
+    <hr />
+
    <pre class="mermaid">
    gantt
      title Airworks roadmap
--- a/demos/index.html
+++ b/demos/index.html
@@ -84,6 +84,9 @@
      <li>
        <h2><a href="./packet.html">Packet</a></h2>
      </li>
+      <li>
+        <h2><a href="./block.html">Layered Blocks</a></h2>
+      </li>
    </ul>
  </body>
 </html>
--- a/demos/pie.html
+++ b/demos/pie.html
@@ -15,7 +15,7 @@
  <body>
    <h1>Pie chart demos</h1>
    <pre class="mermaid">
-      pie title Pets adopted by volunteers
+      pie title Default text position: Animal adoption
        accTitle: simple pie char demo
        accDescr: pie chart with 3 sections: dogs, cats, rats. Most are dogs.
        "Dogs": 386
@@ -27,7 +27,7 @@
    <pre class="mermaid">
      %%{init: {"pie": {"textPosition": 0.9}, "themeVariables": {"pieOuterStrokeWidth": "5px"}}}%%
      pie
-        title Key elements in Product X
+        title Offset labels close to border: Product X
        accTitle: Key elements in Product X
        accDescr: This is a pie chart showing the key elements in Product X.
        "Calcium": 42.96
@@ -36,6 +36,19 @@
        "Iron": 5
    </pre>

+    <pre class="mermaid">
+      %%{init: {"pie": {"textPosition": 0.45}, "themeVariables": {"pieOuterStrokeWidth": "5px"}}}%%
+      pie
+        title Centralized labels: Languages
+        accTitle: Key elements in Product X
+        accDescr: This is a pie chart showing the key elements in Product X.
+        "JavaScript": 30
+        "Python": 25
+        "Java": 20
+        "C#": 15
+        "Others": 10
+    </pre>
+
    <script type="module">
      import mermaid from '/mermaid.esm.mjs';
      mermaid.initialize({
--- a/demos/sequence.html
+++ b/demos/sequence.html
@@ -23,6 +23,10 @@
 			participant Alice
 			participant Bob
 			participant John as John<br />Second Line
+			link Alice: Dashboard @ https://dashboard.contoso.com/alice
+			link Alice: Wiki @ https://wiki.contoso.com/alice
+			link John: Dashboard @ https://dashboard.contoso.com/john
+			link John: Wiki @ https://wiki.contoso.com/john
 			autonumber 10 10
 			rect rgb(200, 220, 100)
 			rect rgb(200, 255, 200)
@@ -62,6 +66,26 @@
 	</pre>
    <hr />
    <pre class="mermaid">
+    ---
+    title: With forced menus
+    config:
+      sequence:
+        forceMenus: true
+    ---
+    sequenceDiagram
+      participant Alice
+      participant John
+      link Alice: Dashboard @ https://dashboard.contoso.com/alice
+      link Alice: Wiki @ https://wiki.contoso.com/alice
+      link John: Dashboard @ https://dashboard.contoso.com/john
+      link John: Wiki @ https://wiki.contoso.com/john
+      Alice->>John: Hello John, how are you?
+      John-->>Alice: Great!
+      Alice-)John: See you later!
+  </pre
+    >
+    <hr />
+    <pre class="mermaid">
    sequenceDiagram
      accTitle: Sequence diagram title is here
      accDescr: Hello friends