Mermaid: allow customizing sequence diagram notes node style

[sisp]

Context

The color of Mermaid sequence diagram notes looks a bit off IMO (see, e.g., https://squidfunk.github.io/mkdocs-material/reference/diagrams/#using-sequence-diagrams), at least not as nicely integrated with the rest of the theme colors.

Description

mkdocs-material overrides some Mermaid colors with own CSS variables but not the "note" node. How about introducing new CSS variables, e.g. --md-mermaid-note-bg-color as the fill color and --md-mermaid-note-fg-color as the stroke color (consistent with existing naming), and add an override for Mermaid's note CSS class? The default colors could be based on the info admonition color.

There exists some customization for note text, so perhaps not customizing the note rect itself was an oversight.

Related links

• Using sequence diagrams

Use Cases

Having a nicely integrated Mermaid diagram makes documentation more pleasant to read. It's mostly good already, but sequence diagram notes look a bit off.

Visuals

No response

Before submitting

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

[squidfunk]

Thanks for suggesting. Yes, we can certainly make Mermaid diagrams more configurable in the future 😊

[nejch]

@squidfunk awesome! Would you accept a little PR for this? I think even the default schemes could benefit from this, see the current demo in slate:

[squidfunk]

Yes, but we should actually add an additional layer of abstraction for each component in each diagram type, so that you can comfortable overwrite it with CSS. If you would like to work on this, a PR would be amazing. We could start with the sequence diagram and after then translate the solution over to the other types 😊

[nejch]

Yes, but we should actually add an additional layer of abstraction for each component in each diagram type, so that you can comfortable overwrite it with CSS. If you would like to work on this, a PR would be amazing. We could start with the sequence diagram and after then translate the solution over to the other types blush

Thanks @squidfunk! Just to clarify, do you mean simply in the color variables, e.g --md-mermaid-label-bg-color -> --md-mermaid-sequence-label-bg-color and so on, or narrowing down the selectors themselves based on diagram types?

[squidfunk]

Yes. I'd say it might make sense to introduce a little hierarchy to comfortably style Mermaid.js components, and specific components inside diagrams. I haven't made up my mind how a hierarchy of CSS variables could look like, but I'd be happy if somebody was up to do the legwork and submit a PR for it. We need a first draft which we can discuss ☺️ As with all of Material for MkDocs, if the approach proposed could have sane defaults, and make it easy to deviate where desired, plus be extensible to account for new components that Mermaid.js adds, we're all for it!

[squidfunk]

@nejch @sisp did you manage to start working on this topic? I just want to make sure we're not duplicating efforts.

[sisp]

@squidfunk Not yet, but it's on my list for next week. Thanks for asking and checking! 👍

[sisp]

I've submitted a PR: #5940

[squidfunk]

Released as part of 9.2.7.