Images are not rendered correctly in mermaid images

[msche]

Code of Conduct

• I have read and agree to the GitHub Docs project's Code of Conduct

What article on docs.github.com is affected?

Documentation: https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams

When including images in mermaid diagram it is not properly rendered

flowchart LR
    USER["TEST FOR user"]
    USER@{ img: "https://api.iconify.design/uil:user.svg", h: 50, constraint: "on"}

Loading

Also the alternative to include the image within the text box is not properly rendered:

flowchart LR
    USER["TEST FOR<img src='https://api.iconify.design/uil:user.svg'/> user"]

Loading

What part(s) of the article would you like to see updated?

Add remark in documentation that images in mermaid are not supported

Additional information

No response

[Sharra-writes]

@msche Thanks for flagging this! Let me check in and make sure this behavior is expected and not a bug, and I'll get back to you with the next steps.

[Sharra-writes]

@msche I've confirmed this is a bug! We're tracking it internally (here for internal reference), so I'm going to close this issue. Thank you for reporting this! Hopefully the team looking into it can get it fixed.

[marcellodesales]

@Sharra-writes The bug is private as it resolves to 404... can we have a publicly-trackable bug? We need images in our charts...

What it should be

How it is

graph LR
  %% Nodes
  U[Users]:::user

  A[<div style='display:flex; align-items:center;'><img src='https://www.svgrepo.com/show/445545/artifactory.svg' style='max-width:52px;min-height:0;'/>&nbsp;GIAPPS Artifactory Viasat Proxy]:::proxy

  subgraph Google_GCP_Account["VThreat Google GCP Account"]
    SA[<div style='display:flex; align-items:center;'><img src='https://www.logo.wine/a/logo/Google_Account/Google_Account-Logo.wine.svg' style='max-width:52px;min-height:0;'/>&nbsp;VThreat GCP Service Account]:::deps

    subgraph Google_Assured_OSS["Google Assured OSS - *.pkg.dev"]
      JM[<div style='display:flex; align-items:center;'>☕ Java / Maven &nbsp; <img src='https://www.svgrepo.com/show/373829/maven.svg' style='max-width:24px;min-height:0;'/>]:::deps
      NP[<div style='display:flex; align-items:center;'>📜 JavaScript / NPM &nbsp; <img src='https://cdn.worldvectorlogo.com/logos/npm-square-red-1.svg' style='max-width:18px;min-height:0;'/>]:::deps
      GO[<div style='display:flex; align-items:center;'>🐹 Go / Modules &nbsp; <img src='https://www.svgrepo.com/show/355038/golang.svg' style='max-width:24px;min-height:0;'/>]:::deps
      PY[<div style='display:flex; align-items:center;'>🐍 Python / PyPI &nbsp; <img src='https://upload.wikimedia.org/wikipedia/commons/0/04/PyPI-Logo-notext.svg' style='max-width:22px;min-height:0;'/>]:::deps
    end

  end

  subgraph Upstream_OSS["Open Source Developers"]
    GH[GitHub OSS]:::src
    GL[GitLab OSS]:::src
  end

  %% Flows
  A -.->|"0 - Setup auth"| SA 

  U -->|1 - installs package| A
  A -->|"2 - proxy"| Google_Assured_OSS
  JM <-.-|3 - resolve/cache| A
  NP <-.-|3 - resolve/cache| A
  GO <-.-|3 - resolve/cache| A
  PY -.-|"3 - resolve/cache"| A

  GH -->|popular packages| Google_Assured_OSS
  GL -->|popular packages| Google_Assured_OSS

  %% Notes
  A -- "4 - secured copies - vetted - scanned - signed" --> U

  %% Styles
  classDef user fill:#E3F2FD,stroke:#1E88E5,stroke-width:2px,color:#0D47A1;
  classDef proxy fill:#FFF3E0,stroke:#FB8C00,stroke-width:2px,color:#E65100;
  classDef google fill:#E8F5E9,stroke:#43A047,stroke-width:2px,color:#1B5E20;
  classDef deps fill:#F3E5F5,stroke:#8E24AA,stroke-width:1.5px,color:#4A148C;
  classDef src fill:#FFEBEE,stroke:#E53935,stroke-width:2px,color:#B71C1C;

	linkStyle 1 color:#004AAD
	linkStyle 5 color:#FF914D
	linkStyle 4 color:#FF914D
	linkStyle 3 color:#FF914D
	linkStyle 2 color:#FF914D
	style Upstream_OSS color:#5271FF
	style SA fill:#FFFFFF
	linkStyle 8 color:#FF3131
	linkStyle 9 color:#00BF63
	style Google_GCP_Account color:#A6A6A6,fill:#FFDE59
	linkStyle 0 color:#FF3131
	linkStyle 6 color:#FF914D

Loading

[Sharra-writes]

@marcellodesales Yes, as I said in the comment, the link is for internal reference, in case support or another team needs to look at this issue. Generally we wouldn't track engineering bugs in the repository for documentation unless our engineers requested it so that they could easily talk to the contributor who made the report. That wouldn't be for public tracking, public tracking would just be an unintended benefit for other users.

It's possible our support team might be able to help you, but I don't know their exact policy on discussing progress on bugs that have already been reported. Support tickets might at least create a greater sense of urgency to get it fixed.