Saurabh/refactor/convert class db to class

[saurabhg772244]

📑 Summary

• Refactors the existing classDb implementation from a functional approach to a class-based architecture to improve code organization, maintainability, and extensibility.
• Return a new DB object when diagramObject.db is called.
• Introduces new ClassDB class to encapsulate database operations and state
• Migrates existing functions to class methods
• Maintains existing API interface for backwards compatibility
• Following functions still uses common DB:
  • addRelation
  • cleanupLabel
  • setAccTitle
  • setAccDescription
  • addClassesToNamespace
  • addNamespace
  • setCssClass
  • addMembers
  • addClass
  • setClassLabel
  • addAnnotation
  • addMember
  • addNote
  • defineClass
  • setDirection
  • relationType
  • lineType
  • setClickEvent
  • setTooltip
  • setLink
  • setCssStyle
• Reason why above functions still uses common DB: Refactor: Change flowDB to class based architecture. #6161 (comment)

Resolves #

📏 Design Decisions

• The classDb module previously relied on functions and global variables. Consequently, each call to mermaid.parse or mermaid.render resulted in changes to global variables.
• This behavior caused issues when rendering multiple diagrams using the same Mermaid API, as the database object (DB) for the diagrams would get mixed up.
• To address this, classDb was refactored into a class-based structure. This change ensures that each diagramObject.db call creates a new instance of the database (DB), preventing conflicts between diagrams.

📋 Tasks

Make sure you

• 📖 have read the contribution guidelines
• 💻 have added necessary unit/e2e tests.
• 📓 have added documentation. Make sure MERMAID_RELEASE_VERSION is used for all new features.
• 🦋 If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running pnpm changeset and following the prompts. Changesets that add features should be minor and those that fix bugs should be patch. Please prefix changeset messages with feat:, fix:, or chore:.

[changeset-bot]

🦋 Changeset detected

Latest commit: 90bbf90

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
mermaid	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	90bbf90
🔍 Latest deploy log	https://app.netlify.com/sites/mermaid-js/deploys/6790fc2022f2b700080006cb
😎 Deploy Preview	https://deploy-preview-6212--mermaid-js.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[pkg-pr-new]

Open in Stackblitz

npm i https://pkg.pr.new/mermaid-js/mermaid@6212

npm i https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/layout-elk@6212

npm i https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/mermaid-zenuml@6212

npm i https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/parser@6212

commit: 90bbf90

[codecov]

Codecov Report

Attention: Patch coverage is 0% with 672 lines in your changes missing coverage. Please review.

Project coverage is 4.47%. Comparing base (bc2cc61) to head (90bbf90).
Report is 23 commits behind head on develop.

Files with missing lines	Patch %	Lines
packages/mermaid/src/diagrams/class/classDb.ts	0.00%	664 Missing ⚠️
...ages/mermaid/src/diagrams/class/classDiagram-v2.ts	0.00%	4 Missing ⚠️
...ackages/mermaid/src/diagrams/class/classDiagram.ts	0.00%	4 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           develop   #6212      +/-   ##
==========================================
- Coverage     4.47%   4.47%   -0.01%     
==========================================
  Files          383     385       +2     
  Lines        54142   54189      +47     
  Branches       596     598       +2     
==========================================
  Hits          2425    2425              
- Misses       51717   51764      +47     

Flag	Coverage Δ
unit	4.47% <0.00%> (-0.01%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
...ages/mermaid/src/diagrams/class/classDiagram-v2.ts	0.00% <0.00%> (ø)
...ackages/mermaid/src/diagrams/class/classDiagram.ts	0.00% <0.00%> (ø)
packages/mermaid/src/diagrams/class/classDb.ts	0.00% <0.00%> (ø)

... and 7 files with indirect coverage changes

[aloisklink]

To avoid the ESLint @typescript-eslint/unbound-method errors in the packages/mermaid/src/diagrams/class/classDiagram.spec.ts file, I'd recommend just adding a comment in the file like /* eslint-disable @typescript-eslint/unbound-method -- Broken for Vitest mocks, see https://github.com/vitest-dev/eslint-plugin-vitest/pull/286 */

[aloisklink]

Can we turn setupToolTips into a normal class method and use .bind(this); here?

Suggested change

	this.functions.push(this.setupToolTips);
	this.functions.push(this.setupToolTips.bind(this));

See also

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

Line 49 in 92efc24

this.functions.push(this.setupToolTips);

[aloisklink]

Does this need to be an arrow function? Can we change it to a normal class method?

[aloisklink]

Can you explain why this is needed? I can't see it being used in the JISON file.

[aloisklink]

Since this function is private and doesn't need this, should we move it out of the class?

[aloisklink]

Can you make these readonly so we can't change them?