Mermaid: arrow not visible in sequence diagram

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;
}
3 Likes

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…