Merge branch 'develop' into origin/3258_Flowchart_nodeSpacing_Subgraph

.github/workflows/e2e-applitools.yml

@@ -28,7 +28,7 @@ jobs:
       - if: ${{ ! env.USE_APPLI }}
         name: Warn if not using Applitools
         run: |
-          echo "::error,title=Not using Applitols::APPLITOOLS_API_KEY is empty, disabling Applitools for this run."
+          echo "::error,title=Not using Applitools::APPLITOOLS_API_KEY is empty, disabling Applitools for this run."
 
       - uses: actions/checkout@v4
 

.github/workflows/release-draft.yml

@@ -3,7 +3,7 @@ name: Draft Release
 on:
   push:
     branches:
-      - develop
+      - master
 
 permissions:
   contents: read

cypress/integration/rendering/flowchart-v2.spec.js

@@ -886,93 +886,4 @@ end
       });
     });
   });
-  describe('Subgraph title margins', () => {
-    it('Should render subgraphs with title margins set (LR)', () => {
-      imgSnapshotTest(
-        `flowchart LR
-
-          subgraph TOP
-              direction TB
-              subgraph B1
-                  direction RL
-                  i1 -->f1
-              end
-              subgraph B2
-                  direction BT
-                  i2 -->f2
-              end
-          end
-          A --> TOP --> B
-          B1 --> B2
-        `,
-        { flowchart: { subGraphTitleMargin: { top: 10, bottom: 5 } } }
-      );
-    });
-    it('Should render subgraphs with title margins set (TD)', () => {
-      imgSnapshotTest(
-        `flowchart TD
-
-          subgraph TOP
-              direction LR
-              subgraph B1
-                  direction RL
-                  i1 -->f1
-              end
-              subgraph B2
-                  direction BT
-                  i2 -->f2
-              end
-          end
-          A --> TOP --> B
-          B1 --> B2
-        `,
-        { flowchart: { subGraphTitleMargin: { top: 8, bottom: 16 } } }
-      );
-    });
-    it('Should render subgraphs with title margins set (LR) and htmlLabels set to false', () => {
-      imgSnapshotTest(
-        `flowchart LR
-
-          subgraph TOP
-              direction TB
-              subgraph B1
-                  direction RL
-                  i1 -->f1
-              end
-              subgraph B2
-                  direction BT
-                  i2 -->f2
-              end
-          end
-          A --> TOP --> B
-          B1 --> B2
-        `,
-        {
-          htmlLabels: false,
-          flowchart: { htmlLabels: false, subGraphTitleMargin: { top: 10, bottom: 5 } },
-        }
-      );
-    });
-    it('Should render subgraphs with title margins and edge labels', () => {
-      imgSnapshotTest(
-        `flowchart LR
-
-          subgraph TOP
-              direction TB
-              subgraph B1
-                  direction RL
-                  i1 --lb1-->f1
-              end
-              subgraph B2
-                  direction BT
-                  i2 --lb2-->f2
-              end
-          end
-          A --lb3--> TOP --lb4--> B
-          B1 --lb5--> B2
-        `,
-        { flowchart: { subGraphTitleMargin: { top: 10, bottom: 5 } } }
-      );
-    });
-  });
 });

demos/sequence.html

@@ -164,13 +164,6 @@
       end
     </pre>
 
-    <pre class="mermaid">
-    sequenceDiagram
-      actor Alice
-      actor John
-      Alice-xJohn: Hello John, how are you?
-      John--xAlice: Great!
-    </pre>
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
       mermaid.initialize({

docs/syntax/classDiagram.md

@@ -459,9 +459,9 @@ The different cardinality options are :
 - `0..1` Zero or One
 - `1..*` One or more
 - `*` Many
-- `n` n {where n>1}
+- `n` n (where n>1)
-- `0..n` zero to n {where n>1}
+- `0..n` zero to n (where n>1)
-- `1..n` one to n {where n>1}
+- `1..n` one to n (where n>1)
 
 Cardinality can be easily defined by placing the text option within quotes `"` before or after a given arrow. For example:
 
@@ -766,7 +766,7 @@ Beginner's tip—a full example using interactive links in an HTML page:
 
 ## Styling
 
-### Styling a node (v\<MERMAID_RELEASE_VERSION>+)
+### Styling a node (v10.7.0+)
 
 It is possible to apply specific styles such as a thicker border or a different background color to an individual node using the `style` keyword.
 

docs/syntax/sequenceDiagram.md

@@ -137,7 +137,7 @@ If an error of the following type occurs when creating or deleting an actor/part
 
 > The destroyed participant **participant-name** does not have an associated destroying message after its declaration. Please check the sequence diagram.
 
-And fixing diagram code does not get rid of this error and rendering of all other diagrams results in the same error, then you need to update the mermaid version to (v\<MERMAID_RELEASE_VERSION>+).
+And fixing diagram code does not get rid of this error and rendering of all other diagrams results in the same error, then you need to update the mermaid version to (v10.7.0+).
 
 ### Grouping / Box
 

packages/mermaid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "10.6.1",
+  "version": "10.7.0",
   "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
   "module": "./dist/mermaid.core.mjs",

packages/mermaid/src/config.type.ts

@@ -1416,14 +1416,6 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig {
    * Margin top for the text over the diagram
    */
   titleTopMargin?: number;
-  /**
-   * Defines a top/bottom margin for subgraph titles
-   *
-   */
-  subGraphTitleMargin?: {
-    top?: number;
-    bottom?: number;
-  };
   arrowMarkerAbsolute?: boolean;
   /**
    * The amount of padding around the diagram as a whole so that embedded

packages/mermaid/src/dagre-wrapper/clusters.js

@@ -5,11 +5,9 @@ import { createText } from '../rendering-util/createText.js';
 import { select } from 'd3';
 import { getConfig } from '../diagram-api/diagramAPI.js';
 import { evaluate } from '../diagrams/common/common.js';
-import { getSubGraphTitleMargins } from '../utils/subGraphTitleMargins.js';
 
 const rect = (parent, node) => {
   log.info('Creating subgraph rect for ', node.id, node);
-  const siteConfig = getConfig();
 
   // Add outer g element
   const shapeSvg = parent
@@ -20,7 +18,7 @@ const rect = (parent, node) => {
   // add the rect
   const rect = shapeSvg.insert('rect', ':first-child');
 
-  const useHtmlLabels = evaluate(siteConfig.flowchart.htmlLabels);
+  const useHtmlLabels = evaluate(getConfig().flowchart.htmlLabels);
 
   // Create the label and insert it after the rect
   const label = shapeSvg.insert('g').attr('class', 'cluster-label');
@@ -36,7 +34,7 @@ const rect = (parent, node) => {
   // Get the size of the label
   let bbox = text.getBBox();
 
-  if (evaluate(siteConfig.flowchart.htmlLabels)) {
+  if (evaluate(getConfig().flowchart.htmlLabels)) {
     const div = text.children[0];
     const dv = select(text);
     bbox = div.getBoundingClientRect();
@@ -65,18 +63,17 @@ const rect = (parent, node) => {
     .attr('width', width)
     .attr('height', node.height + padding);
 
-  const { subGraphTitleTopMargin } = getSubGraphTitleMargins(siteConfig);
   if (useHtmlLabels) {
     label.attr(
       'transform',
       // This puts the labal on top of the box instead of inside it
-      `translate(${node.x - bbox.width / 2}, ${node.y - node.height / 2 + subGraphTitleTopMargin})`
+      'translate(' + (node.x - bbox.width / 2) + ', ' + (node.y - node.height / 2) + ')'
     );
   } else {
     label.attr(
       'transform',
       // This puts the labal on top of the box instead of inside it
-      `translate(${node.x}, ${node.y - node.height / 2 + subGraphTitleTopMargin})`
+      'translate(' + node.x + ', ' + (node.y - node.height / 2) + ')'
     );
   }
   // Center the label
@@ -130,8 +127,6 @@ const noteGroup = (parent, node) => {
   return shapeSvg;
 };
 const roundedWithTitle = (parent, node) => {
-  const siteConfig = getConfig();
-
   // Add outer g element
   const shapeSvg = parent.insert('g').attr('class', node.classes).attr('id', node.id);
 
@@ -148,7 +143,7 @@ const roundedWithTitle = (parent, node) => {
 
   // Get the size of the label
   let bbox = text.getBBox();
-  if (evaluate(siteConfig.flowchart.htmlLabels)) {
+  if (evaluate(getConfig().flowchart.htmlLabels)) {
     const div = text.children[0];
     const dv = select(text);
     bbox = div.getBoundingClientRect();
@@ -180,7 +175,6 @@ const roundedWithTitle = (parent, node) => {
     .attr('width', width + padding)
     .attr('height', node.height + padding - bbox.height - 3);
 
-  const { subGraphTitleTopMargin } = getSubGraphTitleMargins(siteConfig);
   // Center the label
   label.attr(
     'transform',
@@ -190,8 +184,7 @@ const roundedWithTitle = (parent, node) => {
       (node.y -
         node.height / 2 -
         node.padding / 3 +
-        (evaluate(siteConfig.flowchart.htmlLabels) ? 5 : 3)) +
+        (evaluate(getConfig().flowchart.htmlLabels) ? 5 : 3)) +
-      subGraphTitleTopMargin +
       ')'
   );
 

packages/mermaid/src/dagre-wrapper/edges.js

@@ -6,7 +6,6 @@ import { getConfig } from '../diagram-api/diagramAPI.js';
 import utils from '../utils.js';
 import { evaluate } from '../diagrams/common/common.js';
 import { getLineFunctionsWithOffset } from '../utils/lineWithOffset.js';
-import { getSubGraphTitleMargins } from '../utils/subGraphTitleMargins.js';
 import { addEdgeMarkers } from './edgeMarker.js';
 
 let edgeLabels = {};
@@ -137,8 +136,6 @@ function setTerminalWidth(fo, value) {
 export const positionEdgeLabel = (edge, paths) => {
   log.info('Moving label abc78 ', edge.id, edge.label, edgeLabels[edge.id]);
   let path = paths.updatedPath ? paths.updatedPath : paths.originalPath;
-  const siteConfig = getConfig();
-  const { subGraphTitleTotalMargin } = getSubGraphTitleMargins(siteConfig);
   if (edge.label) {
     const el = edgeLabels[edge.id];
     let x = edge.x;
@@ -162,7 +159,7 @@ export const positionEdgeLabel = (edge, paths) => {
         y = pos.y;
       }
     }
-    el.attr('transform', `translate(${x}, ${y + subGraphTitleTotalMargin / 2})`);
+    el.attr('transform', 'translate(' + x + ', ' + y + ')');
   }
 
   //let path = paths.updatedPath ? paths.updatedPath : paths.originalPath;
@@ -176,7 +173,7 @@ export const positionEdgeLabel = (edge, paths) => {
       x = pos.x;
       y = pos.y;
     }
-    el.attr('transform', `translate(${x}, ${y})`);
+    el.attr('transform', 'translate(' + x + ', ' + y + ')');
   }
   if (edge.startLabelRight) {
     const el = terminalLabels[edge.id].startRight;
@@ -192,7 +189,7 @@ export const positionEdgeLabel = (edge, paths) => {
       x = pos.x;
       y = pos.y;
     }
-    el.attr('transform', `translate(${x}, ${y})`);
+    el.attr('transform', 'translate(' + x + ', ' + y + ')');
   }
   if (edge.endLabelLeft) {
     const el = terminalLabels[edge.id].endLeft;
@@ -204,7 +201,7 @@ export const positionEdgeLabel = (edge, paths) => {
       x = pos.x;
       y = pos.y;
     }
-    el.attr('transform', `translate(${x}, ${y})`);
+    el.attr('transform', 'translate(' + x + ', ' + y + ')');
   }
   if (edge.endLabelRight) {
     const el = terminalLabels[edge.id].endRight;
@@ -216,7 +213,7 @@ export const positionEdgeLabel = (edge, paths) => {
       x = pos.x;
       y = pos.y;
     }
-    el.attr('transform', `translate(${x}, ${y})`);
+    el.attr('transform', 'translate(' + x + ', ' + y + ')');
   }
 };
 

packages/mermaid/src/dagre-wrapper/index.js

@@ -13,10 +13,8 @@ import { insertNode, positionNode, clear as clearNodes, setNodeElem } from './no
 import { insertCluster, clear as clearClusters } from './clusters.js';
 import { insertEdgeLabel, positionEdgeLabel, insertEdge, clear as clearEdges } from './edges.js';
 import { log } from '../logger.js';
-import { getSubGraphTitleMargins } from '../utils/subGraphTitleMargins.js';
-import { getConfig } from '../diagram-api/diagramAPI.js';
 
-const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster, siteConfig) => {
+const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster) => {
   log.info('Graph in recursive render: XXX', graphlibJson.write(graph), parentCluster);
   const dir = graph.graph().rankdir;
   log.trace('Dir in recursive render - dir:', dir);
@@ -56,14 +54,7 @@ const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster, sit
         log.info('Cluster identified', v, node.width, graph.node(v));
         // node.graph.setGraph applies the graph configurations such as nodeSpacing to subgraphs as without this the default values would be used
         node.graph.setGraph(graph.graph());
-        const o = await recursiveRender(
+        const o = await recursiveRender(nodes, node.graph, diagramtype, id, graph.node(v));
-          nodes,
-          node.graph,
-          diagramtype,
-          id,
-          graph.node(v),
-          siteConfig
-        );
         const newEl = o.elem;
         updateNodeBounds(node, newEl);
         node.diff = o.diff || 0;
@@ -112,7 +103,6 @@ const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster, sit
   log.info('Graph after layout:', graphlibJson.write(graph));
   // Move the nodes to the correct place
   let diff = 0;
-  const { subGraphTitleTotalMargin } = getSubGraphTitleMargins(siteConfig);
   sortNodesByHierarchy(graph).forEach(function (v) {
     const node = graph.node(v);
     log.info('Position ' + v + ': ' + JSON.stringify(graph.node(v)));
@@ -126,18 +116,16 @@ const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster, sit
     );
     if (node && node.clusterNode) {
       // clusterDb[node.id].node = node;
-      node.y += subGraphTitleTotalMargin;
+
       positionNode(node);
     } else {
       // Non cluster node
       if (graph.children(v).length > 0) {
         // A cluster in the non-recursive way
         // positionCluster(node);
-        node.height += subGraphTitleTotalMargin;
         insertCluster(clusters, node);
         clusterDb[node.id].node = node;
       } else {
-        node.y += subGraphTitleTotalMargin / 2;
         positionNode(node);
       }
     }
@@ -148,7 +136,6 @@ const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster, sit
     const edge = graph.edge(e);
     log.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(edge), edge);
 
-    edge.points.forEach((point) => (point.y += subGraphTitleTotalMargin / 2));
     const paths = insertEdge(edgePaths, e, edge, clusterDb, diagramtype, graph, id);
     positionEdgeLabel(edge, paths);
   });
@@ -174,8 +161,7 @@ export const render = async (elem, graph, markers, diagramtype, id) => {
   adjustClustersAndEdges(graph);
   log.warn('Graph after:', JSON.stringify(graphlibJson.write(graph)));
   // log.warn('Graph ever  after:', graphlibJson.write(graph.node('A').graph));
-  const siteConfig = getConfig();
+  await recursiveRender(elem, graph, diagramtype, id);
-  await recursiveRender(elem, graph, diagramtype, id, undefined, siteConfig);
 };
 
 // const shapeDefinitions = {};

packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts

@@ -829,11 +829,6 @@ export const draw = function (_text: string, id: string, _version: string, diagO
     bounds.insert(activationData.startx, verticalPos - 10, activationData.stopx, verticalPos);
   }
 
-  log.debug('createdActors', createdActors);
-  log.debug('destroyedActors', destroyedActors);
-
-  drawActors(diagram, actors, actorKeys, false);
-
   // Draw the messages/signals
   let sequenceIndex = 1;
   let sequenceIndexStep = 1;
@@ -1033,12 +1028,14 @@ export const draw = function (_text: string, id: string, _version: string, diagO
     }
   });
 
-  messagesToDraw.forEach((e) => drawMessage(diagram, e.messageModel, e.lineStartY, diagObj));
+  log.debug('createdActors', createdActors);
+  log.debug('destroyedActors', destroyedActors);
 
+  drawActors(diagram, actors, actorKeys, false);
+  messagesToDraw.forEach((e) => drawMessage(diagram, e.messageModel, e.lineStartY, diagObj));
   if (conf.mirrorActors) {
     drawActors(diagram, actors, actorKeys, true);
   }
-
   backgrounds.forEach((e) => svgDraw.drawBackgroundRect(diagram, e));
   fixLifeLineHeights(diagram, actors, actorKeys, conf);
 

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

@@ -324,7 +324,7 @@ const drawActorTypeParticipant = function (elem, actor, conf, isFooter) {
   const center = actor.x + actor.width / 2;
   const centerY = actorY + 5;
 
-  const boxpluslineGroup = elem.append('g');
+  const boxpluslineGroup = elem.append('g').lower();
   var g = boxpluslineGroup;
 
   if (!isFooter) {

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

@@ -4,14 +4,22 @@
   >
     <p class="flex-grow text-center tracking-wide text-text">
       <a
-        href="https://www.mermaidchart.com/app/user/billing/checkout?coupon=HOLIDAYS2023"
+        href="https://www.mermaidchart.com/app/user/billing/checkout"
         target="_blank"
-        class="unstyled text-white plausible-event-name=bannerClick"
+        class="unstyled flex-grow tracking-wide plausible-event-name=bannerClick"
       >
-        Get AI, team collaboration, storage, and more with
+        <span class="text-primary-50 font-semibold">{{
-        <span class="font-bold underline"
+          [
-          >Mermaid Chart Pro. Start free trial today & get 25% off.</span
+            'Try diagramming with ChatGPT at Mermaid Chart',
+            'Try Mermaid’s Visual Editor at Mermaid Chart',
+            'Enjoy live collaboration with teammates at Mermaid Chart',
+          ][Math.floor(Math.random() * 3)]
+        }}</span>
+        <button
+          class="ml-4 rounded bg-[#111113] p-1 px-2 text-sm font-semibold tracking-wide text-white"
         >
+          Try it now
+        </button>
       </a>
     </p>
   </div>

packages/mermaid/src/docs/syntax/classDiagram.md

@@ -304,9 +304,9 @@ The different cardinality options are :
 - `0..1` Zero or One
 - `1..*` One or more
 - `*` Many
-- `n` n {where n>1}
+- `n` n (where n>1)
-- `0..n` zero to n {where n>1}
+- `0..n` zero to n (where n>1)
-- `1..n` one to n {where n>1}
+- `1..n` one to n (where n>1)
 
 Cardinality can be easily defined by placing the text option within quotes `"` before or after a given arrow. For example:
 
@@ -518,7 +518,7 @@ Beginner's tip—a full example using interactive links in an HTML page:
 
 ## Styling
 
-### Styling a node (v<MERMAID_RELEASE_VERSION>+)
+### Styling a node (v10.7.0+)
 
 It is possible to apply specific styles such as a thicker border or a different background color to an individual node using the `style` keyword.
 

packages/mermaid/src/docs/syntax/sequenceDiagram.md

@@ -89,7 +89,7 @@ If an error of the following type occurs when creating or deleting an actor/part
 
 > The destroyed participant **participant-name** does not have an associated destroying message after its declaration. Please check the sequence diagram.
 
-And fixing diagram code does not get rid of this error and rendering of all other diagrams results in the same error, then you need to update the mermaid version to (v<MERMAID_RELEASE_VERSION>+).
+And fixing diagram code does not get rid of this error and rendering of all other diagrams results in the same error, then you need to update the mermaid version to (v10.7.0+).
 
 ### Grouping / Box
 

packages/mermaid/src/schemas/config.schema.yaml

@@ -1869,7 +1869,6 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file)
     unevaluatedProperties: false
     required:
       - titleTopMargin
-      - subGraphTitleMargin
       - diagramPadding
       - htmlLabels
       - nodeSpacing
@@ -1882,20 +1881,6 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file)
       titleTopMargin:
         $ref: '#/$defs/GitGraphDiagramConfig/properties/titleTopMargin'
         default: 25
-      subGraphTitleMargin:
-        description: |
-          Defines a top/bottom margin for subgraph titles
-        type: object
-        properties:
-          top:
-            type: integer
-            minimum: 0
-          bottom:
-            type: integer
-            minimum: 0
-        default:
-          top: 0
-          bottom: 0
       arrowMarkerAbsolute:
         type: boolean # TODO, is this actually used here (it has no default value but was in types)
       diagramPadding:

packages/mermaid/src/utils/subGraphTitleMargins.spec.ts

@@ -1,22 +0,0 @@
-import { getSubGraphTitleMargins } from './subGraphTitleMargins.js';
-import * as configApi from '../config.js';
-
-describe('getSubGraphTitleMargins', () => {
-  it('should get subgraph title margins after config has been set', () => {
-    const config_0 = {
-      flowchart: {
-        subGraphTitleMargin: {
-          top: 10,
-          bottom: 5,
-        },
-      },
-    };
-
-    configApi.setSiteConfig(config_0);
-    expect(getSubGraphTitleMargins(config_0)).toEqual({
-      subGraphTitleTopMargin: 10,
-      subGraphTitleBottomMargin: 5,
-      subGraphTitleTotalMargin: 15,
-    });
-  });
-});

packages/mermaid/src/utils/subGraphTitleMargins.ts

@@ -1,21 +0,0 @@
-import type { FlowchartDiagramConfig } from '../config.type.js';
-
-export const getSubGraphTitleMargins = ({
-  flowchart,
-}: {
-  flowchart: FlowchartDiagramConfig;
-}): {
-  subGraphTitleTopMargin: number;
-  subGraphTitleBottomMargin: number;
-  subGraphTitleTotalMargin: number;
-} => {
-  const subGraphTitleTopMargin = flowchart?.subGraphTitleMargin?.top ?? 0;
-  const subGraphTitleBottomMargin = flowchart?.subGraphTitleMargin?.bottom ?? 0;
-  const subGraphTitleTotalMargin = subGraphTitleTopMargin + subGraphTitleBottomMargin;
-
-  return {
-    subGraphTitleTopMargin,
-    subGraphTitleBottomMargin,
-    subGraphTitleTotalMargin,
-  };
-};