Mermaid JS invisible link in flowchart not working

[robinbaeurle]

Context

No response

Bug description

Hi,

In the docs, it says that all mermaid diagrams are supported.

When I try the following code on a page

```mermaid
flowchart LR
    A ~~~ B
    ```

It gives a syntax error and cannot render the diagram.

However, when I enter the same in the mermaid online editor, everything works fine.

Is the invisible link in state diagrams not supported somehow?

Thanks
Robin

Related links

• Reporting a bug
• Diagrams

Reproduction

This is a really minimal issue. Please see reproduction steps. Works in any project.

Steps to reproduce

1. Try to render a flowchart diagram with mermaid using syntax A ~~~ B.
2. Syntax error occurs.

Browser

No response

Before submitting

• I have read and followed the bug reporting guidelines.
• I have attached links to the documentation, and possibly related issues and discussions.
• I assure that I have removed all customizations before submitting this bug report.
• I have attached a .zip file with a minimal reproduction.

[squidfunk]

Thanks for reporting. The feature you're asking about seems to have been added in Mermaid 10. We can currently only support Mermaid 9 (see #5193 (comment)), so you would need to add Mermaid 10 via theme extension yourself.

We'll reinvestigate this in the near future. As mentioned, see the comment for details.

[clementcontet]

Hi, for some reason, it seems that invisible links were introduced in mermaid 9.2, removed in 9.3 and re-introduced in 10! (mermaid-js/mermaid#2805 (comment))
So if you use mermaid 9.2 (supported by mkdocs-material), invisible links work!