maxGraph · tbouffard · Nov 6, 2025 · Oct 2, 2025 · Oct 31, 2025 · Oct 31, 2025
diff --git a/packages/core/src/util/Constants.ts b/packages/core/src/util/Constants.ts
@@ -144,8 +144,8 @@ export const INVALID_CONNECT_TARGET_COLOR = '#FF0000';
 export const DROP_TARGET_COLOR = '#0000FF';
 
 /**
- * Defines the color to be used for the coloring valid connection
- * previews. Use 'none' for no color. Default is #FF0000.
+ * Defines the color to be used for the coloring valid connection previews or other valid elements.
+ * Use 'none' for no color. Default is #FF0000.
  */
 export const VALID_COLOR = '#00FF00';
 
@@ -258,19 +258,18 @@ export const OUTLINE_HANDLE_FILLCOLOR = '#00FFFF';
 export const OUTLINE_HANDLE_STROKECOLOR = '#0033FF';
 
 /**
- * Defines the default family for all fonts. Default is Arial,Helvetica.
+ * Default value of {@link StyleDefaultsConfig.fontFamily}.
  */
 export const DEFAULT_FONTFAMILY = 'Arial,Helvetica,sans-serif';
 
 /**
- * Defines the default size (in px). Default is 11.
+ * Default value of {@link StyleDefaultsConfig.fontSize}.
  */
 export const DEFAULT_FONTSIZE = 11;
 
 /**
- * Defines the default value for the <STYLE_TEXT_DIRECTION> if no value is
- * defined for it in the style. Default value is an empty string which means
- * the default system setting is used and no direction is set.
+ * Defines the default value for the {@link CellStateStyle.textDirection} if no value is defined for it in the style.
+ * Default value is an empty string which means the default system setting is used and no direction is set.
  */
 export const DEFAULT_TEXT_DIRECTION = '';
 
@@ -303,18 +302,17 @@ export const ABSOLUTE_LINE_HEIGHT = false;
 export const DEFAULT_FONTSTYLE = 0;
 
 /**
- * Defines the default start size for swimlanes. Default is 40.
+ * Default value of {@link StyleDefaultsConfig.startSize}.
  */
 export const DEFAULT_STARTSIZE = 40;
 
 /**
- * Defines the default size for all markers. Default is 6.
+ * Default value of {@link StyleDefaultsConfig.markerSize}.
  */
 export const DEFAULT_MARKERSIZE = 6;
 
 /**
- * Defines the default width and height for images used in the
- * label shape. Default is 24.
+ * Default value of {@link StyleDefaultsConfig.imageSize}.
  */
 export const DEFAULT_IMAGESIZE = 24;
 
@@ -324,30 +322,27 @@ export const DEFAULT_IMAGESIZE = 24;
 export const ENTITY_SEGMENT = 30;
 
 /**
- * Defines the default rounding factor for the rounded vertices in percent between `0` and `1`.
- * Values should be smaller than `0.5`.
- * See {@link CellStateStyle.arcSize}.
+ * Default value of {@link StyleDefaultsConfig.roundingFactor}.
  */
 export const RECTANGLE_ROUNDING_FACTOR = 0.15;
 
 /**
- * Defines the default size in pixels of the arcs for the rounded edges and vertices.
- * See {@link CellStateStyle.arcSize}.
+ * Default value of {@link StyleDefaultsConfig.lineArcSize}.
  */
 export const LINE_ARCSIZE = 20;
 
 /**
- * Defines the spacing between the arrow shape and its terminals. Default is 0.
+ * Default value of {@link StyleDefaultsConfig.arrowSpacing}.
  */
 export const ARROW_SPACING = 0;
 
 /**
- * Defines the width of the arrow shape. Default is 30.
+ * Default value of {@link StyleDefaultsConfig.arrowWidth}.
  */
 export const ARROW_WIDTH = 30;
 
 /**
- * Defines the size of the arrowhead in the arrow shape. Default is 30.
+ * Default value of {@link StyleDefaultsConfig.arrowSize}.
  */
 export const ARROW_SIZE = 30;
 

diff --git a/packages/core/src/util/config.ts b/packages/core/src/util/config.ts
@@ -17,6 +17,16 @@ limitations under the License.
 import type { I18nProvider, Logger } from '../types.js';
 import { NoOpLogger } from './logger.js';
 import {
+  ARROW_SIZE,
+  ARROW_SPACING,
+  ARROW_WIDTH,
+  DEFAULT_FONTFAMILY,
+  DEFAULT_FONTSIZE,
+  DEFAULT_IMAGESIZE,
+  DEFAULT_MARKERSIZE,
+  DEFAULT_STARTSIZE,
+  LINE_ARCSIZE,
+  RECTANGLE_ROUNDING_FACTOR,
   SHADOW_OFFSET_X,
   SHADOW_OFFSET_Y,
   SHADOW_OPACITY,
@@ -80,6 +90,63 @@ export const GlobalConfig = {
  * @category Configuration
  */
 export const StyleDefaultsConfig = {
+  /**
+   * Defines the size (in px) of the arrowhead in the arrow shape.
+   * @default {@link ARROW_SIZE}
+   * @since 0.22.0
+   */
+  arrowSize: ARROW_SIZE,
+  /**
+   * Defines the spacing (in px) between the arrow shape and its terminals.
+   * @default {@link ARROW_SPACING}
+   * @since 0.22.0
+   */
+  arrowSpacing: ARROW_SPACING,
+  /**
+   * Defines the width (in px) of the arrow shape.
+   * @default {@link ARROW_WIDTH}
+   * @since 0.22.0
+   */
+  arrowWidth: ARROW_WIDTH,
+  /**
+   * Defines the default family for all fonts.
+   * @default {@link DEFAULT_FONTFAMILY}
+   * @since 0.22.0
+   */
+  fontFamily: DEFAULT_FONTFAMILY,
+  /**
+   * Defines the default size (in px).
+   * @default {@link DEFAULT_FONTSIZE}
+   * @since 0.22.0
+   */
+  fontSize: DEFAULT_FONTSIZE,
+  /**
+   * Defines the default width and height (in px) for images used in the label shape.
+   * @default {@link DEFAULT_IMAGESIZE}
+   * @since 0.22.0
+   */
+  imageSize: DEFAULT_IMAGESIZE,
+  /**
+   * Defines the default size (in px) of the arcs for the rounded edges.
+   * See {@link CellStateStyle.arcSize}.
+   * @default {@link LINE_ARCSIZE}
+   * @since 0.22.0
+   */
+  lineArcSize: LINE_ARCSIZE,
+  /**
+   * Defines the default size (in px) for all markers.
+   * @default {@link DEFAULT_MARKERSIZE}
+   * @since 0.22.0
+   */
+  markerSize: DEFAULT_MARKERSIZE,
+  /**
+   * Defines the default rounding factor for the rounded vertices in percent between `0` and `1`.
+   * Values should be smaller than `0.5`.
+   * See {@link CellStateStyle.arcSize}.
+   * @default {@link RECTANGLE_ROUNDING_FACTOR}
+   * @since 0.22.0
+   */
+  roundingFactor: RECTANGLE_ROUNDING_FACTOR,
   /**
    * Defines the color to be used to draw shadows in shapes and windows.
    * @default {@link SHADOWCOLOR}
@@ -100,6 +167,12 @@ export const StyleDefaultsConfig = {
    * @default {@link SHADOW_OPACITY}
    */
   shadowOpacity: SHADOW_OPACITY,
+  /**
+   * Defines the default start size (in px) for swimlanes.
+   * @default {@link DEFAULT_STARTSIZE}
+   * @since 0.22.0
+   */
+  startSize: DEFAULT_STARTSIZE,
 };
 
 const defaultStyleDefaultsConfig = { ...StyleDefaultsConfig };

diff --git a/packages/core/src/util/styleUtils.ts b/packages/core/src/util/styleUtils.ts
@@ -17,12 +17,7 @@ limitations under the License.
 */
 
 import Client from '../Client.js';
-import {
-  DEFAULT_FONTFAMILY,
-  DEFAULT_FONTSIZE,
-  FONT_STYLE_MASK,
-  LINE_HEIGHT,
-} from './Constants.js';
+import { FONT_STYLE_MASK, LINE_HEIGHT } from './Constants.js';
 import Point from '../view/geometry/Point.js';
 import CellPath from '../view/cell/CellPath.js';
 import Rectangle from '../view/geometry/Rectangle.js';
@@ -36,6 +31,7 @@ import type {
   VAlignValue,
 } from '../types.js';
 import { matchBinaryMask } from '../internal/utils.js';
+import { StyleDefaultsConfig } from './config.js';
 
 /**
  * Removes the cursors from the style of the given DOM node and its descendants.
@@ -445,15 +441,15 @@ export const setOpacity = (node: HTMLElement | SVGElement, value: number) => {
  * ```
  *
  * @param text String whose size should be returned.
- * @param fontSize Integer that specifies the font size in pixels. Default is {@link DEFAULT_FONTSIZE}.
- * @param fontFamily String that specifies the name of the font family. Default is {@link DEFAULT_FONTFAMILY}.
+ * @param fontSize Integer that specifies the font size in pixels. Default is {@link StyleDefaultsConfig.fontSize}.
+ * @param fontFamily String that specifies the name of the font family. Default is {@link StyleDefaultsConfig.fontFamily}.
  * @param textWidth Optional width for text wrapping.
  * @param fontStyle Optional font style, value generally taken from {@link CellStateStyle.fontStyle}.
  */
 export const getSizeForString = (
   text: string,
-  fontSize = DEFAULT_FONTSIZE,
-  fontFamily = DEFAULT_FONTFAMILY,
+  fontSize = StyleDefaultsConfig.fontSize,
+  fontFamily = StyleDefaultsConfig.fontFamily,
   textWidth: number | null = null,
   fontStyle: number | null = null
 ) => {

diff --git a/packages/core/src/view/canvas/AbstractCanvas2D.ts b/packages/core/src/view/canvas/AbstractCanvas2D.ts
@@ -17,7 +17,7 @@ limitations under the License.
 */
 
 import { arcToCurves, getRotatedPoint } from '../../util/mathUtils.js';
-import { DEFAULT_FONTFAMILY, DEFAULT_FONTSIZE, NONE } from '../../util/Constants.js';
+import { NONE } from '../../util/Constants.js';
 import UrlConverter from '../../util/UrlConverter.js';
 import Point from '../geometry/Point.js';
 import { clone } from '../../util/cloneUtils.js';
@@ -172,8 +172,8 @@ abstract class AbstractCanvas2D {
       fontColor: '#000000',
       fontBackgroundColor: NONE,
       fontBorderColor: NONE,
-      fontSize: DEFAULT_FONTSIZE,
-      fontFamily: DEFAULT_FONTFAMILY,
+      fontSize: StyleDefaultsConfig.fontSize,
+      fontFamily: StyleDefaultsConfig.fontFamily,
       fontStyle: 0,
       shadow: false,
       shadowColor: StyleDefaultsConfig.shadowColor,

diff --git a/packages/core/src/view/canvas/SvgCanvas2D.ts b/packages/core/src/view/canvas/SvgCanvas2D.ts
@@ -22,8 +22,6 @@ import { getAlignmentAsPoint } from '../../util/styleUtils.js';
 import Client from '../../Client.js';
 import {
   ABSOLUTE_LINE_HEIGHT,
-  DEFAULT_FONTFAMILY,
-  DEFAULT_FONTSIZE,
   FONT_STYLE_MASK,
   LINE_HEIGHT,
   NONE,
@@ -46,6 +44,7 @@ import {
   TextDirectionValue,
   VAlignValue,
 } from '../../types.js';
+import { StyleDefaultsConfig } from '../../util/config.js';
 
 // Activates workaround for gradient ID resolution if base tag is used.
 const useAbsoluteIds =
@@ -387,7 +386,7 @@ class SvgCanvas2D extends AbstractCanvas2D {
     style.setAttribute('type', 'text/css');
     write(
       style,
-      `svg{font-family:${DEFAULT_FONTFAMILY};font-size:${DEFAULT_FONTSIZE};fill:none;stroke-miterlimit:10}`
+      `svg{font-family:${StyleDefaultsConfig.fontFamily};font-size:${StyleDefaultsConfig.fontSize};fill:none;stroke-miterlimit:10}`
     );
     return style;
   }
@@ -1578,7 +1577,7 @@ class SvgCanvas2D extends AbstractCanvas2D {
       node.setAttribute('text-anchor', anchor);
     }
 
-    if (!this.styleEnabled || size !== DEFAULT_FONTSIZE) {
+    if (!this.styleEnabled || size !== StyleDefaultsConfig.fontSize) {
       node.setAttribute('font-size', `${size * s.scale}px`);
     }
 
@@ -1658,7 +1657,7 @@ class SvgCanvas2D extends AbstractCanvas2D {
       node.setAttribute('fill', s.fontColor);
     }
 
-    if (!this.styleEnabled || s.fontFamily !== DEFAULT_FONTFAMILY) {
+    if (!this.styleEnabled || s.fontFamily !== StyleDefaultsConfig.fontFamily) {
       node.setAttribute('font-family', s.fontFamily);
     }
 

diff --git a/packages/core/src/view/canvas/XmlCanvas2D.ts b/packages/core/src/view/canvas/XmlCanvas2D.ts
@@ -17,7 +17,7 @@ limitations under the License.
 */
 
 import AbstractCanvas2D from './AbstractCanvas2D.js';
-import { DEFAULT_FONTFAMILY, DEFAULT_FONTSIZE, NONE } from '../../util/Constants.js';
+import { NONE } from '../../util/Constants.js';
 import { getOuterHtml, isNode } from '../../util/domUtils.js';
 import { DirectionValue, TextDirectionValue } from '../../types.js';
 import { StyleDefaultsConfig } from '../../util/config.js';
@@ -60,11 +60,11 @@ class XmlCanvas2D extends AbstractCanvas2D {
 
     // Writes font defaults
     elem = this.createElement('fontfamily');
-    elem.setAttribute('family', DEFAULT_FONTFAMILY);
+    elem.setAttribute('family', StyleDefaultsConfig.fontFamily);
     this.root.appendChild(elem);
 
     elem = this.createElement('fontsize');
-    elem.setAttribute('size', String(DEFAULT_FONTSIZE));
+    elem.setAttribute('size', String(StyleDefaultsConfig.fontSize));
     this.root.appendChild(elem);
 
     // Writes shadow defaults
@@ -526,7 +526,7 @@ class XmlCanvas2D extends AbstractCanvas2D {
 
   /**
    * Sets the current font size.
-   * @default {@link mxConstants.DEFAULT_FONTSIZE}
+   * @default {@link StyleDefaultsConfig.fontSize}
    *
    * @param value Numeric representation of the font size.
    */
@@ -547,7 +547,7 @@ class XmlCanvas2D extends AbstractCanvas2D {
 
   /**
    * Sets the current font family.
-   * @default {@link mxConstants.DEFAULT_FONTFAMILY}
+   * @default {@link StyleDefaultsConfig.fontFamily}
    *
    * @param value String representation of the font family. This handles the same
    * values as the CSS font-family property.

diff --git a/packages/core/src/view/cell/CellRenderer.ts b/packages/core/src/view/cell/CellRenderer.ts
@@ -20,13 +20,7 @@ import RectangleShape from '../shape/node/RectangleShape.js';
 import ConnectorShape from '../shape/edge/ConnectorShape.js';
 import ImageShape from '../shape/node/ImageShape.js';
 import TextShape from '../shape/node/TextShape.js';
-import {
-  DEFAULT_FONTFAMILY,
-  DEFAULT_FONTSIZE,
-  DEFAULT_FONTSTYLE,
-  DEFAULT_TEXT_DIRECTION,
-  NONE,
-} from '../../util/Constants.js';
+import { DEFAULT_FONTSTYLE, DEFAULT_TEXT_DIRECTION, NONE } from '../../util/Constants.js';
 import { getRotatedPoint, mod, toRadians } from '../../util/mathUtils.js';
 import { convertPoint } from '../../util/styleUtils.js';
 import { equalEntries, equalPoints } from '../../util/arrayUtils.js';
@@ -46,6 +40,7 @@ import { getClientX, getClientY, getSource } from '../../util/EventUtils.js';
 import { isNode } from '../../util/domUtils.js';
 import type { CellStateStyle, ShapeConstructor } from '../../types.js';
 import type SelectionCellsHandler from '../plugins/SelectionCellsHandler.js';
+import { StyleDefaultsConfig } from '../../util/config.js';
 
 const placeholderStyleValues = ['inherit', 'swimlane', 'indicated'];
 const placeholderStyleProperties: (keyof CellStateStyle)[] = [
@@ -898,8 +893,8 @@ class CellRenderer {
 
     return (
       check('fontStyle', 'fontStyle', DEFAULT_FONTSTYLE) ||
-      check('family', 'fontFamily', DEFAULT_FONTFAMILY) ||
-      check('size', 'fontSize', DEFAULT_FONTSIZE) ||
+      check('family', 'fontFamily', StyleDefaultsConfig.fontFamily) ||
+      check('size', 'fontSize', StyleDefaultsConfig.fontSize) ||
       check('color', 'fontColor', 'black') ||
       check('align', 'align', '') ||
       check('valign', 'verticalAlign', '') ||

diff --git a/packages/core/src/view/handler/VertexHandler.ts b/packages/core/src/view/handler/VertexHandler.ts
@@ -1531,7 +1531,7 @@ class VertexHandler implements MouseListenerSet {
    *        && (index == 3 || index == 4)
    *        && s.text != null && s.style.whiteSpace == 'wrap') {
    *     const label = this.graph.getLabel(s.cell);
-   *     const fontSize = s.style.fontSize ?? constants.DEFAULT_FONTSIZE;
+   *     const fontSize = s.style.fontSize ?? StyleDefaultsConfig.fontSize;
    *     const ww = result.width / s.view.scale - s.text.spacingRight - s.text.spacingLeft
    *
    *     result.height = styleUtils.getSizeForString(label, fontSize, s.style.fontFamily, ww).height;