quarto-dev / quarto-dev/quarto-cli

Fail to render a pptx file that contains a mermaid graph in which an external image is embedded

Open
#5,913 5 comments 0 reactions 1 assignee View on GitHub

@cscheid is already working on this.

Since Jun 14, 2023.

diagrams-mermaid enhancement
Dominant language
JavaScript
Stars
6k
Forks
458
Avg merge
1d 9h
Merged PRs (30d)
41

Description

Bug description

I made a mermaid graph where an external image (e.g. https://iconscout.com/ms-icon-310x310.png) is embedded and I am trying to use that entire resulting mermaid graph in a pptx file by processing a qmd file with the option format: pptx. However, I fail to render a pptx file that contains the mermaid graph, with an error ERROR: Internal Error: couldn't determine svg dimensions, although I successfully render an HTML out of the qmd file in question.

Steps to reproduce

Please process the following qmd file to render pptx and HTML files:

---
format:
  pptx: default
  html: default
---


<script src="https://unpkg.com/mermaid@8.0.0-rc.8/dist/mermaid.min.js"></script>

## External image on the web

```{mermaid}
graph TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[<img src='https://iconscout.com/ms-icon-310x310.png' width='40' height='40' />]
    C -->|Two| E[iPhone]
    C -->|Three| F[Car]
```

## External image on the local folder

```{mermaid}
graph TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[<img src='./ms-icon-310x310.png' width='40' height='40' />]
    C -->|Two| E[iPhone]
    C -->|Three| F[Car]
```
Expected behavior

The following image made using mermaid with an external image should be displayed in a pptx file that Quarto produces:

image

Actually, the

Actual behavior

On the command line, the following error and stack trace come up:

$ quarto preview c:/Users/.../test.qmd --no-browser --no-watch-inputs
ERROR: Internal Error: couldn't determine svg dimensions

This is a bug in quarto. We apologize for the inconvenience.
Please consider reporting it at https://github.com/quarto-dev/quarto-cli. Thank you!

Stack trace:
    at resolveSize (file:///C:/Program%20Files/Quarto/bin/quarto.js:59855:19)
    at eventLoopTick (ext:core/01_core.js:181:11)
    at async makePng (file:///C:/Program%20Files/Quarto/bin/quarto.js:60177:57)
    at async makeDefault (file:///C:/Program%20Files/Quarto/bin/quarto.js:60227:24)
    at async Object.cell (file:///C:/Program%20Files/Quarto/bin/quarto.js:60250:20)
    at async Promise.all (index 0)
    at async Object.document (file:///C:/Program%20Files/Quarto/bin/quarto.js:36179:25)
    at async handleLanguageCells (file:///C:/Program%20Files/Quarto/bin/quarto.js:36150:42)
    at async file:///C:/Program%20Files/Quarto/bin/quarto.js:64332:61
    at async withTimingAsync (file:///C:/Program%20Files/Quarto/bin/quarto.js:19439:25)

On the preview pane in VSCode, we can see an incomplete preview, which means that the external image is not shown in the resulting mermaid graph:

image

Your environment
  • IDE: VSCode 1.79.0 (user setup)
  • OS: Windows 11
Quarto check output
[>] Checking versions of quarto binary dependencies...
      Pandoc version 3.1.2: OK
      Dart Sass version 1.55.0: OK
      Deno version 1.33.2: OK
[>] Checking versions of quarto dependencies......OK
[>] Checking Quarto installation......OK
      Version: 1.4.117
      Path: C:\Program Files\Quarto\bin
      CodePage: 932

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

[>] Checking Python 3 installation....OK
      Version: 3.10.11
      Path: C:/Users/<my_username>/AppData/Local/Programs/Python/Python310/python.exe
      Jupyter: 5.3.0
      Kernels: python3

[>] Checking Jupyter engine render....OK

[>] Checking R installation...........OK
      Version: 4.3.0
      Path: C:/PROGRA~1/R/R-43~1.0
      LibPaths:
        - C:/Program Files/R/R-4.3.0/library
      knitr: 1.42
      rmarkdown: 2.21

[>] Checking Knitr engine render......OK

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.