External SVG sprite rendering fails

[Ayanmullick]

Description

Mermaid is unable to render SVGs from an external sprite. External SVGs with one icon per file works fine. But rendering fails when it's pointed to an external SVG sprite. Mermaid AI on the website said it should work, but it doesn't. So I submitted this issue after discussing it with Dominic and Akshatha.

Steps to reproduce

PFB an example diagram on the Mermaid website.

https://www.mermaidchart.com/app/projects/fd912e8a-830c-4d20-963c-239108f3c52f/diagrams/faae0376-e9a3-48cb-b096-31686fc7baa9/version/v0.1/edit

I'm sharing the sample code below.

Screenshots

As you can see, it fails to distinguish between the two items in the external sprite.

Code Sample

---
config:
  theme: redux
---
flowchart TD
    A(["Start"])
    A --> B@{ img: "https://code.benco.io/icon-collection/azure-icons/Advisor.svg", label: "Decision", pos: "t", w: 60, h: 60, constraint: "off" }
    B --> C@{ img: "https://cdn.jsdelivr.net/gh/Ayanmullick/test@master/Sprite1.svg#stackexchange-img", label: "Option A", pos: "t", w: 60, h: 60, constraint: "off" }
    B --> D@{ img: "https://cdn.jsdelivr.net/gh/Ayanmullick/test@master/Sprite1.svg#stackoverflow-img", label: "Option B", pos: "t", w: 60, h: 60, constraint: "off" }

Setup

• Mermaid version: Current version.
• Browser and Version: [Chrome, Edge, Firefox]: Version 139.0.7258.67 (Official Build) (64-bit)

Suggested Solutions

These are two distinct SVG's that should render separately like below

Additional Context

This is the sample SVG sprite.
https://github.com/Ayanmullick/test/blob/master/Sprite1.svg?short_path=18ef591

PFB the example code of the SVG's rendering in an HTML.

https://codepen.io/ayanmullick/pen/pvjWdRa

[shubhamparikh2704]

Hi @Ayanmullick , thanks for reporting the issue, current implementation does not support the use of external sprites effectively. We recommend using direct SVGs.

[Ayanmullick]

Hi @Ayanmullick , thanks for reporting the issue, current implementation does not support the use of external sprites effectively. We recommend using direct SVGs.

Hi @shubhamparikh2704 , Thank you for your response. As an Azure Infrastructure Architect, using 50 different icons in my diagram will lead to that many network calls, which slows down the rendering process. Supporting external sprites is crucial for the smooth rendering of complex diagrams that contain numerous unique icons. It would also be beneficial if native icons were to resolve successfully on GitHub, but unfortunately, that isn’t working either. Reference #6848 : Native icon sets issue