handle long single-line labels without overflow or cropping

[nourhenta]

📑 Summary

Fixes a rendering issue where long unbroken labels in flowchart nodes would overflow or get cropped due to static sizing. Nodes now dynamically resize based on the label’s dimensions.

Resolves #6424

📏 Design Decisions

• Used getBBox() to measure actual label dimensions (width, height) after label insertion
• Set node.width and node.height dynamically inside insertNode()
• Updated drawRect() to use those dimensions instead of relying on defaults
• Adjusted SVG text alignment using text-anchor: middle and dominant-baseline: middle
• Patched Mermaid's global styling to ensure .nodeLabel and .label-container allow overflow and dynamic width

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]

⚠️ No Changeset found

Latest commit: 38f214f

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[netlify]

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	38f214f
🔍 Latest deploy log	https://app.netlify.com/sites/mermaid-js/deploys/67ed5eca5315090008cefa11
😎 Deploy Preview	https://deploy-preview-6437--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@6437

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

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

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

commit: 38f214f

[codecov]

Codecov Report

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

Project coverage is 3.86%. Comparing base (1d6a55a) to head (83cfd94).
Report is 87 commits behind head on develop.

Files with missing lines	Patch %	Lines
packages/mermaid/src/diagrams/flowchart/flowDb.ts	0.00%	11 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           develop   #6437      +/-   ##
==========================================
- Coverage     3.88%   3.86%   -0.02%     
==========================================
  Files          398     411      +13     
  Lines        42069   43185    +1116     
  Branches       638     664      +26     
==========================================
+ Hits          1635    1670      +35     
- Misses       40434   41515    +1081     

Flag	Coverage Δ
unit	3.86% <0.00%> (-0.02%)	⬇️

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

Files with missing lines	Coverage Δ
packages/mermaid/src/diagrams/flowchart/flowDb.ts	0.00% <0.00%> (ø)

... and 37 files with indirect coverage changes

🚀 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)	514 changed	Apr 2, 2025, 4:17 PM

[knsv]

Hi @nourhenta, when reviewing the changes in this PR, it seems that they do not correspond to the title and the information in the PR description. The changes reflect a syntax for reverse edges.

[nourhenta]

Hi @MikeJeffers , thank you for pointing that out. That was a mistake on my part — I accidentally committed unrelated changes. I've corrected it now and the branch reflects the intended fix. Please let me know if anything else needs adjusting!

[nourhenta]

Hi!
The visual changes flagged by Argos are expected and a result of the fix for handling long single-line labels without overflow or cropping.
They include adjusted node positions and expanded diagram widths to properly fit longer text — which is the intended behavior.

I don’t have permission to approve the Argos build, so if someone from the team could review and approve the visual diffs, that would be great. 😊
Let me know if you’d like me to clarify or adjust anything further!

Thanks!