Characters cut off on Mermaid charts in MM when using fontawesome icons

[dex-code-one]

Steps to reproduce

1. Open new .md document
2. Type the following mermaid chart code

<div class="mermaid">
graph LR
    rs[fa:fa-reply-all Response #2]
</div>

3. Settings --> Mermaid Diagrams checked
4. Settings --> Mermaid Diagrams Url using the default
   https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js
5. Settings --> Allow Script Tags in Markdown
6. Settings --> Web Browser Preview Executable
   "C:\Program Files\Google\Chrome\Application\chrome.exe"

Expected Behavior

It's expected that all of the text rendered is visible (Live Editor displays it properly)

Actual Behavior

The text for the node is cut off on the right as long as FA icon is in the text

[RickStrahl]

There's nothing that I can really do about that - that's Mermaid's rendering that's causing this issue. I think the problem is that the Font-Awesome characters are probably not returning proper font widths and therefore when Mermaid writes out the labels the width calculation might be off.

The way around this is to add a space (or more) at the end to force Mermaid to render a little wider.

[dex-code-one]

If it were Mermaid, wouldn't their live editor have the same artifact?

[dex-code-one]

Mental note, adding spaces doesn't help as they seem to get scrubbed.

But U+FFA0 HALFWIDTH HANGUL FILLER seems to work around it :)

[RickStrahl]

Weird - I tried this now and the space does seem to work in the preview.

Also I noticed it depends heavily on the icon used. Some icons are very wide and the reply-all one seems to be one of them.

[RickStrahl]

Ok... so I'm noticing differing behavior depending on whether the page is first rendered, or whether it's refreshed after a change is made.

Initial load exhibits the behavior you describe. To simulate if I go into the preview and Refresh Browser I see the trimmed behavior. As you say - extra spaces don't help in that scenario.

If I then make a change to the document which forces the preview to refresh - then the spacing works correctly.

I suspect what's happening is some sort of timing issue, that when the page gets rendered Font-Awesome may not be fully initiailized and font-sizes not available when Mermaid starts rendering. On a refresh MM just injects the new JavaScript and then explicitly reruns mermaid on the page, but it ensures that all resources are loaded.

i'll take look and see if there's some way to delay the mermaid render slightly by running out of band (setTimeout()) - that might help with the initial difference.

[dex-code-one]

If I right click on the preview window and select "View in Web Browser" it will exhibit the same behavior.

Does that imply it's not really a timing issue or am I misunderstanding the depth of your statement?
(BTW, this isn't me being argumentative, I'm trying to play around with it and understand it more. And love this product so much, I bought it with my own money instead of asking my employer to pick it up)

[RickStrahl]

Yeah that's because it's using the same generated script.

I've got it working on initial load now with a slight delay, but I broken something else in the process.

Long story short I think I can fix this after all.

Oh and the feedback is great. I appreciate people taking the time to work through a problem like this - I would have dismissed this initially as a render bug in Mermaid, when it turns out it's a timing bug that can be fixed on my end after all. Thank you.

[dex-code-one]

Does it help or hurt us that we're using the graph keyword instead of flowchart? I think they're synonyms as far as mermaid is concerned, but I'm noticing slightly different look and feel between them

It'd b nice if the words when using flowchart keyword weren't smooshed against the top of the child node

[RickStrahl]

Those are Mermaid rendering issues. Different charts, different renderers I guess - MM doesn't do anything other than get Mermaid into the page. The rest is internal to Mermaid so if there's something that doesn't work/look right you probabliy need to file an issue with the Mermaid repo.

[RickStrahl]

Give 2.3.2 a try...

FWIW, the render issues you mention in your previous comment may also be fixed with this update. I think the same issues possibly apply where load timing can cause layout to not be quite right. With this deferred load it should be consistent between what you see when you first render (ie. initial or Refresh from Preview Window) or rendering when you make change to the document (which re-runs all Mermaid charts on the page along with the injected HTML that updates the page).

[dex-code-one]

So, clicked Check for New Version from the app, it showed 2.3.2 was available. Went to download page, it says 2.3 and now that I've run the install, it still says 2.3

• oh, I see. Pre-release...I'm on it

[dex-code-one]

No dice. Open the file and it's still cut off

but move one thing in the doc so it refreshes it and it's clear again

[RickStrahl]

Can you send me your file or paste or attach it here?

[dex-code-one]

emailed

[RickStrahl]

Can duplicate. Not quite sure what's going on as I can't seem to get it to render on first load no matter how long I delay - yet it works when the page is updated. So for you you should see the correct rendering if you make a change in the page and the preview is updated.

[dex-code-one]

It's all good. It's a simple enough workaround that only needs to be done once per session. Thanks for talking it through with me!

[RickStrahl]

actually no - everytime you reactivate the tab it'll do a full refresh and that resets it again.

I've played around with this quite a bit and I can't make it work even in a plain HTML page. I can see what happens with break points:

• Content loads
• Mermaid renders and renders correctly without FontAwesome icons (fixed squares show)
• Then the icons pop in after and push the content out of its box

But no matter how long I delay, or how I apply the Mermaid rendering it doesn't change the behavior.

I've put together a JsFiddle that basically does what MM does in a more simplified way:

https://jsfiddle.net/rstrahl/h7gL4b0m/14/

To see the problem:

• Load the page once (see cut of labels)
• Make a change and save or re-run (labels not cut off)
• Now refresh the browser
• Page re-loads completely (see cut of labels)

No matter how long the timeout I put the font-awesome icons push the text out of the graphic label space.

IOW, same behavior we see in MM - initial render (cut off labels). Re-render which replaces content and then forces re-applying Mermaid via mermaid.init() and then it works.

It looks like this is a bug with Mermaids handling of font-awesome - once the fonts have been loaded in Mermaid it works but on first render it does not.

I've created an issue on the Mermaid site:

mermaid-js/mermaid#2651

[RickStrahl]

One more thing, this behavior can also be seen in the Mermaid Live Editor to bring home the point this is a problem in Mermaid's rendering of FA icons:

Sample on Mermaid Live Editor

Add a [fa:fa-reply-all label] into the chart and you can see the same behavior. it works upon initial editing (page is updated dynamically), but if you then reload the entire page with a Browser Refresh you see the truncated label as per image above.