Refactor: Change flowDB to class based architecture.

[saurabhg772244]

📑 Summary

• Refactors the existing flowDb 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 FlowDb 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:
  • defaultConfig
  • setAccTitle
  • setAccDescription
  • setDiagramTitle
  • getAccTitle
  • getAccDescription
  • getDiagramTitle

📏 Design Decisions

• The flowDb 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, flowDb 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.
• Arrow Functions are used instead of class Fields as it is required by flow.jison

📋 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:.

[netlify]

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	6cc31b7
🔍 Latest deploy log	https://app.netlify.com/sites/mermaid-js/deploys/6780d448fda135000832e656
😎 Deploy Preview	https://deploy-preview-6161--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@6161

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

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

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

commit: 6cc31b7

[codecov]

Codecov Report

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

Project coverage is 4.48%. Comparing base (bc2cc61) to head (6cc31b7).

Files with missing lines	Patch %	Lines
packages/mermaid/src/diagrams/flowchart/flowDb.ts	0.00%	962 Missing ⚠️
...ages/mermaid/src/diagrams/flowchart/flowDiagram.ts	0.00%	4 Missing ⚠️
.../src/diagrams/flowchart/flowRenderer-v3-unified.ts	0.00%	1 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff           @@
##           develop   #6161   +/-   ##
=======================================
  Coverage     4.47%   4.48%           
=======================================
  Files          383     383           
  Lines        54142   54124   -18     
  Branches       596     596           
=======================================
  Hits          2425    2425           
+ Misses       51717   51699   -18     

Flag	Coverage Δ
unit	4.48% <0.00%> (+<0.01%)	⬆️

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

Files with missing lines	Coverage Δ
.../src/diagrams/flowchart/flowRenderer-v3-unified.ts	0.00% <0.00%> (ø)
...ages/mermaid/src/diagrams/flowchart/flowDiagram.ts	0.00% <0.00%> (ø)
packages/mermaid/src/diagrams/flowchart/flowDb.ts	0.00% <0.00%> (ø)

[argos-ci]

The latest updates on your projects. Learn more about Argos notifications ↗︎

Awaiting the start of a new Argos build…

[changeset-bot]

🦋 Changeset detected

Latest commit: 6cc31b7

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

[knsv]

Looks good!

[aloisklink]

Looks great! Thank you for making this PR as easy to review as possible!

My biggest issues that I've spotted are:

• We're using class fields and arrow functions instead of class methods, which is a bit strange and not as well supported on browsers. Why can't we just use normal class methods?
• I think we need a changeset entry. Maybe we can make a fix: XXXXX or patch changeset release? Saying that the db returned from mermaid.mermaidAPI.getDiagramFromText() is now unique for flowcharts? From doing a search, it looks like ~27 people are using mermaidAPI.getDiagramFromText() already: https://github.com/search?q=mermaidAPI.getDiagramFromText&type=code