Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Mermaid node labels truncated in revealjs #12696

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

Open
arthur-shaw opened this issue May 6, 2025 · 1 comment
Open

Mermaid node labels truncated in revealjs #12696

arthur-shaw opened this issue May 6, 2025 · 1 comment
Labels
bug Something isn't working needs-repro Issues that are blocked until reporter provides an adequate reproduction

Comments

@arthur-shaw
Copy link

Bug description

When mermaid diagrams are in created in a cell in revealjs slides, the labels for chart nodes are often truncated (i.e., final character(s) not shown).

(Note: this problem may occur for other target outputs as well. I encountered the issue for revealjs. I've not checked other formats.)

Steps to reproduce

---
format:
  revealjs:
    mermaid: 
      theme: default
execute: 
  eval: true
  echo: false
---

## Text is clipped

```{mermaid}
flowchart LR

  %% create nodes
  this["This thing"]
  that["That thing"]

  %% connect nodes into diagram
  this --> | goes to | that
```

Actual behavior

In the preview in VSCode:

Image

In the preview popped out into the Chrome browser (since the diagram is quite small above):

Image

Expected behavior

When the mermaid diagram is rendered in other places, it is shown correctly.

When a mermaid cell is previewed, it displays properly.

Image

When the same mermaid cod is provided to the Mermaid live editor, it also displays properly.

Image

Your environment

  • IDE: VSCode
  • OS: Windows 11

Quarto check output

$ quarto check
Quarto 1.6.39
[>] Checking environment information...
      Quarto cache location: C:\Users\WB393438\AppData\Local\quarto
[>] Checking versions of quarto binary dependencies...
      Pandoc version 3.4.0: OK
      Dart Sass version 1.70.0: OK
      Deno version 1.46.3: OK
      Typst version 0.11.0: OK
[>] Checking versions of quarto dependencies......OK
[>] Checking Quarto installation......OK
      Version: 1.6.39
      Path: C:\WBG\Quarto\bin
      CodePage: 1252

[>] Checking tools....................OK
      Chromium: 869685
      TinyTeX: (not installed)

[>] Checking LaTeX....................OK
      Tex:  (not detected)

[>] Checking basic markdown render....OK

[>] Checking Python 3 installation....(None)

      Unable to locate an installed version of Python 3.
      Install Python 3 from https://www.python.org/downloads/

[>] Checking R installation...........OK
      Version: 4.4.1
      Path: C:/PROGRA~1/R/R-44~1.1
      LibPaths:
        - C:/Users/WB393438/r_libraries
        - C:/Program Files/R/R-4.4.1/library
      knitr: 1.49
      rmarkdown: 2.29

[>] Checking Knitr engine render......OK
@arthur-shaw arthur-shaw added the bug Something isn't working label May 6, 2025
@mcanouil
Copy link
Collaborator

mcanouil commented May 6, 2025

Please check using the latest version of Quarto CLI.
Also do note that Quarto CLI cannot possibly follow on the frequent updates from mermaid.
It's unlikely you get the same thing from mermaid live because it's using the latest version of mermaid which Quarto cannot.

Finally, Quarto does not control how Mermaid renders text or any of the components.
Since Mermaid and Reveal.js are two JavaScript frameworks, it's possible they conflict with each other.

Note that I cannot reproduce any clipping at all.

RenderPreview
Mermaid diagram with two boxes and text linked by an arrow. A slide title: Text is clipped Mermaid diagram with two boxes and text linked by an arrow. A slide title: Text is clipped

My guess is that it is a browser issue and not a Quarto issue.

@mcanouil mcanouil added the needs-repro Issues that are blocked until reporter provides an adequate reproduction label May 6, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working needs-repro Issues that are blocked until reporter provides an adequate reproduction
Projects
None yet
Development

No branches or pull requests

2 participants