Merge from upstream new-shapes branch

.changeset/dry-plums-glow.md

@@ -1,5 +1,5 @@
 ---
-'mermaid': minor
+'mermaid': patch
 ---
 
 Fix for issue with calculation of label width when using in firefox

.changeset/slow-goats-act.md

@@ -1,5 +0,0 @@
----
-'@mermaid-js/layout-elk': patch
----
-
-chore: fix render types

docs/adding-new-shape/Readme.md

@@ -2,7 +2,7 @@
 >
 > ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
 >
-> ## Please edit the corresponding file in [/packages/mermaid/src/docs/adding_new_shape/Readme.md](../../packages/mermaid/src/docs/adding_new_shape/Readme.md).
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/adding-new-shape/Readme.md](../../packages/mermaid/src/docs/adding-new-shape/Readme.md).
 
 # Custom SVG Shapes Library
 
@@ -101,9 +101,13 @@ To add a new shape:
 - **Example**:
 
   ```typescript
-  import { Node } from '../../types.d.ts';
+  import { Node, RenderOptions } from '../../types.d.ts';
 
-  export const myNewShape = async (parent: SVGAElement, node: Node) => {
+  export const myNewShape = async (
+    parent: SVGAElement,
+    node: Node,
+    renderOptions: RenderOptions
+  ) => {
     // Create your shape here
     const shape = parent.insert('g').attr('class', 'my-new-shape');
     // Add other elements or styles as needed
@@ -209,7 +213,7 @@ To run the Cypress tests, follow these steps:
 1. Ensure you have all dependencies installed by running:
 
    ```bash
-   npm install
+   pnpm install
    ```
 
 2. Start the Cypress test runner:

packages/mermaid-layout-elk/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @mermaid-js/layout-elk
 
+## 0.1.4
+
+### Patch Changes
+
+- [#5847](https://github.com/mermaid-js/mermaid/pull/5847) [`dd03043`](https://github.com/mermaid-js/mermaid/commit/dd0304387e85fc57a9ebb666f89ef788c012c2c5) Thanks [@sidharthv96](https://github.com/sidharthv96)! - chore: fix render types
+
 ## 0.1.3
 
 ### Patch Changes

packages/mermaid-layout-elk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mermaid-chart/layout-elk",
-  "version": "0.1.3-b.1",
+  "version": "0.1.4-b.1",
   "description": "ELK layout engine for mermaid",
   "module": "dist/mermaid-layout-elk.core.mjs",
   "types": "dist/layouts.d.ts",

packages/mermaid/src/diagrams/sequence/svgDraw.js

@@ -329,6 +329,7 @@ export const fixLifeLineHeights = (diagram, actors, actorKeys, conf) => {
 const drawActorTypeParticipant = function (elem, actor, conf, isFooter) {
   const actorY = isFooter ? actor.stopy : actor.starty;
   const center = actor.x + actor.width / 2;
+  const centerY = actorY + actor.height;
 
   const boxplusLineGroup = elem.append('g').lower();
   var g = boxplusLineGroup;
@@ -340,10 +341,8 @@ const drawActorTypeParticipant = function (elem, actor, conf, isFooter) {
     }
     g.append('line')
       .attr('id', 'actor' + actorCnt)
-      .attr('data-et', 'life-line')
-      .attr('data-id', actor.name)
       .attr('x1', center)
-      .attr('y1', actor.starty || 0 + actor.height)
+      .attr('y1', centerY)
       .attr('x2', center)
       .attr('y2', 2000)
       .attr('class', 'actor-line 200')
@@ -391,11 +390,6 @@ const drawActorTypeParticipant = function (elem, actor, conf, isFooter) {
     }
   }
 
-  if (!isFooter) {
-    g.attr('data-et', 'participant');
-    g.attr('data-id', actor.name);
-  }
-
   _drawTextCandidateFunc(conf, hasKatex(actor.description))(
     actor.description,
     g,
@@ -433,8 +427,6 @@ const drawActorTypeActor = function (elem, actor, conf, isFooter) {
       .attr('y1', centerY)
       .attr('x2', center)
       .attr('y2', 2000)
-      .attr('data-et', 'life-line')
-      .attr('data-id', actor.name)
       .attr('class', 'actor-line 200')
       .attr('stroke-width', '0.5px')
       .attr('stroke', '#999')
@@ -452,10 +444,6 @@ const drawActorTypeActor = function (elem, actor, conf, isFooter) {
   actElem.attr('class', cssClass);
   actElem.attr('name', actor.name);
 
-  if (!isFooter) {
-    actElem.attr('data-et', 'participant').attr('data-id', actor.name);
-  }
-
   const rect = svgDrawCommon.getNoteRect();
   rect.x = actor.x;
   rect.y = actorY;
@@ -577,10 +565,9 @@ export const drawActivation = function (elem, bounds, verticalPos, conf, actorAc
  * @param {any} loopModel - LoopModel of the given loop.
  * @param {any} labelText - Text within the loop.
  * @param {any} conf - Diagram configuration
- * @param msg
  * @returns {any}
  */
-export const drawLoop = async function (elem, loopModel, labelText, conf, msg) {
+export const drawLoop = async function (elem, loopModel, labelText, conf) {
   const {
     boxMargin,
     boxTextMargin,
@@ -590,11 +577,7 @@ export const drawLoop = async function (elem, loopModel, labelText, conf, msg) {
     messageFontSize: fontSize,
     messageFontWeight: fontWeight,
   } = conf;
-  const g = elem
-    .append('g')
-    .attr('data-et', 'control-structure')
-    .attr('data-id', 'i' + msg.id);
-
+  const g = elem.append('g');
   const drawLoopLine = function (startx, starty, stopx, stopy) {
     return g
       .append('line')

packages/mermaid/src/docs/.vitepress/components/ProductHuntBadge.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="-mt-6 mb-8">
     <a
-      href="https://www.producthunt.com/posts/mermaid-ai-2?embed=true&utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid&#0045;ai&#0045;2"
+      href="https://www.producthunt.com/products/mermaid-chart?utm_source=badge-follow&utm_medium=badge&utm_souce=badge-mermaid&#0045;chart"
       target="_blank"
       ><img
-        src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=465568&theme=light"
-        alt="Mermaid&#0032;AI - Maximize&#0032;your&#0032;diagramming&#0032;efficiency&#0032;with&#0032;Mermaid&#0032;AI | Product Hunt"
+        src="https://api.producthunt.com/widgets/embed-image/v1/follow.svg?product_id=552855&theme=light"
+        alt="Mermaid&#0032;Chart - A&#0032;smarter&#0032;way&#0032;to&#0032;create&#0032;diagrams | Product Hunt"
         style="width: 250px; height: 54px"
         width="250"
         height="54"

packages/mermaid/src/docs/.vitepress/theme/index.ts

@@ -9,6 +9,8 @@ import Contributors from '../components/Contributors.vue';
 import HomePage from '../components/HomePage.vue';
 // @ts-ignore Type not available
 import TopBar from '../components/TopBar.vue';
+// @ts-ignore Type not available
+import ProductHuntBadge from '../components/ProductHuntBadge.vue';
 import { getRedirect } from './redirect.js';
 // @ts-ignore Type not available
 import 'uno.css';
@@ -23,6 +25,7 @@ export default {
     return h(Theme.Layout, null, {
       // Keeping this as comment as it took a lot of time to figure out how to add a component to the top bar.
       'home-hero-before': () => h(TopBar),
+      'home-hero-info-before': () => h(ProductHuntBadge),
       'home-features-after': () => h(HomePage),
       'doc-before': () => h(TopBar),
     });

packages/mermaid/src/docs/adding-new-shape/Readme.md

@@ -95,9 +95,13 @@ To add a new shape:
 - **Example**:
 
   ```typescript
-  import { Node } from '../../types.d.ts';
+  import { Node, RenderOptions } from '../../types.d.ts';
 
-  export const myNewShape = async (parent: SVGAElement, node: Node) => {
+  export const myNewShape = async (
+    parent: SVGAElement,
+    node: Node,
+    renderOptions: RenderOptions
+  ) => {
     // Create your shape here
     const shape = parent.insert('g').attr('class', 'my-new-shape');
     // Add other elements or styles as needed
@@ -202,7 +206,7 @@ To run the Cypress tests, follow these steps:
 
 1. Ensure you have all dependencies installed by running:
    ```bash
-   npm install
+   pnpm install
    ```
 2. Start the Cypress test runner: