6774: update architecture diagram to reflect new class-based DB structure #6803

omkarht · 2025-07-29T09:52:41Z

📑 Summary

This PR refactors the internal implementation of the architecture diagram database from a function-based module to a class-based design. This update introduces a new ArchitectureDB class that encapsulates state and behavior, improving modularity, testability, and maintainability.

Key improvements:

Migrated from ImperativeState to instance fields within the ArchitectureDB class.
All DB operations (addService, addEdge, getNodes, etc.) are now instance methods.
Shared functions like getConfig, setAccTitle, and getAccDescription are exposed as instance methods or properties.
Preserved existing behavior and logic, ensuring backward compatibility for consumers of the diagram API.
This change prepares the architecture diagram module for future enhancements, such as multi-diagram support or serialization.

Resolves #6774

📏 Design Decisions

Describe the way your implementation works or what design decisions you made if applicable.

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

…ture on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>

changeset-bot · 2025-07-29T09:52:46Z

🦋 Changeset detected

Latest commit: 03cf100

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

This PR includes changesets to release 2 packages

Name	Type
mermaid	Patch
@mermaid-js/examples	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 · 2025-07-29T09:52:46Z

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	`03cf100`
🔍 Latest deploy log	https://app.netlify.com/projects/mermaid-js/deploys/6889cdfedb0b0200084e8664
😎 Deploy Preview	https://deploy-preview-6803--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 project configuration.

pkg-pr-new · 2025-07-29T09:56:29Z

Open in StackBlitz

@mermaid-js/examples

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

mermaid

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

@mermaid-js/layout-elk

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

@mermaid-js/mermaid-zenuml

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

@mermaid-js/parser

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

@mermaid-js/tiny

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

commit: 03cf100

codecov · 2025-07-29T09:56:33Z

Codecov Report

❌ Patch coverage is 0% with 278 lines in your changes missing coverage. Please review.
✅ Project coverage is 3.71%. Comparing base (5986189) to head (03cf100).
⚠️ Report is 21 commits behind head on develop.

Files with missing lines	Patch %	Lines
...ermaid/src/diagrams/architecture/architectureDb.ts	0.00%	226 Missing ⚠️
.../src/diagrams/architecture/architectureRenderer.ts	0.00%	21 Missing ⚠️
...kages/mermaid/src/diagrams/architecture/svgDraw.ts	0.00%	16 Missing ⚠️
...id/src/diagrams/architecture/architectureParser.ts	0.00%	11 Missing ⚠️
...d/src/diagrams/architecture/architectureDiagram.ts	0.00%	4 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff           @@
##           develop   #6803   +/-   ##
=======================================
  Coverage     3.71%   3.71%           
=======================================
  Files          454     454           
  Lines        44733   44747   +14     
  Branches       708     708           
=======================================
+ Hits          1660    1661    +1     
- Misses       43073   43086   +13

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

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

Files with missing lines	Coverage Δ
...d/src/diagrams/architecture/architectureDiagram.ts	`8.33% <0.00%> (-1.67%)`	⬇️
...id/src/diagrams/architecture/architectureParser.ts	`4.00% <0.00%> (-1.56%)`	⬇️
...kages/mermaid/src/diagrams/architecture/svgDraw.ts	`0.33% <0.00%> (+0.33%)`	⬆️
.../src/diagrams/architecture/architectureRenderer.ts	`0.24% <0.00%> (+0.24%)`	⬆️
...ermaid/src/diagrams/architecture/architectureDb.ts	`0.00% <0.00%> (-0.39%)`	⬇️

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

argos-ci · 2025-07-29T10:03:39Z

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

Build	Status	Details	Updated (UTC)
default (Inspect)	✅ No changes detected	-	Jul 30, 2025, 8:05 AM

on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>

packages/mermaid/src/diagrams/architecture/architectureDb.ts

Copilot

Pull Request Overview

This PR refactors the architecture diagram database from a function-based module using ImperativeState to a class-based ArchitectureDB implementation. This change improves modularity, testability, and maintainability while preserving existing functionality.

Key changes:

Migrated from ImperativeState pattern to class-based design with instance fields
All database operations are now instance methods of the ArchitectureDB class
Updated all consuming modules to pass the ArchitectureDB instance as a parameter

Reviewed Changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
architectureDb.ts	Main refactor converting function-based DB to ArchitectureDB class with instance methods
architectureDiagram.ts	Updated to return new ArchitectureDB instance via getter
architectureParser.ts	Added type checking and instance assignment to parser
architectureRenderer.ts	Updated function signatures to accept db parameter and use instance methods
svgDraw.ts	Updated function signatures to accept db parameter instead of importing directly
architecture.spec.ts	Updated tests to create ArchitectureDB instances and assign to parser
silver-eyes-build.md	Added changeset for the refactoring

packages/mermaid/src/diagrams/architecture/architectureParser.ts

packages/mermaid/src/diagrams/architecture/architectureRenderer.ts

packages/mermaid/src/diagrams/architecture/architectureDb.ts

on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>

.changeset/silver-eyes-build.md

on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>

6774: update architecture diagram to reflect new class-based DB struc…

1a4b866

…ture on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>

github-actions bot added the Sponsored by MermaidChart label Jul 29, 2025

omkarht added 2 commits July 29, 2025 15:41

chore: added changeset

e48b0ba

on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>

Merge branch 'develop' into 6774-update-db-class-architecture-diagram

1988dfc

omkarht marked this pull request as ready for review July 29, 2025 10:12

omkarht requested review from sidharthv96 and shubhamparikh2704 July 29, 2025 10:21

shubhamparikh2704 reviewed Jul 29, 2025

View reviewed changes

packages/mermaid/src/diagrams/architecture/architectureDb.ts Outdated Show resolved Hide resolved

shubhamparikh2704 requested a review from Copilot July 29, 2025 11:06

Copilot AI reviewed Jul 29, 2025

View reviewed changes

fix: refactored code

5dd7481

on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>

omkarht requested a review from shubhamparikh2704 July 29, 2025 11:31

Merge branch 'develop' into 6774-update-db-class-architecture-diagram

8e31fdb

sidharthv96 approved these changes Jul 29, 2025

View reviewed changes

.changeset/silver-eyes-build.md Outdated Show resolved Hide resolved

fix: modified changeset to patch

03cf100

on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>

shubhamparikh2704 approved these changes Jul 30, 2025

View reviewed changes

shubhamparikh2704 added this pull request to the merge queue Jul 30, 2025

Merged via the queue into develop with commit ddcd8a5 Jul 30, 2025
30 of 31 checks passed

shubhamparikh2704 deleted the 6774-update-db-class-architecture-diagram branch July 30, 2025 13:51

This was referenced Aug 19, 2025

Version Packages #6879

Closed

Version Packages #6880

Merged

sidharthv96 mentioned this pull request Aug 19, 2025

#4784 add ishikawa diagram #6679

Open

4 tasks

japui-coder mentioned this pull request Aug 24, 2025

uml Class as shape type #807

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

6774: update architecture diagram to reflect new class-based DB structure #6803

6774: update architecture diagram to reflect new class-based DB structure #6803

Uh oh!

omkarht commented Jul 29, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented Jul 29, 2025 •

edited

Loading

Uh oh!

netlify bot commented Jul 29, 2025 •

edited

Loading

Uh oh!

pkg-pr-new bot commented Jul 29, 2025 •

edited

Loading

Uh oh!

codecov bot commented Jul 29, 2025 •

edited

Loading

Uh oh!

argos-ci bot commented Jul 29, 2025 •

edited

Loading

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

6774: update architecture diagram to reflect new class-based DB structure #6803

6774: update architecture diagram to reflect new class-based DB structure #6803

Uh oh!

Conversation

omkarht commented Jul 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📑 Summary

📏 Design Decisions

📋 Tasks

Uh oh!

changeset-bot bot commented Jul 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

netlify bot commented Jul 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for mermaid-js ready!

Uh oh!

pkg-pr-new bot commented Jul 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Jul 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

argos-ci bot commented Jul 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

omkarht commented Jul 29, 2025 •

edited

Loading

changeset-bot bot commented Jul 29, 2025 •

edited

Loading

netlify bot commented Jul 29, 2025 •

edited

Loading

pkg-pr-new bot commented Jul 29, 2025 •

edited

Loading

codecov bot commented Jul 29, 2025 •

edited

Loading

argos-ci bot commented Jul 29, 2025 •

edited

Loading