Graphviz-dot diagrams malformatted in html output

[Gewerd-Strauss]

Description

Take the following example manuscript:

---
key: X
---
```{dot}

digraph G {
	graph [fontsize=10 fontname="Verdana" compound=true];
	node [shape=record fontsize=6 fontname="Verdana"];
	subgraph cluster_outer {
    subgraph cluster_Y {
        label="directions"
             "P6 (bottom left, front)" -> "P1 (top, back)"
         -> "P2 (top, front)"
         -> "P3 (bottom right, back)"
         -> "P4 (bottom right, front)"
         -> "P5 (bottom left, back)"
         -> "P6 (bottom left, front)"
    }
    subgraph cluster_bl {
        node [style=radial]
        "P5 (bottom left, back)" [color=greenyellow]
        "P6 (bottom left, front)" [color=green]
        label="Bottom left shelf"
        color=red
    }
    subgraph cluster_br {
        node [style=radial]
        "P3 (bottom right, back)" [color=gold]
        "P4 (bottom right, front)" [color=yellow]
        label="Bottom right shelf"
        color=yellow
    }
    subgraph cluster_t {
        node [style=radial]
        "P1 (top, back)" [color=red]
        "P2 (top, front)" [color=orange]
        label="Top shelf"
        color=green
    }
    subgraph cluster_steps {
        label="Steps"
        node [style=filled];
     "1. Entferne Gruppe auf Position P5" [color=greenyellow]
     "2. Entferne Gruppe auf Position P6" [color=green]
     "3. Schiebe Gruppe P5 auf Position P6" [color=greenyellow]
     "4. Schiebe Gruppe P4 auf Position P5" [color=yellow]
     "5. Schiebe Gruppe P3 auf Position P4" [color=gold]
     "6. Schiebe Gruppe P2 auf Position P3" [color=orange]
     "7. Schiebe Gruppe P1 auf Position P2" [color=red]
        node [style=filled];
        "1. Entferne Gruppe auf Position P5" 
        -> "2. Entferne Gruppe auf Position P6"
        -> "3. Schiebe Gruppe P5 auf Position P6"
        -> "4. Schiebe Gruppe P4 auf Position P5"
        -> "5. Schiebe Gruppe P3 auf Position P4"
        -> "6. Schiebe Gruppe P2 auf Position P3"
        -> "7. Schiebe Gruppe P1 auf Position P2"
    
        color=black;
        hidden=true
    }
    subgraph cluster_1 {
        label = "Gruppen";
        node [style=filled];
        "G1" [color=red]
        "G2" [color=orange]
        "G3" [color=gold]
        "G4" [color=yellow]
        "G5" [color=greenyellow]
        "G6" [color=green]
        
        node [style=filled]
        {"G1"
        ->"G2" 
        ->"G3"
        ->"G4"
        ->"G5"
        ->"G6"[style=invis] {rank=0.1} }
        color=black;
        hidden=true;
        }
	}
}

```


Lorem ipsum

When building online, this diagram gets correctly rendered (see here and here).

However, when rendering to quarto via

quarto render index.qmd --to XXXX

and these are the results I get for html, pdf and docx outputs:

html:

pdf:

docx:

---

Notably for html, the diagram is obviously malformatted. The standalone string lorem ipsum below the diagram is also missing.

Sidenote: This also occures when compiling via the quarto-package for R.

---

What am I doing wrong; am I missing something obvious here?

Any help is appreciated.

Thank you,
Sincerely,
~Gw

---

10.07.2023 16:06: updated to fix wrong copy-paste of dot to {dot}

[cscheid]

Can you make sure the .qmd you posted is actually the one you're using? Quarto doesn't recognize the syntax you shared:

```dot
...
```

This, for me, produces a code printing without a diagram (which is the expected behavior):

Your document probably contains some other input. It's important for us to have access to precisely the document you've used.

[Gewerd-Strauss]

Whoops. Dunno how that happened, thank you for pointing it out. Doesn't resolve it, but yea that's a stupid mistake. Code in original post is fixed now.

[mcanouil]

You cannot really compare to the online version, because it is not exactly the same version of Mermaid.js and they do a lot of updates, so differences are expected.
Online is 10.2.4 while Quarto is currently at 10.2.0-rc.2.

This being said your example is not reproducible, you are missing {} around dot.

[Gewerd-Strauss]

This seems to be the cause. Or rather, using something that is very much not existing list syntax resolves this; in my case tested with e.g. "1: Entferne Gruppe auf Position P5".

I guess I'll make a few test sets cuz I am curious what else it might fail upon.

But I wonder why quarto doesn't parse it as non-markdown - or rather, why does it parse the contents of the codeblock as markdown in the first place?

The documentation on diagrams describes them as markdown-inspired. To me that can mean a whole lot of different things, but it doesn't read as This can process markdown; rather such that its language design is comparable to markdown in terms of simplicity.

[cscheid]

The documentation on diagrams describes them as markdown-inspired.

Just FYI: In that documentation, we are simply describing mermaid in their own words.

[cderv]

@mcanouil I think you idenfied the issue. Note that the .md intermediate looks like this (first example)

---
title: "figure divs"
format: html
keep-md: true
---

:::{.cell}

:::{.cell-output-display}

:::{}

:::{}
<svg width="672" height="480" viewbox="0.00 0.00 301.50 68.80" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" style="; max-width: none; max-height: none">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 64.8)">
<title>G</title>
<polygon fill="white" stroke="transparent" points="-4,4 -4,-64.8 297.5,-64.8 297.5,4 -4,4"></polygon>
<text text-anchor="middle" x="146.75" y="-8.2" font-family="Times,serif" font-size="14.00">Steps</text>
<!-- 1. Entferne Gruppe auf Position P5 -->
<g id="node1" class="node">
<title>1. Entferne Gruppe auf Position P5</title>
<ellipse fill="none" stroke="black" cx="146.75" cy="-42.8" rx="147" ry="18"></ellipse>
<text text-anchor="middle" x="146.75" y="-38.6" font-family="Times,serif" font-size="14.00">1. Entferne Gruppe auf Position P5</text>
</g>
</g>
</svg>
:::
:::
:::
:::

As we can see the <svg> code is not protected as Raw HTML using a ```{=html} - that is why some content is parsed as Markdown (probably because markdown_in_html_blocks extension is enabled by Default in Pandoc.)

@cscheid any reason to not protect the .svg for the Diagram processing ? If not, it could be an easy fix.

[cscheid]

No, not at all, we should definitely do that.

[mcanouil]

I'll open an issue then ;)

[mcanouil]

Closing in favour of #6163.
Thanks @Gewerd-Strauss for reporting this!