Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Boxes do not automatically adjust with large amount of text in Journey Diagram #6243

Open
megantriplett opened this issue Jan 31, 2025 · 2 comments · May be fixed by #6246 or #6248
Open

Boxes do not automatically adjust with large amount of text in Journey Diagram #6243

megantriplett opened this issue Jan 31, 2025 · 2 comments · May be fixed by #6246 or #6248
Labels
Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect

Comments

@megantriplett
Copy link

Description

With the following code:

journey
title Our Day
section Morning
Breakfast:5: Megan
Stretch : 7: Udval
Brush Teeth:5: Monica
section Class
go to class and sit and sit and sit and sit and sit and sit: 5 : Udval

We see that our event under class with a lot of text gets cut off at the bottom of the second line. It would be good to see the boxes auto-adjust to accommodate for longer text.

Steps to reproduce

In the live editor, paste the following:

journey
title Our Day
section Morning
Breakfast:5: Megan
Stretch : 7: Udval
Brush Teeth:5: Monica
section Class
go to class and sit and sit and sit and sit and sit and sit: 5 : Udval

Screenshots

Image

Code Sample

Setup

  • Mermaid version: v11.4.0
  • Browser and Version: [Chrome, Edge, Firefox] Firefox Live Editor

Suggested Solutions

Box auto-adjusts to have more width

Additional Context

No response
@megantriplett megantriplett added Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect labels Jan 31, 2025
@megantriplett
Copy link
Author

@udvale @nghtlinh

This was referenced Feb 1, 2025
Open
Open
@nour0205
Copy link

nour0205 commented Feb 1, 2025 •
edited
Loading

Hi @megantriplett @udvale @nghtlinh

I've investigated and fixed the issue where Journey Diagram boxes did not automatically adjust for large amounts of text.

Fix Summary:

  • Updated box resizing logic to ensure proper scaling and prevent text cropping.
  • Adjusted SVG rendering calculations to maintain layout consistency.
  • Updated Cypress test snapshots to reflect the new expected behavior.

Modified Files:

  • cypress/integration/rendering/journey.spec.js – Updated test cases to reflect the correct expected behavior.
  • packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts – Improved text rendering logic for journey diagrams.
  • packages/mermaid/src/diagrams/user-journey/svgDraw.js – Adjusted SVG drawing logic to allow automatic box resizing.

This is the resulted journey diagram

Image

Mermaid Version: 11.4.1

I have submitted a PR to address this: #6248.
Please review it when you get the chance! 🚀

Let me know if you have any feedback or additional suggestions.

Thanks! 😊

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect
Projects
None yet
Milestone
No milestone
2 participants
@nour0205 @megantriplett