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
• Reason why above functions still uses common DB: Refactor: Change flowDB to class based architecture. #6161 (comment)

📏 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.

📋 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	1575a93
🔍 Latest deploy log	https://app.netlify.com/sites/mermaid-js/deploys/6790ce2222f2b70008eeb870
😎 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: 1575a93

[codecov]

Codecov Report

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

Project coverage is 4.47%. Comparing base (e9e663f) to head (1575a93).

Files with missing lines	Patch %	Lines
packages/mermaid/src/diagrams/flowchart/flowDb.ts	0.00%	983 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.47%           
=======================================
  Files          385     384    -1     
  Lines        54180   54176    -4     
  Branches       598     623   +25     
=======================================
  Hits          2425    2425           
+ Misses       51755   51751    -4     

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 Δ
.../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%> (ø)

... and 1 file with indirect coverage changes

[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: 1575a93

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!

[sidharthv96]

Hhhhmmmmmmmmmmmm, this means part of the DB will be tied to a diagram, and some parts will change based on the last rendered diagram.

[aloisklink]

Yep, it's probably something to fix next.

I'd imagine it would be more difficult, though, since I believe the Langium parsers also modify this shared state.

And since it's part of the DiagramAPI in

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

Lines 43 to 57 in 037ba2f

	/**
	* DiagramDB with fields that is required for all new diagrams.
	*/
	export type DiagramDBBase<T extends BaseDiagramConfig> = {
	getConfig: () => Required<T>;
	} & SetRequired<
	DiagramDB,
	| 'clear'
	| 'getAccTitle'
	| 'getDiagramTitle'
	| 'getAccDescription'
	| 'setAccDescription'
	| 'setAccTitle'
	| 'setDiagramTitle'
	>;

, it might be a breaking change to change it? I'm not 100% sure though.

@saurabhg772244, I know you've already documented in the PR description that you haven't changed these functions. Can you maybe add a link to this comment thread to explain why we haven't changed them in this PR?

[sidharthv96]

This is already done inside clear, so why do we need to do it here?

[aloisklink]

They're copied from the old init call in:

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

Lines 23 to 24 in bc2cc61

	flowDb.clear();
	flowDb.setGen('gen-2');

But @saurabhg772244 has changed .clear() to use 'gen-2' by default, see #6161 (comment)

IMO, my gut feeling is that it's probably better to change as little as possible in this PR, and maybe do the gen-1/gen-2 cleanup in a separate PR, to keep this PR as small as possible.

[saurabhg772244]

We require gen-2 as gen-1 is deprecated and will break sub-graphs. https://mermaidchart.slack.com/archives/C06FGFCQVSR/p1735895537015209

[aloisklink]

I think the new class method syntax is better (both from a performance/memory standpoint, since it's shared in the class prototype, and from a browser/env support standpoint), so thanks for fixing it in f9ac986!

And thanks for adding a changeset!