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.

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

Long labels truncated when exported as SVG #4918

Open
oryx-it opened this issue Oct 6, 2023 · 6 comments
Open

Long labels truncated when exported as SVG #4918

oryx-it opened this issue Oct 6, 2023 · 6 comments
Labels
Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect

Comments

@oryx-it
Copy link

oryx-it commented Oct 6, 2023

Description

When I manage to export anything the labels of longer steps are unfortunately being cut off.

Steps to reproduce

Export as svg and open

Screenshots

image

Code Sample

No response

Setup

  • Mermaid version: Latest and greatest
  • Browser and Version: 16.6 (18615.3.12.11.2)

Suggested Solutions

No response

Additional Context

No response

@oryx-it oryx-it added Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect labels Oct 6, 2023
@sarthak15sharma
Copy link

I was unable to reproduce the problem using the live editor. Seems to be working fine

@oryx-it
Copy link
Author

oryx-it commented Oct 8, 2023

Would it make sense that you share what and how you tested?

graph TD A[Start] --> B[Optionale Benachrichtigung für bestimmte Personen über neuen verfügbaren Unterweisungstermin]

image image

@sarthak15sharma
Copy link

Tried the same in the live editor and downloaded the SVG.
image
image

@oryx-it
Copy link
Author

oryx-it commented Oct 9, 2023 via email

@oryx-it
Copy link
Author

oryx-it commented Oct 9, 2023

To add on why we were having different outputs. I did further investigation and the following are the conclusions that I incurred.

Free version
For the free version long texts are not being cut and that applies for every platform. However the short texts are being cut as shown in the sample video below

Sample video for free version
https://github.com/mermaid-js/mermaid/assets/111514654/573c238b-2bba-4e77-9b14-6decf189fcb0

Pro version on macOS

Pro version on windows

On windows the platform portrays the same problems as in macOS whereby the words are still being cut off.
As in the following video is a sample ran on microsoft edge.
https://github.com/mermaid-js/mermaid/assets/111514654/b2bb8065-e95d-4b84-9e72-2ddffc54f56a

End Note
Based on the stated problems it can be seen that the pro version and the free version appear to show the outputs differently.
Henceforth this may also need a solution.

@jgreywolf jgreywolf added include roadmap items to add to roadmap for auto workflow and removed include roadmap items to add to roadmap for auto workflow labels Nov 16, 2023
@Mackey780
Copy link

Mackey780 commented Jan 15, 2025

A similar issue affects the JavaScript library's .render() method, which also builds an SVG with truncated text.
Interestingly, the library's .run() method (which also generates an SVG) renders the graph correctly, without truncation.

What is the difference between .run() and .render()?
  • When rendered with .render(), nodes primarily scale horizontally to fit text, with a max text box height of 2 or 3 lines.
  • When rendered with .run(), nodes primarily scale vertically to fit text, with a max text box width of 200px.

What causes the issue in the generated SVG?

Context: A node's label in a rendered graph is represented like this:

<foreignObject>
  <div>
    <span>
      <p>Node Label Text</p>
    </span>
  </div>
</foreignObject>

What causes the truncation?

  • When generated with .render(), the foreignObjectforeignObject element scales its width to fit the label. Its first div child incorrectly has a max-width of 200px however, leading to the label text being cut off after 200px. This is only an issue if the CSS word-break property is set to something like break-word or break-all.
  • When generated with .run(), the foreignObjectforeignObject element scales its height to fit the label. It keeps its width to 200px which matches its child div's width of 200px so no truncation occurs.

Rendered with mermaid.render(graph) (scales horizontally, has truncation):

Image

<foreignObject width="602.140625" height="36">
  <div xmlns="http://www.w3.org/1999/xhtml" style="display: table; white-space: break-spaces; line-height: 1.5; max-width: 200px; text-align: center; width: 200px;">
    <span class="nodeLabel ">
      <p>DELTA-1090-TestKnown_SUPERLONGNAME_SUPERLONGNAME_SUPERLONGNAME_SUPERLONGNAME_SUPERLONGNAME</p>
    </span>
  </div>
</foreignObject>

Rendered with mermaid.run() (scales vertically, doesn't have truncation):

Image

<foreignObject width="200" height="71.98863220214844">
  <div xmlns="http://www.w3.org/1999/xhtml" style="display: table; white-space: break-spaces; line-height: 1.5; max-width: 200px; text-align: center; width: 200px;">
    <span class="nodeLabel ">
      <p>DELTA-1090-TestKnown_SUPERLONGNAME_SUPERLONGNAME_SUPERLONGNAME_SUPERLONGNAME_SUPERLONGNAME</p>
    </span>
  </div>
</foreignObject>

Why is the graph correct when viewed online but not when exported?

I (uninformedly) presume that the live mermaid editor tools use the .run() method to produce render the graphs on the page (and consequently don't have the truncation issue), but use the .render(graph) method when exporting to an SVG (causing the error and disparity on export).

Potential (code) fixes to the .render() method:

  • Have the child div properly scale its width.
  • Have the foreignObjectforeignObject element scale vertically rather than horizontally, consistent with the .run() method.

Note: I have looked at no source code, so all of this is entirely black-box speculation

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect
Projects
None yet
Development

No branches or pull requests

4 participants