sphinxcontrib-mermaid 1.0.0 HTML rendering incorrect compared to 0.9.2

[lytn1ng]

Here is an example diagram - note that the connectors are arrow-less:

---
caption: Test Diagram
---
flowchart TD;
%%flowchart-elk TD;
id1("One")---id2("Two");
id1("One")---id3("Three");

Loading

Here's how the HTML renders with sphinxcontrib-mermaid 0.9.2:

1. The diagram appears to be rendered directly on the dark background (i.e. no colored box).
2. The connector lines are visible even in dark mode

However, with 1.0.0, here's how it looks:

1. There's a gray-ish box around the diagram
2. There are no connectors visible in dark mode

And this is how it looks with 1.0.0 in Light mode:

1. There is still a gray-ish box around the diagram
2. The connectors are visible - but they have arrows

Please fix this. issue But for now, 0.9.2 still works well enough with Sphinx 8.1.3.

[timkpaine]

This is not what it looks like for me, cannot reproduce. Please provide code or if you’re using any customizations.

[lytn1ng]

Thanks for the quick response, @timkpaine.

What does it look like for you?

I had included the code in my original issue report but it has been converted to a diagram. I am adding it here again without the back-ticks (hopefully it's readable)

---

mermaid
flowchart TD;
%%flowchart-elk TD;
id1("One")---id2("Two");
id1("One")---id3("Three");

As for customizations: I'm not using anything for mermaid. I am using Sphinx, myst-parser, ablog and the sphinx-book-theme.

In my testing, the only things I did were:
pip install sphinxcontrib-mermaid (this installed 1.0.0).

The HTML diagram looked odd.

Then, I did
pip uninstall sphinxcontrib-mermaid
pip install sphinxcontrib-mermaid==0.9.2

And then I ran the "make html" command - the diagram looked ok again in the HTML.

[timkpaine]

Furo:

sphinx-book-theme:

css rule in sphinx-book-theme causing the problem:

We render in pre tag since #133

[lytn1ng]

Thank you, @timkpaine.

I think your results match mine - at least with the sphinx-book-theme.

However, the rendering is still wrong in 1.0.0 - even in Furo - since the connecting lines have arrows. According to the code, there should be no arrows.

Whereas, irrespective of the CSS, it works in 0.9.2. The connecting lines have no arrows when using 0.9.2.

[timkpaine]

The code should have arrows, I don't see anything wrong. mermaid live link

[lytn1ng]

Thanks again for looking into this, @timkpaine.

I agree that sphinxcontrib-mermaid 1.0.0 is rendering the image just like the mermaid live editor (i.e. with arrows).

However, there is an issue in the Mermaid github talking about this exact same issue with arrows. Hopefully, once it's fixed upstream, it'll be fixed here too.