Vertical line starts from the top of the participant box instead of the bottom

[jayaprabhakar]

Description

In a sequence diagram, for each participant there is a vertical line (lifeline/timeline) dropping from participant box to the bottom.
This line should start from the bottom edge of the participant. But in the current implementation the vertical line starts from the top.
With most themes, this is not an issue because the participant box has a non-transparent fill color that hides the line crossing through the box. But if we use rough mode (For example, in the live editor), the line gets visible, that looks a bit ugly.

Note: This is not a live editor issue, because the rough mode is generated simply by processing the SVG and replacing lines with wiggly strokes. The actual SVG contains the lines starting from the wrong point.

Take this simple example:

sequenceDiagram
    participant Alice
    participant John

In the live editor, check Rough slider to enabled. You will see the vertical line going across the participants boxes at the top. The bottom ones are correct.

Inspecting the SVG, it looks like the y1 of the line is set to 5 instead of setting it to the height of the box.

Instead of participant, if we change to Actor, this works correctly. So, I believe this is an issue specific to participant rendering only.

Steps to reproduce

1. Link to live editor

sequenceDiagram
    participant Alice
    participant John

2. Enable Rough mode. (If the top participant is shaded heavily, you might have to regenerate by adding a blank space to the sequence diagram code. Each time the scribbling is random)
3. Notice the line cutting through the top participant

Screenshots

Code Sample

sequenceDiagram
    participant Alice
    participant John

Setup

• Mermaid version:
• Browser and Version: [Chrome, Edge, Firefox]

Suggested Solutions

No response

Additional Context

No response

[jayaprabhakar]

The issue seems to be here.
https://github.com/mermaid-js/mermaid/blob/c5eb07c83f66233000405be47ad85b8b275a1436/packages/mermaid/src/diagrams/sequence/svgDraw.js#L332C3-L332C30

const drawActorTypeParticipant = function (elem, actor, conf, isFooter) {
  const actorY = isFooter ? actor.stopy : actor.starty;
  const center = actor.x + actor.width / 2;
  const centerY = actorY + 5;
  
  // Some other code
  
      g.append('line')
      .attr('id', 'actor' + actorCnt)
      .attr('x1', center)
      .attr('y1', centerY)

Instead of const centerY = actorY + 5, if it is set to const centerY = actorY + actor.height, it will work correctly as expected.

Note: For drawActorTypeParticipant, the height is hardcoded to 80

---

Looking at the code, it seems this should be a safe change.