Issues with New Mermaid Code Update: Forced Font and Text Cutoff

[Sigrunixia]

Here is a copy in a codeblock for you. Just update your post with this filled out.

Before opening a new bug report, please search the forum for duplicates and follow the [Troubleshooting Guide](https://forum.obsidian.md/t/about-the-bug-reports-category/24/11).

- We only consider bugs that are reproducible in the sandbox vault or a vault with no third-party plugins/no css snippets/default theme. 
- For Linux, we only accept bug reports that are reproducible with our Appimage or Snap package under Gnome or KDE. 
- Developer issues with the API should go [here](https://forum.obsidian.md/c/developers-api/14)
- Themes and Custom CSS issues should go [here](https://forum.obsidian.md/c/custom-css-theme-design/20)
- Translations issues/improvements should be posted [here](https://github.com/obsidianmd/obsidian-translations)
- Obsidian Clipper Bugs should be posted [here](https://github.com/obsidianmd/obsidian-clipper)
- Obsidian Importer Bugs should be posted [here](https://github.com/obsidianmd/obsidian-importer)

**Once you've done the above, delete everything above this line.**

### Steps to reproduce
<!-- 
Starting from scratch, what are the steps to make the bug happen? 
The fewer the steps, the better.
Type below: -->


### Did you follow the [troubleshooting guide](https://forum.obsidian.md/t/about-the-bug-reports-category/24/10)? [Y/N]
<!-- 
Did you try the above steps in the sandbox vault (or just any vault started in restricted mode, no snippets and default theme)?  
It's gonna break our hearts to discard this bug report if you didn't do it! Please!
-->

### Expected result
<!--
What do you expect to see after carrying out the steps above?
-->

### Actual result
<!-- Instead of the expected result, what happened? -->

### Environment
<!-- Paste your debug info below, which can be accessed by Command Palette (Ctrl/Cmd-P on Desktop, Swipe down from the top on mobile) enter "Show debug info", and click "Copy to clipboard". -->


----------

### Additional information

<!--
Anything else you think would help our investigation, like a screenshot or a log file?
You can drag and drop screenshots to this box.
For large amount of text, try putting them into something like Pastebin.
For videos, upload them somewhere and drop a link here.
-->

[sunvibs]

I’m ready to edit my message with the new version using the template but I can’t find where I can edit it. I clicked on the pencil on my post but it only shows me the history. Sorry for the trouble.

[Sigrunixia]

You can also just paste a new reply, thats fine.

[sunvibs]

Steps to reproduce

Here’s one of my mermaid code (they all have the same problem):

flowchart LR
    classDef rouge fill:#FF6961,stroke:#333,stroke-width:2px;
    classDef orange fill:#FFE199,stroke:#333,stroke-width:2px;
    
    B[<strong>Cellules microgliales</strong><br><em>Forment la <strong>microglie</strong>.</em>]
    A[<strong>Cellules macrogliales</strong>]
    C[<strong>SNC</strong>]:::rouge
    D[<strong>SNP</strong>]:::orange
    E[<strong>Astrocytes</strong><br><em>Intéragissent avec les vaisseaux sanguins et les neurones.</em>]
    F[<strong>Oligodendrocytes</strong><br><em>Forment la <strong>gaine de myéline</strong> autour des axones dans le SNC.</em>]
    G[<strong>Cellules de Schwann</strong><br><em>Forment la <strong>gaine de myéline</strong> autour des axones dans le SNP.</em>]
    
    A --> C
    A --> D
    C --> E
    C --> F
    D --> G

    style A font-weight:bold,fill:#f9f9f9,stroke:#333,stroke-width:2px
    style B font-weight:bold,fill:#f9f9f9,stroke:#333,stroke-width:2px

Did you follow the troubleshooting guide?

Yes, I tried the mermaid code in the sandbox vault and in my main vault where I turned on restricted mode and removed the plugins, theme and snippets folders from my .obsidian folder.
I also reinstalled Obsidian from the latest version of the installer (my previous version was 1.6.5).

Expected result

I would like my diagrams to look like they did before the update.
Here a screenshot of what my diagram looked before the update:

It used the same font as my text, and the box adapted to the length of the sentence it contained.

Actual result

And after the update:

The text is cut off and the font is forced.

Environment

SYSTEM INFO:
Obsidian version: v1.8.3
Installer version: v1.8.3
Operating system: Windows 11 Home 10.0.22631
Login status: logged in
Language: en
Catalyst license: none
Insider build toggle: off
Live preview: on
Base theme: light
Community theme: none
Snippets enabled: 0
Restricted mode: on

RECOMMENDATIONS:
none

[Sigrunixia]

This is what I get on MacOS.

[Sigrunixia]

Licat was able to reproduce on Windows.

You will need to CMD/CTRL + 0 (Zoom Out) or CMD/CTRL + - (Zoom in), then reload Obsidian. It should fix.

We’ll need more time to see about a permanent fix, but this should help in the interim.

---

@WhiteNoise Per Licat this is a mermaid regression and the patch from a few years ago may need to be re-added.

[Licat]

I have located this to be a mermaid bug that was introduced by upgrading mermaid from v10 to v11. It seems like they decided to do something with lines that are too long (by wrapping them at exactly 200px), but in doing so they are testing the computed width of the element which is sometimes off by a tiny amount from 200px if you have zoomed in or out of the interface (In my testing I keep getting something like 199.98xxxxxx).

I’ve made a patch to fix this that will be included in one of the next updates.