Merge branch 'develop' of github.com:mermaid-js/mermaid into release/10.7.0

* 'develop' of github.com:mermaid-js/mermaid: Revert "fix: render the participants in same order as they are created" Revert "Feature/4935 subgraph title margin config option" Update integrations-community.md (Add Codemia to the list of productivity tools using Mermaid.)
2025-08-15 06:19:24 +02:00 · 2024-01-15 13:55:04 +05:30
parent b3fa9167a0 7508d9adc5
commit 54307bb0f4
14 changed files with 23 additions and 209 deletions
--- a/cSpell.json
+++ b/cSpell.json
@@ -26,6 +26,7 @@
    "città",
    "classdef",
    "codedoc",
+    "codemia",
    "colour",
    "commitlint",
    "cpettitt",
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/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 } } }
-      );
-    });
-  });
 });
--- a/demos/sequence.html
+++ b/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({
--- a/docs/ecosystem/integrations-community.md
+++ b/docs/ecosystem/integrations-community.md
@@ -70,6 +70,7 @@ To add an integration to this list, see the [Integrations - create page](./integ
 - [Mermaid Plugin for JetBrains IDEs](https://plugins.jetbrains.com/plugin/20146-mermaid)
 - [mermerd](https://github.com/KarnerTh/mermerd)
 - Visual Studio Code [Polyglot Interactive Notebooks](https://github.com/dotnet/interactive#net-interactive)
+- Codemia [a tool to practice system design problems](https://codemia.io)

 ### CRM/ERP

--- a/packages/mermaid/src/config.type.ts
+++ b/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
--- a/packages/mermaid/src/dagre-wrapper/clusters.js
+++ b/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)) +
-      subGraphTitleTopMargin +
+        (evaluate(getConfig().flowchart.htmlLabels) ? 5 : 3)) +
      ')'
  );

--- a/packages/mermaid/src/dagre-wrapper/edges.js
+++ b/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 + ')');
  }
 };

--- a/packages/mermaid/src/dagre-wrapper/index.js
+++ b/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);
@@ -54,14 +52,7 @@ const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster, sit
      if (node && node.clusterNode) {
        // const children = graph.children(v);
        log.info('Cluster identified', v, node.width, graph.node(v));
-        const o = await recursiveRender(
-          nodes,
-          node.graph,
-          diagramtype,
-          id,
-          graph.node(v),
-          siteConfig
-        );
+        const o = await recursiveRender(nodes, node.graph, diagramtype, id, graph.node(v));
        const newEl = o.elem;
        updateNodeBounds(node, newEl);
        node.diff = o.diff || 0;
@@ -110,7 +101,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)));
@@ -124,18 +114,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);
      }
    }
@@ -146,7 +134,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);
  });
@@ -172,8 +159,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, undefined, siteConfig);
+  await recursiveRender(elem, graph, diagramtype, id);
 };

 // const shapeDefinitions = {};
--- a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
+++ b/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);

--- a/packages/mermaid/src/diagrams/sequence/svgDraw.js
+++ b/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) {
--- a/packages/mermaid/src/docs/ecosystem/integrations-community.md
+++ b/packages/mermaid/src/docs/ecosystem/integrations-community.md
@@ -69,6 +69,7 @@ To add an integration to this list, see the [Integrations - create page](./integ
 - [Mermaid Plugin for JetBrains IDEs](https://plugins.jetbrains.com/plugin/20146-mermaid)
 - [mermerd](https://github.com/KarnerTh/mermerd)
 - Visual Studio Code [Polyglot Interactive Notebooks](https://github.com/dotnet/interactive#net-interactive)
+- Codemia [a tool to practice system design problems](https://codemia.io)

 ### CRM/ERP

--- a/packages/mermaid/src/schemas/config.schema.yaml
+++ b/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:
--- a/packages/mermaid/src/utils/subGraphTitleMargins.spec.ts
+++ b/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,
-    });
-  });
-});
--- a/packages/mermaid/src/utils/subGraphTitleMargins.ts
+++ b/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,
-  };
-};