Truncated text and custom font families

Describe the bug

I can’t get Mermaid to not truncate any part of any rendered text. For some context I’m mainly interested in getting Mermaid to work properly inside Notable, of which you can find a version shipping with Mermaid v8.5.2 here, but I can also reproduce some of these issues in the official live editor.

Issue

First of all let’s take the following graph as an example:

graph LR
    A{Some Long Text}
    A -->|option number one| B[option number one]
    A -->|option number two| C[option number two]

This is what it looks like under my Windows VM:

The padding is completely off, and for some reason inside the app (which you can kind of see there in the background) the issue is more accentuated 🤷‍♂️.

Inside Notable under macOS or Linux this particular graph looks almost ok though (the “o” in “two” is still partially truncated though):

I think this might be an issue related to the font family, as when comparing the SVG rendered in the live editor and inside the app I’ve noticed a different font family is being used.

So I’ve explicitly set the same exact font family I’m using in the rest of the app via the following settings object:

{
  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif'
}

And this is the result:

For some reason the fonts that end up being used are different, even though the default ones seem to be inferred from the app anyway, perhaps the logic behind that isn’t quite right.

Anyway you can see how pretty much everything gets truncated now for some reason.

Another issue is that using the same font family in the live editor changes nothing, making the live editor useless for testing different font families.

Here there’s a more comprehensive corpus of diagrams rendered inside Notable looks like, in case you want to test them yourself, most of them are fine with the default settings under my macOS machine, but under my Windows 10 VM the padding used is absurd:

# Mermaid bug

## One

```mermaid
graph LR
    A{Some Long Text}
    A -->|option number one| B[option number one]
    A -->|option number two| C[option number two]
```

## Two 

```mermaid
graph LR
a[Attitude] --> i[Intention]
sn[Subjective norm] --> i
pbc[Perceived behavioral control] --> i
i --> b[Behavior]
pbc --> b
```

## Three

```mermaid
graph LR
  sys{"System II (deliberative) decision"} -->|yes| act[Attitude activation] --> inf[Attitude influences behavior]
  sys -->|no| acc{Attitude accessibility} -->|low| noact[No attitude activation] --> noinf[Attitude does not influence behavior]
  acc -->|high| act
```

## Four

```mermaid
graph TD
  subgraph Coupling
    A-->B
    C-->B
    B-->D
    D-->B
  end
```

## Five

```mermaid
graph LR
Power_Supply --> Transmitter_A
Power_Supply --> Transmitter_B
Transmitter_A --> D
Transmitter_B --> D
```

## Six

```mermaid
graph TB
  start-->step_one
  start-->testing_a_long_string
  step_one-->step_four
  start-->step_four
  step_four-->finish
  testing_a_long_string-->finish
```

Result:

When using the custom font family provided above way more texts get truncated:

Bottom line is Mermaid seems to handle font families in a very brittle manner, it should always render properly with a default configuration and it should still work properly when custom font families are set.

Any idea on how I can get it to not truncate texts?

[sliminality]

This is also happening in Notion, with lines getting cut off entirely:

The relevant markup:

flowchart LR
	start --> a1((a1))
	a1((a1)) --> 1("lock()\nold := new\nq := q->next") 
	--> a2((a2)) -->
	2[/if q != NULL/] -- TRUE --> a3((a3)) -->
	3("q->data := new\nunlock()\nnew++") --> a4((a4)) -->
	4[/if new != old/] -- FALSE --> a5((a5)) --> t5("unlock()")
	2 -- FALSE --> a4
	4 -- TRUE --> a1

Upon inspection, it appears that the <foreignObject> elements are sized significantly smaller than the text <div>s they contain.

[shatadrusaha]

I am having similar issue, when I use mermaid in Rmarkdown. When I run the code as a chunck on RStudio, the image is fine. But, when I render the markdown document into an html file output the texts are truncated. I have tried chrome, IE and edge. same problem on all of them.

Is this issue same as #1540 or a different issue?

Can anyone comment and advise please?