chore: Rename Group to SVGGroup

packages/mermaid/src/diagram-api/types.ts

@@ -129,6 +129,6 @@ export type HTML = d3.Selection<HTMLIFrameElement, unknown, Element | null, unkn
 
 export type SVG = d3.Selection<SVGSVGElement, unknown, Element | null, unknown>;
 
-export type Group = d3.Selection<SVGGElement, unknown, Element | null, unknown>;
+export type SVGGroup = d3.Selection<SVGGElement, unknown, Element | null, unknown>;
 
 export type DiagramStylesProvider = (options?: any) => string;

packages/mermaid/src/diagrams/common/svgDrawCommon.ts

@@ -1,5 +1,6 @@
 import { sanitizeUrl } from '@braintree/sanitize-url';
-import type { Group, SVG } from '../../diagram-api/types.js';
+import type { SVG, SVGGroup } from '../../diagram-api/types.js';
+import { lineBreakRegex } from './common.js';
 import type {
   Bound,
   D3ImageElement,
@@ -11,9 +12,8 @@ import type {
   TextData,
   TextObject,
 } from './commonTypes.js';
-import { lineBreakRegex } from './common.js';
 
-export const drawRect = (element: SVG | Group, rectData: RectData): D3RectElement => {
+export const drawRect = (element: SVG | SVGGroup, rectData: RectData): D3RectElement => {
   const rectElement: D3RectElement = element.append('rect');
   rectElement.attr('x', rectData.x);
   rectElement.attr('y', rectData.y);
@@ -50,7 +50,7 @@ export const drawRect = (element: SVG | Group, rectData: RectData): D3RectElemen
  * @param element - Diagram (reference for bounds)
  * @param bounds - Shape of the rectangle
  */
-export const drawBackgroundRect = (element: SVG | Group, bounds: Bound): void => {
+export const drawBackgroundRect = (element: SVG | SVGGroup, bounds: Bound): void => {
   const rectData: RectData = {
     x: bounds.startx,
     y: bounds.starty,
@@ -64,7 +64,7 @@ export const drawBackgroundRect = (element: SVG | Group, bounds: Bound): void =>
   rectElement.lower();
 };
 
-export const drawText = (element: SVG | Group, textData: TextData): D3TextElement => {
+export const drawText = (element: SVG | SVGGroup, textData: TextData): D3TextElement => {
   const nText: string = textData.text.replace(lineBreakRegex, ' ');
 
   const textElem: D3TextElement = element.append('text');
@@ -84,7 +84,7 @@ export const drawText = (element: SVG | Group, textData: TextData): D3TextElemen
   return textElem;
 };
 
-export const drawImage = (elem: SVG | Group, x: number, y: number, link: string): void => {
+export const drawImage = (elem: SVG | SVGGroup, x: number, y: number, link: string): void => {
   const imageElement: D3ImageElement = elem.append('image');
   imageElement.attr('x', x);
   imageElement.attr('y', y);
@@ -93,7 +93,7 @@ export const drawImage = (elem: SVG | Group, x: number, y: number, link: string)
 };
 
 export const drawEmbeddedImage = (
-  element: SVG | Group,
+  element: SVG | SVGGroup,
   x: number,
   y: number,
   link: string

packages/mermaid/src/diagrams/error/errorRenderer.ts

@@ -1,5 +1,5 @@
+import type { SVG, SVGGroup } from '../../diagram-api/types.js';
 import { log } from '../../logger.js';
-import type { Group, SVG } from '../../diagram-api/types.js';
 import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
 import { configureSvgSize } from '../../setupGraphViewbox.js';
 
@@ -13,7 +13,7 @@ import { configureSvgSize } from '../../setupGraphViewbox.js';
 export const draw = (_text: string, id: string, version: string) => {
   log.debug('rendering svg for syntax error\n');
   const svg: SVG = selectSvgElement(id);
-  const g: Group = svg.append('g');
+  const g: SVGGroup = svg.append('g');
 
   svg.attr('viewBox', '0 0 2412 512');
   configureSvgSize(svg, 100, 512, true);

packages/mermaid/src/diagrams/info/infoRenderer.ts

@@ -1,7 +1,7 @@
+import type { DrawDefinition, SVG, SVGGroup } from '../../diagram-api/types.js';
 import { log } from '../../logger.js';
-import { configureSvgSize } from '../../setupGraphViewbox.js';
-import type { DrawDefinition, Group, SVG } from '../../diagram-api/types.js';
 import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
+import { configureSvgSize } from '../../setupGraphViewbox.js';
 
 /**
  * Draws a an info picture in the tag with id: id based on the graph definition in text.
@@ -16,7 +16,7 @@ const draw: DrawDefinition = (text, id, version) => {
   const svg: SVG = selectSvgElement(id);
   configureSvgSize(svg, 100, 400, true);
 
-  const group: Group = svg.append('g');
+  const group: SVGGroup = svg.append('g');
   group
     .append('text')
     .attr('x', 100)

packages/mermaid/src/diagrams/packet/renderer.ts

@@ -1,6 +1,6 @@
 import type { Diagram } from '../../Diagram.js';
 import type { PacketDiagramConfig } from '../../config.type.js';
-import type { DiagramRenderer, DrawDefinition, Group, SVG } from '../../diagram-api/types.js';
+import type { DiagramRenderer, DrawDefinition, SVG, SVGGroup } from '../../diagram-api/types.js';
 import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
 import { configureSvgSize } from '../../setupGraphViewbox.js';
 import type { PacketDB, PacketWord } from './types.js';
@@ -39,7 +39,7 @@ const drawWord = (
   rowNumber: number,
   { rowHeight, paddingX, paddingY, bitWidth, bitsPerRow, showBits }: Required<PacketDiagramConfig>
 ) => {
-  const group: Group = svg.append('g');
+  const group: SVGGroup = svg.append('g');
   const wordY = rowNumber * (rowHeight + paddingY) + paddingY;
   for (const block of word) {
     const blockX = (block.start % bitsPerRow) * bitWidth + 1;

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

@@ -1,13 +1,13 @@
 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';
-import { cleanAndMerge, parseFontSize } from '../../utils.js';
-import type { DrawDefinition, Group, SVG } from '../../diagram-api/types.js';
-import type { D3Section, PieDB, Sections } from './pieTypes.js';
+import { arc, pie as d3pie, scaleOrdinal } from 'd3';
 import type { MermaidConfig, PieDiagramConfig } from '../../config.type.js';
+import { getConfig } from '../../diagram-api/diagramAPI.js';
+import type { DrawDefinition, SVG, SVGGroup } from '../../diagram-api/types.js';
+import { log } from '../../logger.js';
 import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
+import { configureSvgSize } from '../../setupGraphViewbox.js';
+import { cleanAndMerge, parseFontSize } from '../../utils.js';
+import type { D3Section, PieDB, Sections } from './pieTypes.js';
 
 const createPieArcs = (sections: Sections): d3.PieArcDatum<D3Section>[] => {
   // Compute the position of each group on the pie:
@@ -46,7 +46,7 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => {
   const height = 450;
   const pieWidth: number = height;
   const svg: SVG = selectSvgElement(id);
-  const group: Group = svg.append('g');
+  const group: SVGGroup = svg.append('g');
   group.attr('transform', 'translate(' + pieWidth / 2 + ',' + height / 2 + ')');
 
   const { themeVariables } = globalConfig;

packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts

@@ -1,4 +1,4 @@
-import type { Group } from '../../../../../diagram-api/types.js';
+import type { SVGGroup } from '../../../../../diagram-api/types.js';
 import type {
   AxisDataType,
   ChartComponent,
@@ -25,7 +25,7 @@ export function getAxis(
   data: AxisDataType,
   axisConfig: XYChartAxisConfig,
   axisThemeConfig: XYChartAxisThemeConfig,
-  tmpSVGGroup: Group
+  tmpSVGGroup: SVGGroup
 ): Axis {
   const textDimensionCalculator = new TextDimensionCalculatorWithFont(tmpSVGGroup);
   if (isBandAxisData(data)) {

packages/mermaid/src/diagrams/xychart/chartBuilder/components/chartTitle.ts

@@ -1,13 +1,13 @@
-import type { Group } from '../../../../diagram-api/types.js';
+import type { SVGGroup } from '../../../../diagram-api/types.js';
 import type {
   BoundingRect,
   ChartComponent,
   Dimension,
   DrawableElem,
   Point,
+  XYChartConfig,
   XYChartData,
   XYChartThemeConfig,
-  XYChartConfig,
 } from '../interfaces.js';
 import type { TextDimensionCalculator } from '../textDimensionCalculator.js';
 import { TextDimensionCalculatorWithFont } from '../textDimensionCalculator.js';
@@ -84,7 +84,7 @@ export function getChartTitleComponent(
   chartConfig: XYChartConfig,
   chartData: XYChartData,
   chartThemeConfig: XYChartThemeConfig,
-  tmpSVGGroup: Group
+  tmpSVGGroup: SVGGroup
 ): ChartComponent {
   const textDimensionCalculator = new TextDimensionCalculatorWithFont(tmpSVGGroup);
   return new ChartTitle(textDimensionCalculator, chartConfig, chartData, chartThemeConfig);

packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts

@@ -1,4 +1,4 @@
-import type { Group } from '../../../diagram-api/types.js';
+import type { SVGGroup } from '../../../diagram-api/types.js';
 import type { DrawableElem, XYChartConfig, XYChartData, XYChartThemeConfig } from './interfaces.js';
 import { Orchestrator } from './orchestrator.js';
 
@@ -7,7 +7,7 @@ export class XYChartBuilder {
     config: XYChartConfig,
     chartData: XYChartData,
     chartThemeConfig: XYChartThemeConfig,
-    tmpSVGGroup: Group
+    tmpSVGGroup: SVGGroup
   ): DrawableElem[] {
     const orchestrator = new Orchestrator(config, chartData, chartThemeConfig, tmpSVGGroup);
     return orchestrator.getDrawableElement();

packages/mermaid/src/diagrams/xychart/chartBuilder/orchestrator.ts

@@ -1,3 +1,9 @@
+import type { SVGGroup } from '../../../diagram-api/types.js';
+import type { Axis } from './components/axis/index.js';
+import { getAxis } from './components/axis/index.js';
+import { getChartTitleComponent } from './components/chartTitle.js';
+import type { Plot } from './components/plot/index.js';
+import { getPlotComponent } from './components/plot/index.js';
 import type {
   ChartComponent,
   DrawableElem,
@@ -6,12 +12,6 @@ import type {
   XYChartThemeConfig,
 } from './interfaces.js';
 import { isBarPlot } from './interfaces.js';
-import type { Axis } from './components/axis/index.js';
-import { getAxis } from './components/axis/index.js';
-import { getChartTitleComponent } from './components/chartTitle.js';
-import type { Plot } from './components/plot/index.js';
-import { getPlotComponent } from './components/plot/index.js';
-import type { Group } from '../../../diagram-api/types.js';
 
 export class Orchestrator {
   private componentStore: {
@@ -24,7 +24,7 @@ export class Orchestrator {
     private chartConfig: XYChartConfig,
     private chartData: XYChartData,
     chartThemeConfig: XYChartThemeConfig,
-    tmpSVGGroup: Group
+    tmpSVGGroup: SVGGroup
   ) {
     this.componentStore = {
       title: getChartTitleComponent(chartConfig, chartData, chartThemeConfig, tmpSVGGroup),

packages/mermaid/src/diagrams/xychart/chartBuilder/textDimensionCalculator.ts

@@ -1,13 +1,13 @@
-import type { Dimension } from './interfaces.js';
+import type { SVGGroup } from '../../../diagram-api/types.js';
 import { computeDimensionOfText } from '../../../rendering-util/createText.js';
-import type { Group } from '../../../diagram-api/types.js';
+import type { Dimension } from './interfaces.js';
 
 export interface TextDimensionCalculator {
   getMaxDimension(texts: string[], fontSize: number): Dimension;
 }
 
 export class TextDimensionCalculatorWithFont implements TextDimensionCalculator {
-  constructor(private parentGroup: Group) {}
+  constructor(private parentGroup: SVGGroup) {}
   getMaxDimension(texts: string[], fontSize: number): Dimension {
     if (!this.parentGroup) {
       return {

packages/mermaid/src/diagrams/xychart/xychartDb.ts

@@ -1,3 +1,9 @@
+import * as configApi from '../../config.js';
+import defaultConfig from '../../defaultConfig.js';
+import type { SVGGroup } from '../../diagram-api/types.js';
+import { getThemeVariables } from '../../themes/theme-default.js';
+import { cleanAndMerge } from '../../utils.js';
+import { sanitizeText } from '../common/common.js';
 import {
   clear as commonClear,
   getAccDescription,
@@ -7,11 +13,6 @@ import {
   setAccTitle,
   setDiagramTitle,
 } from '../common/commonDb.js';
-import * as configApi from '../../config.js';
-import defaultConfig from '../../defaultConfig.js';
-import { getThemeVariables } from '../../themes/theme-default.js';
-import { cleanAndMerge } from '../../utils.js';
-import { sanitizeText } from '../common/common.js';
 import { XYChartBuilder } from './chartBuilder/index.js';
 import type {
   DrawableElem,
@@ -21,11 +22,10 @@ import type {
   XYChartThemeConfig,
 } from './chartBuilder/interfaces.js';
 import { isBandAxisData, isLinearAxisData } from './chartBuilder/interfaces.js';
-import type { Group } from '../../diagram-api/types.js';
 
 let plotIndex = 0;
 
-let tmpSVGGroup: Group;
+let tmpSVGGroup: SVGGroup;
 
 let xyChartConfig: XYChartConfig = getChartDefaultConfig();
 let xyChartThemeConfig: XYChartThemeConfig = getChartDefaultThemeConfig();
@@ -75,7 +75,7 @@ function textSanitizer(text: string) {
   return sanitizeText(text.trim(), config);
 }
 
-function setTmpSVGG(SVGG: Group) {
+function setTmpSVGG(SVGG: SVGGroup) {
   tmpSVGGroup = SVGG;
 }
 function setOrientation(orientation: string) {

packages/mermaid/src/internals.ts

@@ -29,3 +29,5 @@ export const internalHelpers = {
   log,
   positionEdgeLabel,
 };
+
+export type InternalHelpers = typeof internalHelpers;

packages/mermaid/src/mermaid.ts

@@ -7,20 +7,19 @@ import type { MermaidConfig } from './config.type.js';
 import { detectType, registerLazyLoadedDiagrams } from './diagram-api/detectType.js';
 import { addDiagrams } from './diagram-api/diagram-orchestration.js';
 import { loadRegisteredDiagrams } from './diagram-api/loadDiagram.js';
-import type { ExternalDiagramDefinition } from './diagram-api/types.js';
+import type { ExternalDiagramDefinition, SVG, SVGGroup } from './diagram-api/types.js';
 import type { ParseErrorFunction } from './Diagram.js';
 import type { UnknownDiagramError } from './errors.js';
-import type { internalHelpers } from './internals.js';
+import type { InternalHelpers } from './internals.js';
 import { log } from './logger.js';
 import { mermaidAPI } from './mermaidAPI.js';
-import type { LayoutLoaderDefinition } from './rendering-util/render.js';
+import type { LayoutLoaderDefinition, RenderOptions } from './rendering-util/render.js';
 import { registerLayoutLoaders } from './rendering-util/render.js';
 import type { LayoutData } from './rendering-util/types.js';
 import type { ParseOptions, ParseResult, RenderResult } from './types.js';
 import type { DetailedError } from './utils.js';
 import utils, { isDetailedError } from './utils.js';
 
-type InternalHelpers = typeof internalHelpers;
 export type {
   DetailedError,
   ExternalDiagramDefinition,
@@ -31,7 +30,10 @@ export type {
   ParseErrorFunction,
   ParseOptions,
   ParseResult,
+  RenderOptions,
   RenderResult,
+  SVG,
+  SVGGroup,
   UnknownDiagramError,
 };
 

packages/mermaid/src/rendering-util/createText.ts

@@ -1,16 +1,16 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 // @ts-nocheck TODO: Fix types
-import type { MermaidConfig } from '../config.type.js';
-import type { Group } from '../diagram-api/types.js';
+import { getConfig } from '$root/diagram-api/diagramAPI.js';
+import common, { hasKatex, renderKatex } from '$root/diagrams/common/common.js';
 import { select } from 'd3';
+import type { MermaidConfig } from '../config.type.js';
+import type { SVGGroup } from '../diagram-api/types.js';
 import type { D3TSpanElement, D3TextElement } from '../diagrams/common/commonTypes.js';
 import { log } from '../logger.js';
 import { markdownToHTML, markdownToLines } from '../rendering-util/handle-markdown-text.js';
 import { decodeEntities } from '../utils.js';
 import { splitLineToFitWidth } from './splitText.js';
 import type { MarkdownLine, MarkdownWord } from './types.js';
-import common, { hasKatex, renderKatex } from '$root/diagrams/common/common.js';
-import { getConfig } from '$root/diagram-api/diagramAPI.js';
 
 function applyStyle(dom, styleFn) {
   if (styleFn) {
@@ -82,7 +82,7 @@ function computeWidthOfText(parentNode: any, lineHeight: number, line: MarkdownL
 }
 
 export function computeDimensionOfText(
-  parentNode: Group,
+  parentNode: SVGGroup,
   lineHeight: number,
   text: string
 ): DOMRect | undefined {