Mermaid: arrow not visible in sequence diagram

[Torikeshi]

Seeing a similar issue in sequence diagrams:

Here’s a CSS snippet that resolved the issue for me:

/*
    Fixes the arrowhead color in the element referenced by Mermaid sequence diagrams' marker-end attribute.
    (The default is #333, which doesn't show up on dark backgrounds.)
*/
.mermaid [id$="arrowhead"] path {
    fill: var(--text-muted) !important;
    stroke: var(--text-muted) !important;
}

[WhiteNoise]

[reinmmar]

Hey, this issue seems not only to be with the arrowheads, but also with i.e. loops and optional parts, as shown in the picture below.

There should be a line going around, that is barely visible (This is the default dark mode theme on v1.5.12). Below is also the source for the complete box:

>[!HINT] SSL handshake
>The handshake looks as follows:for a client $A$ and a server $B$
>```mermaid
>sequenceDiagram
>	A->>B: client hello
>	B->>A: server hello
>	B->>A: server certificate
>	opt Key exchange
>	A-->B: Key exchange
>	end
>	A-->>B: client certificate *
>	A->>B: client key exchange
>	A-->>B: certificate verify *
>	A->>B: client finished
>	B->>A: server finished
>```

The css-snippet that was posted earlier seems to work, is there maybe a similar solution for the rest? I didn’t find what the components are called…

[jjspace]

I was surprised to see this bug is still happening and found this new thread. I already previously explained and offered the solution in: Mermaid: Low contrast of arrow heads in sequence diagram (dark theme) - #3 by jjspace

This is an issue with how the mermaid theme variables are defined globally
For the arrow heads it’s the signalColor that’s hardcoded to #333 instead of using the theme variables.
The loop outline color follows the same signal color. The loop text is found in loopTextColor
This can be fixed with this snippet in the console then re-rendering the diagram

mermaid.mermaidAPI.updateSiteConfig({
  themeVariables: {
    signalColor: "var(--text-normal)",
    loopTextColor: "var(--text-normal)"
  }
})

There are other theme variables in the mermaid site config that are still set to default CSS colors like #333 which will not show up on most dark themes. I recommend going through all the theme values again and updating them to be dynamic dependant on Obsidian theme variables (like found in an older similar theming issue with mermaid diagrams Mermaid gitGraph colors are hard to see)

CC @WhiteNoise

[WhiteNoise]

We will change the way we handle mermaid styling in v1.8.

It should solve/ameliorate this issue.