Mermaid sequence diagrams: alt fragment titles rendering in odd ways

[imkacarlson]

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 - there is a related problem but not exactly the same: Mermaid sequence diagram numbers unreadable in dark mode #4713

Description

Mermaid's sequence diagrams support alt fragements: https://mermaid.js.org/syntax/sequenceDiagram.html#alt

They work great! However in light mode some of the titles are bolded and then when switching to dark mode some of the titles are unreadable.

Light mode issue:

Dark mode issue:

Expected behaviour

The titles should be readable and consistent fonts

Actual behaviour

Some titles are bold, and black on black text is not readable

Steps to reproduce

Create a sequence diagram like so:

sequenceDiagram
    Alice->>Bob: Hello Bob, how are you?
    alt is sick
        Bob->>Alice: Not so good :(
    else is well
        Bob->>Alice: Feeling fresh like a daisy
    end
    opt Extra response
        Bob->>Alice: Thanks for asking
    end

Toggle between light and dark mode.

Package versions

• Python: Python 3.9.7
• MkDocs: mkdocs, version 1.4.2
• Material: Version: 8.5.11

Configuration

site_name: Test
nav:
  - Home: index.md
theme:
  name: material
  palette:
  - media: "(prefers-color-scheme: light)"
    scheme: default
    toggle:
      icon: material/brightness-7
      name: Switch to dark mode
  - media: "(prefers-color-scheme: dark)"
    scheme: slate
    toggle:
      icon: material/brightness-4
      name: Switch to light mode 
    primary: indigo
    accemt: yellow
markdown_extensions:
  - pymdownx.superfences:
      custom_fences:
        - name: mermaid
          class: mermaid
          format: !!python/name:pymdownx.superfences.fence_code_format

System information

• Operating system: Windows
• Browser: Firefox

[imkacarlson]

Very similar to #4713

[squidfunk]

Thanks for reporting. We likely don't provide styles for this node, as we haven't encountered it yet. Should be an easy fix, adding the necessary selectors. If you want to go ahead, a PR is very much appreciated! Styles are defined here:

mkdocs-material/src/assets/javascripts/components/content/code/mermaid/index.css

Lines 313 to 377 in 745201a

	/* ----------------------------------------------------------------------------
	* Rules: sequence diagrams
	* ------------------------------------------------------------------------- */
	/* Sequence actor */
	.actor {
	fill: var(--md-mermaid-label-bg-color);
	stroke: var(--md-mermaid-node-fg-color);
	}
	/* Sequence actor text */
	text.actor > tspan {
	font-family: var(--md-mermaid-font-family);
	fill: var(--md-mermaid-label-fg-color);
	}
	/* Sequence actor line */
	line {
	stroke: var(--md-default-fg-color--lighter);
	}
	/* Sequence message line */
	.messageLine0,
	.messageLine1 {
	stroke: var(--md-mermaid-edge-color);
	}
	/* Sequence message, loop and note text */
	.messageText,
	.loopText > tspan,
	.noteText > tspan {
	font-family: var(--md-mermaid-font-family) !important;
	fill: var(--md-mermaid-edge-color);
	stroke: none;
	}
	/* Sequence note text */
	.noteText > tspan {
	fill: hsl(0, 0%, 0%);
	}
	/* Sequence arrow head */
	#arrowhead path {
	fill: var(--md-mermaid-edge-color);
	stroke: none;
	}
	/* Sequence loop line */
	.loopLine {
	fill: var(--md-mermaid-node-bg-color);
	stroke: var(--md-mermaid-node-fg-color);
	}
	/* Sequence label box */
	.labelBox {
	fill: var(--md-mermaid-node-bg-color);
	stroke: none;
	}
	/* Sequence label text */
	.labelText,
	.labelText > span {
	font-family: var(--md-mermaid-font-family);
	fill: var(--md-mermaid-node-fg-color);
	}

[imkacarlson]

Cool! Thanks for pointing me in the right direction.

Looking into this further I noticed that the alt fragment titles that are rendering incorrectly are not in <tspan> tags. For example:

I'm not sure if there is an issue somewhere else that is causing this text not to go into a <tspan> but there is an easy fix by editing the css file pointed out by Martin above. Here is the fix: imkacarlson@478d042

This fix feels a little too hacky to me? But I can go ahead and open a PR if this looks sufficient.

[squidfunk]

This fix feels a little too hacky to me? But I can go ahead and open a PR if this looks sufficient.

All of Mermaid integration is kind of a hack, due to the way Mermaid.js works 😂 Yes, please PR the change, but please PR it to feature/material-v9, as there's not going to be another 8.x release. 9.x is coming out at the beginning of next year.

[imkacarlson]

Haha makes sense. PR opened! Thank you!

[imkacarlson]

Oh wait I see my fix branch was not created against feature/material-v9. Will redo the PR when I get back to my computer

[squidfunk]

Fixed in fc6a368.

[squidfunk]

Released as part of 9.0.0.