Allow mermaid markdown format for non-gfm markdown

[jpfeuffer]

Description

Please allow it here:

quarto-cli/src/core/handlers/mermaid.ts

Line 68 in bc45896

if (isMarkdownOutput(options.format, ["gfm"])) {

I want to keep the markdown "::::" blocks for code, outputs etc. but do NOT want to resort to png for mermaid.
SVG would be a (suboptimal) alternative option but it is broken for markdown format (see below).

By the way:

1. The way you are suggesting to specify the mermaid-format in your docs does not work for me.
   It is only recognized as a top-level yaml config for me:

---
title: "demo"
format:
  html:
    code-fold: true
jupyter: python3
mermaid-format: svg
---

2. Mermaid SVG in markdown is completely messed up.

QMD:

---
title: "demo"
jupyter: python3
mermaid-format: svg
---

# This is a mermaid example

```{mermaid}
flowchart LR;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

Command:
quarto render --to=markdown-simple_tables

Output:

:::::::::::::: {.cell layout-align="default"}
::::::::::::: cell-output-display
<div>

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

<div>

<svg aria-roledescription="flowchart-v2" role="graphics-document document" viewbox="0 0 324.8203125 174" class="flowchart" xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="672" id="mermaid-figure-1" height="480">
<style>#mermaid-figure-1{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-figure-1 .error-icon{fill:#552222;}#mermaid-figure-1 .error-text{fill:#552222;stroke:#552222;}#mermaid-figure-1 .edge-thickness-normal{stroke-width:1px;}#mermaid-figure-1 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-figure-1 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-figure-1 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-figure-1 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-figure-1 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-figure-1 .marker{fill:#333333;stroke:#333333;}#mermaid-figure-1 .marker.cross{stroke:#333333;}#mermaid-figure-1 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-figure-1 p{margin:0;}#mermaid-figure-1 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-figure-1 .cluster-label text{fill:#333;}#mermaid-figure-1 .cluster-label span{color:#333;}#mermaid-figure-1 .cluster-label span p{background-color:transparent;}#mermaid-figure-1 .label text,#mermaid-figure-1 span{fill:#333;color:#333;}#mermaid-figure-1 .node rect,#mermaid-figure-1 .node circle,#mermaid-figure-1 .node ellipse,#mermaid-figure-1 .node polygon,#mermaid-figure-1 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-figure-1 .rough-node .label text,#mermaid-figure-1 .node .label text{text-anchor:middle;}#mermaid-figure-1 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-figure-1 .node .label{text-align:center;}#mermaid-figure-1 .node.clickable{cursor:pointer;}#mermaid-figure-1 .arrowheadPath{fill:#333333;}#mermaid-figure-1 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-figure-1 .flowchart-link{stroke:#333333;fill:none;}#mermaid-figure-1 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-figure-1 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-figure-1 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-figure-1 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-figure-1 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-figure-1 .cluster text{fill:#333;}#mermaid-figure-1 .cluster span{color:#333;}#mermaid-figure-1 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-figure-1 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-figure-1 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style>
`<g><marker orient="auto" markerheight="8" markerwidth="8" markerunits="userSpaceOnUse" refy="5" refx="5" viewbox="0 0 10 10" class="marker flowchart-v2" id="mermaid-1743587170019_flowchart-v2-pointEnd"><path style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 0 0 L 10 5 L 0 10 z"></path></marker><marker orient="auto" markerheight="8" markerwidth="8" markerunits="userSpaceOnUse" refy="5" refx="4.5" viewbox="0 0 10 10" class="marker flowchart-v2" id="mermaid-1743587170019_flowchart-v2-pointStart"><path style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 0 5 L 10 10 L 10 0 z"></path></marker><marker orient="auto" markerheight="11" markerwidth="11" markerunits="userSpaceOnUse" refy="5" refx="11" viewbox="0 0 10 10" class="marker flowchart-v2" id="mermaid-1743587170019_flowchart-v2-circleEnd"><circle style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" r="5" cy="5" cx="5"></circle></marker><marker orient="auto" markerheight="11" markerwidth="11" markerunits="userSpaceOnUse" refy="5" refx="-1" viewbox="0 0 10 10" class="marker flowchart-v2" id="mermaid-1743587170019_flowchart-v2-circleStart"><circle style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" r="5" cy="5" cx="5"></circle></marker><marker orient="auto" markerheight="11" markerwidth="11" markerunits="userSpaceOnUse" refy="5.2" refx="12" viewbox="0 0 11 11" class="marker cross flowchart-v2" id="mermaid-1743587170019_flowchart-v2-crossEnd"><path style="stroke-width: 2; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 1,1 l 9,9 M 10,1 l -9,9"></path></marker><marker orient="auto" markerheight="11" markerwidth="11" markerunits="userSpaceOnUse" refy="5.2" refx="-1" viewbox="0 0 11 11" class="marker cross flowchart-v2" id="mermaid-1743587170019_flowchart-v2-crossStart"><path style="stroke-width: 2; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 1,1 l 9,9 M 10,1 l -9,9"></path></marker><g class="root"><g class="clusters"></g><g class="edgePaths"><path marker-end="url(#mermaid-1743587170019_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_A_B_0" d="M73.727,60L78.512,55.833C83.297,51.667,92.867,43.333,99.757,39.167C106.647,35,110.857,35,114.4,35C117.943,35,120.819,35,122.257,35L123.695,35"></path><path marker-end="url(#mermaid-1743587170019_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_A_C_1" d="M73.727,114L78.512,118.167C83.297,122.333,92.867,130.667,99.736,134.833C106.604,139,110.771,139,114.271,139C117.771,139,120.604,139,122.021,139L123.438,139"></path><path marker-end="url(#mermaid-1743587170019_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_B_D_2" d="M196.75,35L200.96,35C205.169,35,213.589,35,220.198,37.083C226.808,39.167,231.608,43.333,235.905,47.063C240.202,50.793,243.995,54.085,245.892,55.732L247.788,57.378"></path><path marker-end="url(#mermaid-1743587170019_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_C_D_3" d="M197.008,139L201.174,139C205.341,139,213.674,139,220.241,136.917C226.808,134.833,231.608,130.667,235.905,126.937C240.202,123.207,243.995,119.915,245.892,118.268L247.788,116.622"></path></g><g class="edgeLabels"><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignobject height="0" width="0">`{=html}

::: {.labelBkg style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"}
[]{.edgeLabel}
:::

`</foreignobject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignobject height="0" width="0">`{=html}

::: {.labelBkg style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"}
[]{.edgeLabel}
:::

`</foreignobject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignobject height="0" width="0">`{=html}

::: {.labelBkg style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"}
[]{.edgeLabel}
:::

`</foreignobject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignobject height="0" width="0">`{=html}

::: {.labelBkg style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"}
[]{.edgeLabel}
:::

`</foreignobject></g></g></g><g class="nodes"><g transform="translate(42.71875, 87)" id="flowchart-A-0" class="node default"><rect height="54" width="69.4375" y="-27" x="-34.71875" data-et="node" data-id="abc" style="" class="basic label-container"></rect><g transform="translate(-4.71875, -12)" style="" class="label"><rect></rect><foreignobject height="24" width="9.4375">`{=html}

::: {style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"}
`<span class="nodeLabel">`{=html}
<p>
A
</p>
`</span>`{=html}
:::

`</foreignobject></g></g><g transform="translate(162.22265625, 35)" id="flowchart-B-1" class="node default"><rect height="54" width="69.0546875" y="-27" x="-34.52734375" data-et="node" data-id="abc" style="" class="basic label-container"></rect><g transform="translate(-4.52734375, -12)" style="" class="label"><rect></rect><foreignobject height="24" width="9.0546875">`{=html}

::: {style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"}
`<span class="nodeLabel">`{=html}
<p>
B
</p>
`</span>`{=html}
:::

`</foreignobject></g></g><g transform="translate(162.22265625, 139)" id="flowchart-C-3" class="node default"><rect height="54" width="69.5703125" y="-27" x="-34.78515625" data-et="node" data-id="abc" style="" class="basic label-container"></rect><g transform="translate(-4.78515625, -12)" style="" class="label"><rect></rect><foreignobject height="24" width="9.5703125">`{=html}

::: {style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"}
`<span class="nodeLabel">`{=html}
<p>
C
</p>
`</span>`{=html}
:::

`</foreignobject></g></g><g transform="translate(281.9140625, 87)" id="flowchart-D-5" class="node default"><rect height="54" width="69.8125" y="-27" x="-34.90625" data-et="node" data-id="abc" style="" class="basic label-container"></rect><g transform="translate(-4.90625, -12)" style="" class="label"><rect></rect><foreignobject height="24" width="9.8125">`{=html}

::: {style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"}
`<span class="nodeLabel">`{=html}
<p>
D
</p>
`</span>`{=html}
:::

`</foreignobject></g></g></g></g></g>`{=html}
</svg>

</div>

`</figure>`{=html}

</div>
:::::::::::::
::::::::::::::

[mcanouil]

If you don't want the Mermaid code to be evaluated by Quarto why are you using a code cell?
Use regular code block (without brackets).

[cderv]

How are you targeting your mkdocs output ? Could you go through gfm with some tweaks ?

Which format are you using as output when you target mkdocs usage ?

[jpfeuffer]

Currently I target it with quarto render --to markdown-simple_tables.

I am not sure about what tweaks you were thinking of but IIRC I could not get stdout, stderr, etc. rendered (at least not differently from the rest of the display) with gfm.

[cderv]

I think I don't see clear enough what you tried, and want to do. So I won't try to answer further. It seems you got your initial answer you were looking for.

[jpfeuffer]

What? What is unclear? I responded to all of your questions.
The initial suggestion is more a workaround I would say.

I just would like quarto to allow choosing the raw markdown format for mermaid for output formats other than gfm? Why should it be restricted to this flavor of markdown only and only via "defaulting" behaviour.

Maybe @mcanouil can explain better.

[jpfeuffer]

You were even fully correct in your initial analysis and I responded that you were correct.
I am just saying that your suggestion "just use gfm 'with tweaks'" will not work for me, nor many other people since gfm omits a lot of metadata of code blocks.