Skip to content
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

Zero size image in mermaid #4842

Open
m21-cerutti opened this issue Sep 15, 2023 · 3 comments
Open

Zero size image in mermaid #4842

m21-cerutti opened this issue Sep 15, 2023 · 3 comments
Labels
Area: Development Graph: Flow Internals: Renderer Status: Approved Is ready to be worked on Type: Bug / Error Something isn't working or is incorrect

Comments

@m21-cerutti
Copy link

m21-cerutti commented Sep 15, 2023

Description

Hi, I was trynig to get an image in a markdown, but it seems the feature is broken.
I have seen
#548
#1133
but nothing work, even the live editor seems broken.

It works only if the node has text in it.

Steps to reproduce

Create a diagram with an image and no text on the node

graph TD
DIR("<img src='https://iconscout.com/ms-icon-310x310.png'; width='30' /> ")

Screenshots

image
image

Code Sample

graph TD
  DIR("<img src='https://iconscout.com/ms-icon-310x310.png'; width='30' /> ")
graph TD
  DIR("<img src='https://iconscout.com/ms-icon-310x310.png'; width='30' /> blablabla")

Setup

  • Mermaid version: 10.4.0
  • Browser and Version: Chrome Version 116.0.5845.189

Suggested Solutions

No response

Additional Context

No response

@m21-cerutti m21-cerutti added Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect labels Sep 15, 2023
@sidharthv96 sidharthv96 added Status: Approved Is ready to be worked on Graph: Flow Area: Development Internals: Renderer and removed Status: Triage Needs to be verified, categorized, etc labels Sep 15, 2023
@sidharthv96
Copy link
Member

sidharthv96 commented Sep 16, 2023

Related #4736

@sidharthv96
Copy link
Member

For me, it doesn't work even with the text. (Firefox)
But it does come up inside the error diagarm.
image

@Ronid1
Copy link
Contributor

Ronid1 commented Nov 19, 2023

Seems like a bug in the live editor rather than the graph. Same snippet worked as expected when implemented locally, but didn't show image in node without text in the live editor.

Code sample:

graph TD
  A("<img src='https://iconscout.com/ms-icon-310x310.png'; width='30' /> ")-->
  B("<img src='https://iconscout.com/ms-icon-310x310.png'; width='30' /> text")

Live editor: link

Local output (screenshot):
mermaid_image_showing_in_node_local

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Area: Development Graph: Flow Internals: Renderer Status: Approved Is ready to be worked on Type: Bug / Error Something isn't working or is incorrect
Projects
None yet
Development

No branches or pull requests

3 participants