actor and participant styling in sequenceDiagram

[colideum]

In sequenceDiagram actor and participant are treated the same but when I want to style them there is the following problem:
i'm setting actor style text color to white and actor background to dark color. Then participants are showing correctly but actors are showing white on light (if using light background) so it's not visible. Maybe it should be split actor and participant styling.

[knsv]

More classes to use when styling!

[neenjaw]

Hi @knsv,

I am interested in this issue, wondering if I can get some feedback on a potential approach here:

1. Would you like the current class structure realigned to reflect the difference between "actors" and "participants"?

   <!-- actors, adapted from source obtained from mermaid.live (inlined styles removed for brevity) -->
   <g class="actor actor-man">
     <line y2="45" x2="75" y1="25" x1="75" id="actor-man-torso18"></line>
     <line y2="33" x2="93" y1="33" x1="57" id="actor-man-arms18"></line>
     <line y2="45" x2="75" y1="60" x1="57"></line>
     <line y2="60" x2="91" y1="45" x1="75"></line>
     <circle height="65" width="150" r="15" cy="10" cx="75"></circle>
     <text class="name" alignment-baseline="central" dominant-baseline="central" y="67.5" x="75">
       <tspan dy="0" x="75">Alice</tspan>
     </text>
   </g>
   
   <!-- participant, adapted from source obtained form mermaid.live (inlined styles removed for brevity) -->
   <g class="participant root-19"> 
     <rect ry="3" rx="3" height="65" width="150" y="0" x="251"></rect>
     <text class="name" alignment-baseline="central" dominant-baseline="central" y="32.5" x="326">
       <tspan dy="0" x="326">Remote Server</tspan>
     </text>
   </g>

   • summary of [breaking or otherwise] changes:
     • actor class to the top level of the actor-man group and removed from participant group element and text elements
     • participant class added to the participant group
     • name added to each of the text elements

2. Alternatively, would you like to see an additive non-breaking change strategy?

   <!-- actors, adapted from source obtained from mermaid.live (inlined styles removed for brevity) -->
   <g class="actor actor-man">
     <line y2="45" x2="75" y1="25" x1="75" id="actor-man-torso18"></line>
     <line y2="33" x2="93" y1="33" x1="57" id="actor-man-arms18"></line>
     <line y2="45" x2="75" y1="60" x1="57"></line>
     <line y2="60" x2="91" y1="45" x1="75"></line>
     <circle height="65" width="150" r="15" cy="10" cx="75"></circle>
     <text class="actor name" alignment-baseline="central" dominant-baseline="central" y="67.5" x="75">
       <tspan dy="0" x="75">Alice</tspan>
     </text>
   </g>
   
   <!-- participant, adapted from source obtained form mermaid.live (inlined styles removed for brevity) -->
   <g class="actor participant root-19"> 
     <rect class="actor" ry="3" rx="3" height="65" width="150" y="0" x="251"></rect>
     <text class="actor name" alignment-baseline="central" dominant-baseline="central" y="32.5" x="326">
       <tspan dy="0" x="326">Remote Server</tspan>
     </text>
   </g>

   • summary of non-breaking changes:
     • actor class added to the top level of the actor-man and participant group
     • participant class added to the participant group
     • name added to each of the text elements
   • advantage would be unlikelihood of breaking changes, but disadvantage is that the actor class gets a bit overused

3. A third option would be to declare a whole new set of classes for each variety to avoid any possible legacy issues/dependencies which can then be cleaned up at the next major verison.

4. Just to clarify where the code changes should occur, from in the source I see these places that would require change:

   • https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/diagrams/sequence/svgDraw.js#L339
   • https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/diagrams/sequence/svgDraw.js#L413
   • I don't see any relevant tests to update that test classes, are there any that I missed? Would you want any added?

[gfranxman]

Honestly, I'd like to see this added to language itself for actors and participants. Like

Actor BadActor rgb(255,0,0)
Actor GoodActor rgb(0,255,0)

or maybe let rect work for the actors and participants:
rect rgb(0,255,0)
Actor GoodGuy1
Actor GoodGuy2
end
rect rgb(255,0,0)
Actor BadGuy
end

A name/alias/label as suggested by @neenjaw would also be very useful.

[erwinkramer]

Currently i'm skipping the usage of actors in our design standard for now because of this flaw... what a waste!

@neenjaw im not familliar with the codebase, but your suggestions seem complicated, it does add new possibilities, but that's not at all needed. To look at it simply: In the example of @colideum: make a rectangle, draw it only behind the Actor1 text and not behind the actual actor image. Make that rectangle the same color as participants. Boom, problem solved. I doubt this will cause any visual breaking changes so i wouldn't make this an optional thing.

[sidharthv96]

Specific classes added in #5272