Mermaid Architecture Icons not displaying

[dijitali]

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

I have a Quarto Revealjs presentation as below that uses Mermaid Architecture Icons functionality.

The default icons cloud, database etc. seem to work but not those from the iconify.design pack that should be available since MermaidJS v11.1.0 (via mermaid-js/mermaid#5793).

As far as I can tell this should be supported since Quarto currently uses MermaidJS version 11.2 (#10797).

Steps to reproduce

A reproduction of the example in the MermaidJS docs:

---
title: "Demo Diagrams"
format:
    revealjs
---

## My Diagram Slide

A diagram.

```{mermaid}
architecture-beta
    group api(logos:aws-lambda)[API]

    service db(logos:aws-aurora)[Database] in api
    service disk1(logos:aws-glacier)[Storage] in api
    service disk2(logos:aws-s3)[Storage] in api
    service server(logos:aws-ec2)[Server] in api

    db:L -- R:server
    disk1:T -- B:server
    disk2:T -- B:db
```

Actual behavior

The diagram appears with a ? icon, rather than the correct one.

quarto preview demo.qmd

Expected behavior

The diagram appears with the correct icons as it does in the MermaidJS docs:

Your environment

• IDE: VSCode 1.104.0
• OS: Ubuntu 24.04.3 LTS

Quarto check output

Quarto 1.8.24
[✓] Checking environment information...
      Quarto cache location: /home/ieuan/.cache/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.24
      Path: /opt/quarto/bin

[✓] Checking tools....................OK
      TinyTeX: v2025.01
      Chromium: (not installed)

[✓] Checking LaTeX....................OK
      Using: TinyTex
      Path: /home/ieuan/.TinyTeX/bin/x86_64-linux
      Version: 2024

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

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

[✓] Checking Python 3 installation....OK
      Version: 3.13.7
      Path: /home/linuxbrew/.linuxbrew/opt/python@3.13/bin/python3.13
      Jupyter: (None)

      Jupyter is not available in this Python installation.
      Install with python3 -m pip install jupyter

[✓] Checking R installation...........(None)

      Unable to locate an installed version of R.
      Install R from https://cloud.r-project.org/

[mcanouil]

I don't believe this to be a Quarto issue.
The exact same thing happens on https://mermaid.live/

https://mermaid.live/edit#pako:eNqFklFLwzAQx79KuScH7ei6bu3ypg5BUJDNJ1cfrs2tC2uTkqbqHPvupu3UoqAHIeF_97u7HHeETHECBqiznTCUmUaTl5LBRDrWcq2aysFKXBQqVzXD19orsEw5jjaXD7fPiezjatIvIiOHp4NAbLTSNnCJBlOs6dkRss31AxH1fjKg8gIzQXq0WRtL539QwYCqp_8A7U16QFAWWKRTv4me4Sm7czzPWbGeOqtto-yxdVz9cgSfDp72IrhQki5RcDvdY6slYHZUUgLMPjnqfQJurxco817eau9mlUAiT5bHxqj1QWbAjG7IhabiaGgpMNdYAttiUVu1QgnsCG_Apn40nsdROIv9aBHE83nkwgHYJIzGi3A6i8MwWAT2RCcX3pWyKfxxHM38gU1cIC7sHO_7tei2o6vx1AF9I3Yp8t1XA7lu_3j2kOSkr1UjjS08D04f1orCnw

Also, the documentation says to install/register the icons for them to work: https://mermaid.js.org/config/icons.html#registering-icon-pack-in-mermaid

[mcanouil]

Following Mermaid.js documentation:

Input

Output

--- title: "Demo Diagrams" format: html include-after-body: - text: | <script> mermaid.registerIconPacks([ { name: 'logos', loader: () => fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then((res) => res.json()), }, ]); </script> --- ```{mermaid} architecture-beta group api(logos:aws-lambda)[API] service db(logos:aws-aurora)[Database] in api service disk1(logos:aws-glacier)[Storage] in api service disk2(logos:aws-s3)[Storage] in api service server(logos:aws-ec2)[Server] in api db:L -- R:server disk1:T -- B:server disk2:T -- B:db ```

[mcanouil]

Closing as there is really no bug and the Mermaid.js documentation explains everything needed to make it work.
If their documentation is not clear, I suggest to see with them to improve it.

[dijitali]

Ah I wasn't aware of mermaid.live but had tried a range of icons in the live editor in their documentation. Thanks for taking the time to investigate 🙏

I will drop a PR through on the Mermaid docs. The current phrasing and the live editor directly below that section implies the iconify icons are installed by default.

[mcanouil]

The documentation (https://mermaid.js.org/syntax/architecture.html#icons) says:

By default, architecture diagram supports the following icons: cloud, database, disk, internet, server.
Users can use any of the 200,000+ icons available in iconify.design, or add custom icons.

The example does not use any of the default icons. The example uses logos:... which indicates an icon pack.

The mentioned default icons work:

---
format: html
---

```{mermaid}
architecture-beta
    group api(cloud)[API]

    service db(database)[Database] in api
    service disk1(disk)[Storage] in api
    service disk2(disk)[Storage] in api
    service server(server)[Server] in api

    db:L -- R:server
    disk1:T -- B:server
    disk2:T -- B:db
```

[dijitali]

I guess my misunderstanding came from the hyperlink specifically on add custom icons:

By default, architecture diagram supports the following icons: cloud, database, disk, internet, server. Users can use any of the 200,000+ icons available in iconify.design, or add custom icons.

It gave me the impression that users do not need to do that for 200,000+ icons available in iconify.design (or why even mention them as opposed to any other icon set).

[mcanouil]

The URL should actually use the whole sentence as text link or be [...], or add custom icons, see [registering icon pack](https://mermaid.js.org/config/icons.html)..

[dijitali]

💯 Absolutely, it's a tiny thing but it would have saved a bunch of our time (plus anyone else who comes along and misinterprets it).

Thanks for the help here regardless! Love Quarto and the great work you folks are doing!