2 Mermaid Issues

[harrelfe]

I recall seeing somewhere on the site, but can't find it now, that support for Mermaid tooltips was being dropped. I have studied the Mermaid flowchart documentation at https://mermaid-js.github.io/mermaid/#/flowchart and find no mention of Mermaid developers dropping this, so I'm not clear why support is being dropped in Quarto.

Second, in Quarto html tags within Mermaid flowchart node labels are no longer working. It works in the Preview from VS Code but when rendering the html the tags show up literally. I used to be able to put something like this in a node label: <tt>quantile</tt> function.

Any help appreciated. I'm using Quarto 1.3.26.

[cscheid]

@harrelfe You probably saw that on release notes or on commit logs. I'm the author for that. The issue with tooltips in Quarto is that they relied on a hack I put in so that they'd work with multiple diagrams in a single page. That hack stopped working on the latest version of Mermaid.

I spent an afternoon trying to fix it, and couldn't get it to work again. The mermaid codebase does not lend itself particularly well to robust extensions (each diagram type is implemented entirely independently of the next), and it has enough churn that maintenance is particularly time consuming. So I simply decided to remove the feature. I apologize that this affects you. I'll schedule some time in the future (this will be at least February, unfortunately) to give it another shot, but I can't promise I'll be able to make it work again.

WRT tags within labels. The issue here is that in order for quarto mermaid theming to work, I had to change the rendering mode from mermaid, which I did notice had a side effect of changing how escaping works. Theming of mermaid diagrams was a feature that had a number of requests, so that took priority.

Again, I apologize for it affecting your existing uses, I know how frustrating that is. When I come back to this code, I'll see if I can set up an option to explicitly control escaping.

[cscheid]

Huh. I don't understand this distinction, but I can see there's something strange happening with our execution of dot diagrams. This is a simple repro that shows the difference between our rendering and OJS's:

---
title: "test graphviz"
---

```{ojs}
dot`graph G {
    a [tooltip="Tooltip for a"]
    b [tooltip="Tooltip for b"]
    c [tooltip="Tooltip for c"]
    d [tooltip="Tooltip for d"]
    a -- b;
    b -- c;
    c -- d;
    d -- a;
}`
```

```{dot}
graph G {
    a [tooltip="Tooltip for a"]
    b [tooltip="Tooltip for b"]
    c [tooltip="Tooltip for c"]
    d [tooltip="Tooltip for d"]
    a -- b;
    b -- c;
    c -- d;
    d -- a;
}
```

If you're ok with a workaround for now, you can use the OJS syntax above. In my environment, at least, that generates the correct diagram tooltips:

I'm going to open a bug report to investigate.

[harrelfe]

Thanks for continuing to dig into this Carlos. I'm fine with using that syntax except for two things: You don't get a preview with VS Code and the diagram doesn't render unless I use self-contained: true. And what is ojs?

[cscheid]

• self-contained: true shouldn't be needed if you're running the page from a web server
• OJS is a code chunk for Observable JS: https://quarto.org/docs/interactive/index.html#observable-js

[harrelfe]

Thanks. Yes it does work when put on a web server. Odd that it doesn't work locally. At least for local use I almost always have it self-contained. But I'm back to square one with the original goal because html within tooltip=<...> is treated literally. When using graphviz the usual way with Quarto I could do within-label font changes.

[leonamlvs]

Thank you, Carlos for your contribution.

For those using mermaid on docusaurus to create flowcharts, this workaround might be helpful. Just place the code inside your custom.css file:

svg, foreignObject {
  overflow: visible;
}

.nodeLabel * {
  visibility: hidden;
  position: absolute;
  background-color: black;
  color: #fff;
  border-radius: 6px;
  padding: 5px 10px;
}

.nodeLabel li {
  position: relative;
  list-style-position: inside;
}

.node:hover .nodeLabel * {
  visibility: visible;
}

.nodes:hover .node{
  opacity:0.2;
}

.nodes .node:hover{
  opacity:1 !important;
}

Usage:

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

    A[Node\nA<p>Text Title<br>Text line #1<br>Text line #2<br>Text line #3</p>];
    B[Node\nB<ol>Ordered list of items:<li>Item 1</li><li>Item 2</li><li>Item 3</li>End of the list.</ol>];
    C[Node\nC<ul>Unordered list of items:<li>Item 1</li><li>Item 2</li><li>Item 3</li>End of the list.</ul>];
    D[Node\nD<p>This is a link for the mermaid-js repository.</p>]

    click D "https://github.com/mermaid-js"
```⠀