How do I make multiple mermaid diagrams as subfigures?

[roaldarbol]

Description

I am trying to create a single figure that contains multiple mermaid diagrams as subfigures (as in https://quarto.org/docs/authoring/figures.html#subfigures). I can get both to render, but not as subfigures. Here's a code snippet:

:::{#fig-intro-diagram layout-ncol=2}

```{mermaid}
flowchart TD
  A[High-level behaviour] --> B[Low-level behaviour]
```

```{mermaid}
flowchart TD
  A[High-level behaviour] --> B[Low-level behaviour]
  C[Environment] -.-> A & B
```

This is a caption.
:::

Is there a way of achieving that?

[roaldarbol]

Ah, figured a way!
Since subfigures need their own labels/tags, and the way to achieve that is through a figure div, you can simply nest figure divs:

Input	Output
--- title: "Subfigures" format: html --- ::::{#fig-intro-diagram layout-ncol=2} :::{#fig-intro-1} ```{mermaid} flowchart TD A[High-level behaviour] --> B[Low-level behaviour] ``` ::: :::{#fig-intro-2} ```{mermaid} flowchart TD A[High-level behaviour] --> B[Low-level behaviour] C[Environment] -.-> A & B ``` ::: This is a caption. ::::

[mcanouil]

Don't mix components, nest them.

Input	Output
--- title: "Quarto Playground" format: html --- ::: {#fig-intro-diagram} ::: {layout-ncol=2} ```{mermaid} flowchart TD A[High-level behaviour] --> B[Low-level behaviour] ``` ```{mermaid} flowchart TD A[High-level behaviour] --> B[Low-level behaviour] C[Environment] -.-> A & B ``` ::: This is a caption. :::

[roaldarbol]

The difference is that I don't get (a) and (b) subfigures that I can refer to this way.

[cscheid]

That's right. I think your approach is slightly better in this case, @roaldarbol.

[mcanouil]

It depends on the goal. To allow cross-reference of subfigures and have subcaptions, using cross-reference div is the way. If one wants a composite figure then the nested syntax is the way.

[cscheid]

(@mcanouil, the title says "subfigures")

[mcanouil]

Indeed, I posted after the other marked answer ;)