refactor: centralize diagramId field and setter into ScopedDiagramDB base class

Extract shared `diagramId` field and `setDiagramId` setter from FlowDB
and ClassDB into a new abstract base class `ScopedDiagramDB`. Both DB
classes now extend it instead of duplicating the field and method.

https://claude.ai/code/session_01FPVnyf54nFQNQnhZ7dSWCE

Author: claude

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

@@ -0,0 +1,14 @@
+import type { DiagramDB } from './types.js';
+
+/**
+ * Base class for diagram DBs that need scoped DOM element IDs.
+ * Provides the diagramId field and setter used to prefix domIds
+ * for uniqueness across multiple diagrams on the same page.
+ */
+export abstract class ScopedDiagramDB implements DiagramDB {
+  protected diagramId = '';
+
+  public setDiagramId(svgElementId: string) {
+    this.diagramId = svgElementId;
+  }
+}

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

@@ -39,7 +39,6 @@ export interface DiagramDB {
   getDirection?: () => string | undefined;
   setDirection?: (dir: DiagramOrientation) => void;
   setDisplayMode?: (title: string) => void;
-  setDiagramId?: (svgElementId: string) => void;
   bindFunctions?: (element: Element) => void;
 }
 

packages/mermaid/src/diagrams/class/classDb.ts

@@ -26,15 +26,15 @@ import type {
   Interface,
 } from './classTypes.js';
 import type { Node, Edge } from '../../rendering-util/types.js';
-import type { DiagramDB } from '../../diagram-api/types.js';
+import { ScopedDiagramDB } from '../../diagram-api/DiagramDBBase.js';
 import DOMPurify from 'dompurify';
 
 const MERMAID_DOM_ID_PREFIX = 'classId-';
 let classCounter = 0;
 
 const sanitizeText = (txt: string) => common.sanitizeText(txt, getConfig());
 
-export class ClassDB implements DiagramDB {
+export class ClassDB extends ScopedDiagramDB {
   private relations: ClassRelation[] = [];
   private classes: ClassMap = new Map<string, ClassNode>();
   private readonly styleClasses = new Map<string, StyleClass>();
@@ -43,12 +43,12 @@ export class ClassDB implements DiagramDB {
   // private static classCounter = 0;
   private namespaces = new Map<string, NamespaceNode>();
   private namespaceCounter = 0;
-  private diagramId = '';
 
   // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
   private functions: Function[] = [];
 
   constructor() {
+    super();
     this.functions.push(this.setupToolTips.bind(this));
     this.clear();
 
@@ -144,14 +144,6 @@ export class ClassDB implements DiagramDB {
     this.interfaces.push(classInterface);
   }
 
-  /**
-   * Sets the diagram's SVG element ID, used to prefix domIds for uniqueness
-   * across multiple diagrams on the same page.
-   */
-  public setDiagramId(svgElementId: string) {
-    this.diagramId = svgElementId;
-  }
-
   /**
    * Function to lookup domId from id in the graph definition.
    * When diagramId is set, returns the prefixed version for DOM uniqueness.

packages/mermaid/src/diagrams/flowchart/flowDb.ts

@@ -1,7 +1,7 @@
 import { select } from 'd3';
 import * as yaml from 'js-yaml';
 import { getConfig, defaultConfig } from '../../diagram-api/diagramAPI.js';
-import type { DiagramDB } from '../../diagram-api/types.js';
+import { ScopedDiagramDB } from '../../diagram-api/DiagramDBBase.js';
 import { log } from '../../logger.js';
 import { isValidShape, type ShapeID } from '../../rendering-util/rendering-elements/shapes.js';
 import type { Edge, Node } from '../../rendering-util/types.js';
@@ -35,10 +35,9 @@ interface LinkData {
 const MERMAID_DOM_ID_PREFIX = 'flowchart-';
 
 // We are using arrow functions assigned to class instance fields instead of methods as they are required by flow JISON
-export class FlowDB implements DiagramDB {
+export class FlowDB extends ScopedDiagramDB {
   private vertexCounter = 0;
   private config = getConfig();
-  private diagramId = '';
   private vertices = new Map<string, FlowVertex>();
   private edges: FlowEdge[] & { defaultInterpolate?: string; defaultStyle?: string[] } = [];
   private classes = new Map<string, FlowClass>();
@@ -56,6 +55,7 @@ export class FlowDB implements DiagramDB {
   private funs: ((element: Element) => void)[] = []; // cspell:ignore funs
 
   constructor() {
+    super();
     this.funs.push(this.setupToolTips.bind(this));
 
     // Needed for JISON since it only supports direct properties
@@ -87,14 +87,6 @@ export class FlowDB implements DiagramDB {
     return common.sanitizeText(txt, this.config);
   }
 
-  /**
-   * Sets the diagram's SVG element ID, used to prefix domIds for uniqueness
-   * across multiple diagrams on the same page.
-   */
-  public setDiagramId(svgElementId: string) {
-    this.diagramId = svgElementId;
-  }
-
   /**
    * Function to lookup domId from id in the graph definition.
    * When diagramId is set, returns the prefixed version for DOM uniqueness.