Which output does the speaker view support?

[klausagnoletti]

Description

I am using Quarto to play scenarios in a role playing game a bit like D&D. Games consists of a preparing phase, three rounds and an evaluation phase.

Games are very open-ended meaning that anything can happen in a round and to support the DM running the game I want to show a mermaid diagram giving an overview of the most likely directions a game can go in the speakers notes.

Only problem is that it doesn't work :-)
I can't find any kind of overview on what data can be shown in the speaker notes or any kind of plugin for reveal.js that would allow this. So it probably doesn't exist.

Does anyone have any suggestions to what I can do to make this work? Is it even possible (for a non-programmer?).

Thanks in advance!

/klaus

[mcanouil]

Could you share a small self-contained "working" (reproducible) example to work with, i.e., a complete Quarto document or a Git repository? Thanks.

You can share a Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).

````qmd
---
title: "Reproducible Quarto Document"
format: html
---

This is a reproducible Quarto document using `format: html`.
It is written in Markdown and contains embedded R code.
When you run the code, it will produce a plot.

```{r}
plot(cars)
```

![A placeholder image](https://placehold.co/600x400.png)

The end.
````

Note that this might be a Pandoc limitation that you might be able to work around by using raw HTML block (i.e., ```{=html}): https://revealjs.com/speaker-view/

[klausagnoletti]

Thanks for your reply although I understood nothing of the whole sharing part. Why, how etc.

Instead I put the slides I want to work on with this in a public repo at https://github.com/klausagnoletti/quarto-slides

Thanks for any help. Highly appreciated!

/klaus

[mcanouil]

Your example has nothing about what you talked in your post.

Only problem is that it doesn't work

We can't help with that.
You need to share something (as your previous repository) where we can see and tweak the thing that "doesn't work".

---
title: "Quarto Playground"
format: revealjs
keep-md: true
---

## Quarto Playground

This is a playground for Quarto.

::: {.notes}

```{mermaid}
flowchart LR
  A[Hard edge] --> B(Round edge)
  B --> C{Decision}
  C --> D[Result one]
  C --> E[Result two]
```

:::

Which produces the following:

---
title: "Quarto Playground"
format: revealjs
keep-md: true
---



## Quarto Playground

This is a playground for Quarto.

::: {.notes}



:::{.cell reveal=true layout-align="default"}

:::{.cell-output-display}

:::{}
`<figure class=''>`{=html}

:::{}

<pre class="mermaid mermaid-js">flowchart LR
  A[Hard edge] --&gt; B(Round edge)
  B --&gt; C{Decision}
  C --&gt; D[Result one]
  C --&gt; E[Result two]
</pre>
:::
`</figure>`{=html}
:::
:::
:::



:::

So it might be possible to do something to fix the diagram not being displayed.
@cderv might be able to help here.

[klausagnoletti]

Thanks. I did share something related to my question in that repo. Please take a look at https://github.com/klausagnoletti/quarto-slides/blob/main/presentation/presenting_ransomware_scenario.qmd.
In the meantime I'll be processing your comment :-)

[cderv]

Games are very open-ended meaning that anything can happen in a round and to support the DM running the game I want to show a mermaid diagram giving an overview of the most likely directions a game can go in the speakers notes.

Is this the slide called ## Organization ? Because I can see the mermaid diagram in slides and in speaker mode view

What exactly is the issue you encounter ? Thanks

[mcanouil]

In the "notes" part of the speaker view, the diagram does not render.

[klausagnoletti]

Sorry about that. That was a brainfart... I updated the code in the repo so it actually looks like I think it does. This is the relevant snippet:

## Round 1 {#slide-id3 data-menu-title="Round 1:What do you do?"}

### What do you do?

::: {.notes}

```{mermaid}
flowchart LR
  node_1("Start Round 1")
  node_2("User Behavior Analysis \n(UBA)")
  node_3("MFA Checks")
  node_4["User Verification"]
  node_5("Declare Incident")
  node_6("Lock Account")
  node_7("Wait and see")
  node_8("Get IR Plan")
  node_9("Investigate and plan")
  node_10("Sit on hands")
  node_1 --> node_2
  node_1 --> node_3
  node_1 --> node_4
  node_2 --> node_5
  node_4 --> node_5
  node_5 --> node_6
  node_5 --> node_7
  node_5 --> node_8
  node_7 --> node_9
  node_7 --> node_10

:::

[cderv]

Ok thanks. This makes more sense.

In short: Quarto specific feature won't be available in speaker view - especially feature that requires some JS dependencies like a mermaid.js graph.

Basically you are encountering the same as other similar limitation

• Speaker view customization (Customize speaker note font size #4112)
• Tabset sync (Revealjs: presentation ignores actions from speaker view #4987)
• Revealjs own limitation (Chalkboard: annotations in speaker view are not mirrored to main presentation #2139)

Speaker notes are a revealjs feature through a Built in plugin

It allows passing some content from inside slide through specific syntax: https://revealjs.com/speaker-view/ and have it show in another HTML document (the speaker view)

The code is here: https://github.com/hakimel/reveal.js/tree/master/plugin/notes and the view is filled using a html template
https://github.com/hakimel/reveal.js/blob/master/plugin/notes/speaker-view.html

Technically, It uses specific communication to fill the speaker view - it all happens in JS (https://github.com/hakimel/reveal.js/blob/master/plugin/notes/plugin.js#L7)

Anyhow, what this mean is that using mermaid.js in speaker view won't work. Though showing image does. So you could probably switch the format to png or svg for this specific issue (https://quarto.org/docs/authoring/diagrams.html#mermaid-formats)

[klausagnoletti]

Thanks so much!
It works by adding mermaid-format: png to _quarto.yml under the revealjs section. As you say, it converts diagrams to PNG and it works fine with the other mermaid diagram in the slides to have it in PNG (although it's less flexible).

So for that reason I would love to be able to set the output format per mermaid code block (e.g. override when needed). But I don't think that's possible. Do you know?

[cderv]

This is done globally in Quarto.

You could use other tools like in R DiagrammeR (https://rich-iannone.github.io/DiagrammeR), which would allow to produce mermaid diagramme but using R. You can export / save to image this specific graph.

Or any other external way to export from computation cell with #| echo: false in Quarto your diagram to file for those specific one, and still relying on {mermaid} cells for Quarto support for the other ones.

[klausagnoletti]

Thanks for the insight. I literally know nothing about R - I only came for the markdown support :-)
I'll look into it and see what works for me.

Have a great day - and thanks a lot for saving me on this!

[cderv]

I literally know nothing about R - I only came for the markdown support :-)

😄 Quarto supports also Jupyter for computation rendering, for Python and Julia. If you are more familiar with it you can try to see if they have a tool.

Otherwise, you can also do a stop step process and use mermaid-cli or another similar tool to create your diagram file first in Terminal, and then include the image. You would do this manual step only for thse image you need in speaker notes, and you can automate using Pre render script in your Quarto project (https://quarto.org/docs/projects/scripts.html#pre-and-post-render)

[klausagnoletti]

I don't know any of those either :-)

In the private repo where this originates from (the slides are just a small part of the project) there's github actions building everything and pushing the result to a gist so I'm not sure how to encorporate a multi-step build process into that. But I'll take a good look at it based on the links you provided.
Thanks again.