Skip to content

Chromium crashes when rendering Mermaid diagram to PDF/DOCX, causing "Couldn't find svg element" error #13842

@baker-jr-john

Description

@baker-jr-john

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

When rendering a document containing a Mermaid flowchart diagram, Quarto successfully renders to HTML but fails with an internal error when rendering to PDF (Typst) or DOCX formats. The error occurs during the SVG to PNG conversion process.

Steps to reproduce

Minimal Reproducible Example

Document YAML:

format:
  typst:
    toc: false
    number-sections: true
    colorlinks: true
    echo: false
  docx:
    toc: true
    number-sections: true
    colorlinks: true
    echo: false
  html:
    toc: true

Mermaid Diagram:

flowchart TD
    subgraph Model [LSTM-Based EWS Model]
        direction TB
        
        %% Temporal Branch
        subgraph Temporal [Temporal Branch]
            direction TB
            InputTemp[Input: 10x5<br/>weeks x feat] --> LSTM[LSTM 64<br/>+ Dropout]
        end

        %% Static Branch
        subgraph Static [Static Branch]
            direction TB
            InputStat[Input: 14<br/>features] --> Dense1[Dense 32<br/>+ ReLU]
        end

        %% Connections to Concatenate
        LSTM --> Concat
        Dense1 --> Concat

        %% Merged Layers
        Concat[Concatenate<br/>96 units] --> Dense2[Dense 32<br/>+ Dropout]
        Dense2 --> Output[Dense 1<br/>+ Sigmoid]
    end
    
    %% Styling
    style Model fill:#f9f9f9,stroke:#333,stroke-width:2px
    style Temporal fill:#e6f3ff,stroke:#333,stroke-dasharray: 5 5
    style Static fill:#fff0e6,stroke:#333,stroke-dasharray: 5 5
    style Concat fill:#eee,stroke:#333
    style Output fill:#d4edda,stroke:#333

Actual behavior

Error Message

ERROR: Internal Error: Couldn't find an svg element in svg string

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:///Applications/quarto/bin/quarto.js:119710:11)
    at eventLoopTick (ext:core/01_core.js:178:7)
    at async makePng (file:///Applications/quarto/bin/quarto.js:120109:11)
    at async makeDefault (file:///Applications/quarto/bin/quarto.js:120175:16)
    at async Object.cell (file:///Applications/quarto/bin/quarto.js:120208:14)
    at async Promise.all (index 0)
    at async Object.document (file:///Applications/quarto/bin/quarto.js:69698:21)
    at async handleLanguageCells (file:///Applications/quarto/bin/quarto.js:69663:34)
    at async file:///Applications/quarto/bin/quarto.js:123919:41
    at async withTimingAsync (file:///Applications/quarto/bin/quarto.js:18986:21)

Chromium Crash

Chromium quits unexpectedly during the rendering process, which appears to be the root cause of the SVG error. The crash occurs specifically when attempting to render the Mermaid diagram for PDF/DOCX output.

Observed Behavior

  • HTML format: Renders successfully
  • PDF (Typst) format: Fails with the above error
  • DOCX format: Fails with the above error

Expected behavior

Expected Behavior

The Mermaid diagram should render successfully to all output formats, with the diagram converted to a static image for PDF and DOCX outputs.

Additional Context

The error suggests that when Quarto attempts to convert the Mermaid-generated SVG to PNG (required for PDF/DOCX), it receives a string that doesn't contain a valid <svg> element. This may be related to how nested subgraphs with styling are processed by the Mermaid renderer.

Your environment

  • Quarto Version: 1.8.26
  • IDE: Positron Version: 2025.12.2 build 5
  • Code - OSS Version: 1.106.0
  • Node.js: 22.20.0
  • OS: macOS (Darwin x64 21.6.0)

Quarto check output

Quarto 1.8.26
[✓] Checking environment information...
Quarto cache location: /Users/john/Library/Caches/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.26
Path: /Applications/quarto/bin

[✓] Checking tools....................OK
TinyTeX: v2024.09
Chromium: 869685

[✓] Checking LaTeX....................OK
Using: TinyTex
Path: /Users/john/Library/TinyTeX/bin/universal-darwin
Version: 2024

[✓] Checking Chrome Headless....................OK
Chrome: (not detected)

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

[✓] Checking Python 3 installation....OK
Version: 3.14.2
Path: /usr/local/opt/python@3.14/bin/python3.14
Jupyter: 5.9.1
Kernels: python3

(-) Checking Jupyter engine render....Traceback (most recent call last):
File "/Applications/quarto/share/jupyter/jupyter.py", line 20, in
from notebook import notebook_execute, RestartKernel
File "/Applications/quarto/share/jupyter/notebook.py", line 15, in
from yaml import safe_load as parse_string
ModuleNotFoundError: No module named 'yaml'
() Checking Jupyter engine render....There is an unactivated Python environment in .venv. Did you forget to activate it?

WARN: Error encountered when rendering files
[✓] Checking Jupyter engine render....OK

Metadata

Metadata

Assignees

No one assigned

    Labels

    duplicateThis issue or pull request already exists

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions