standardize info diagram definitions

.vite/jisonTransformer.ts

@@ -1,8 +1,6 @@
-// @ts-ignore No typings for jison
 import jison from 'jison';
 
 export const transformJison = (src: string): string => {
-  // @ts-ignore No typings for jison
   const parser = new jison.Generator(src, {
     moduleType: 'js',
     'token-stack': true,

__mocks__/d3.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck TODO: Fix TS
 import { MockedD3 } from '../packages/mermaid/src/tests/MockedD3.js';
 
 export const select = function () {

docs/config/setup/interfaces/mermaidAPI.RenderResult.md

@@ -39,7 +39,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present.
 
 #### Defined in
 
-[mermaidAPI.ts:98](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L98)
+[mermaidAPI.ts:97](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L97)
 
 ---
 
@@ -51,4 +51,4 @@ The svg code for the rendered graph.
 
 #### Defined in
 
-[mermaidAPI.ts:88](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L88)
+[mermaidAPI.ts:87](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L87)

docs/config/setup/modules/mermaidAPI.md

@@ -25,7 +25,7 @@ Renames and re-exports [mermaidAPI](mermaidAPI.md#mermaidapi)
 
 #### Defined in
 
-[mermaidAPI.ts:82](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L82)
+[mermaidAPI.ts:81](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L81)
 
 ## Variables
 
@@ -96,7 +96,7 @@ mermaid.initialize(config);
 
 #### Defined in
 
-[mermaidAPI.ts:670](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L670)
+[mermaidAPI.ts:663](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L663)
 
 ## Functions
 
@@ -127,7 +127,7 @@ Return the last node appended
 
 #### Defined in
 
-[mermaidAPI.ts:309](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L309)
+[mermaidAPI.ts:308](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L308)
 
 ---
 
@@ -153,7 +153,7 @@ the cleaned up svgCode
 
 #### Defined in
 
-[mermaidAPI.ts:257](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L257)
+[mermaidAPI.ts:256](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L256)
 
 ---
 
@@ -179,7 +179,7 @@ the string with all the user styles
 
 #### Defined in
 
-[mermaidAPI.ts:186](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L186)
+[mermaidAPI.ts:185](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L185)
 
 ---
 
@@ -202,7 +202,7 @@ the string with all the user styles
 
 #### Defined in
 
-[mermaidAPI.ts:234](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L234)
+[mermaidAPI.ts:233](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L233)
 
 ---
 
@@ -229,7 +229,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
 
 #### Defined in
 
-[mermaidAPI.ts:170](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L170)
+[mermaidAPI.ts:169](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L169)
 
 ---
 
@@ -249,7 +249,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
 
 #### Defined in
 
-[mermaidAPI.ts:156](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L156)
+[mermaidAPI.ts:155](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L155)
 
 ---
 
@@ -269,7 +269,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
 
 #### Defined in
 
-[mermaidAPI.ts:127](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L127)
+[mermaidAPI.ts:126](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L126)
 
 ---
 
@@ -295,7 +295,7 @@ Put the svgCode into an iFrame. Return the iFrame code
 
 #### Defined in
 
-[mermaidAPI.ts:288](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L288)
+[mermaidAPI.ts:287](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L287)
 
 ---
 
@@ -320,4 +320,4 @@ Remove any existing elements from the given document
 
 #### Defined in
 
-[mermaidAPI.ts:359](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L359)
+[mermaidAPI.ts:358](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L358)

packages/mermaid-example-diagram/src/detector.ts

@@ -3,7 +3,7 @@ import type { ExternalDiagramDefinition } from 'mermaid';
 const id = 'example-diagram';
 
 const detector = (txt: string) => {
-  return txt.match(/^\s*example-diagram/) !== null;
+  return /^\s*example-diagram/.test(txt);
 };
 
 const loader = async () => {

packages/mermaid-zenuml/src/detector.ts

@@ -1,10 +1,9 @@
 import type { ExternalDiagramDefinition } from 'mermaid';
 
 const id = 'zenuml';
-const regexp = /^\s*zenuml/;
 
 const detector = (txt: string) => {
-  return txt.match(regexp) !== null;
+  return /^\s*zenuml/.test(txt);
 };
 
 const loader = async () => {

packages/mermaid/package.json

@@ -73,6 +73,7 @@
   "devDependencies": {
     "@types/cytoscape": "^3.19.9",
     "@types/d3": "^7.4.0",
+    "@types/d3-selection": "^3.0.5",
     "@types/dompurify": "^3.0.2",
     "@types/jsdom": "^21.1.1",
     "@types/lodash-es": "^4.17.7",

packages/mermaid/src/accessibility.spec.ts

@@ -51,7 +51,6 @@ describe('accessibility', () => {
         desc: string | null | undefined,
         givenId: string
       ) {
-        // @ts-ignore Required to easily handle the d3 select types
         const svgAttrSpy = vi.spyOn(svgD3Node, 'attr').mockReturnValue(svgD3Node);
         addSVGa11yTitleDescription(svgD3Node, title, desc, givenId);
         expect(svgAttrSpy).toHaveBeenCalledWith('aria-labelledby', `chart-title-${givenId}`);
@@ -63,7 +62,6 @@ describe('accessibility', () => {
         desc: string | null | undefined,
         givenId: string
       ) {
-        // @ts-ignore Required to easily handle the d3 select types
         const svgAttrSpy = vi.spyOn(svgD3Node, 'attr').mockReturnValue(svgD3Node);
         addSVGa11yTitleDescription(svgD3Node, title, desc, givenId);
         expect(svgAttrSpy).toHaveBeenCalledWith('aria-describedby', `chart-desc-${givenId}`);

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

@@ -7,6 +7,7 @@ import { addStylesForDiagram } from '../styles.js';
 import { DiagramDefinition, DiagramDetector } from './types.js';
 import * as _commonDb from '../commonDb.js';
 import { parseDirective as _parseDirective } from '../directiveUtils.js';
+import isEmpty from 'lodash-es/isEmpty.js';
 
 /*
   Packaging and exposing resources for external diagrams so that they can import
@@ -50,7 +51,9 @@ export const registerDiagram = (
   if (detector) {
     addDetector(id, detector);
   }
-  addStylesForDiagram(id, diagram.styles);
+  if (!isEmpty(diagram.styles)) {
+    addStylesForDiagram(id, diagram.styles);
+  }
 
   if (diagram.injectUtils) {
     diagram.injectUtils(

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

@@ -1,4 +1,4 @@
-import { DiagramDb } from './types.js';
+import { DiagramDB } from './types.js';
 // The "* as yaml" part is necessary for tree-shaking
 import * as yaml from 'js-yaml';
 
@@ -22,7 +22,7 @@ type FrontMatterMetadata = {
  * @param db - Diagram database, could be of any diagram.
  * @returns text with frontmatter stripped out
  */
-export function extractFrontMatter(text: string, db: DiagramDb): string {
+export function extractFrontMatter(text: string, db: DiagramDB): string {
   const matches = text.match(frontMatterRegex);
   if (matches) {
     const parsed: FrontMatterMetadata = yaml.load(matches[1], {

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

@@ -1,4 +1,6 @@
+import { Diagram } from '../Diagram.js';
 import { MermaidConfig } from '../config.type.js';
+import type * as d3 from 'd3';
 
 export interface InjectUtils {
   _log: any;
@@ -13,7 +15,7 @@ export interface InjectUtils {
 /**
  * Generic Diagram DB that may apply to any diagram type.
  */
-export interface DiagramDb {
+export interface DiagramDB {
   clear?: () => void;
   setDiagramTitle?: (title: string) => void;
   setDisplayMode?: (title: string) => void;
@@ -23,10 +25,10 @@ export interface DiagramDb {
 }
 
 export interface DiagramDefinition {
-  db: DiagramDb;
+  db: DiagramDB;
   renderer: any;
   parser: any;
-  styles: any;
+  styles?: any;
   init?: (config: MermaidConfig) => void;
   injectUtils?: (
     _log: InjectUtils['_log'],
@@ -52,3 +54,31 @@ export interface ExternalDiagramDefinition {
 
 export type DiagramDetector = (text: string, config?: MermaidConfig) => boolean;
 export type DiagramLoader = () => Promise<{ id: string; diagram: DiagramDefinition }>;
+
+/**
+ * Type for function draws diagram in the tag with id: id based on the graph definition in text.
+ *
+ * @param text - The text of the diagram.
+ * @param id - The id of the diagram which will be used as a DOM element id.
+ * @param version - MermaidJS version from package.json.
+ * @param diagramObject - A standard diagram containing the DB and the text and type etc of the diagram.
+ */
+export type DrawDefinition = (
+  text: string,
+  id: string,
+  version: string,
+  diagramObject: Diagram
+) => void;
+
+/**
+ * Type for function parse directive from diagram code.
+ *
+ * @param statement -
+ * @param context -
+ * @param type -
+ */
+export type ParseDirectiveDefinition = (statement: string, context: string, type: string) => void;
+
+export type HTML = d3.Selection<HTMLIFrameElement, unknown, Element, unknown>;
+
+export type SVG = d3.Selection<SVGSVGElement, unknown, Element, unknown>;

packages/mermaid/src/diagrams/c4/c4Detector.ts

@@ -1,12 +1,16 @@
-import type { ExternalDiagramDefinition } from '../../diagram-api/types.js';
+import type {
+  DiagramDetector,
+  DiagramLoader,
+  ExternalDiagramDefinition,
+} from '../../diagram-api/types.js';
 
 const id = 'c4';
 
-const detector = (txt: string) => {
-  return txt.match(/^\s*C4Context|C4Container|C4Component|C4Dynamic|C4Deployment/) !== null;
+const detector: DiagramDetector = (txt) => {
+  return /^\s*C4Context|C4Container|C4Component|C4Dynamic|C4Deployment/.test(txt);
 };
 
-const loader = async () => {
+const loader: DiagramLoader = async () => {
   const { diagram } = await import('./c4Diagram.js');
   return { id, diagram };
 };

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

@@ -1,4 +1,4 @@
-// @ts-expect-error - d3 types issue
+// @ts-nocheck - don't check until handle it
 import { select, Selection } from 'd3';
 import { log } from '../../logger.js';
 import * as configApi from '../../config.js';
@@ -367,7 +367,6 @@ export const relationType = {
 const setupToolTips = function (element: Element) {
   let tooltipElem: Selection<HTMLDivElement, unknown, HTMLElement, unknown> =
     select('.mermaidTooltip');
-  // @ts-ignore - _groups is a dynamic property
   if ((tooltipElem._groups || tooltipElem)[0][0] === null) {
     tooltipElem = select('body').append('div').attr('class', 'mermaidTooltip').style('opacity', 0);
   }

packages/mermaid/src/diagrams/class/classDetector-V2.ts

@@ -1,20 +1,21 @@
-import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js';
+import type {
+  DiagramDetector,
+  DiagramLoader,
+  ExternalDiagramDefinition,
+} from '../../diagram-api/types.js';
 
 const id = 'classDiagram';
 
 const detector: DiagramDetector = (txt, config) => {
   // If we have configured to use dagre-wrapper then we should return true in this function for classDiagram code thus making it use the new class diagram
-  if (
-    txt.match(/^\s*classDiagram/) !== null &&
-    config?.class?.defaultRenderer === 'dagre-wrapper'
-  ) {
+  if (/^\s*classDiagram/.test(txt) && config?.class?.defaultRenderer === 'dagre-wrapper') {
     return true;
   }
   // We have not opted to use the new renderer so we should return true if we detect a class diagram
-  return txt.match(/^\s*classDiagram-v2/) !== null;
+  return /^\s*classDiagram-v2/.test(txt);
 };
 
-const loader = async () => {
+const loader: DiagramLoader = async () => {
   const { diagram } = await import('./classDiagram-v2.js');
   return { id, diagram };
 };

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

@@ -1,4 +1,8 @@
-import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js';
+import type {
+  DiagramDetector,
+  DiagramLoader,
+  ExternalDiagramDefinition,
+} from '../../diagram-api/types.js';
 
 const id = 'class';
 
@@ -8,10 +12,10 @@ const detector: DiagramDetector = (txt, config) => {
     return false;
   }
   // We have not opted to use the new renderer so we should return true if we detect a class diagram
-  return txt.match(/^\s*classDiagram/) !== null;
+  return /^\s*classDiagram/.test(txt);
 };
 
-const loader = async () => {
+const loader: DiagramLoader = async () => {
   const { diagram } = await import('./classDiagram.js');
   return { id, diagram };
 };

packages/mermaid/src/diagrams/class/classRenderer-v2.ts

@@ -1,4 +1,4 @@
-// @ts-ignore d3 types are not available
+// @ts-nocheck - don't check until handle it
 import { select, curveLinear } from 'd3';
 import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
 import { log } from '../../logger.js';
@@ -353,15 +353,11 @@ export const draw = async function (text: string, id: string, _version: string,
   }
   const root =
     securityLevel === 'sandbox'
-      ? // @ts-ignore Ignore type error for now
-
-        select(sandboxElement.nodes()[0].contentDocument.body)
+      ? select(sandboxElement.nodes()[0].contentDocument.body)
       : select('body');
-  // @ts-ignore Ignore type error for now
   const svg = root.select(`[id="${id}"]`);
 
   // Run the renderer. This is what draws the final graph.
-  // @ts-ignore Ignore type error for now
   const element = root.select('#' + id + ' g');
   await render(
     element,
@@ -377,7 +373,6 @@ export const draw = async function (text: string, id: string, _version: string,
 
   // Add label rects for non html labels
   if (!conf?.htmlLabels) {
-    // @ts-ignore Ignore type error for now
     const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
     const labels = doc.querySelectorAll('[id="' + id + '"] .edgeLabel .label');
     for (const label of labels) {