Updated the code to include nested namespaces for class diagrams

[ReneLombard]

📑 Summary

Resolves #5487

📏 Design Decisions

Updated the jison to support dots in the classnames and namespaces

📋 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: 07d7704

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

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	07d7704
🔍 Latest deploy log	https://app.netlify.com/sites/mermaid-js/deploys/66fd5f416f08ef000838c68d
😎 Deploy Preview	https://deploy-preview-5849--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

pnpm add https://pkg.pr.new/mermaid-js/mermaid@5849

pnpm add https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/layout-elk@5849

pnpm add https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/mermaid-zenuml@5849

pnpm add https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/parser@5849

commit: 07d7704

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 5.00%. Comparing base (a5559c6) to head (07d7704).
Report is 23 commits behind head on develop.

Additional details and impacted files

@@           Coverage Diff           @@
##           develop   #5849   +/-   ##
=======================================
  Coverage     5.00%   5.00%           
=======================================
  Files          338     338           
  Lines        48220   48220           
  Branches       551     551           
=======================================
  Hits          2413    2413           
  Misses       45807   45807           

Flag	Coverage Δ
unit	5.00% <ø> (ø)

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

[argos-ci]

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

Build	Status	Details	Updated (UTC)
default (Inspect)	👍 Changes approved	3 added	Oct 2, 2024, 3:10 PM

[skillmaker-dev]

Does this support nested namespaces like i mentioned here in the examples? Nested namespaces

[ReneLombard]

Does this support nested namespaces like i mentioned here in the examples? Nested namespaces

This is an attempt to include nested namespaces, however, there is just a slight change in the proposed solution. Here are my thoughts.

In many commercial systems, it's common to encounter deeply nested namespaces, often 4 or 5 levels deep. For example:

Forexample, take the following namespace:

CompanyA.ProductA.Endpoint.VersionNumber.Models

with POCO classes

PersonDto, CompanyDto

When visualized, this structure can become bloated, as shown in the image below:

By using a single box around the section, you still effectively indicate that the namespace is nested, but it ensures the boxes don't dominate or overcrowd the diagram.

What are your thoughts @skillmaker-dev

[skillmaker-dev]

Does this support nested namespaces like i mentioned here in the examples? Nested namespaces

This is an attempt to include nested namespaces, however, there is just a slight change in the proposed solution. Here are my thoughts.

In many commercial systems, it's common to encounter deeply nested namespaces, often 4 or 5 levels deep. For example:

Forexample, take the following namespace:

CompanyA.ProductA.Endpoint.VersionNumber.Models

with POCO classes

PersonDto, CompanyDto

When visualized, this structure can become bloated, as shown in the image below:

By using a single box around the section, you still effectively indicate that the namespace is nested, but it ensures the boxes don't dominate or overcrowd the diagram.

What are your thoughts @skillmaker-dev

First of all Thanks for the great work you have done,

I agree that the structure might become bloated, but only when there are few classes or types, which make it more visibly bloated, but in a larger codebase it's negligible

It might be better to make it visible by supporting nested namespaces like this (currently not supported) :

namespace A{
namespace B{}
}

And what do you think about this?
namespace A.B{
namespace C{}
}

In this case, there would be only 2 boxes, one for the Namespace A.B and one for the nested namespace C, users can reduce the number of boxes by combining namespaces in one box ex: A.B.C which draws one box, and then the nested one ex: D which draws the nested box.

namespace A.B.C{
namespace D{}
}

Also is it possible to have an empty namespace?

[ReneLombard]

@skillmaker-dev
I appreciate the idea of having the option of a nested blocks, but instead of having a namespace within another namespace, I prefer the concept of a package containing a namespace.

For example, rather than writing:

namespace CompanyA.ProductB.Endpoint.V1 {
namespace Models
}

I would prefer something like:

package CompanyA.ProductB.Endpoint.V1 {
namespace Models
}

This approach allows for reusing a package within different class diagrams, making it possible to reference a package as a whole, rather than redrawing all the individual components each time.

[skillmaker-dev]

@ReneLombard wouldn't it be better to keep a consistent naming? Since package and namespace are interchangeable

[ReneLombard]

@skillmaker-dev

In complex software systems, where multiple class diagrams exist for a single system, it's often not practical to represent the entire architecture in one comprehensive diagram. Attempting to do so results in an overly large and convoluted diagram that offers little additional value. Instead, the focus should be on the subsystem you are currently designing. This is where the logical separation between packages and namespaces becomes particularly advantageous.

If we consider other modeling tools like Enterprise Architect, the concept of a package is far from new and has long been established. Similarly, in software languages like .NET, the idea of packages is quite evident through the NuGet package manager. A NuGet package can encompass one or more packages, which in turn may bundle multiple namespaces. These namespaces contain classes that are eventually compiled into a single DLL, demonstrating the logical bundling of related functionalities.

Upon further reflection, it becomes increasingly clear that both packages and namespaces play equally important roles. You should have the flexibility to encapsulate a namespace within another namespace, just as a package can contain multiple namespaces.

For reference, IBM's definition of UML Class Diagrams explicitly incorporates the concepts of both packages and namespaces:
IBM’s UML Class Diagram Overview

I think it is valuable to create a separate issue on this matter to further investigate this, either way, i think it is still beneficial to be able to create dots in namespaces.

[skillmaker-dev]

@ReneLombard are correct, This should be in a separate issue where more feedback is required from the community, and yes what you have done is valuable, it's good to have the possibility to include dots in namespace names.

@jgreywolf @sidharthv96 @knsv what do you guys think about this?

[ReneLombard]

@jgreywolf @sidharthv96 @knsv

If there's any chance it could be reviewed and merged soon, I would greatly appreciate it.
Please let me know if there's anything I can do to help expedite the process.

[sidharthv96]

LGTM!
Can you please add a visual test in cypress/integration/rendering/classDiagram-v2.spec.js

[mermaid-bot]

@ReneLombard, Thank you for the contribution!
You are now eligible for a year of Premium account on MermaidChart.
Sign up with your GitHub account to activate.