Merge branch 'develop' into feature/3508_color-user-journey-title

Co-authored-by: Pranav Mishra <mishrap@dickinson.edu>
2025-09-19 07:19:41 +02:00 · 2025-01-25 21:12:11 -05:00
parent a30705cdcc e2de55202f
commit f0a8ccb177
32 changed files with 3230 additions and 1488 deletions
--- a/packages/mermaid/src/diagrams/class/classDb.ts
+++ b/packages/mermaid/src/diagrams/class/classDb.ts
--- a/packages/mermaid/src/diagrams/class/classDiagram-styles.spec.js
+++ b/packages/mermaid/src/diagrams/class/classDiagram-styles.spec.js
@@ -1,9 +1,11 @@
 import { parser } from './parser/classDiagram.jison';
-import classDb from './classDb.js';
+import { ClassDB } from './classDb.js';

 describe('class diagram, ', function () {
  describe('when parsing data from a classDiagram it', function () {
+    let classDb;
    beforeEach(function () {
+      classDb = new ClassDB();
      parser.yy = classDb;
      parser.yy.clear();
    });
--- a/packages/mermaid/src/diagrams/class/classDiagram-v2.ts
+++ b/packages/mermaid/src/diagrams/class/classDiagram-v2.ts
@@ -1,13 +1,15 @@
 import type { DiagramDefinition } from '../../diagram-api/types.js';
 // @ts-ignore: JISON doesn't support types
 import parser from './parser/classDiagram.jison';
-import db from './classDb.js';
+import { ClassDB } from './classDb.js';
 import styles from './styles.js';
 import renderer from './classRenderer-v3-unified.js';

 export const diagram: DiagramDefinition = {
  parser,
-  db,
+  get db() {
+    return new ClassDB();
+  },
  renderer,
  styles,
  init: (cnf) => {
@@ -15,6 +17,5 @@ export const diagram: DiagramDefinition = {
      cnf.class = {};
    }
    cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
-    db.clear();
  },
 };
--- a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
+++ b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
@@ -1,6 +1,7 @@
+/* eslint-disable @typescript-eslint/unbound-method -- Broken for Vitest mocks, see https://github.com/vitest-dev/eslint-plugin-vitest/pull/286 */
 // @ts-expect-error Jison doesn't export types
 import { parser } from './parser/classDiagram.jison';
-import classDb from './classDb.js';
+import { ClassDB } from './classDb.js';
 import { vi, describe, it, expect } from 'vitest';
 import type { ClassMap, NamespaceNode } from './classTypes.js';
 const spyOn = vi.spyOn;
@@ -10,8 +11,9 @@ const abstractCssStyle = 'font-style:italic;';

 describe('given a basic class diagram, ', function () {
  describe('when parsing class definition', function () {
+    let classDb: ClassDB;
    beforeEach(function () {
-      classDb.clear();
+      classDb = new ClassDB();
      parser.yy = classDb;
    });
    it('should handle classes within namespaces', () => {
@@ -564,8 +566,9 @@ class C13["With Città foreign language"]
  });

  describe('when parsing class defined in brackets', function () {
+    let classDb: ClassDB;
    beforeEach(function () {
-      classDb.clear();
+      classDb = new ClassDB();
      parser.yy = classDb;
    });

@@ -656,8 +659,9 @@ class C13["With Città foreign language"]
  });

  describe('when parsing comments', function () {
+    let classDb: ClassDB;
    beforeEach(function () {
-      classDb.clear();
+      classDb = new ClassDB();
      parser.yy = classDb;
    });

@@ -746,8 +750,9 @@ foo()
  });

  describe('when parsing click statements', function () {
+    let classDb: ClassDB;
    beforeEach(function () {
-      classDb.clear();
+      classDb = new ClassDB();
      parser.yy = classDb;
    });
    it('should handle href link', function () {
@@ -857,8 +862,9 @@ foo()
  });

  describe('when parsing annotations', function () {
+    let classDb: ClassDB;
    beforeEach(function () {
-      classDb.clear();
+      classDb = new ClassDB();
      parser.yy = classDb;
    });

@@ -921,8 +927,9 @@ foo()

 describe('given a class diagram with members and methods ', function () {
  describe('when parsing members', function () {
+    let classDb: ClassDB;
    beforeEach(function () {
-      classDb.clear();
+      classDb = new ClassDB();
      parser.yy = classDb;
    });

@@ -980,8 +987,9 @@ describe('given a class diagram with members and methods ', function () {
  });

  describe('when parsing method definition', function () {
+    let classDb: ClassDB;
    beforeEach(function () {
-      classDb.clear();
+      classDb = new ClassDB();
      parser.yy = classDb;
    });

@@ -1067,8 +1075,9 @@ describe('given a class diagram with members and methods ', function () {

 describe('given a class diagram with generics, ', function () {
  describe('when parsing valid generic classes', function () {
+    let classDb: ClassDB;
    beforeEach(function () {
-      classDb.clear();
+      classDb = new ClassDB();
      parser.yy = classDb;
    });

@@ -1180,8 +1189,9 @@ namespace space {

 describe('given a class diagram with relationships, ', function () {
  describe('when parsing basic relationships', function () {
+    let classDb: ClassDB;
    beforeEach(function () {
-      classDb.clear();
+      classDb = new ClassDB();
      parser.yy = classDb;
    });

@@ -1714,7 +1724,9 @@ class Class2
  });

  describe('when parsing classDiagram with text labels', () => {
+    let classDb: ClassDB;
    beforeEach(function () {
+      classDb = new ClassDB();
      parser.yy = classDb;
      parser.yy.clear();
    });
@@ -1897,3 +1909,40 @@ class C13["With Città foreign language"]
    });
  });
 });
+
+describe('class db class', () => {
+  let classDb: ClassDB;
+  beforeEach(() => {
+    classDb = new ClassDB();
+  });
+  // This is to ensure that functions used in class JISON are exposed as function from ClassDB
+  it('should have functions used in class JISON as own property', () => {
+    const functionsUsedInParser = [
+      'addRelation',
+      'cleanupLabel',
+      'setAccTitle',
+      'setAccDescription',
+      'addClassesToNamespace',
+      'addNamespace',
+      'setCssClass',
+      'addMembers',
+      'addClass',
+      'setClassLabel',
+      'addAnnotation',
+      'addMember',
+      'addNote',
+      'defineClass',
+      'setDirection',
+      'relationType',
+      'lineType',
+      'setClickEvent',
+      'setTooltip',
+      'setLink',
+      'setCssStyle',
+    ] as const satisfies (keyof ClassDB)[];
+
+    for (const fun of functionsUsedInParser) {
+      expect(Object.hasOwn(classDb, fun)).toBe(true);
+    }
+  });
+});
--- a/packages/mermaid/src/diagrams/class/classDiagram.ts
+++ b/packages/mermaid/src/diagrams/class/classDiagram.ts
@@ -1,13 +1,15 @@
 import type { DiagramDefinition } from '../../diagram-api/types.js';
 // @ts-ignore: JISON doesn't support types
 import parser from './parser/classDiagram.jison';
-import db from './classDb.js';
+import { ClassDB } from './classDb.js';
 import styles from './styles.js';
 import renderer from './classRenderer-v3-unified.js';

 export const diagram: DiagramDefinition = {
  parser,
-  db,
+  get db() {
+    return new ClassDB();
+  },
  renderer,
  styles,
  init: (cnf) => {
@@ -15,6 +17,5 @@ export const diagram: DiagramDefinition = {
      cnf.class = {};
    }
    cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
-    db.clear();
  },
 };
--- a/packages/mermaid/src/diagrams/class/parser/class.spec.js
+++ b/packages/mermaid/src/diagrams/class/parser/class.spec.js
@@ -1,8 +1,10 @@
 import { parser } from './classDiagram.jison';
-import classDb from '../classDb.js';
+import { ClassDB } from '../classDb.js';

 describe('class diagram', function () {
+  let classDb;
  beforeEach(function () {
+    classDb = new ClassDB();
    parser.yy = classDb;
    parser.yy.clear();
  });
--- a/packages/mermaid/src/diagrams/state/stateDiagram-v2.ts
+++ b/packages/mermaid/src/diagrams/state/stateDiagram-v2.ts
@@ -15,6 +15,5 @@ export const diagram: DiagramDefinition = {
      cnf.state = {};
    }
    cnf.state.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
-    db.clear();
  },
 };
--- a/packages/mermaid/src/diagrams/state/stateDiagram.ts
+++ b/packages/mermaid/src/diagrams/state/stateDiagram.ts
@@ -15,6 +15,5 @@ export const diagram: DiagramDefinition = {
      cnf.state = {};
    }
    cnf.state.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
-    db.clear();
  },
 };
--- a/packages/mermaid/src/docs/config/faq.md
+++ b/packages/mermaid/src/docs/config/faq.md
@@ -1,11 +1,11 @@
 # Frequently Asked Questions

-1. [How to add title to flowchart?](https://github.com/knsv/mermaid/issues/556#issuecomment-363182217)
+1. [How to add title to flowchart?](https://github.com/mermaid-js/mermaid/issues/556#issuecomment-363182217)
 1. [How to specify custom CSS file?](https://github.com/mermaidjs/mermaid.cli/pull/24#issuecomment-373402785)
-1. [How to fix tooltip misplacement issue?](https://github.com/knsv/mermaid/issues/542#issuecomment-3343564621)
-1. [How to specify gantt diagram xAxis format?](https://github.com/knsv/mermaid/issues/269#issuecomment-373229136)
-1. [How to bind an event?](https://github.com/knsv/mermaid/issues/372)
-1. [How to add newline in the text?](https://github.com/knsv/mermaid/issues/384#issuecomment-281339381)
-1. [How to have special characters in link text?](https://github.com/knsv/mermaid/issues/407#issuecomment-329944735)
-1. [How to change Flowchart curve style?](https://github.com/knsv/mermaid/issues/580#issuecomment-373929046)
+1. [How to fix tooltip misplacement issue?](https://github.com/mermaid-js/mermaid/issues/542#issuecomment-3343564621)
+1. [How to specify gantt diagram xAxis format?](https://github.com/mermaid-js/mermaid/issues/269#issuecomment-373229136)
+1. [How to bind an event?](https://github.com/mermaid-js/mermaid/issues/372)
+1. [How to add newline in the text?](https://github.com/mermaid-js/mermaid/issues/384#issuecomment-281339381)
+1. [How to have special characters in link text?](https://github.com/mermaid-js/mermaid/issues/407#issuecomment-329944735)
+1. [How to change Flowchart curve style?](https://github.com/mermaid-js/mermaid/issues/580#issuecomment-373929046)
 1. [How to create a Flowchart end-Node that says "End"](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897)
--- a/packages/mermaid/src/docs/ecosystem/integrations-community.md
+++ b/packages/mermaid/src/docs/ecosystem/integrations-community.md
@@ -39,6 +39,7 @@ To add an integration to this list, see the [Integrations - create page](./integ
 - [Deepdwn](https://billiam.itch.io/deepdwn) ✅
 - [Doctave](https://www.doctave.com/) ✅
  - [Mermaid in Markdown code blocks](https://docs.doctave.com/components/mermaid) ✅
+- [Forgejo](https://forgejo.org/) ✅
 - [GitBook](https://gitbook.com)
  - [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid)
  - [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf)
@@ -94,8 +95,7 @@ Blogging frameworks and platforms
 - [Nextra](https://nextra.site/)
  - [Mermaid](https://nextra.site/docs/guide/mermaid)
 - [WordPress](https://wordpress.org)
-  - [WordPress Markdown Editor](https://wordpress.org/plugins/wp-githuber-md)
-  - [WP-ReliableMD](https://wordpress.org/plugins/wp-reliablemd/)
+  - [MerPRess](https://wordpress.org/plugins/merpress/)

 ### CMS/ECM

--- a/packages/mermaid/src/docs/intro/index.md
+++ b/packages/mermaid/src/docs/intro/index.md
@@ -44,7 +44,7 @@ For a more detailed introduction to Mermaid and some of its more basic uses, loo

 🌐 [CDN](https://www.jsdelivr.com/package/npm/mermaid) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](../community/contributing.md) | 🔌 [Plug-Ins](../ecosystem/integrations-community.md)

-> 🖖 Keep a steady pulse: mermaid needs more Collaborators, [Read More](https://github.com/knsv/mermaid/issues/866).
+> 🖖 Keep a steady pulse: mermaid needs more Collaborators, [Read More](https://github.com/mermaid-js/mermaid/issues/866).

 :trophy: **Mermaid was nominated and won the [JS Open Source Awards (2019)](https://osawards.com/javascript/#nominees) in the category "The most exciting use of technology"!!!**

@@ -208,7 +208,7 @@ A quick note from Knut Sveidqvist:
 >
 > _Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017._
 >
-> _Thank you to the ever-growing list of [contributors](https://github.com/knsv/mermaid/graphs/contributors) that brought the project this far!_
+> _Thank you to the ever-growing list of [contributors](https://github.com/mermaid-js/mermaid/graphs/contributors) that brought the project this far!_

 ---

--- a/packages/mermaid/src/docs/syntax/flowchart.md
+++ b/packages/mermaid/src/docs/syntax/flowchart.md
@@ -1135,8 +1135,7 @@ graph LR
 ```

 For a full list of available curves, including an explanation of custom curves, refer to
-the [Shapes](https://github.com/d3/d3-shape/blob/main/README.md#curves) documentation in the
-[d3-shape](https://github.com/d3/d3-shape/) project.
+the [Shapes](https://d3js.org/d3-shape/curve) documentation in the [d3-shape](https://github.com/d3/d3-shape/) project.

 ### Styling a node

--- a/packages/mermaid/src/docs/syntax/timeline.md
+++ b/packages/mermaid/src/docs/syntax/timeline.md
@@ -12,7 +12,7 @@ timeline
    2002 : LinkedIn
    2004 : Facebook
         : Google
-    2005 : Youtube
+    2005 : YouTube
    2006 : Twitter
 ```

@@ -51,7 +51,7 @@ timeline
    title History of Social Media Platform
    2002 : LinkedIn
    2004 : Facebook : Google
-    2005 : Youtube
+    2005 : YouTube
    2006 : Twitter
 ```

@@ -134,7 +134,7 @@ However, if there is no section defined, then we have two possibilities:
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
-          2005 : Youtube
+          2005 : YouTube
          2006 : Twitter

 ```
@@ -165,7 +165,7 @@ let us look at same example, where we have disabled the multiColor option.
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
-          2005 : Youtube
+          2005 : YouTube
          2006 : Twitter

 ```
@@ -193,7 +193,7 @@ Now let's override the default values for the `cScale0` to `cScale2` variables:
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
-          2005 : Youtube
+          2005 : YouTube
          2006 : Twitter
          2007 : Tumblr
          2008 : Instagram
@@ -226,7 +226,7 @@ Let's put them to use, and see how our sample diagram looks in different themes:
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
-          2005 : Youtube
+          2005 : YouTube
          2006 : Twitter
          2007 : Tumblr
          2008 : Instagram
@@ -241,7 +241,7 @@ Let's put them to use, and see how our sample diagram looks in different themes:
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
-          2005 : Youtube
+          2005 : YouTube
          2006 : Twitter
          2007 : Tumblr
          2008 : Instagram
@@ -256,7 +256,7 @@ Let's put them to use, and see how our sample diagram looks in different themes:
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
-          2005 : Youtube
+          2005 : YouTube
          2006 : Twitter
          2007 : Tumblr
          2008 : Instagram
@@ -271,7 +271,7 @@ Let's put them to use, and see how our sample diagram looks in different themes:
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
-          2005 : Youtube
+          2005 : YouTube
          2006 : Twitter
          2007 : Tumblr
          2008 : Instagram
@@ -286,7 +286,7 @@ Let's put them to use, and see how our sample diagram looks in different themes:
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
-          2005 : Youtube
+          2005 : YouTube
          2006 : Twitter
          2007 : Tumblr
          2008 : Instagram
--- a/packages/mermaid/src/mermaidAPI.spec.ts
+++ b/packages/mermaid/src/mermaidAPI.spec.ts
@@ -1,4 +1,4 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { assert, beforeEach, describe, expect, it, vi } from 'vitest';

 // -------------------------------------
 //  Mocks and mocking
@@ -69,6 +69,7 @@ import { compile, serialize } from 'stylis';
 import { Diagram } from './Diagram.js';
 import { decodeEntities, encodeEntities } from './utils.js';
 import { toBase64 } from './utils/base64.js';
+import { ClassDB } from './diagrams/class/classDb.js';
 import { FlowDB } from './diagrams/flowchart/flowDb.js';

 /**
@@ -839,36 +840,72 @@ graph TD;A--x|text including URL space|B;`)
        `flowchart LR
      A -- text --> B -- text2 --> C`
      );
-      const flwoDiagram2 = await mermaidAPI.getDiagramFromText(
+      const flowDiagram2 = await mermaidAPI.getDiagramFromText(
        `flowchart TD
      A -- text --> B -- text2 --> C`
      );
      // Since flowDiagram will return new Db object each time, we can compare the db to be different.
-      expect(flowDiagram1.db).not.toBe(flwoDiagram2.db);
+      expect(flowDiagram1.db).not.toBe(flowDiagram2.db);
      assert(flowDiagram1.db instanceof FlowDB);
-      assert(flwoDiagram2.db instanceof FlowDB);
-      expect(flowDiagram1.db.getDirection()).not.toEqual(flwoDiagram2.db.getDirection());
+      assert(flowDiagram2.db instanceof FlowDB);
+      expect(flowDiagram1.db.getDirection()).not.toEqual(flowDiagram2.db.getDirection());

      const classDiagram1 = await mermaidAPI.getDiagramFromText(
-        `stateDiagram
-    [*] --> Still
-    Still --> [*]
-    Still --> Moving
-    Moving --> Still
-    Moving --> Crash
-    Crash --> [*]`
+        `classDiagram
+            direction TB
+            class Student {
+              -idCard : IdCard
+            }
+            class IdCard{
+              -id : int
+              -name : string
+            }
+            class Bike{
+              -id : int
+              -name : string
+            }
+            Student "1" --o "1" IdCard : carries
+            Student "1" --o "1" Bike : rides`
      );
      const classDiagram2 = await mermaidAPI.getDiagramFromText(
-        `stateDiagram
-    [*] --> Still
-    Still --> [*]
-    Still --> Moving
-    Moving --> Still
-    Moving --> Crash
-    Crash --> [*]`
+        `classDiagram
+            direction LR
+            class Student {
+              -idCard : IdCard
+            }
+            class IdCard{
+              -id : int
+              -name : string
+            }
+            class Bike{
+              -id : int
+              -name : string
+            }
+            Student "1" --o "1" IdCard : carries
+            Student "1" --o "1" Bike : rides`
+      );
+      // Since classDiagram will return new Db object each time, we can compare the db to be different.
+      expect(classDiagram1.db).not.toBe(classDiagram2.db);
+      assert(classDiagram1.db instanceof ClassDB);
+      assert(classDiagram2.db instanceof ClassDB);
+      expect(classDiagram1.db.getDirection()).not.toEqual(classDiagram2.db.getDirection());
+
+      const sequenceDiagram1 = await mermaidAPI.getDiagramFromText(
+        `sequenceDiagram
+    Alice->>+John: Hello John, how are you?
+    Alice->>+John: John, can you hear me?
+    John-->>-Alice: Hi Alice, I can hear you!
+    John-->>-Alice: I feel great!`
+      );
+      const sequenceDiagram2 = await mermaidAPI.getDiagramFromText(
+        `sequenceDiagram
+    Alice->>+John: Hello John, how are you?
+    Alice->>+John: John, can you hear me?
+    John-->>-Alice: Hi Alice, I can hear you!
+    John-->>-Alice: I feel great!`
      );
      // Since sequenceDiagram will return same Db object each time, we can compare the db to be same.
-      expect(classDiagram1.db).toBe(classDiagram2.db);
+      expect(sequenceDiagram1.db).toBe(sequenceDiagram2.db);
    });
  });