Making this work in Quarto RevealJS in mermaid diagrams

[jensbri]

Kia ora/hello from New Zealand.

I tried installing this and making it work with Quarto RevealJS. I found this thread and tried all of the options provided.

If I do this

```{mermaid}
%%| fig-width: 15
%%| fig-height: 5
flowchart LR
  A[{{< fa brands github size=5x >}}"Session :one:"] --> B{Decision}
  B --> C[just observe]
  B --> D[get involved]
  C --> E[get an overivew and hear buzzwords]
  D --> F[get hands-on experience]

I get (where the last bullet point reflects the use of an icon, but the mermaid doesn't render at all)

And this solutions doesn't work at all.

Any advice on how to get better logs is highly appreciated.

Cheers Jens

[neon-ninja]

The (fa:fa-phone) syntax will work if you update to quarto version 1.4.551

[cderv]

I don't think using shortcode inside a mermaid code cell is allowed

 A[{{< fa brands github size=5x >}}"Session :one:"] --> B{Decision}

Though mermaid has support for fontawesome but you can use it only if the dependencies are loaded.

Using the tricked explain in SO post does this

<!-- Initialize with any icon {{< fa thumbs-up >}} -->

because our filter here in the extension, only load the dependencies if a shortcode is used.

You could also only load the fontawesome dependencies.

Related issue

• https://github.com/quarto-ext/fontawesome/issues/30

And as mentioned you need to check your quarto and fontawesome extension version to be sure to have the latest content.

I'll close this. but please reopen if I missed something

---
format: revealjs
keep-md: true
---

## First Slide

<!-- {{< fa thumbs-up >}} -->

```{mermaid}
flowchart LR
    D(fa:fa-phone)-->C[fa:fa-house]

flowchart LR
    D(fa:fa-phone)-->C[fa:fa-earth-americas]

![image](https://github.com/quarto-ext/fontawesome/assets/6791940/b8ee69f2-2ad2-4060-ada0-32a1628b6ce4)