mermaid-js / mermaid

Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
https://mermaid.js.org
MIT License
70.67k stars 6.33k forks source link

Sequence diagram's box line is not visible in dark mode. #5720

Open samchon opened 3 weeks ago

samchon commented 3 weeks ago

Description

I suddenly found a mermaid sequence diagram bug devoping an website.

When declare a box in sequence diagram, its line is visible in the light mode, but not in the dark mode.

It's because the box line's default color is always black even in the dark mode.

Steps to reproduce

  1. Declare a box without custom styling
  2. Change the github style to dark mode
  3. The box line is not visible due to black coloured.

Screenshots

image image

Code Sample

sequenceDiagram
box Client Application
  actor User
  participant Driver as Driver<Listener>
  participant Connector as Communicator (Client)
end
box Server Application
  participant Acceptor as Communicator (Server)
  actor Provider
end
User->>Driver: 1. calls a function
Activate User
Activate Driver
Driver->>Connector: 2. delivers the function call
Activate Connector
Deactivate Driver
Connector-->>Acceptor: 3. sends a protocolized<br/>network message<br/>meaning a function call
Deactivate Connector
Activate Acceptor
Acceptor->>Provider: 4. calls the function
Provider->>Acceptor: 5. returns a value
Acceptor-->>Connector: 6. sends a protocolized<br/>network message<br/>meaning a return value
Deactivate Acceptor
Activate Connector
Connector->>User: 7. delivers the return value
Deactivate Connector
Deactivate User

https://develop.git.mermaid.live/edit#pako:eNqdk01v2zAMhv8KodMKpBn20Q4wCgNBctxhQNGbLozMpEJtyqPkbGvR_z4psh01zS47SaSph-9LWS_KuIZUpTz9HIgNbSzuBTvNW_cb1q0lDrDq-9YaDNaxZgA0wQk8eJIU9SjBGttjLNyIPZAA-nF39936QExSn1euHTMdObF47bpu4NQhxh9y0yvNxE2WcU-SsGcyStzKGOov0vLZq5PuH-IOtknaj_xk47qus94KPi3BYNt6QNgNbHKvVVwPGGj0PIf5kOa8RsrsqoLPS2ioTXkP4ZFm2hFfMOYjEUN4Tp6_Xkf6ZLKCL0vwUX1S2YsLzrjWPlNzt5WPNVP45eQJOvIe93TMdYRseV-YGmUULQshs7ipY0rlXZQxDbCCr9OwSoOap4I3km-WIBQG4ST6gO1ABfTt6G7_213uMOELc6WR935PU67rdMUVfDu7vX-CL19fgqiF6kg6tE18XS_p_9MqojrSqorbBuVJK82vsQ6H4O7_sFHVDltPCyVu2D_O0dA3ETo-zDH7-hfa8lyB

Setup

Suggested Solutions

I think box color should be variable for theme configuration.

KawtharAlakri commented 3 weeks ago

I'd like to work on this.