fix: Prevent Legend Labels from Overlapping Diagram Elements in Journey Diagrams #6274

Shahir-47 · 2025-02-13T01:12:26Z

📑 Summary

Fixed an issue where long legend labels in Journey diagrams could overlap with the diagram elements. In addition, we've added a new journey theme variable, maxLabelWidth, which allows users to control the maximum width of actor labels. This variable is configured as follows:

maxLabelWidth:
  description: Maximum width of actor labels
  type: integer
  default: 360
  minimum: 240
  maximum: 480

By tracking the maximum width of legend text elements, we now ensure proper spacing between the legend and the diagram content. This update also improves text-wrapping by:

Breaking a long word with a hyphen if it exceeds the max width, then resuming the remaining word on the next line.
Starting a new line without a hyphen if the break occurs at whitespace.

Resolves #5955

📏 Design Decisions

The implementation works by:

Tracking the maximum width of legend text elements during the actor legend drawing phase.
Using this width to calculate the appropriate left margin for the diagram elements.
Introducing the maxLabelWidth theme variable to let users set how long each label line should be.
Implementing word-wrapping behavior:
- Hyphenation: If a word exceeds the line length, a hyphen is added at the break and the remaining text resumes on the next line.
- Whitespace Wrapping: If the break occurs at a space, the new word starts on the next line without a hyphen.
Adding end-to-end tests to verify:
- The proper wrapping behavior that adheres to the maxLabelWidth constraint.
- That no line exceeds the specified max width, thereby maintaining consistent spacing between the legend and diagram.
- The correct margin is maintained between the longest legend line and the diagram elements.

Before:

After:

📋 Tasks

📖 Have read the [contribution guidelines](https://mermaid.js.org/community/contributing.html)
💻 Have added necessary unit/e2e tests.
📓 Have added documentation. Make sure [MERMAID_RELEASE_VERSION](https://mermaid.js.org/community/contributing.html#update-documentation) 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:.

Co-authored-by: Pranav Mishra <mishrap@dickinson.edu>

Co-authored-by: Shahir Ahmed <ahmeds@dickinson.edu>

Co-authored-by: Pranav Mishra <mishrap@dickinson.edu>

changeset-bot · 2025-02-13T01:12:29Z

⚠️ No Changeset found

Latest commit: a2f0d8e

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.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

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 · 2025-02-13T01:13:03Z

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	`a2f0d8e`
🔍 Latest deploy log	https://app.netlify.com/sites/mermaid-js/deploys/67c0cc179a1ea40008456d7b
😎 Deploy Preview	https://deploy-preview-6274--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 · 2025-02-13T01:13:43Z

Open in Stackblitz

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

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

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

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

commit: a2f0d8e

codecov · 2025-02-13T01:15:57Z

Codecov Report

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

Project coverage is 3.88%. Comparing base (00a8dc4) to head (a2f0d8e).

Files with missing lines	Patch %	Lines
...rmaid/src/diagrams/user-journey/journeyRenderer.ts	0.00%	56 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           develop   #6274      +/-   ##
==========================================
- Coverage     3.88%   3.88%   -0.01%     
==========================================
  Files          399     398       -1     
  Lines        42055   42084      +29     
  Branches       638     638              
==========================================
  Hits          1635    1635              
- Misses       40420   40449      +29

Flag	Coverage Δ
unit	`3.88% <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/config.type.ts	`100.00% <ø> (ø)`
...rmaid/src/diagrams/user-journey/journeyRenderer.ts	`0.38% <0.00%> (-0.08%)`	⬇️

... and 1 file with indirect coverage changes

Shahir-47 · 2025-02-13T01:36:25Z

Hey @sidharthv96,

@pranavm2109 and I have fixed the issue with overlapping legend labels in Journey diagrams #5955. The fix ensures proper spacing by tracking the maximum width of legend text elements during the actor legend drawing phase and using this width to adjust the left margin for the diagram elements. We’ve also added E2E tests to verify that spacing remains correct for both normal and long labels.

All GitHub tests and CICD checks are passing, and this is ready to be merged. Full details are in the PR description—let us know if you have any questions or feedback!

…ations Co-authored-by: pranavm2109 <mishrap@dickinson.edu>

sidharthv96 · 2025-02-15T16:43:29Z

packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts

@@ -84,31 +90,32 @@ export const draw = function (text, id, version, diagObj) {
  });

  drawActorLegend(diagram);
-  bounds.insert(0, 0, LEFT_MARGIN, Object.keys(actors).length * 50);
+  leftMargin = conf.leftMargin + maxWidth - 22.328125;


What is 22.328125, please avoid magic numbers.

sidharthv96 · 2025-02-15T16:44:17Z

cypress/integration/rendering/journey.spec.js

+    cy.then(() => {
+      renderGraph(
+        `journey
+      title  Web hook life cycle
+      section Darkoob
+        Make preBuilt:5: Darkoob user
+        register slug : 5: Darkoob userf deliberately increasing the size of this label to check if distance between legend and diagram is  maintained
+        Map slug to a Prebuilt Job:5: Darkoob user
+      section External Service
+        set Darkoob slug as hook for an Event : 5 : admin Exjjjnjjjj qwerty
+        listen to the events : 5 :  External Service
+        call darkoob endpoint : 5 : External Service
+      section Darkoob
+        check for inputs : 5 : DarkoobAPI
+        run the prebuilt job : 5 : DarkoobAPI
+        `,
+        { journey: { useMaxWidth: true } }
+      );
+    });


Why is the cy.then required, when it's not used in other functions?

…end-width

argos-ci · 2025-02-15T17:00:32Z

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

Build	Status	Details	Updated (UTC)
default (Inspect)	⚠️ Changes detected (Review)	4 added	Feb 27, 2025, 8:43 PM

sidharthv96 · 2025-02-15T17:11:40Z

packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts

+    const textElement = svgDraw.drawText(diagram, labelData);
+    const textLength = textElement.node().getBBox().width;
+    if (textLength > maxWidth) {
+      maxWidth = textLength;
+    }


Not blocker: We should keep this dynamic width part, but should we split the text into more lines, if it's longer that a longer max limit?

…end-width

…ttps://github.com/Shahir-47/mermaid into bug/5955_adjust-diagram-position-with-legend-width

…end-width

Co-authored-by: Pranav Mishra <mishrap@dickinson.edu>

…end-width

Co-authored-by: Pranav Mishra <mishrap@dickinson.edu>

Co-authored-by: Shahir Ahmed <ahmeds@dickinson.edu>

Co-authored-by: Pranav Mishra <mishrap@dickinson.edu>

…lWidth Co-authored-by: Shahir Ahmed <ahmeds@dickinson.edu>

…fferent lines Co-authored-by: Shahir Ahmed <ahmeds@dickinson.edu>

…ttps://github.com/SeniorSeniorMath-SciLib2k24/mermaid into bug/5955_adjust-diagram-position-with-legend-width

Co-authored-by: Pranav Mishra <mishrap@dickinson.edu>

Shahir-47 · 2025-02-25T23:51:40Z

Hey @sidharthv96,

In this PR, @pranavm2109 and I introduced a new journey theme variable called maxLabelWidth to allow users to control the maximum width of actor labels in journey diagrams. The configuration is defined as follows:

maxLabelWidth:
  description: Maximum width of actor labels
  type: integer
  default: 360
  minimum: 240
  maximum: 480

Key updates include:

Enhanced Text-Wrapping:
- If a word exceeds the max width, it’s split with a hyphen at the break, and the remainder resumes on the next line.
- If the break occurs at whitespace, the new word starts on a new line without any hyphen.
Improved Layout Consistency:
- Added tests to ensure no line exceeds the maxLabelWidth so that the spacing between the label and diagram remains consistent.
- Verified that when a label wraps, the appropriate margin is maintained between the longest legend line and the diagram.
Comprehensive Testing:
- Tests confirm that a single long word wraps correctly with hyphenation.
- Tests ensure that wrapping on whitespace omits the hyphen.
- Tests also check that the spacing (margin) between the legend and the diagram is consistent based on the maxLabelWidth setting.

If there’s nothing else, this PR is good to go!

…end-width

Shahir-47 and others added 4 commits February 5, 2025 19:27

diagram adjusts with legend width changes

fbac4c6

Co-authored-by: Pranav Mishra <mishrap@dickinson.edu>

added first draft of cypress visual tests

5366e8b

Co-authored-by: Shahir Ahmed <ahmeds@dickinson.edu>

testing

db4ea02

Co-authored-by: Pranav Mishra <mishrap@dickinson.edu>

adds test for journey

d618b83

Co-authored-by: Pranav Mishra <mishrap@dickinson.edu>

github-actions bot added the Type: Bug / Error label Feb 13, 2025

refactor: standardize variable naming and improve legend width calcul…

5f7c68d

…ations Co-authored-by: pranavm2109 <mishrap@dickinson.edu>

Shahir-47 changed the title ~~fix: Prevent legend text overlap in Journey diagrams~~ Prevent legend text overlap in Journey diagrams Feb 13, 2025

Shahir-47 changed the title ~~Prevent legend text overlap in Journey diagrams~~ fix: Prevent Legend Labels from Overlapping Diagram Elements in Journey Diagrams Feb 13, 2025

sidharthv96 requested changes Feb 15, 2025

View reviewed changes

Merge branch 'develop' into bug/5955_adjust-diagram-position-with-leg…

27912be

…end-width

sidharthv96 reviewed Feb 15, 2025

View reviewed changes

Shahir-47 and others added 13 commits February 18, 2025 16:05

Merge branch 'develop' into bug/5955_adjust-diagram-position-with-leg…

9ef3554

…end-width

Merge branch 'bug/5955_adjust-diagram-position-with-legend-width' of h…

5dab86a

…ttps://github.com/Shahir-47/mermaid into bug/5955_adjust-diagram-position-with-legend-width

Merge branch 'develop' into bug/5955_adjust-diagram-position-with-leg…

1424127

…end-width

removes cy.then and magic value

a318ea3

Co-authored-by: Pranav Mishra <mishrap@dickinson.edu>

remove magic value

50816a7

Co-authored-by: Pranav Mishra <mishrap@dickinson.edu>

Merge branch 'develop' into bug/5955_adjust-diagram-position-with-leg…

4f59211

…end-width

wraps long text into new line

d47e472

Co-authored-by: Pranav Mishra <mishrap@dickinson.edu>

revised current cypress test

ad62481

Co-authored-by: Shahir Ahmed <ahmeds@dickinson.edu>

wraps long text into new line

edbf125

Co-authored-by: Pranav Mishra <mishrap@dickinson.edu>

removed function to get rem in px since config schema now has maxLabe…

5510f18

…lWidth Co-authored-by: Shahir Ahmed <ahmeds@dickinson.edu>

[autofix.ci] apply automated fixes

3724d11

added first draft of test to see if label text is being wrapped in di…

aaf15fc

…fferent lines Co-authored-by: Shahir Ahmed <ahmeds@dickinson.edu>

Merge branch 'bug/5955_adjust-diagram-position-with-legend-width' of h…

baa261f

…ttps://github.com/SeniorSeniorMath-SciLib2k24/mermaid into bug/5955_adjust-diagram-position-with-legend-width

adds test for line wrapping

7c7fd4b

Co-authored-by: Pranav Mishra <mishrap@dickinson.edu>

Merge branch 'develop' into bug/5955_adjust-diagram-position-with-leg…

a2f0d8e

…end-width

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: Prevent Legend Labels from Overlapping Diagram Elements in Journey Diagrams #6274

fix: Prevent Legend Labels from Overlapping Diagram Elements in Journey Diagrams #6274

Shahir-47 commented Feb 13, 2025 •

edited

Loading

changeset-bot bot commented Feb 13, 2025 •

edited

Loading

netlify bot commented Feb 13, 2025 •

edited

Loading

pkg-pr-new bot commented Feb 13, 2025 •

edited

Loading

codecov bot commented Feb 13, 2025 •

edited

Loading

Shahir-47 commented Feb 13, 2025

sidharthv96 Feb 15, 2025

sidharthv96 Feb 15, 2025

argos-ci bot commented Feb 15, 2025 •

edited

Loading

sidharthv96 Feb 15, 2025

Shahir-47 commented Feb 25, 2025

fix: Prevent Legend Labels from Overlapping Diagram Elements in Journey Diagrams #6274

Are you sure you want to change the base?

fix: Prevent Legend Labels from Overlapping Diagram Elements in Journey Diagrams #6274

Conversation

Shahir-47 commented Feb 13, 2025 • edited Loading

📑 Summary

📏 Design Decisions

📋 Tasks

changeset-bot bot commented Feb 13, 2025 • edited Loading

⚠️ No Changeset found

netlify bot commented Feb 13, 2025 • edited Loading

✅ Deploy Preview for mermaid-js ready!

pkg-pr-new bot commented Feb 13, 2025 • edited Loading

codecov bot commented Feb 13, 2025 • edited Loading

Codecov Report

Shahir-47 commented Feb 13, 2025

sidharthv96 Feb 15, 2025

Choose a reason for hiding this comment

sidharthv96 Feb 15, 2025

Choose a reason for hiding this comment

argos-ci bot commented Feb 15, 2025 • edited Loading

sidharthv96 Feb 15, 2025

Choose a reason for hiding this comment

Shahir-47 commented Feb 25, 2025

Shahir-47 commented Feb 13, 2025 •

edited

Loading

changeset-bot bot commented Feb 13, 2025 •

edited

Loading

netlify bot commented Feb 13, 2025 •

edited

Loading

pkg-pr-new bot commented Feb 13, 2025 •

edited

Loading

codecov bot commented Feb 13, 2025 •

edited

Loading

argos-ci bot commented Feb 15, 2025 •

edited

Loading