Mermaid-format:svg errors with Beamer target

[kusnezoff-alexander]

I have:

• searched the issue tracker for similar issues
• installed the latest version of Quarto CLI
• formatted my issue following the Bug Reports guide

Bug description

Can't include mermaid diagrams as svg for beamer output, only as png

Steps to reproduce

Minimal example to reproduce:

---
format:
  beamer:
    mermaid-format: svg
    mermaid: true
  pdf:
    mermaid-format: svg
    mermaid: true
keep-tex: true
---

# Ola

```{mermaid}
flowchart
	A["Amigo"]
```

Actual behavior

compilation failed- error
LaTeX Error: Missing \begin{document}.

See the LaTeX manual or LaTeX Companion for explanation.
Type  H <return>  for immediate help.
 ...                                              
                                                  
l.109 <
     script  src="template_files/libs/quarto-diagram/mermaid-postprocess-shi...

With the script just being injected into the tex-file:

<...>
<script  src="template_files/libs/quarto-diagram/mermaid-postprocess-shim.js"></script>
\KOMAoption{captions}{tableheading}
\makeatletter
<...>

Expected behavior

no error

Your environment

• OS: Fedora42

Quarto check output

❯ quarto check
Quarto 1.8.25
[✓] Checking environment information...
Quarto cache location: /home/user/.cache/quarto
[✓] Checking versions of quarto binary dependencies...
Pandoc version 3.6.3: OK
Dart Sass version 1.87.0: OK
Deno version 2.3.1: OK
Typst version 0.13.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
Version: 1.8.25
Path: /opt/quarto-1.8.25/bin

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

[✓] Checking LaTeX....................OK
Using: Installation From Path
Path: /usr/bin
Version: 2023

[✓] Checking Chrome Headless....................OK
Using: Chrome found on system
Path: /usr/bin/chromium-browser
Source: PATH

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

[✓] Checking Python 3 installation....OK
Version: 3.13.9
Path: /usr/bin/python3
Jupyter: 5.7.2
Kernels: .venv, myenv, python3, rust

(/) Checking Jupyter engine render....Traceback (most recent call last):
(-) Checking Jupyter engine render.... File "/opt/quarto-1.8.25/share/jupyter/jupyter.py", line 20, in
from notebook import notebook_execute, RestartKernel
File "/opt/quarto-1.8.25/share/jupyter/notebook.py", line 20, in
from nbclient import NotebookClient
ModuleNotFoundError: No module named 'nbclient'
WARN: Error encountered when rendering files
[✓] Checking Jupyter engine render....OK

[mcanouil]

Thanks for the report I can repro on latest.

Side note Where did you see mermaid: true was a valid option? mermaid expects an object, for instance the only current object in mermaid is theme: default/dark/forest/neutral.

[kusnezoff-alexander]

Thank you for looking into this :)

I forgot to exclude mermaid: true from the copy-paste (sorry), I took it from here: https://paulrjohnson.net/blog/2022-09-17-rendering-mermaid-diagrams-using-quarto-and-hugo/

[cderv]

We should probably error differently, but this is expected to not being able to include svg in PDF.

Your document will also fail with PDF format.

PDF output will only support PNG format which is the default for them.

Or did you expect to have svg output be processed by svg CTAN package that does use inskape CLI to transform to PDF ?
I don't think the SVG from mermaid are self contained enough for that to work.

If PDF is better than PNG for LaTeX output, we could also try to screenshot to PDF ?

Overall, I am curious about why trying mermaid-format: svg with LaTeX outputs ?

Thanks.

[kusnezoff-alexander]

Or did you expect to have svg output be processed by svg CTAN package that does use inskape CLI to transform to PDF ?
I don't think the SVG from mermaid are self contained enough for that to work.

Exactly, that would be nice.

Overall, I am curious about why trying mermaid-format: svg with LaTeX outputs ?

So people can copy&paste the text from the mermaid diagrams in my pdf slides (I am converting markdown->beamer->pdf) and partly due to better resolution (basically the advantages that svg have over png)

[cderv]

Exactly, that would be nice.

I don't know if svg package from CTAN is able to handle mermaid SVG. It also uses inkscape which needs to be setup for that to work. Did you have experience with a mermaid SVG diagram you added in a LaTeX document ?

So people can copy&paste the text from the mermaid diagrams in my pdf slides

Sorry I don't understand that part. What will be copy pasted ? Diagram source code or the svg ?

partly due to better resolution (basically the advantages that svg have over png)

It won't be SVG in the beamer PDF. It would be PDF, and I don't know if they are improved compare to PNG.

Anyhow, this is bigger feature request to support SVG from mermaid to be converted to PDF by inskcape as part of LaTeX processing. This require some research...

[kusnezoff-alexander]

After your comment I tried to include a mermaid SVG diagram into a LaTeX document which didn't turn out to be very successful. Particularly there is the problem text not displaying inside the boxes when rendered to pdf. So I understand that this a bigger feature.

However I got it running by producing mermaid diagrams as pdfs with the following filter, maybe it helps:

local pandoc = require 'pandoc'

-- Simple function to create a temp filename (unique-ish)
local function tempname(suffix)
  local random = math.random(100000, 999999)
  return os.tmpname():gsub("^/tmp/", "/tmp/mermaid_" .. random) .. suffix
end

local scale = 2
local mmdc_cmd = "mmdc"

local function run_cmd(cmd)
  local ok, _, code = os.execute(cmd)
  return code == 0
end

function CodeBlock(el)
  if el.classes:includes("mermaid") then
    local input_file = tempname(".mmd")
    local output_file = tempname(".pdf")

    local f = io.open(input_file, "w")
    f:write(el.text)
    f:close()

    local cmd = string.format('%s -i "%s" --outputFormat=pdf --pdfFit -o "%s" --scale %d', mmdc_cmd, input_file, output_file, scale)
    io.stderr:write("Running: " .. cmd .. "\n")

    if not run_cmd(cmd) then
      io.stderr:write("Error: mmdc command failed\n")
      return nil
    end

    return pandoc.Para{pandoc.Image({}, output_file)}
  end
end

Also here is what I tried to embed a mermaid svg into LaTeX, just for future reference:

%%{init: {"flowchart": {"useMaxWidth": false, "htmlLabels": false, "curve": "basis"}, "theme": "default"}}%%
graph TD
  A[Start] --> B{Decision?}
  B -->|Yes| C[Do something]
  B -->|No| D[Do something else]
  C --> E[End]
  D --> E[End]

Loading

test.md:

# Including an SVG Image

Here’s my SVG graphic:

![](test.svg){ width=50% }

Then call:

mmdc -i test.mmd -o test.svg
pandoc test.md -o output.pdf --pdf-engine=lualatex

Result:

[mcanouil]

@kusnezoff-alexander Accessibility: To improve accessibility, please add alternative text to your screenshots. This helps all users, including those using screen readers, to understand the context of the images. A brief description can make a big difference! See Good Alt Text, Bad Alt Text — Making Your Content Perceivable.

[cderv]

Yes mmdc is mermaid-cli - we don't use that, but I have looked at it, and maybe this is better results.

Without this, SVG using in LaTeX is processed by Quarto using rsvg-convert CLI. This is not easily available though, especially on windows. Using use-rsvg-convert: false will make the svg pass to LaTeX and \includesvg{} will be used that requires inkscape.

But yes supporting SVG in LaTeX output is not straightforward.

[mcanouil]

FYI, The "diagram" extension uses the CLI for Mermaid: https://github.com/pandoc-ext/diagram