Generated images are clipping text

[duncanawoods]

All my images are clipping text on Ubuntu 18.04 e.g.

graph TB
  A(This is a string) --> B(This is another string)

Extra info:

• Happens with no other extensions enabled
• Happens on Linux but not on on Windows
• Happens on multiple Linux machines
• Happens on all past versions over the last year
• Happens even if I rebuild with latest dependencies & Mermaid 8.4.4
• Doesn't happen with github rendering or online mermaid tool
• Doesn't happen with mermaid-cli on the same Ubuntu machines

I guess it's something Linux specific in the VS Code rendering but I'd appreciate ideas of a work-around.

Version details:

Version: 1.41.1
Commit: 26076a4de974ead31f97692a0d32f90d735645c0
Date: 2019-12-18T15:04:31.999Z
Electron: 6.1.5
Chrome: 76.0.3809.146
Node.js: 12.4.0
V8: 7.6.303.31-electron.0
OS: Linux x64 5.0.0-37-generic

Name: Markdown Preview Mermaid Support
Id: bierner.markdown-mermaid
Description: Adds Mermaid diagram and flowchart support to VS Code's builtin markdown preview
Version: 1.4.1
Publisher: Matt Bierner
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid

[mjbvz]

Does this reproduce in the latest VS Code insiders build? It includes a new electron version

[duncanawoods]

Thanks, that's helped narrow it down. It's related to the user-interface zoom-level at the time the image is generated. This is controlled with window.zoomlevel in settings.json and the ctrl-/ctrl+ keyboard shortcuts.

Once you have generated an image, changing the zoom level won't fix it, just make it bigger/smaller, so it's not the stylesheet of the markdown preview but some style information from the current user-interface state that is affecting the image generation in an undesirable way.

If you zoom-out like me (at -1) then you get clipping. Alternatively, if you zoom-in and generate images you then get excess padding e.g. zoom level 3 look like this:

[aidandj]

Same problem here. When I have window.zoomlevel set to anything below 0, I also get the clipped images.

[tjohnsonhvac]

I am having the same issue at zoom level 0 ( I assume, I made sure to go to settings and select 'Reset Zoom')

Zooming in and out changes how much is clipped but I cant get it to display the entire text at any zoom level.

VScode Version:

Version: 1.44.0-insider (user setup)
Commit: 0dbae2083aff6ff2190c8e2157be95458915d464
Date: 2020-04-03T05:44:09.945Z
Electron: 7.1.11
Chrome: 78.0.3904.130
Node.js: 12.8.1
V8: 7.8.279.23-electron.0
OS: Windows_NT x64 10.0.17763

graph TD;

A("ModbusMaster.read()") 
B("ModbusBaseConnection.read()<br/>Create ModbusPollItem<br/>add it to [m_priority_queue]")
C[/"m_priority_queue<br/>ModbusPollItem*"\]
D("ModbusBaseConnection::poll_task()<br/>remove from[m_priority_queue]<br/>ModbusBasConnection.modbus_library_read()")

%% Connections
A--> B
B--> C
C--> D
C--> B
D--> C

VScode:

Mermaid.js Live Editor:

[mjbvz]

These examples doesn't render for me at in the latest release. Can you please share an updated example

[duncanawoods]

I don't understand. The first example is a very simple piece of mermaid.

It renders and and still clips with zoom -1 in version 1.9.0.

``` mermaid
graph TB 
  A(This is a string) --> B(This is another string)
```

[duncanawoods]

@mjbvz can you give a pointer to where the mermaid invocation happens in the code please? I tried to help out but can't find it!

[mjbvz]

This also happens in the mermaid live editor for me: svg example

Please start by filing this issue against Mermaid itself