Mermaid sequence diagram not allowing links in participant

[fidel-ruiz]

Contribution guidelines

• I've read the contribution guidelines and wholeheartedly agree

I've found a bug and checked that ...

• ... the problem doesn't occur with the mkdocs or readthedocs themes
• ... the problem persists when all overrides are removed, i.e. custom_dir, extra_javascript and extra_css
• ... the documentation does not mention anything about my problem
• ... there are no open or closed issues that are related to my problem

Description

When clicking the participant test it should open up the actor popup menu. that event is not trigger. I'm using the native support with mermaid with plain mkdocs the rendering was different using html and pre, it was working as expected.

Sharing this simple diagram to showcase the issue

sequenceDiagram
    participant  test
    participant  test2
    link test: github @ https://github.com
    test->>test2: talk to

Loading

Expected behaviour

On click of the actor box should display the menu item.

Actual behaviour

Actor Menu are not displayed, they are in the shadowDOM of the svg but the click event is not triggered.

Steps to reproduce

1. Create a diagram using mkdocs-material with the config explained above

Package versions

• Python: 3.10.8
• MkDocs: 1.4.2
• Material: 8.5.10

Configuration

site_name: IBM Cloud Monitoring Regulated
nav:
  - Home: index.md
theme:
  name: material
  features:
    - navigation.tabs
    - navigation.tabs.sticky
    - navigation.instant

plugins:
  - search

markdown_extensions:
  - attr_list
  - pymdownx.superfences:
      custom_fences:
        - name: mermaid
          class: mermaid
          securityLevel: loose
          logLevel: 1
          format: !!python/name:pymdownx.superfences.fence_code_format

System information

• Operating system: MAC
• Browser: Firefox, Chrome

[squidfunk]

Thanks for reporting. When I'm trying to run your example, I'm greeted with an error when opening the browser's console:

The error manifests when the browser tries to parse and render the SVG markup generated by Mermaid. From the message, I read that Mermaid generated a NaN value, which is invalid for dy. I understand that this might be solely related to Mermaid.js running in Shadow DOM, but since this is a necessary requirements, I need to close this issue as not fixable.

Please report this issue to Mermaid.js.