Image stop rendering after 9.1

[emersonbottero]

Description

When using only an img tag the img is not rendered
It used to work before.

Steps to reproduce

https://mermaid.live/edit#pako:eNpNUU1TpDAQ_StUX9QqYIYA4WNXLXfHoyc9KXvoIQGyQkIlYXbHKf67YcZRc-r0637vdfcBasU4lND06l_dobbe06aSnnu_Xn6KofWMrq8vOmtHU65WA9cDChb-NaHS7fkb9KpVodm1Fzee5oPa8WDgfz5YguDm90uDZYPBFqXXKL0VjHH5Dd9cnnAzCim5vvrxBd1f3nknsEanhoHmVitv5LrD0dxegQ8fJtwMh6WvAtvxgVdQupChfq2gkrOrm0aGlt8zYZUGx9gb7gNOVj3uZQ2l1RM_F20EthqHzyp-bHo4beq4MB9GlFAe4D-UNA5JmkQkoSnNSJbnPuyhJHEaFkVCSLGOoiglSTL78KaUY12HeU6SNKckIyQuaJ760CtkXC-Mdj8uMq0w1snUSjaiXfKT7l36fIkFDlthu2kb1mpYGcGW63W7gq4ooTmSmNMsxjSOWb2NirwhSdSwbB0RhHk--n8-ulkGn98BKuijPQ

Screenshots

with some text together...

this broke my vitepress plugin..
from mermaid.render

to mermaid.renderAsync

Code Sample

No response

Setup

Desktop

• OS and Version: [Windows, Linux, Mac, ...]
• Browser and Version: [Chrome, Edge, Firefox]

Smartphone

• Device: [Samsung, iPhone, ...]
• OS and Version: [Android, iOS, ...]
• Browser and Version: [Chrome, Safari, ...]

Additional Context

No response

[Valentine14th]

@sidharthv96 @knsv Hello, I'm an enthusiastic user of mermaid and I would love to start contributing to this project by looking into this bug first!

[streepvaren]

Dear all,

As @emersonbottero does, I'm also encountering problems with rendering nodes containing images.

I noticed two things:

1. Mermaid Live Editor renders image containing nodes randomly
This code:

flowchart TB 
SPECIES1("<img src='https://waarnemingen.be/media/photo/38346151.jpg' /> Drosera rotundifolia")
SPECIES2("<img src='https://waarnemingen.be/media/photo/38346124.jpg' /> Drosera intermedia")
HAIRS(Petiole hairy?)
HAIRS--Yes-->SPECIES1
HAIRS--No-->SPECIES2

Sometimes renders correctly (images & node text visible):

But can looks like this after refreshing the Mermaid Live Editor:

2. Nodes containing images stopped working recently in Quarto (R)
Images are not visible in Quarto's HTML output:

This is also the case when rendering to PDF:

It would be really great to have the in-node images working. It will make it possible to use Mermaid for easily creating flexible identification tools similar to these:

(From: Moisan, J. (2010). Guide d'identification des principaux macroinvertébrés benthiques d'eau douce du Québec, 2010: surveillance volontaire des cours d'eau peu profonds. Développement durable, environnement et parcs Québec.)

(From: Köhler, G. (Ed.). (2014). Müller/Bährmann Bestimmung wirbelloser Tiere: Bildtafeln für zoologische Bestimmungsübungen und Exkursionen. Springer-Verlag.)

Keep up the good work!

Best regards,
Streepvaren

[jgreywolf]

@Valentine14th Please confirm that you are still interested in working on this, and I will assign to you!

[Valentine14th]

@jgreywolf Mmm yes, I have actually already opened a PR to close this issue

[jgreywolf]

I totally missed that. I just went through and reviewed

[emersonbottero]

hi all, this is not fixed.. should I open another Issue?

[streepvaren]

Indeed, it is only partly fixed.

When using:

• Windows 11
• R 4.3.1 (latest)
• R studio Version: 2023.06.1+524 (latest)
• Quarto CLI 1.4.226 (pre-release)

Example:

{mermaid}
flowchart LR
test_node_with_image("<img src='https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png'> Google Logo")
test_node_with_image--->test_node_without_image

Rendering this containing Mermaid script as HTML works perfectly and gives this output:

Rendering as PDF gives this error:

ERROR: Mermaid generated an SVG without a viewbox attribute. Without knowing the diagram dimensions, quarto cannot convert it to a PNG

Stack trace:
    at resolveSize (file:///C:/Users/20003963/AppData/Local/Programs/Quarto/bin/quarto.js:63711:19)
    at eventLoopTick (ext:core/01_core.js:181:11)
    at async makePng (file:///C:/Users/20003963/AppData/Local/Programs/Quarto/bin/quarto.js:64033:57)
    at async makeDefault (file:///C:/Users/20003963/AppData/Local/Programs/Quarto/bin/quarto.js:64085:24)
    at async Object.cell (file:///C:/Users/20003963/AppData/Local/Programs/Quarto/bin/quarto.js:64108:20)
    at async Promise.all (index 0)
    at async Object.document (file:///C:/Users/20003963/AppData/Local/Programs/Quarto/bin/quarto.js:39841:25)
    at async handleLanguageCells (file:///C:/Users/20003963/AppData/Local/Programs/Quarto/bin/quarto.js:39812:42)
    at async file:///C:/Users/20003963/AppData/Local/Programs/Quarto/bin/quarto.js:69487:53
    at async withTimingAsync (file:///C:/Users/20003963/AppData/Local/Programs/Quarto/bin/quarto.js:19401:25)

Best regards,
Streepvaren

[emersonbottero]

Indeed, it is only partly fixed.

When using:

• Windows 11
• R 4.3.1 (latest)
• R studio Version: 2023.06.1+524 (latest)
• Quarto CLI 1.4.226 (pre-release)

Example:

{mermaid}
flowchart LR
test_node_with_image("<img src='https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png'> Google Logo")
test_node_with_image--->test_node_without_image

Rendering this containing Mermaid script as HTML works perfectly and gives this output:

Rendering as PDF gives this error:

ERROR: Mermaid generated an SVG without a viewbox attribute. Without knowing the diagram dimensions, quarto cannot convert it to a PNG

Stack trace:
    at resolveSize (file:///C:/Users/20003963/AppData/Local/Programs/Quarto/bin/quarto.js:63711:19)
    at eventLoopTick (ext:core/01_core.js:181:11)
    at async makePng (file:///C:/Users/20003963/AppData/Local/Programs/Quarto/bin/quarto.js:64033:57)
    at async makeDefault (file:///C:/Users/20003963/AppData/Local/Programs/Quarto/bin/quarto.js:64085:24)
    at async Object.cell (file:///C:/Users/20003963/AppData/Local/Programs/Quarto/bin/quarto.js:64108:20)
    at async Promise.all (index 0)
    at async Object.document (file:///C:/Users/20003963/AppData/Local/Programs/Quarto/bin/quarto.js:39841:25)
    at async handleLanguageCells (file:///C:/Users/20003963/AppData/Local/Programs/Quarto/bin/quarto.js:39812:42)
    at async file:///C:/Users/20003963/AppData/Local/Programs/Quarto/bin/quarto.js:69487:53
    at async withTimingAsync (file:///C:/Users/20003963/AppData/Local/Programs/Quarto/bin/quarto.js:19401:25)

Best regards, Streepvaren

Remove "Google Logo" Text on the left side and see if the image still shows.

[streepvaren]

Hi,

Indeed, also HTML-export is corrupt after adding an image containing node without text:

When using:

Windows 11
R 4.3.1 (latest)
R studio Version: 2023.06.1+524 (latest)
Quarto CLI 1.4.226 (pre-release) -

Example:

flowchart LR

test_node_with_image_and_text("<img src='https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png'> Google Logo")

test_node_with_image_and_without_text("<img src='https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png'")

test_node_with_image_and_text--->test_node_with_image_and_without_text--->test_node_without_image

Rendering this Mermaid script as HTML gives this incomplete output:

Rendering as PDF gives this error:

ERROR: Mermaid generated an SVG without a viewbox attribute. Without knowing the diagram dimensions, quarto cannot convert it to a PNG

Stack trace:
    at resolveSize (file:///C:/Users/20003963/AppData/Local/Programs/Quarto/bin/quarto.js:63711:19)
    at eventLoopTick (ext:core/01_core.js:181:11)
    at async makePng (file:///C:/Users/20003963/AppData/Local/Programs/Quarto/bin/quarto.js:64033:57)
    at async makeDefault (file:///C:/Users/20003963/AppData/Local/Programs/Quarto/bin/quarto.js:64085:24)
    at async Object.cell (file:///C:/Users/20003963/AppData/Local/Programs/Quarto/bin/quarto.js:64108:20)
    at async Promise.all (index 0)
    at async Object.document (file:///C:/Users/20003963/AppData/Local/Programs/Quarto/bin/quarto.js:39841:25)
    at async handleLanguageCells (file:///C:/Users/20003963/AppData/Local/Programs/Quarto/bin/quarto.js:39812:42)
    at async file:///C:/Users/20003963/AppData/Local/Programs/Quarto/bin/quarto.js:69487:53
    at async withTimingAsync (file:///C:/Users/20003963/AppData/Local/Programs/Quarto/bin/quarto.js:19401:25)

Best regards,
Streepvaren

[emersonbottero]

should we open another Issue?

[streepvaren]

That would be great!