Merge branch 'develop' into bug/#4497_unable-to-cherrypick-merge-commit

.vite/build.ts

@@ -117,6 +117,9 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
         output,
       },
     },
+    define: {
+      'import.meta.vitest': 'undefined',
+    },
     resolve: {
       extensions: [],
     },

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

@@ -729,6 +729,18 @@ A ~~~ B
       {}
     );
   });
+
+  it('5064: Should render when subgraph child has links to outside node and subgraph', () => {
+    imgSnapshotTest(
+      `flowchart TB
+    Out --> In
+    subgraph Sub
+      In
+    end
+    Sub --> In`
+    );
+  });
+
   describe('Markdown strings flowchart (#4220)', () => {
     describe('html labels', () => {
       it('With styling and classes', () => {
@@ -874,4 +886,93 @@ 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 } } }
+      );
+    });
+  });
 });

cypress/integration/rendering/pie.spec.ts

@@ -44,7 +44,7 @@ describe('pie chart', () => {
       const style = svg.attr('style');
       expect(style).to.match(/^max-width: [\d.]+px;$/);
       const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
-      expect(maxWidthValue).to.eq(984);
+      expect(maxWidthValue).to.be.within(590, 600); // depends on installed fonts: 596.2 on my PC, 597.5 on CI
     });
   });
 
@@ -59,7 +59,7 @@ describe('pie chart', () => {
     );
     cy.get('svg').should((svg) => {
       const width = parseFloat(svg.attr('width'));
-      expect(width).to.eq(984);
+      expect(width).to.be.within(590, 600); // depends on installed fonts: 596.2 on my PC, 597.5 on CI
       expect(svg).to.not.have.attr('style');
     });
   });

docs/config/setup/modules/mermaidAPI.md

@@ -96,7 +96,7 @@ mermaid.initialize(config);
 
 #### Defined in
 
-[mermaidAPI.ts:603](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L603)
+[mermaidAPI.ts:608](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L608)
 
 ## Functions
 

docs/ecosystem/integrations-community.md

@@ -111,6 +111,8 @@ Communication tools and platforms
 
 ### Wikis
 
+- [PmWiki](https://www.pmwiki.org)
+  - [MermaidJs Cookbook recipe](https://www.pmwiki.org/wiki/Cookbook/MermaidJs)
 - [MediaWiki](https://www.mediawiki.org)
   - [Mermaid Extension](https://www.mediawiki.org/wiki/Extension:Mermaid)
   - [Flex Diagrams Extension](https://www.mediawiki.org/wiki/Extension:Flex_Diagrams)
@@ -179,7 +181,7 @@ Communication tools and platforms
 ### Document Generation
 
 - [Docusaurus](https://docusaurus.io/docs/markdown-features/diagrams) ✅
-- [Swimm - Up-to-date diagrams with Swimm, the knowledge management tool for code](https://docs.swimm.io/Features/diagrams-and-charts)
+- [Swimm - Up-to-date diagrams with Swimm, the knowledge management tool for code](https://docs.swimm.io/features/diagrams-and-charts/#mermaid--swimm--up-to-date-diagrams-)
 - [Sphinx](https://www.sphinx-doc.org/en/master/)
   - [sphinxcontrib-mermaid](https://github.com/mgaitan/sphinxcontrib-mermaid)
 - [remark](https://remark.js.org/)

docs/news/announcements.md

@@ -6,18 +6,10 @@
 
 # Announcements
 
-<br />
+Check out our latest blog posts below. See more blog posts [here](blog.md).
 
-<a href="https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&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=416671&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" /></a>
+## [5 Reasons You Should Be Using Mermaid Chart As Your Diagram Generator](https://www.mermaidchart.com/blog/posts/5-reasons-you-should-be-using-mermaid-chart-as-your-diagram-generator/)
 
-## Calling all fans of Mermaid and Mermaid Chart! 🎉
+14 November 2023 · 5 mins
 
-We’ve officially made our Product Hunt debut, and would love any and all support from the community!
-
-[Click here](https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid-chart) to check out our Product Hunt launch.
-
-Feel free to drop us a comment and let us know what you think. All new sign ups will receive a 30-day free trial of our Pro subscription, plus 25% off your first year.
-
-We’re on a mission to make text-based diagramming fun again. And we need your help to make that happen.
-
-Your support means the world to us. Thank you for being part of the diagramming movement.
+Mermaid Chart, a user-friendly, code-based diagram generator with AI integrations, templates, collaborative tools, and plugins for developers, streamlines the process of creating and sharing diagrams, enhancing both creativity and collaboration.

docs/news/blog.md

@@ -6,6 +6,24 @@
 
 # Blog
 
+## [5 Reasons You Should Be Using Mermaid Chart As Your Diagram Generator](https://www.mermaidchart.com/blog/posts/5-reasons-you-should-be-using-mermaid-chart-as-your-diagram-generator/)
+
+14 November 2023 · 5 mins
+
+Mermaid Chart, a user-friendly, code-based diagram generator with AI integrations, templates, collaborative tools, and plugins for developers, streamlines the process of creating and sharing diagrams, enhancing both creativity and collaboration.
+
+## [How to Use Mermaid Chart as an AI Diagram Generator](https://www.mermaidchart.com/blog/posts/how-to-use-mermaid-chart-as-an-ai-diagram-generator/)
+
+1 November 2023 · 5 mins
+
+Would an AI diagram generator make your life easier?
+
+## [Diagrams, Made Even Easier: Introducing “Code Snippets” in the Mermaid Chart Editor](https://www.mermaidchart.com/blog/posts/easier-diagram-editing-with-code-snippets/)
+
+12 October 2023 · 4 mins
+
+Mermaid Chart introduces Code Snippets in its editor, streamlining the diagramming process for developers and professionals.
+
 ## [How to Make a Git Graph with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-make-a-git-graph-with-mermaid-chart/)
 
 22 September 2023 · 7 mins

package.json

@@ -4,7 +4,7 @@
   "version": "10.2.4",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
-  "packageManager": "pnpm@8.10.4",
+  "packageManager": "pnpm@8.11.0",
   "keywords": [
     "diagram",
     "markdown",

packages/mermaid/src/config.type.ts

@@ -1411,6 +1411,14 @@ 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,9 +5,11 @@ 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
@@ -18,7 +20,7 @@ const rect = (parent, node) => {
   // add the rect
   const rect = shapeSvg.insert('rect', ':first-child');
 
-  const useHtmlLabels = evaluate(getConfig().flowchart.htmlLabels);
+  const useHtmlLabels = evaluate(siteConfig.flowchart.htmlLabels);
 
   // Create the label and insert it after the rect
   const label = shapeSvg.insert('g').attr('class', 'cluster-label');
@@ -34,7 +36,7 @@ const rect = (parent, node) => {
   // Get the size of the label
   let bbox = text.getBBox();
 
-  if (evaluate(getConfig().flowchart.htmlLabels)) {
+  if (evaluate(siteConfig.flowchart.htmlLabels)) {
     const div = text.children[0];
     const dv = select(text);
     bbox = div.getBoundingClientRect();
@@ -63,17 +65,18 @@ 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) + ')'
+      `translate(${node.x - bbox.width / 2}, ${node.y - node.height / 2 + subGraphTitleTopMargin})`
     );
   } 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) + ')'
+      `translate(${node.x}, ${node.y - node.height / 2 + subGraphTitleTopMargin})`
     );
   }
   // Center the label
@@ -127,6 +130,8 @@ 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);
 
@@ -143,7 +148,7 @@ const roundedWithTitle = (parent, node) => {
 
   // Get the size of the label
   let bbox = text.getBBox();
-  if (evaluate(getConfig().flowchart.htmlLabels)) {
+  if (evaluate(siteConfig.flowchart.htmlLabels)) {
     const div = text.children[0];
     const dv = select(text);
     bbox = div.getBoundingClientRect();
@@ -175,6 +180,7 @@ 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',
@@ -184,7 +190,8 @@ const roundedWithTitle = (parent, node) => {
       (node.y -
         node.height / 2 -
         node.padding / 3 +
-        (evaluate(getConfig().flowchart.htmlLabels) ? 5 : 3)) +
+        (evaluate(siteConfig.flowchart.htmlLabels) ? 5 : 3)) +
+      subGraphTitleTopMargin +
       ')'
   );
 

packages/mermaid/src/dagre-wrapper/edgeMarker.spec.ts

@@ -0,0 +1,79 @@
+import type { Mocked } from 'vitest';
+import type { SVG } from '../diagram-api/types.js';
+import { addEdgeMarkers } from './edgeMarker.js';
+
+describe('addEdgeMarker', () => {
+  const svgPath = {
+    attr: vitest.fn(),
+  } as unknown as Mocked<SVG>;
+  const url = 'http://example.com';
+  const id = 'test';
+  const diagramType = 'test';
+
+  beforeEach(() => {
+    svgPath.attr.mockReset();
+  });
+
+  it('should add markers for arrow_cross:arrow_point', () => {
+    const arrowTypeStart = 'arrow_cross';
+    const arrowTypeEnd = 'arrow_point';
+    addEdgeMarkers(svgPath, { arrowTypeStart, arrowTypeEnd }, url, id, diagramType);
+    expect(svgPath.attr).toHaveBeenCalledWith(
+      'marker-start',
+      `url(${url}#${id}_${diagramType}-crossStart)`
+    );
+    expect(svgPath.attr).toHaveBeenCalledWith(
+      'marker-end',
+      `url(${url}#${id}_${diagramType}-pointEnd)`
+    );
+  });
+
+  it('should add markers for aggregation:arrow_point', () => {
+    const arrowTypeStart = 'aggregation';
+    const arrowTypeEnd = 'arrow_point';
+    addEdgeMarkers(svgPath, { arrowTypeStart, arrowTypeEnd }, url, id, diagramType);
+    expect(svgPath.attr).toHaveBeenCalledWith(
+      'marker-start',
+      `url(${url}#${id}_${diagramType}-aggregationStart)`
+    );
+    expect(svgPath.attr).toHaveBeenCalledWith(
+      'marker-end',
+      `url(${url}#${id}_${diagramType}-pointEnd)`
+    );
+  });
+
+  it('should add markers for arrow_point:aggregation', () => {
+    const arrowTypeStart = 'arrow_point';
+    const arrowTypeEnd = 'aggregation';
+    addEdgeMarkers(svgPath, { arrowTypeStart, arrowTypeEnd }, url, id, diagramType);
+    expect(svgPath.attr).toHaveBeenCalledWith(
+      'marker-start',
+      `url(${url}#${id}_${diagramType}-pointStart)`
+    );
+    expect(svgPath.attr).toHaveBeenCalledWith(
+      'marker-end',
+      `url(${url}#${id}_${diagramType}-aggregationEnd)`
+    );
+  });
+
+  it('should add markers for aggregation:composition', () => {
+    const arrowTypeStart = 'aggregation';
+    const arrowTypeEnd = 'composition';
+    addEdgeMarkers(svgPath, { arrowTypeStart, arrowTypeEnd }, url, id, diagramType);
+    expect(svgPath.attr).toHaveBeenCalledWith(
+      'marker-start',
+      `url(${url}#${id}_${diagramType}-aggregationStart)`
+    );
+    expect(svgPath.attr).toHaveBeenCalledWith(
+      'marker-end',
+      `url(${url}#${id}_${diagramType}-compositionEnd)`
+    );
+  });
+
+  it('should not add invalid markers', () => {
+    const arrowTypeStart = 'this is an invalid marker';
+    const arrowTypeEnd = ') url(https://my-malicious-site.example)';
+    addEdgeMarkers(svgPath, { arrowTypeStart, arrowTypeEnd }, url, id, diagramType);
+    expect(svgPath.attr).not.toHaveBeenCalled();
+  });
+});

packages/mermaid/src/dagre-wrapper/edgeMarker.ts

@@ -0,0 +1,57 @@
+import type { SVG } from '../diagram-api/types.js';
+import { log } from '../logger.js';
+import type { EdgeData } from '../types.js';
+/**
+ * Adds SVG markers to a path element based on the arrow types specified in the edge.
+ *
+ * @param svgPath - The SVG path element to add markers to.
+ * @param edge - The edge data object containing the arrow types.
+ * @param url - The URL of the SVG marker definitions.
+ * @param id - The ID prefix for the SVG marker definitions.
+ * @param diagramType - The type of diagram being rendered.
+ */
+export const addEdgeMarkers = (
+  svgPath: SVG,
+  edge: Pick<EdgeData, 'arrowTypeStart' | 'arrowTypeEnd'>,
+  url: string,
+  id: string,
+  diagramType: string
+) => {
+  if (edge.arrowTypeStart) {
+    addEdgeMarker(svgPath, 'start', edge.arrowTypeStart, url, id, diagramType);
+  }
+  if (edge.arrowTypeEnd) {
+    addEdgeMarker(svgPath, 'end', edge.arrowTypeEnd, url, id, diagramType);
+  }
+};
+
+const arrowTypesMap = {
+  arrow_cross: 'cross',
+  arrow_point: 'point',
+  arrow_barb: 'barb',
+  arrow_circle: 'circle',
+  aggregation: 'aggregation',
+  extension: 'extension',
+  composition: 'composition',
+  dependency: 'dependency',
+  lollipop: 'lollipop',
+} as const;
+
+const addEdgeMarker = (
+  svgPath: SVG,
+  position: 'start' | 'end',
+  arrowType: string,
+  url: string,
+  id: string,
+  diagramType: string
+) => {
+  const endMarkerType = arrowTypesMap[arrowType as keyof typeof arrowTypesMap];
+
+  if (!endMarkerType) {
+    log.warn(`Unknown arrow type: ${arrowType}`);
+    return; // unknown arrow type, ignore
+  }
+
+  const suffix = position === 'start' ? 'Start' : 'End';
+  svgPath.attr(`marker-${position}`, `url(${url}#${id}_${diagramType}-${endMarkerType}${suffix})`);
+};

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

@@ -6,6 +6,8 @@ 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 = {};
 let terminalLabels = {};
@@ -135,6 +137,8 @@ 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;
@@ -158,7 +162,7 @@ export const positionEdgeLabel = (edge, paths) => {
         y = pos.y;
       }
     }
-    el.attr('transform', 'translate(' + x + ', ' + y + ')');
+    el.attr('transform', `translate(${x}, ${y + subGraphTitleTotalMargin / 2})`);
   }
 
   //let path = paths.updatedPath ? paths.updatedPath : paths.originalPath;
@@ -172,7 +176,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;
@@ -188,7 +192,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;
@@ -200,7 +204,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;
@@ -212,7 +216,7 @@ export const positionEdgeLabel = (edge, paths) => {
       x = pos.x;
       y = pos.y;
     }
-    el.attr('transform', 'translate(' + x + ', ' + y + ')');
+    el.attr('transform', `translate(${x}, ${y})`);
   }
 };
 
@@ -506,108 +510,8 @@ export const insertEdge = function (elem, e, edge, clusterDb, diagramType, graph
   log.info('arrowTypeStart', edge.arrowTypeStart);
   log.info('arrowTypeEnd', edge.arrowTypeEnd);
 
-  switch (edge.arrowTypeStart) {
-    case 'arrow_cross':
-      svgPath.attr(
-        'marker-start',
-        'url(' + url + '#' + id + '_' + diagramType + '-crossStart' + ')'
-      );
-      break;
-    case 'arrow_point':
-      svgPath.attr(
-        'marker-start',
-        'url(' + url + '#' + id + '_' + diagramType + '-pointStart' + ')'
-      );
-      break;
-    case 'arrow_barb':
-      svgPath.attr(
-        'marker-start',
-        'url(' + url + '#' + id + '_' + diagramType + '-barbStart' + ')'
-      );
-      break;
-    case 'arrow_circle':
-      svgPath.attr(
-        'marker-start',
-        'url(' + url + '#' + id + '_' + diagramType + '-circleStart' + ')'
-      );
-      break;
-    case 'aggregation':
-      svgPath.attr(
-        'marker-start',
-        'url(' + url + '#' + id + '_' + diagramType + '-aggregationStart' + ')'
-      );
-      break;
-    case 'extension':
-      svgPath.attr(
-        'marker-start',
-        'url(' + url + '#' + id + '_' + diagramType + '-extensionStart' + ')'
-      );
-      break;
-    case 'composition':
-      svgPath.attr(
-        'marker-start',
-        'url(' + url + '#' + id + '_' + diagramType + '-compositionStart' + ')'
-      );
-      break;
-    case 'dependency':
-      svgPath.attr(
-        'marker-start',
-        'url(' + url + '#' + id + '_' + diagramType + '-dependencyStart' + ')'
-      );
-      break;
-    case 'lollipop':
-      svgPath.attr(
-        'marker-start',
-        'url(' + url + '#' + id + '_' + diagramType + '-lollipopStart' + ')'
-      );
-      break;
-    default:
-  }
-  switch (edge.arrowTypeEnd) {
-    case 'arrow_cross':
-      svgPath.attr('marker-end', 'url(' + url + '#' + id + '_' + diagramType + '-crossEnd' + ')');
-      break;
-    case 'arrow_point':
-      svgPath.attr('marker-end', 'url(' + url + '#' + id + '_' + diagramType + '-pointEnd' + ')');
-      break;
-    case 'arrow_barb':
-      svgPath.attr('marker-end', 'url(' + url + '#' + id + '_' + diagramType + '-barbEnd' + ')');
-      break;
-    case 'arrow_circle':
-      svgPath.attr('marker-end', 'url(' + url + '#' + id + '_' + diagramType + '-circleEnd' + ')');
-      break;
-    case 'aggregation':
-      svgPath.attr(
-        'marker-end',
-        'url(' + url + '#' + id + '_' + diagramType + '-aggregationEnd' + ')'
-      );
-      break;
-    case 'extension':
-      svgPath.attr(
-        'marker-end',
-        'url(' + url + '#' + id + '_' + diagramType + '-extensionEnd' + ')'
-      );
-      break;
-    case 'composition':
-      svgPath.attr(
-        'marker-end',
-        'url(' + url + '#' + id + '_' + diagramType + '-compositionEnd' + ')'
-      );
-      break;
-    case 'dependency':
-      svgPath.attr(
-        'marker-end',
-        'url(' + url + '#' + id + '_' + diagramType + '-dependencyEnd' + ')'
-      );
-      break;
-    case 'lollipop':
-      svgPath.attr(
-        'marker-end',
-        'url(' + url + '#' + id + '_' + diagramType + '-lollipopEnd' + ')'
-      );
-      break;
-    default:
-  }
+  addEdgeMarkers(svgPath, edge, url, id, diagramType);
+
   let paths = {};
   if (pointsHasChanged) {
     paths.updatedPath = points;

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

@@ -13,8 +13,10 @@ 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) => {
+const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster, siteConfig) => {
   log.info('Graph in recursive render: XXX', graphlibJson.write(graph), parentCluster);
   const dir = graph.graph().rankdir;
   log.trace('Dir in recursive render - dir:', dir);
@@ -52,7 +54,14 @@ const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster) =>
       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));
+        const o = await recursiveRender(
+          nodes,
+          node.graph,
+          diagramtype,
+          id,
+          graph.node(v),
+          siteConfig
+        );
         const newEl = o.elem;
         updateNodeBounds(node, newEl);
         node.diff = o.diff || 0;
@@ -101,6 +110,7 @@ const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster) =>
   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)));
@@ -114,16 +124,18 @@ const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster) =>
     );
     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);
       }
     }
@@ -134,6 +146,7 @@ const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster) =>
     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);
   });
@@ -159,7 +172,8 @@ 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));
-  await recursiveRender(elem, graph, diagramtype, id);
+  const siteConfig = getConfig();
+  await recursiveRender(elem, graph, diagramtype, id, undefined, siteConfig);
 };
 
 // const shapeDefinitions = {};

packages/mermaid/src/dagre-wrapper/shapes/util.js

@@ -80,7 +80,9 @@ export const labelHelper = async (parent, node, _classes, isNode) => {
                     ? getConfig().fontSize
                     : window.getComputedStyle(document.body).fontSize;
                   const enlargingFactor = 5;
-                  img.style.width = parseInt(bodyFontSize, 10) * enlargingFactor + 'px';
+                  const width = parseInt(bodyFontSize, 10) * enlargingFactor + 'px';
+                  img.style.minWidth = width;
+                  img.style.maxWidth = width;
                 } else {
                   img.style.width = '100%';
                 }

packages/mermaid/src/diagrams/class/styles.js

@@ -145,6 +145,7 @@ g.classGroup line {
 
 .edgeTerminals {
   font-size: 11px;
+  line-height: initial;
 }
 
 .classTitleText {

packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js

@@ -11,6 +11,7 @@ import common from '../../common/common.js';
 import { interpolateToCurve, getStylesFromArray } from '../../../utils.js';
 import ELK from 'elkjs/lib/elk.bundled.js';
 import { getLineFunctionsWithOffset } from '../../../utils/lineWithOffset.js';
+import { addEdgeMarkers } from '../../../dagre-wrapper/edgeMarker.js';
 
 const elk = new ELK();
 
@@ -586,108 +587,7 @@ const addMarkersToEdge = function (svgPath, edgeData, diagramType, arrowMarkerAb
   }
 
   // look in edge data and decide which marker to use
-  switch (edgeData.arrowTypeStart) {
-    case 'arrow_cross':
-      svgPath.attr(
-        'marker-start',
-        'url(' + url + '#' + id + '_' + diagramType + '-crossStart' + ')'
-      );
-      break;
-    case 'arrow_point':
-      svgPath.attr(
-        'marker-start',
-        'url(' + url + '#' + id + '_' + diagramType + '-pointStart' + ')'
-      );
-      break;
-    case 'arrow_barb':
-      svgPath.attr(
-        'marker-start',
-        'url(' + url + '#' + id + '_' + diagramType + '-barbStart' + ')'
-      );
-      break;
-    case 'arrow_circle':
-      svgPath.attr(
-        'marker-start',
-        'url(' + url + '#' + id + '_' + diagramType + '-circleStart' + ')'
-      );
-      break;
-    case 'aggregation':
-      svgPath.attr(
-        'marker-start',
-        'url(' + url + '#' + id + '_' + diagramType + '-aggregationStart' + ')'
-      );
-      break;
-    case 'extension':
-      svgPath.attr(
-        'marker-start',
-        'url(' + url + '#' + id + '_' + diagramType + '-extensionStart' + ')'
-      );
-      break;
-    case 'composition':
-      svgPath.attr(
-        'marker-start',
-        'url(' + url + '#' + id + '_' + diagramType + '-compositionStart' + ')'
-      );
-      break;
-    case 'dependency':
-      svgPath.attr(
-        'marker-start',
-        'url(' + url + '#' + id + '_' + diagramType + '-dependencyStart' + ')'
-      );
-      break;
-    case 'lollipop':
-      svgPath.attr(
-        'marker-start',
-        'url(' + url + '#' + id + '_' + diagramType + '-lollipopStart' + ')'
-      );
-      break;
-    default:
-  }
-  switch (edgeData.arrowTypeEnd) {
-    case 'arrow_cross':
-      svgPath.attr('marker-end', 'url(' + url + '#' + id + '_' + diagramType + '-crossEnd' + ')');
-      break;
-    case 'arrow_point':
-      svgPath.attr('marker-end', 'url(' + url + '#' + id + '_' + diagramType + '-pointEnd' + ')');
-      break;
-    case 'arrow_barb':
-      svgPath.attr('marker-end', 'url(' + url + '#' + id + '_' + diagramType + '-barbEnd' + ')');
-      break;
-    case 'arrow_circle':
-      svgPath.attr('marker-end', 'url(' + url + '#' + id + '_' + diagramType + '-circleEnd' + ')');
-      break;
-    case 'aggregation':
-      svgPath.attr(
-        'marker-end',
-        'url(' + url + '#' + id + '_' + diagramType + '-aggregationEnd' + ')'
-      );
-      break;
-    case 'extension':
-      svgPath.attr(
-        'marker-end',
-        'url(' + url + '#' + id + '_' + diagramType + '-extensionEnd' + ')'
-      );
-      break;
-    case 'composition':
-      svgPath.attr(
-        'marker-end',
-        'url(' + url + '#' + id + '_' + diagramType + '-compositionEnd' + ')'
-      );
-      break;
-    case 'dependency':
-      svgPath.attr(
-        'marker-end',
-        'url(' + url + '#' + id + '_' + diagramType + '-dependencyEnd' + ')'
-      );
-      break;
-    case 'lollipop':
-      svgPath.attr(
-        'marker-end',
-        'url(' + url + '#' + id + '_' + diagramType + '-lollipopEnd' + ')'
-      );
-      break;
-    default:
-  }
+  addEdgeMarkers(svgPath, edgeData, url, id, diagramType);
 };
 
 /**

packages/mermaid/src/diagrams/pie/pieRenderer.ts

@@ -1,6 +1,5 @@
 import type d3 from 'd3';
 import { scaleOrdinal, pie as d3pie, arc } from 'd3';
-
 import { log } from '../../logger.js';
 import { configureSvgSize } from '../../setupGraphViewbox.js';
 import { getConfig } from '../../diagram-api/diagramAPI.js';
@@ -38,33 +37,25 @@ const createPieArcs = (sections: Sections): d3.PieArcDatum<D3Sections>[] => {
  */
 export const draw: DrawDefinition = (text, id, _version, diagObj) => {
   log.debug('rendering pie chart\n' + text);
-
   const db = diagObj.db as PieDB;
   const globalConfig: MermaidConfig = getConfig();
   const pieConfig: Required<PieDiagramConfig> = cleanAndMerge(db.getConfig(), globalConfig.pie);
-
-  const height = 450;
-  // TODO: remove document width
-  const width: number =
-    document.getElementById(id)?.parentElement?.offsetWidth ?? pieConfig.useWidth;
-  const svg: SVG = selectSvgElement(id);
-  // Set viewBox
-  svg.attr('viewBox', `0 0 ${width} ${height}`);
-  configureSvgSize(svg, height, width, pieConfig.useMaxWidth);
-
   const MARGIN = 40;
   const LEGEND_RECT_SIZE = 18;
   const LEGEND_SPACING = 4;
-
+  const height = 450;
+  const pieWidth: number = height;
+  const svg: SVG = selectSvgElement(id);
   const group: Group = svg.append('g');
-  group.attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');
+  const sections: Sections = db.getSections();
+  group.attr('transform', 'translate(' + pieWidth / 2 + ',' + height / 2 + ')');
 
   const { themeVariables } = globalConfig;
   let [outerStrokeWidth] = parseFontSize(themeVariables.pieOuterStrokeWidth);
   outerStrokeWidth ??= 2;
 
   const textPosition: number = pieConfig.textPosition;
-  const radius: number = Math.min(width, height) / 2 - MARGIN;
+  const radius: number = Math.min(pieWidth, height) / 2 - MARGIN;
   // Shape helper to build arcs:
   const arcGenerator: d3.Arc<unknown, d3.PieArcDatum<D3Sections>> = arc<
     d3.PieArcDatum<D3Sections>
@@ -84,7 +75,6 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => {
     .attr('r', radius + outerStrokeWidth / 2)
     .attr('class', 'pieOuterCircle');
 
-  const sections: Sections = db.getSections();
   const arcs: d3.PieArcDatum<D3Sections>[] = createPieArcs(sections);
 
   const myGeneratedColors = [
@@ -177,6 +167,19 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => {
       }
       return label;
     });
+
+  const longestTextWidth = Math.max(
+    ...legend
+      .selectAll('text')
+      .nodes()
+      .map((node) => (node as Element)?.getBoundingClientRect().width ?? 0)
+  );
+
+  const totalWidth = pieWidth + MARGIN + LEGEND_RECT_SIZE + LEGEND_SPACING + longestTextWidth;
+
+  // Set viewBox
+  svg.attr('viewBox', `0 0 ${totalWidth} ${height}`);
+  configureSvgSize(svg, height, totalWidth, pieConfig.useMaxWidth);
 };
 
 export const renderer = { draw };

packages/mermaid/src/docs/.vitepress/config.ts

@@ -4,7 +4,10 @@ import { defineConfig, MarkdownOptions } from 'vitepress';
 
 const allMarkdownTransformers: MarkdownOptions = {
   // the shiki theme to highlight code blocks
-  theme: 'github-dark',
+  theme: {
+    light: 'github-light',
+    dark: 'github-dark',
+  },
   config: async (md) => {
     await MermaidExample(md);
   },

packages/mermaid/src/docs/ecosystem/integrations-community.md

@@ -109,6 +109,8 @@ Communication tools and platforms
 
 ### Wikis
 
+- [PmWiki](https://www.pmwiki.org)
+  - [MermaidJs Cookbook recipe](https://www.pmwiki.org/wiki/Cookbook/MermaidJs)
 - [MediaWiki](https://www.mediawiki.org)
   - [Mermaid Extension](https://www.mediawiki.org/wiki/Extension:Mermaid)
   - [Flex Diagrams Extension](https://www.mediawiki.org/wiki/Extension:Flex_Diagrams)
@@ -177,7 +179,7 @@ Communication tools and platforms
 ### Document Generation
 
 - [Docusaurus](https://docusaurus.io/docs/markdown-features/diagrams) ✅
-- [Swimm - Up-to-date diagrams with Swimm, the knowledge management tool for code](https://docs.swimm.io/Features/diagrams-and-charts)
+- [Swimm - Up-to-date diagrams with Swimm, the knowledge management tool for code](https://docs.swimm.io/features/diagrams-and-charts/#mermaid--swimm--up-to-date-diagrams-)
 - [Sphinx](https://www.sphinx-doc.org/en/master/)
   - [sphinxcontrib-mermaid](https://github.com/mgaitan/sphinxcontrib-mermaid)
 - [remark](https://remark.js.org/)

packages/mermaid/src/docs/news/announcements.md

@@ -1,17 +1,9 @@
 # Announcements
 
-<br />
+Check out our latest blog posts below. See more blog posts [here](blog.md).
 
-<a href="https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&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=416671&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" /></a>
+## [5 Reasons You Should Be Using Mermaid Chart As Your Diagram Generator](https://www.mermaidchart.com/blog/posts/5-reasons-you-should-be-using-mermaid-chart-as-your-diagram-generator/)
 
-## Calling all fans of Mermaid and Mermaid Chart! 🎉
+14 November 2023 · 5 mins
 
-We’ve officially made our Product Hunt debut, and would love any and all support from the community!
-
-[Click here](https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid-chart) to check out our Product Hunt launch.
-
-Feel free to drop us a comment and let us know what you think. All new sign ups will receive a 30-day free trial of our Pro subscription, plus 25% off your first year.
-
-We’re on a mission to make text-based diagramming fun again. And we need your help to make that happen.
-
-Your support means the world to us. Thank you for being part of the diagramming movement.
+Mermaid Chart, a user-friendly, code-based diagram generator with AI integrations, templates, collaborative tools, and plugins for developers, streamlines the process of creating and sharing diagrams, enhancing both creativity and collaboration.

packages/mermaid/src/docs/news/blog.md

@@ -1,5 +1,23 @@
 # Blog
 
+## [5 Reasons You Should Be Using Mermaid Chart As Your Diagram Generator](https://www.mermaidchart.com/blog/posts/5-reasons-you-should-be-using-mermaid-chart-as-your-diagram-generator/)
+
+14 November 2023 · 5 mins
+
+Mermaid Chart, a user-friendly, code-based diagram generator with AI integrations, templates, collaborative tools, and plugins for developers, streamlines the process of creating and sharing diagrams, enhancing both creativity and collaboration.
+
+## [How to Use Mermaid Chart as an AI Diagram Generator](https://www.mermaidchart.com/blog/posts/how-to-use-mermaid-chart-as-an-ai-diagram-generator/)
+
+1 November 2023 · 5 mins
+
+Would an AI diagram generator make your life easier?
+
+## [Diagrams, Made Even Easier: Introducing “Code Snippets” in the Mermaid Chart Editor](https://www.mermaidchart.com/blog/posts/easier-diagram-editing-with-code-snippets/)
+
+12 October 2023 · 4 mins
+
+Mermaid Chart introduces Code Snippets in its editor, streamlining the diagramming process for developers and professionals.
+
 ## [How to Make a Git Graph with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-make-a-git-graph-with-mermaid-chart/)
 
 22 September 2023 · 7 mins

packages/mermaid/src/docs/package.json

@@ -23,7 +23,7 @@
   "devDependencies": {
     "@iconify-json/carbon": "^1.1.16",
     "@unocss/reset": "^0.57.0",
-    "@vite-pwa/vitepress": "^0.2.0",
+    "@vite-pwa/vitepress": "^0.3.0",
     "@vitejs/plugin-vue": "^4.2.1",
     "fast-glob": "^3.2.12",
     "https-localhost": "^4.7.1",
@@ -31,8 +31,8 @@
     "unocss": "^0.57.0",
     "unplugin-vue-components": "^0.25.0",
     "vite": "^4.3.9",
-    "vite-plugin-pwa": "^0.16.0",
-    "vitepress": "1.0.0-rc.25",
+    "vite-plugin-pwa": "^0.17.0",
+    "vitepress": "1.0.0-rc.31",
     "workbox-window": "^7.0.0"
   }
 }

packages/mermaid/src/mermaid.spec.ts

@@ -2,7 +2,7 @@ import mermaid from './mermaid.js';
 import { mermaidAPI } from './mermaidAPI.js';
 import './diagram-api/diagram-orchestration.js';
 import { addDiagrams } from './diagram-api/diagram-orchestration.js';
-import { beforeAll, describe, it, expect, vi } from 'vitest';
+import { beforeAll, describe, it, expect, vi, afterEach } from 'vitest';
 import type { DiagramDefinition } from './diagram-api/types.js';
 
 beforeAll(async () => {
@@ -89,7 +89,7 @@ describe('when using mermaid and ', () => {
       ).resolves.not.toThrow();
       // should still render, even if lazyLoadedDiagrams fails
       expect(mermaidAPI.render).toHaveBeenCalled();
-    });
+    }, 20_000);
 
     it('should defer diagram load based on parameter', async () => {
       let loaded = false;

packages/mermaid/src/mermaidAPI.spec.ts

@@ -67,6 +67,7 @@ vi.mock('stylis', () => {
 });
 import { compile, serialize } from 'stylis';
 import { decodeEntities, encodeEntities } from './utils.js';
+import { Diagram } from './Diagram.js';
 
 /**
  * @see https://vitest.dev/guide/mocking.html Mock part of a module
@@ -744,4 +745,16 @@ describe('mermaidAPI', () => {
       });
     });
   });
+
+  describe('getDiagramFromText', () => {
+    it('should clean up comments when present in diagram definition', async () => {
+      const diagram = await mermaidAPI.getDiagramFromText(
+        `flowchart LR
+      %% This is a comment A -- text --> B{node}
+      A -- text --> B -- text2 --> C`
+      );
+      expect(diagram).toBeInstanceOf(Diagram);
+      expect(diagram.type).toBe('flowchart-v2');
+    });
+  });
 });

packages/mermaid/src/mermaidAPI.ts

@@ -17,7 +17,7 @@ import { compile, serialize, stringify } from 'stylis';
 import { version } from '../package.json';
 import * as configApi from './config.js';
 import { addDiagrams } from './diagram-api/diagram-orchestration.js';
-import { Diagram, getDiagramFromText } from './Diagram.js';
+import { Diagram, getDiagramFromText as getDiagramFromTextInternal } from './Diagram.js';
 import errorRenderer from './diagrams/error/errorRenderer.js';
 import { attachFunctions } from './interactionDb.js';
 import { log, setLogLevel } from './logger.js';
@@ -28,7 +28,7 @@ import type { MermaidConfig } from './config.type.js';
 import { evaluate } from './diagrams/common/common.js';
 import isEmpty from 'lodash-es/isEmpty.js';
 import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility.js';
-import type { DiagramStyleClassDef } from './diagram-api/types.js';
+import type { DiagramMetadata, DiagramStyleClassDef } from './diagram-api/types.js';
 import { preprocessDiagram } from './preprocess.js';
 import { decodeEntities } from './utils.js';
 
@@ -519,6 +519,11 @@ function initialize(options: MermaidConfig = {}) {
   addDiagrams();
 }
 
+const getDiagramFromText = (text: string, metadata: Pick<DiagramMetadata, 'title'> = {}) => {
+  const { code } = preprocessDiagram(text);
+  return getDiagramFromTextInternal(code, metadata);
+};
+
 /**
  * Add accessibility (a11y) information to the diagram.
  *

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

@@ -1863,6 +1863,7 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file)
     unevaluatedProperties: false
     required:
       - titleTopMargin
+      - subGraphTitleMargin
       - diagramPadding
       - htmlLabels
       - nodeSpacing
@@ -1875,6 +1876,20 @@ $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/setupGraphViewbox.js

@@ -44,6 +44,7 @@ export const configureSvgSize = function (svgElem, height, width, useMaxWidth) {
   const attrs = calculateSvgSizeAttrs(height, width, useMaxWidth);
   d3Attrs(svgElem, attrs);
 };
+
 export const setupGraphViewbox = function (graph, svgElem, padding, useMaxWidth) {
   const svgBounds = svgElem.node().getBBox();
   const sWidth = svgBounds.width;
@@ -55,26 +56,13 @@ export const setupGraphViewbox = function (graph, svgElem, padding, useMaxWidth)
   let height = 0;
   log.info(`Graph bounds: ${width}x${height}`, graph);
 
-  // let tx = 0;
-  // let ty = 0;
-  // if (sWidth > width) {
-  //   tx = (sWidth - width) / 2 + padding;
   width = sWidth + padding * 2;
-  // } else {
-  //   if (Math.abs(sWidth - width) >= 2 * padding + 1) {
-  //     width = width - padding;
-  //   }
-  // }
-  // if (sHeight > height) {
-  //   ty = (sHeight - height) / 2 + padding;
   height = sHeight + padding * 2;
-  // }
 
   log.info(`Calculated bounds: ${width}x${height}`);
   configureSvgSize(svgElem, height, width, useMaxWidth);
 
   // Ensure the viewBox includes the whole svgBounds area with extra space for padding
-  // const vBox = `0 0 ${width} ${height}`;
   const vBox = `${svgBounds.x - padding} ${svgBounds.y - padding} ${
     svgBounds.width + 2 * padding
   } ${svgBounds.height + 2 * padding}`;

packages/mermaid/src/utils/lineWithOffset.ts

@@ -19,9 +19,12 @@ const markerOffsets = {
  * @returns The angle, deltaX and deltaY
  */
 function calculateDeltaAndAngle(
-  point1: Point | [number, number],
-  point2: Point | [number, number]
+  point1?: Point | [number, number],
+  point2?: Point | [number, number]
 ): { angle: number; deltaX: number; deltaY: number } {
+  if (point1 === undefined || point2 === undefined) {
+    return { angle: 0, deltaX: 0, deltaY: 0 };
+  }
   point1 = pointTransformer(point1);
   point2 = pointTransformer(point2);
   const [x1, y1] = [point1.x, point1.y];
@@ -90,3 +93,44 @@ export const getLineFunctionsWithOffset = (
     },
   };
 };
+
+if (import.meta.vitest) {
+  const { it, expect, describe } = import.meta.vitest;
+  describe('calculateDeltaAndAngle', () => {
+    it('should calculate the angle and deltas between two points', () => {
+      expect(calculateDeltaAndAngle([0, 0], [0, 1])).toStrictEqual({
+        angle: 1.5707963267948966,
+        deltaX: 0,
+        deltaY: 1,
+      });
+      expect(calculateDeltaAndAngle([1, 0], [0, -1])).toStrictEqual({
+        angle: 0.7853981633974483,
+        deltaX: -1,
+        deltaY: -1,
+      });
+      expect(calculateDeltaAndAngle({ x: 1, y: 0 }, [0, -1])).toStrictEqual({
+        angle: 0.7853981633974483,
+        deltaX: -1,
+        deltaY: -1,
+      });
+      expect(calculateDeltaAndAngle({ x: 1, y: 0 }, { x: 1, y: 0 })).toStrictEqual({
+        angle: NaN,
+        deltaX: 0,
+        deltaY: 0,
+      });
+    });
+
+    it('should calculate the angle and deltas if one point in undefined', () => {
+      expect(calculateDeltaAndAngle(undefined, [0, 1])).toStrictEqual({
+        angle: 0,
+        deltaX: 0,
+        deltaY: 0,
+      });
+      expect(calculateDeltaAndAngle([0, 1], undefined)).toStrictEqual({
+        angle: 0,
+        deltaX: 0,
+        deltaY: 0,
+      });
+    });
+  });
+}

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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,21 @@
+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,
+  };
+};

packages/mermaid/tsconfig.json

@@ -2,7 +2,8 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "rootDir": "./src",
-    "outDir": "./dist"
+    "outDir": "./dist",
+    "types": ["vitest/importMeta", "vitest/globals"]
   },
   "include": ["./src/**/*.ts", "./package.json"]
 }

vite.config.ts

@@ -24,6 +24,7 @@ export default defineConfig({
       reportsDirectory: './coverage/vitest',
       exclude: ['**/node_modules/**', '**/tests/**', '**/__mocks__/**'],
     },
+    includeSource: ['packages/*/src/**/*.{js,ts}'],
   },
   build: {
     /** If you set esmExternals to true, this plugins assumes that
@@ -33,4 +34,7 @@ export default defineConfig({
       esmExternals: true,
     },
   },
+  define: {
+    'import.meta.vitest': 'undefined',
+  },
 });