Mermaid: improve link discoverability

[ofek]

Context

No response

Description

Currently, there is no way to tell what parts of diagrams can be clicked other than hovering over to see if the icon changes

Related links

Here is an example https://ofek.dev/pyapp/latest/runtime/

Use Cases

It is very common to have parts of diagrams link to other places in your documentation for elaboration

Visuals

No response

Before submitting

• [X] I have read and followed the change request guidelines.
• [X] I have verified that my idea is a change request and not a bug report.
• [X] I have ensured that, to the best of my knowledge, my idea will benefit the entire community.
• [X] I have included relevant links to the documentation, related issues, and discussions to underline the need for my idea.

[squidfunk]

Thanks for suggesting. Does Mermaid.js itself style those links in another way? If not, what's your suggestion? One idea:

[ofek]

I think the only built-in styling is the tooltip (which doesn't work as far as I can tell).

Your idea is interesting, that might work. I was also thinking maybe the text could have the standard appearance of a hyperlink. Or maybe a small icon similar to https://squidfunk.github.io/mkdocs-material/reference/#setting-the-page-status

Anything is fine, I trust your design decisions 🙂

[ofek]

Have you thought about what design you want here?

[squidfunk]

Sorry, I currently have no bandwidth to address this topic, since we're investing our time to work on other features like the new search and friends (fixing 7 open change requests). I'll come back to this later, probably at the end of this year.

I'm sorry for the inconvenience this is causing you. You know how it is, I can't split myself 😅

[kamilkrzyskow]

In https://github.com/squidfunk/mkdocs-material/discussions/6778#discussioncomment-8751560 I made a proposal to have an option to add custom styles for the mermaid blocks:

extra:
  extra_shadow_root_css:
    - assets/stylesheets/mermaid.css # I don't know if relative paths are supported in the shadow root
    - https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css

this would allow to apply custom styling to the elements. In this case xlink:href="../config/#full-isolation" or clickable in class="node default clickable flowchart-label" could be used to select the elements and style them accordingly.

[squidfunk]

Fixed in 05661a156. We've decided to go with underlines for now, since we're also going to add them in the text in the near future when we do a face lift of the current design.

[ofek]

Oh my goodness, that's awesome, thank you!

[ofek]

Feel free to close this, but out of curiosity what is the facelift you have planned?

[squidfunk]

Modernize the design that is from currently Material Design from 2017. Some users criticized that we're implementing Material Design v1 and not v3, so we're aiming at incorporating the best parts of v3.

[squidfunk]

Released as part of 9.5.22.