6587 : Style class diagram elements based on stereotype annotations

[darshanr0107]

📑 Summary

This PR introduces visual styling enhancements for class diagram elements based on UML stereotype annotations such as <<abstract>>, <<interface>>, and <<enumeration>>.

Resolves #6587

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

Before

After

[netlify]

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	361c007
🔍 Latest deploy log	https://app.netlify.com/projects/mermaid-js/deploys/68be747c9e96230008aea2e1
😎 Deploy Preview	https://deploy-preview-6737--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.

[changeset-bot]

🦋 Changeset detected

Latest commit: 361c007

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

[pkg-pr-new]

Open in StackBlitz

@mermaid-js/examples

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

mermaid

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

@mermaid-js/layout-elk

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

@mermaid-js/layout-tidy-tree

npm i https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/layout-tidy-tree@6737

@mermaid-js/mermaid-zenuml

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

@mermaid-js/parser

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

@mermaid-js/tiny

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

commit: 361c007

[codecov]

Codecov Report

❌ Patch coverage is 0% with 56 lines in your changes missing coverage. Please review.
✅ Project coverage is 3.60%. Comparing base (3840451) to head (361c007).

Files with missing lines	Patch %	Lines
packages/mermaid/src/diagrams/class/shapeUtil.ts	0.00%	43 Missing ⚠️
packages/mermaid/src/diagrams/class/styles.js	0.00%	13 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           develop   #6737      +/-   ##
==========================================
- Coverage     3.60%   3.60%   -0.01%     
==========================================
  Files          473     473              
  Lines        46660   46711      +51     
  Branches       727     727              
==========================================
  Hits          1682    1682              
- Misses       44978   45029      +51     

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

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

Files with missing lines	Coverage Δ
packages/mermaid/src/diagrams/class/styles.js	0.00% <0.00%> (ø)
packages/mermaid/src/diagrams/class/shapeUtil.ts	0.00% <0.00%> (ø)

🚀 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]

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

Build	Status	Details	Updated (UTC)
default (Inspect)	⚠️ Changes detected (Review)	231 changed, 3 added	Sep 8, 2025, 6:26 AM

[knsv]

All review comments are fixed.

The argos tests are failing

[knsv]

@darshanr0107 Please verify the Argos tests is looks like real errors

[darshanr0107]

@darshanr0107 Please verify the Argos tests is looks like real errors

resolved in 8f9ee39

[sidharthv96]

In the given mockup, the enumeration is bold, and normal class is not bold.

But in this implementation normal class is bold, so we cannot differentiate between them.

[sidharthv96]

We are also removing unsupported annotations (Service) completely, which means information loss on existing diagrams. That's another blocker.

Also, the space on top of the class name looks odd with the annotation removed. That should also be fixed.

[darshanr0107]

We are also removing unsupported annotations (Service) completely, which means information loss on existing diagrams. That's another blocker.

Also, the space on top of the class name looks odd with the annotation removed. That should also be fixed.

resolved in ad35a93

[darshanr0107]

In the given mockup, the enumeration is bold, and normal class is not bold. But in this implementation normal class is bold, so we cannot differentiate between them.

resolved in ad35a93