Blurry text in sequence diagrams

[mzedeler]

Describe the bug The sequence diagram messages are blurred because they contain a stroke: #333 CSS attribute, see the image below.

It may be something cause by Wiki.js which is the system using the Mermaid engine, but then I'd like to know if there is a lowtech way I can fix the issue, posbily by changing the Mermaid configuration for each diagram.

To Reproduce Steps to reproduce the behavior:

sequenceDiagram

participant V as Visitor
participant A as App
activate A
V -->> A: Select
A -->> V: Display selections
deactivate A

Expected behavior The message label shouldn't have the stroke: #333 property.

Screenshots

Code Sample If applicable, add the code sample or a link to the live editor.

Desktop (please complete the following information):

• OS: MacOS
• Browser chrome
• Version 90

[dswbx]

still an issue for me. Is there a workaround?

[thesurlydev]

I wouldn't mind contributing a fix for this issue.

[thesurlydev]

Circling back after taking a closer look. It looks like there's #diagram .messageText{fill:#333;stroke:#333;} being set in the style tag of the exported/rendered SVG. By removing the stroke attribute, the text looked normal.

In my case, I use the SVGs in GitHub documents and was able to get around this issue by setting a user override:

%%{init: {"themeVariables": { "signalTextColor": ""} }}%%

%%{init: {"themeVariables": { "signalTextColor": ""} }}%%
sequenceDiagram
    participant c as Platform A
    participant sp as Platform B
    c->>sp: Submit data

For completeness, the following is what's rendered without the user override:

sequenceDiagram
    participant c as Platform A
    participant sp as Platform B
    c->>sp: Submit data