Center mermaid diagram in a html document with fig-align does not work

[cderv]

Following #3294 and its fix #3433

this is supposed to work

---
title: "test"
format: html 
keep-md: true
---

```{mermaid}
%%| fig-cap: Mermaid diagram
%%| fig-align: center
flowchart TB
a --> b 
b --> c
```

However it is not.

This is because we do in JS now

quarto-cli/src/resources/formats/html/mermaid/mermaid-init.js

Lines 215 to 224 in fbc12cb

	// forward align attributes to the correct parent dif
	// so that the svg figure is aligned correctly
	const div = svg.parentElement.parentElement.parentElement;
	const align = div.parentElement.parentElement.dataset.layoutAlign;
	if (align) {
	div.classList.remove("quarto-figure-left");
	div.classList.remove("quarto-figure-center");
	div.classList.remove("quarto-figure-right");
	div.classList.add(`quarto-figure-${align}`);
	}

but somehow we have more div than expected. The layout-align is one div above.

This is the intermediate md

---
title: "test"
format: html 
keep-md: true
---

:::{.cell layout-align="center"}

:::{.cell-output-display}

:::{}

:::{}

<pre class="mermaid mermaid-js">flowchart TB
a --&gt; b 
b --&gt; c
</pre>
:::


Mermaid diagram
:::
:::
:::

and the HTML rendered in preview

<div class="cell" data-layout-align="center">
<div class="cell-output-display">
<div>
<div>
<svg ...>(SVG CONTENT</svg>
</div>
<p>Mermaid diagram</p>
</div>
</div>
</div>

@cscheid I let you see this because

• Either we need to add one more parentElement

-const div = svg.parentElement.parentElement.parentElement;
+const div = svg.parentElement.parentElement.parentElement.parentElement;

• We need to see why we create those empty div in the markdown - maybe there is one more that we expect.

Discussed in #4375

^{Originally posted by wilcar February 16, 2023}
How can I center a mermaid diagram in a html document ?

[cscheid]

Hm. The problem here is that we sometimes need that div, and sometimes we don't (that's ultimately a crossref issue, where we assume a certain div structure where things like captions etc will be). It's honestly a mess. The workaround will be to search for either of the divs, but it's really an admission of defeat. We should nuke this code from orbit and start again, and I will on 1.4.

Well, it's worse. Our SCSS assumes a figure node, which we only emit for a crossreferenceable figure with id and caption. So the only way currently to make this work in 1.3 is to do something like:

```{mermaid}
%%| label: fig-1
%%| fig-cap: Mermaid diagram
%%| fig-align: center
flowchart TB
a --> b 
b --> c
```

This is, in the end, just another instance of the "fig-align should work for all "figures" whether or not they're crossreferenceable" bug. I'm reluctant to change this in 1.3 because that code is very finicky and regression prone. We'll fix this in 1.4.

[cscheid]

Similarly, the example shared will emit a caption that gets no styling.